Array.apply(null, { length: 1000 })
點擊打開視頻講解更加詳細
在閱讀VueJS教程時有這么段demo code：
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
其中這個運算式Array.apply(null, { length: 20 })有點讓人費解，第一感覺這個運算式就是為了創建一個長度為20的陣列，但運算式Array(20)也可以實作這個功能啊，為啥非要寫那么復雜呢？于是乎就想，如果是這樣子，那么我把這一段代碼換成 Array(20) ,變成下面這樣：
render: function (createElement) {
return createElement('div',
Array(20).map(function () {
return createElement('p', 'hi')
})
)
}
對比代碼：
let apply = Array.apply(null, { length: 20 }).map(function (item, index) {
return {
index: index,
};
});
console.log("Array.apply", apply);
let data = https://www.cnblogs.com/mochenxiya/archive/2022/09/03/Array(20).map(function (item, index) {
return {
index: index,
};
});
console.log("Array()", data);
效果圖：
那么按照剛剛的理解，把代碼換成這個樣子應該是沒有問題的，然后運行代碼，發現瀏覽器什么都沒有出來，連個錯都沒有報，這樣子就很明顯地說明了，剛剛那樣子地理解應該是不對的， Array.apply(null, { length: 20 })和Array(20) 這兩句代碼還是有區別的，那么區別是什么？
基礎1: Array建構式
直接呼叫Array函式跟new方式呼叫是等價的，即:
let a = Array(2); // 等價于let a = new Array(2);
表示：創建一個長度為2的陣列，注意該陣列的元素并沒有被初始化，即：
console.log(0 in a); // false
console.log(1 in a); // false, 因為陣列下標0，1還未初始化
console.log(a[0]); // undefined, 因為陣列下標0還未初始化,訪問不存在的屬性回傳undefined
基礎2: apply函式
ES5開始apply函式的第二個引數除了可以是陣列外，還可以是類陣列物件（即包含length屬性，且length屬性值是個數字的物件），物件{length: 2}就是一個類陣列物件，因為沒有初始化下標0，1的值，所以獲取0，1下標的值得到的都是undefined，
console.log(a[0]); // undefined
console.log(a[1]); // undefined
// 可以轉成真正的陣列
var a = Array.prototype.slice.call({length: 2});
console.log(Array.isArray(a)) // true
再看運算式Array.apply(null, { length: 2})的值
溫故了基礎后再看運算式Array.apply(null, { length: 2 })他就等價于：
// 1 熟悉一點: {length: 2}作為Array.apply第二個引數等同于[undefined, undefined]作為Array.apply第二個引數
Array.apply(null, [undefined, undefined]);
// 2 再熟悉一點：apply方法的執行結果
Array(undefined, undefined);
// 3 再再熟悉一點：Array方法直接呼叫和new方式呼叫等價
new Array(undefined, undefined);
這樣就很容易知道該運算式的值是一個長度為2，且每個元素值都被初賦值為undefined的陣列（注意此時不是陣列元素沒有初始化，而是初始化成undefined，這就是跟Array(2)的區別），
為啥非要寫那么復雜呢？
即map函式并不會遍歷陣列中沒有初始化或者被delete的元素（有相同限制還有forEach, reduce方法），OK，疑問到此終于真相大白了：寫這么“復雜”就是為了實作：創建一個長度為20，且每個元素都被初始化的陣列，這樣map方法就可以回圈20次了，
// 被初始化的陣列
let apply = Array.apply(null, { length: 20 }).map(function (item, index) {
return {
index: index, // 回圈20次
};
});
// 未被初始化的陣列
let data = https://www.cnblogs.com/mochenxiya/archive/2022/09/03/Array(20).map(function (item, index) {
return {
index: index, // 不會被執行
};
});
如果為了少寫幾個字的話還可以把該運算式修改成：
Array.apply(null, Array(20)); // 第二個引數用Array(20)代替{length: 20}
還可以使用ES6 API創建初始化陣列：
// 方法1：
Array.from({length: 20})
// 方法2
Array(20).fill(null)
若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503508.html
標籤：其他
上一篇：# JavaScript 物件