這道JS筆試題你作對了嗎？

總結回顧

• 前端面試基礎網絡問題（萬字長文）
• 面試官：你能實現多少種水平垂直居中的佈局（定寬高和不定寬高）
• 一道網紅面試題（騰訊、百度面試中都出現過）
• 經過運行機制看this綁定 、做用域、做用域鏈和閉包
• JS操做小技巧，工做簡單了
• 棧、堆、隊列深刻理解，面試無憂
• 面試官：請實現三欄佈局，儘量多的方式。
• 虛擬DOM的優劣如何
• 這樣回答繼承，面試官可能更滿意
• 箭頭函數和普通函數的10個區別
• html 空白漢字佔位符
• 我想了解更多判斷數組的方式
• HTML Email的編寫
• Vue Router被咱們忽略的知識點

背景

昨天在看一道筆試題的時候本覺得很簡單，可是結果不是我想象的那樣，直接上筆試題。

const array = new Array(5).map((item) => {
  return item = {
    name: '1'
  }
});
console.log(array);
// 請寫出輸出結果
複製代碼

我想象的答案：[{name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}];

實際的答案：[empty × 5]

爲何會這樣了？

猜測1

我第一個想到的是new Array(5)生成的數組是[undefined, undefined, undefined, undefined, undefined]。

const array = [undefined, undefined, undefined, undefined, undefined];
const newArr = array.map((item) => {
  return item = {
     name: '1'
   }  
});
console.log(newArr);
// 結果是[{name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}];
複製代碼

猜測1錯誤

猜測2

new Array(5)生成的數組在每一項都沒有值，意思就是生成了[,,,,,]一個這樣的數組。

const array = [,,,,,];
const newArr = array.map((item) => {
  return item = {
     name: '1'
   }  
});
console.log(newArr);
// 結果是[empty × 5];
複製代碼

猜測2正確（這裏大喊本身牛逼）

爲何

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values (including undefined).

It is not called for missing elements of the array; that is:

• indexes that have never been set;
• which have been deleted; or
• which have never been assigned a value.

map依次爲數組中的每一個元素調用一次提供的callback函數，而後根據結果構造一個新的數組。-----僅對已分配值（包括）的數組索引進行調用----。 map函數的回調函數只會被賦過值的項調用。new Array(1) 和 [undefined]不同。new Array(1)沒有爲數組中的項賦過值，而[undefined]爲數組中的項賦了一個undefined值。

總結

• new Array(5)產生的數組是一個沒有爲數組中的項賦過值的數組。
• map僅對已分配值（包括）的數組索引進行callback調用。

優化處理

// 處理1
const array = new Array(5).fill().map((item) => {
  return item = {
    name: '1'
  }
});
console.log(array);
// [{name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}];

// 處理2
var array = Array.apply(0,{length:5}).map((item) => {
  return item = {
    name: '1'
  }
});
console.log(array);
// [{name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}, {name: '1'}];
複製代碼