理解Javascrpit[].forEach.call()

發表於 | 分類於 | |

今天在developer.mozilla.org看到一個有趣的寫法，故在此記錄一下

1
[].forEach.call(files, readAndPreview);

這段寫法其實是下面的簡潔寫法

1
Array.prototype.forEach.call(files, readAndPreview);
  • files 可以是DOM元素， ex. document.querySelectorAll(“.imgFrame”)
  • 利用call把空陣列的this指向files，如此一來files就能跑forEach了
  • 而後面的call back function , 可以取得陣列的值及index，可以做額外處理
1
2
3
4
5
6
7
[].forEach.call(["a", "b", "c", "d"], function (item, index, arr){
    console.log(index + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"
// 3: "d"

參考

Function.prototype.call
What does [].forEach.call() do in JavaScript?