总结回顾
- 前端面试基础网络问题(万字长文)
- 面试官:你能实现多少种水平垂直居中的布局(定宽高和不定宽高)
- 一道网红面试题(腾讯、百度面试中都出现过)
- 通过运行机制看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'}];