数组空位元素的处理

Yujiaao 发布于2019-08-19 17:56 / 420人阅读

之前看到知乎上的这道题：如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？，在这个问题里面题主提到，他写了这么一段代码：

</>复制代码 
"use strict"
let arr = Array(100).map( (item,idx) =>  idx)

结果arr是一个有100个空位的数组:

这说明Array.prototype.map()会跳过空位元素嘛。

然后我在下面的答案里看到这么一条：

</>复制代码 
Array.from(new Array(100), (item, idx) => idx)
//or the alternative
Array.from({length: 5}, (item, idx) => idx)

我本来是觉得，这个肯定也不行嘛，这俩都是用Array构造函数新建了一个全是空位的数组嘛，怎么会不一样呢？结果试了一下之后发现居然成功地得到了数组。我开始怀疑Array.from的map函数的实现和Array.prototype.map有不一样的地方。再加上MDN的文档也来捣乱：

</>复制代码 
Array.from(arrayLike[, mapFn[, thisArg]])
#arrayLike
An array-like or iterable object to convert to an array.
#mapFn
Optional. Map function to call on .
#thisArg
Optional. Value to use as this when executing mapFn.

在这里mapFn下面明确地指出mapFn会调用every element of the array.

而在map函数那边：

</>复制代码 
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.

明确说明会跳过空位元素，所以我就想是不是这俩家伙的map方法本身不一致。

当然结论并没有这么厉害 Orz...后来我偶然间发现原来是因为Array.from()方法会把数组的空位转为undefined.也就是说数组空位元素的处理和map方法的实现是无关的。

数组空位元素的处理

forEach(), filter(), every() 和some()都会跳过空位。

map()会跳过空位，但会保留这个值

join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

</>复制代码 
// forEach方法
[,"a"].forEach((x,i) => log(i)); // 1
// filter方法
["a",,"b"].filter(x => true) // ["a","b"]
// every方法
[,"a"].every(x => x==="a") // true
// some方法
[,"a"].some(x => x !== "a") // false
// map方法
[,"a"].map(x => 1) // [,1]
// join方法
[,"a",undefined,null].join("#") // "#a##"
// toString方法
[,"a",undefined,null].toString() // ",a,,"

ES6则是明确将空位转为undefined,Array.from方法会将数组的空位转为undefined,也就是说，这个方法不会忽略空位:

</>复制代码 
Array.from(["a",,"b"])
// [ "a", undefined, "b" ]

扩展运算符（...）也会将空位转为undefined:

</>复制代码 
[...["a",,"b"]]
// [ "a", undefined, "b" ]

for...of循环也会遍历空位:

</>复制代码 
let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined:

</>复制代码 
// entries()
[...[,"a"].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,"a"].keys()] // [0,1]
// values()
[...[,"a"].values()] // [undefined,"a"]
// find()
[,"a"].find(x => true) // undefined
// findIndex()
[,"a"].findIndex(x => true) // 0

参考：阮一峰ES2015

云服务器 GPU云服务器 php去除数组的元素数组元素数组元素值数组重复元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79006.html

JavaScript学习之数组(下)

摘要：数组篇方法函数可以将函数作为参数传入，并将数组中每个元素代入函数进行处理返回，返回一个新的数组可以看出可以传入两个参数，第一个参数中函数可以填入三个参数，数组的元素，数组的索引，数组本身第二个参数用来绑定回调函数内部的注意点当元素为空位，，数组篇 map()方法 map函数可以将函数作为参数传入，并将数组中每个元素代入函数进行处理返回，返回一个新的数组 arr.map(functio...

Labradors 2019-08-23 12:14 评论0 收藏0
JavaScript 小知识点

摘要：比如，构造函数返回的数组都是空位。方法方法方法方法方法方法方法方法对空位的处理则是明确将空位转为。在这些情况下，迭代器关闭。原型链相关最详尽的 JS 原型与原型链终极详解 isNaN() 和 Number.isNaN() 的区别 isNaN() 是 ES1 规范；是全局方法；如果参数不是一个 Number 类型，会先尝试将参数转化为数值，然后对转换后的结果进行是否是 Na...

马永翠 2019-08-22 17:58 评论0 收藏0
ES6：数组

摘要：中的方法遍历一下数组中的每个选项返回一个新的数组。还可以接受第二个参数，作用类似与数组的方法，用于对每个元素进行处理。这个方式是用于将一组值，转换为数组。可选到该位置前停止读取数据，默认等于数组长度。如果是负数，表示倒数。 ES6中数组增加了很多新的方法，但是先回顾下之前ES5中的数组的方法。 ES5中的方法 Array.prototype.forEach 遍历一下数组中的每个选...

lavor 2019-08-21 11:33 评论0 收藏0
ECMAScript6 新特性——“数组的扩展”

摘要：原来的也被修改了数组实例的喝方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为的成员，然后返回该成员。数组实例的方法使用给定值，填充一个数组。 1 Array.from() Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括...

Eminjannn 2019-08-19 18:01 评论0 收藏0
你不知道的数组

摘要：数组定义数组是按次序排列的一组值每个值都有编号，从开始可以在定义时赋值，也可以先定义后赋值任何类型的数据都可以存入数组数组的本质本质上，数组属于一种特殊的对象，它的键名是按次序排列的一组整数数组成员的键名是固定的，因此不用为每个元素指定键名数组定义数组是按次序排列的一组值每个值都有编号，从0开始可以在定义时赋值，也可以先定义后赋值任何类型的数据都可以存入数组 ...

beita 2019-08-26 11:55 评论0 收藏0