第一次面试总结

一、如何根据音量大小制作会跳动的音波特效

1、使用AudioContext接口， new这个对象创建上下文
AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。在做任何其他操作之前，您需要创建一个AudioContext对象，因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它，而不是每次初始化一个新的AudioContext对象，并且可以对多个不同的音频源和管道同时使用一个AudioContext对象。
2、audioContext.createMediaElementSource(elem)从该元素获取源并将其通过管道传递到我们创建的上下文中
3、 audioContext.createAnalyser()创建一个Analyser节点,获取音频时间和频率数据,来实现可视化
4、 AnalyserNode.fftsize,这是一个无符号长整型的数,默认值为2048,表示样本的窗口大小,用来获取频域数据

二、如何制作上传文件并可以在本地预览

文件上传需要使用，如下：

原理

通过input的 type = file属性和window的内置FileReader对象，利用FileReader对象的readAsDataURL方法，把图片数据转成base64字符串数据，然后把这个base64字符串数据赋值给一个图片标签的src。

伪代码

//input标签，获取本地图片


//预览图片标签
 


 function uploadImg(fileDom) {
    //取到file文件的本地路径，就是你电脑上的存储路径
    console.log(fileDom.value);

    // 获取图片数据对象
    var file = fileDom.files[0];

    // 获取图片名字
    console.log(file.name); 

    // 获取图片文件大小,单位为byte
    console.log(file.size);

    var reader = new FileReader();
    reader.readAsDataURL(file);

    //确保文件成功获取，base64数据量比较大
    reader.onload = function (event) {
        var e = event || window.event
        var img = document.getElementById("viewImg");
        img.src = e.target.result;
        //或者 img.src = this.result; 因为e.target == this
    }
}

知识延伸

FileReader除了readAsDataURL方法之外，还有另外两个比较重要的方法，分别为readAsBinaryString 将选择的文件读取成二进制和readAsText将选择的文件读取成文本格式；

三、跨域

同源策略

一个域下的 js 脚本在未经允许的情况下，不能够访问另一个域的内容。这里的同源的指的是两个域的协议、域名、端口号必须相同，否则不属于同一个域。

同源政策主要限制了三个方面：

第一个是当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
第二个是当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
第三个是当前域下 ajax 无法发送跨域请求。

同源政策的目的主要是为了保证用户的信息安全，对于一般的 img、或者
script 脚本请求都不会有跨域的限制，因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

解决跨域的方法

通过 jsonp 跨域
使用 jsonp 来实现跨域请求，它的主要原理是通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引入没有跨域的访问限制。通过在请求的 url 后指定一个回调函数，然后服务器在返回数据的时候，构建一个 json 数据的包装，这个包装就是回调函数，然后返回给前端，前端接收到数据后，因为请求的是脚本文件，所以会直接执行，这样我们先前定义好的回调函数就可以被调用，从而实现了跨域请求的处理。这种方式只能用于 get 请求。
跨域资源共享（CORS)
Access-Control-Allow-origin: 允许请求的方法/*(办事多源，但是不能携带cookie)
Access-Control-Allow-Methods:允许的方法，多个方法用逗号分开
Access-Control-Allow-Headers：允许的头信息，多个方法用逗号分开
Access-Control-Allow-Credentials:true（跨资源请求发送的凭据cookie等）
Proxy代理
nginx 代理跨域
postMessage 跨域
h5 中新增的一个 api。通过它我们可以实现多窗口间的信息传递，通过获取到指定窗口的引用，然后调用 postMessage 来发送信息，在窗口中我们通过对 message 信息的监听来接收信息，以此来实现不同源间的信息交换。
WebSocket 协议跨域
使用 websocket 协议，这个协议没有同源限制。
document.domain + iframe 跨域
只能实现同一个主域，不同子域之间的操作

如果是想要解决不同跨域窗口间的通信问题，比如说一个页面想要和页面的中的不同源的 iframe 进行通信的问题，我们可以使用 location.hash 或者 window.name 或者 postMessage 来解决。

window.name + iframe 跨域
主要是基于同一个窗口中设置了 window.name 后不同源的页面也可以访问，所以不同源的子页面可以首先在 window.name 中写入数据，然后跳转到一个和父级同源的页面。这个时候级页面就可以访问同源的子页面中 window.name 中的数据了，这种方式的好处是可以传输的数据量大。
location.hash + iframe
我们可以在主页面动态的修改 iframe 窗口的 hash 值，然后在 iframe 窗口里实现监听函数来实现这样一个单向的通信。因为在 iframe 是没有办法访问到不同源的父级窗口的，所以我们不能直接修改父级窗口的 hash 值来实现通信，我们可以在 iframe 中再加入一个 iframe ，这个 iframe 的内容是和父级页面同源的，所以我们可以 window.parent.parent 来修改最顶级页面的 src，以此来实现双向通信。
缺点: 传入的数据值有限

四、[ ] == [ ] 和 { } =={ }输出值？null == null？

false false true

堆、栈

栈(stack)：先进后出；自动分配内存空间，由系统自动释放；

堆(heap)：队列优先，先进先出；动态分配内存，大小不定也不会自动释放；存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定；一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统回收。

js中基本数据类型和引用数据类型

基本类型：存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配。
Undefined / Null / Boolean / Number / String，它们是直接按值存放的，可以直接访问。

引用类型：存放在堆内存中的对象；每个空间大小不一样，根据情况进行特定的分配。

当我们需要访问引用数据类型 (对象 / 数组 / 函数) 的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据。

所以，现在就可以解释 var a = function(){}; var b = function(){}; a==b 为false,null == nul为true
变量a实际保存的是指向堆内存中对象的一个指针，而b保存的是指向堆内存中另一个对象的一个指针；虽然这两个对象的值是一样的，但它们是独立的2个对象，占了2份内存空间；所以 a==b 为 false。

如果 var a = {}; var b = a; 这时变量b复制了变量a保存的指针，它们都指向堆内存中同一个对象；所以 a==b 为 true。

五、react的优点

优点
1、React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。
2、跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3、一切都是component：代码更加模块化，重用代码更容易，可维护性高。
4、单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5、同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6、兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点
1、React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

六、制作滚动条？如果用原生的话如何实现？

audio的属性以及百分比实现

currentTime
duration 持续时间
audio.onloadedmetadata加载完元数据触发事件

拖动进度条的时候有哪些实现方式？区别有哪些？

left和 translateX可以拖动
- 从布局看，left属性基于父元素的大小。transform属性基于目标元素的大小。
- 从属范围看，left 常用于position，属于css2，而translate属于transform是css3的
- 从实现动画来看，两个都能实现位移动画，但是对于位移较为复杂的情况下，使用transform比left要好点
- 从渲染方式来看，position设置的是DOM的样式，性能消耗大

七、强制类型转换

boolean
string
number
parseInt()
parseFloat()

八、事件循环

https://zhuanlan.zhihu.com/p/87684858