一、如何根據(jù)音量大小制作會跳動的音波特效

1、使用AudioContext接口， new這個對象創(chuàng)建上下文
AudioContext接口表示由鏈接在一起的音頻模塊構建的音頻處理圖，每個模塊由一個AudioNode表示。音頻上下文控制它包含的節(jié)點的創(chuàng)建和音頻處理或解碼的執(zhí)行。在做任何其他操作之前，您需要創(chuàng)建一個AudioContext對象，因為所有事情都是在上下文中發(fā)生的。建議創(chuàng)建一個AudioContext對象并復用它，而不是每次初始化一個新的AudioContext對象，并且可以對多個不同的音頻源和管道同時使用一個AudioContext對象。
2、audioContext.createMediaElementSource(elem)從該元素獲取源并將其通過管道傳遞到我們創(chuàng)建的上下文中
3、 audioContext.createAnalyser()創(chuàng)建一個Analyser節(jié)點,獲取音頻時間和頻率數(shù)據(jù),來實現(xiàn)可視化
4、 AnalyserNode.fftsize,這是一個無符號長整型的數(shù),默認值為2048,表示樣本的窗口大小,用來獲取頻域數(shù)據(jù)

二、如何制作上傳文件并可以在本地預覽

文件上傳需要使用<input type=”file”/>，如下：

<input type="file" name="upload" mutipart accept="image/*">
<!--
    ** 可用屬性 **
    type: file（必填），必須為file
    multipart: 指示是否可以多選
    accept : 指示文件類型，指示可選擇的文件，使用逗號(,)分隔
        可能的值為：
        * 后綴，如.jpg,.png
        * 一個有效的MIME type
        * audio/* 音樂文件
        * video/* 視頻文件
        * image/* 圖片文件
-->

原理

通過input的 type = file屬性和window的內置FileReader對象，利用FileReader對象的readAsDataURL方法，把圖片數(shù)據(jù)轉成base64字符串數(shù)據(jù)，然后把這個base64字符串數(shù)據(jù)賦值給一個圖片標簽的src。

偽代碼

//input標簽，獲取本地圖片
<input type="file" onchange="uploadImg(this)" accept="image/*"/>

//預覽圖片標簽
 <img id="viewImg"/>


 function uploadImg(fileDom) {
    //取到file文件的本地路徑，就是你電腦上的存儲路徑
    console.log(fileDom.value);

    // 獲取圖片數(shù)據(jù)對象
    var file = fileDom.files[0];

    // 獲取圖片名字
    console.log(file.name); 

    // 獲取圖片文件大小,單位為byte
    console.log(file.size);

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

    //確保文件成功獲取，base64數(shù)據(jù)量比較大
    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 腳本在未經允許的情況下，不能夠訪問另一個域的內容。這里的同源的指的是兩個域的協(xié)議、域名、端口號必須相同，否則不屬于同一個域。

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

• 第一個是當前域下的 js 腳本不能夠訪問其他域下的 cookie、localStorage 和 indexDB。
• 第二個是當前域下的 js 腳本不能夠操作訪問操作其他域下的 DOM。
• 第三個是當前域下 ajax 無法發(fā)送跨域請求。

同源政策的目的主要是為了保證用戶的信息安全，對于一般的 img、或者
script 腳本請求都不會有跨域的限制，因為這些操作都不會通過響應結果來進行可能出現(xiàn)安全問題的操作。

解決跨域的方法

• 通過 jsonp 跨域
  使用 jsonp 來實現(xiàn)跨域請求，它的主要原理是通過動態(tài)構建 script 標簽來實現(xiàn)跨域請求，因為瀏覽器對 script 標簽的引入沒有跨域的訪問限制 。通過在請求的 url 后指定一個回調函數(shù)，然后服務器在返回數(shù)據(jù)的時候，構建一個 json 數(shù)據(jù)的包裝，這個包裝就是回調函數(shù)，然后返回給前端，前端接收到數(shù)據(jù)后，因為請求的是腳本文件，所以會直接執(zhí)行，這樣我們先前定義好的回調函數(shù)就可以被調用，從而實現(xiàn)了跨域請求的處理。這種方式只能用于 get 請求。

• 跨域資源共享（CORS)
  Access-Control-Allow-origin: 允許請求的方法/*(辦事多源，但是不能攜帶cookie)
  Access-Control-Allow-Methods:允許的方法，多個方法用逗號分開
  Access-Control-Allow-Headers：允許的頭信息，多個方法用逗號分開
  Access-Control-Allow-Credentials:true（跨資源請求發(fā)送的憑據(jù)cookie等）

• Proxy代理

• nginx 代理跨域

• postMessage 跨域
  h5 中新增的一個 api。通過它我們可以實現(xiàn)多窗口間的信息傳遞，通過獲取到指定窗口的引用，然后調用 postMessage 來發(fā)送信息，在窗口中我們通過對 message 信息的監(jiān)聽來接收信息，以此來實現(xiàn)不同源間的信息交換。

• WebSocket 協(xié)議跨域
  使用 websocket 協(xié)議，這個協(xié)議沒有同源限制。

• document.domain + iframe 跨域
  只能實現(xiàn)同一個主域，不同子域之間的操作

如果是想要解決不同跨域窗口間的通信問題，比如說一個頁面想要和頁面的中的不同源的 iframe 進行通信的問題，我們可以使用 location.hash 或者 window.name 或者 postMessage 來解決。

• window.name + iframe 跨域
  主要是基于同一個窗口中設置了 window.name 后不同源的頁面也可以訪問，所以不同源的子頁面可以首先在 window.name 中寫入數(shù)據(jù)，然后跳轉到一個和父級同源的頁面。這個時候級頁面就可以訪問同源的子頁面中 window.name 中的數(shù)據(jù)了，這種方式的好處是可以傳輸?shù)臄?shù)據(jù)量大。

• location.hash + iframe
  我們可以在主頁面動態(tài)的修改 iframe 窗口的 hash 值，然后在 iframe 窗口里實現(xiàn)監(jiān)聽函數(shù)來實現(xiàn)這樣一個單向的通信。因為在 iframe 是沒有辦法訪問到不同源的父級窗口的，所以我們不能直接修改父級窗口的 hash 值來實現(xiàn)通信，我們可以在 iframe 中再加入一個 iframe ，這個 iframe 的內容是和父級頁面同源的，所以我們可以 window.parent.parent 來修改最頂級頁面的 src，以此來實現(xiàn)雙向通信。
  缺點: 傳入的數(shù)據(jù)值有限

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

false false true

堆、棧

棧(stack)：先進后出；自動分配內存空間，由系統(tǒng)自動釋放；

堆(heap)：隊列優(yōu)先，先進先出；動態(tài)分配內存，大小不定也不會自動釋放；存放在二級緩存中，生命周期由虛擬機的垃圾回收算法來決定；一般由程序員分配釋放，若程序員不釋放，程序結束時可能由操作系統(tǒng)回收。

js中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

基本類型：存放在棧內存中的簡單數(shù)據(jù)段，數(shù)據(jù)大小確定，內存空間大小可以分配。
Undefined / Null / Boolean / Number / String，它們是直接按值存放的，可以直接訪問。

引用類型：存放在堆內存中的對象；每個空間大小不一樣，根據(jù)情況進行特定的分配。

當我們需要訪問引用數(shù)據(jù)類型 (對象 / 數(shù)組 / 函數(shù)) 的值時，首先從棧中獲得該對象的地址指針，然后再從堆內存中取得所需的數(shù)據(jù)。

所以，現(xiàn)在就可以解釋 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的優(yōu)點

優(yōu)點
1、React速度很快：它并不直接對DOM進行操作，引入了一個叫做虛擬DOM的概念，安插在javascript邏輯和實際的DOM之間，性能好。
2、跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標準化的API，甚至在IE8中都是沒問題的。
3、一切都是component：代碼更加模塊化，重用代碼更容易，可維護性高。
4、單向數(shù)據(jù)流：Flux是一個用于在JavaScript應用中創(chuàng)建單向數(shù)據(jù)層的架構，它隨著React視圖庫的開發(fā)而被Facebook概念化。
5、同構、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執(zhí)行，預渲染你的應用有助于搜索引擎優(yōu)化。
6、兼容性好：比如使用RequireJS來加載和打包，而Browserify和Webpack適用于構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。

缺點
1、React本身只是一個V而已，并不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。

六、制作滾動條？如果用原生的話如何實現(xiàn)？

audio的屬性以及百分比實現(xiàn)

• currentTime
• duration 持續(xù)時間
• audio.onloadedmetadata加載完元數(shù)據(jù)觸發(fā)事件

拖動進度條的時候有哪些實現(xiàn)方式？ 區(qū)別有哪些？

• left和 translateX可以拖動
  • 從布局看，left屬性基于父元素的大小。transform屬性基于目標元素的大小。
  • 從屬范圍看，left 常用于position，屬于css2，而translate屬于transform是css3的
  • 從實現(xiàn)動畫來看，兩個都能實現(xiàn)位移動畫，但是對于位移較為復雜的情況下，使用transform比left要好點
  • 從渲染方式來看，position設置的是DOM的樣式，性能消耗大

七、強制類型轉換

• boolean
• string
• number
• parseInt()
• parseFloat()

八、事件循環(huán)

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