阅读 212

ES6 数组

1. Array.from()

Array.from()是ES6给Array类添加的静态方法,作用是将部署了Iterator接口的数据或"array-like"数据结构转为真正的数组。

"array-like"数据转换:

// NodeList对象
let articles = document.querySelectorAll('article.acc-wrap')
console.log(articles)
// ['0': article.arr-wrap, length: 1]
let artarr = Array.from(articles)
console.log(artarr) 
//[article.acc-wrap]
复制代码
// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}
复制代码
const o = {'0': 'miik', '1': 10, '2': 3, length: 3}
const list = Array.from(o)
console.log(list)
// ["miik", 10, 3]
复制代码
const o = {'name': 'miik', 'age': 10, 'grade': 3}
const list = Array.from(o)
console.log(list)
// []
复制代码
const o = {'name': 'miik', 'age': 10, 'grade': 3, length: 3}
const list = Array.from(o)
console.log(list)
//[undefined, undefined, undefined]
复制代码

以上的转换都没有报错,但是能正常转换为array的array-like数据需要两个条件:
first: array-like数据有数字类型的key
second: array-like数据有length属性

实现了Iterator接口的数据结构

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
复制代码

本身是数组的数据,Array.from()转换出来的数据值一样,返回值是一个深拷贝

const array1 = [1, 2, 3]
const array2 = Array.from(array1)
array1 === array2
//false
复制代码

在[]声明中使用...运算符也能将实现了Iterator接口的数据转换为数组,但是不能将"array-like"转换为数组

// arguments对象
function foo() {
  var args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]
复制代码

扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有实现这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

Array.from()还可以接受第二个参数,相当于一个filter

const array = Array.from([1, 2, 3], x => Math.pow(x,2) )
//返回平方计算后的数组
//[1, 4, 9]
复制代码

下面的例子是取出一组DOM节点的文本内容。

let spans = document.querySelectorAll('span.name');

// Array.from()
let names2 = Array.from(spans, s => s.textContent)
复制代码

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]
复制代码

2. Array.of()

Array.of()是ES6新增的静态方法,用于将一组数值转为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]

const array = [1, 2, 3]
Array.of(...array)
//[1, 2, 3]
复制代码

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
复制代码

Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

3. Array.prototype.copyWithin()

数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)
复制代码

它接受三个参数, 这三个参数都应该是数值,如果不是,会自动转为数值。

target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
复制代码

上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

复制代码
// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

复制代码

4. Array.prototype.find()和Array.prototype.findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
复制代码

上面代码找出数组中第一个小于0的成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
复制代码

上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

应用场景:可以很方便的从数组中找出满足一些复杂要求的数据, 而不是indexOf()简单的相等判断

5. Array.prototype.fill()

fill方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]
复制代码

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
复制代码

上面代码表示,fill方法从1号位开始,向原数组填充7,到2号位之前结束。

6. Array.prototype.keys()

Array.prototype.values()

Array.prototype.entries()

这三个方法都返回一个Iterator对象, 可以用for...of遍历,唯一的区别是keys()是对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

复制代码

7. Array.prototype.includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于ES7,但Babel转码器已经支持。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true
复制代码

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
复制代码

8. 数组的空位

数组的空位指,数组的某一个位置没有任何值。比如,Array构造函数返回的数组都是空位。

Array(3) // [, , ,]
复制代码

上面代码中,Array(3)返回一个具有3个空位的数组。

注意,空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值,in运算符可以说明这一点。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
复制代码

上面代码说明,第一个数组的0号位置是有值的,第二个数组的0号位置没有值。

ES5对空位的处理,已经很不一致了,大多数情况下会忽略空位。

forEach(), filter(), every() 和some()都会跳过空位。 map()会跳过空位,但会保留这个值 join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

// forEach方法
[,'a'].forEach((x,i) => console.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" ]
复制代码

copyWithin()会连空位一起拷贝。

[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
复制代码

fill()会将空位视为正常的数组位置。

new Array(3).fill('a') // ["a","a","a"]
复制代码

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

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

上面代码中,数组arr有两个空位,for...of并没有忽略它们。如果改成map方法遍历,空位是会跳过的。
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
复制代码

由于空位的处理规则非常不统一,所以建议避免出现空位。

文章分类
阅读
文章标签