这道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'}];
复制代码