Chiwent's blog

ES6数组的拓展

ES6数组的拓展

Array.from

Array.from方法用于将两类对象转换为真正的数组：类似数组的对象和可遍历对象（包括ES6新增的Set和Map）。所谓的类似数组的对象，本质特征只有一点，即必须具有length属性，任何有length属性的对象，都可以通过该方法转换为数组。只要部署了iterator接口的数据结构，都可以用该方法转换为数组

类数组对象

demo:

let arrLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}

// ES5
var arr1 = [].slice.call(arrLike);
// result: ['a','b','c']

// ES6
let arr2 = Array.from(arrLike);
// result: ['a','b','c']

实际上的应用例子：
通过getElementsByClassName等方法获取的NodeList集合，以及函数内部的arguments对象，都可以用该方法将其转换为真正的数组

可遍历对象

demo：

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

let newSet = new Set(['a','b'])
Array.from(newSet)
// ['a','b']

回调

Array.from可接受第二个参数，它是一个回调函数，作用类似map方法，用来处理每个元素，然后将处理后的值放入返回的数组：

Array.from(arrLike, x => x+=1);

// 类似于
Array.from(arrLike).map(x => x+=1);

如果回调函数内用到了this关键字，那么还可以传入第三个参数，用来绑定this。

另外一个技巧

通过扩展运算符也可以将某些带遍历器接口的对象转换为数组：

function func() {
    var args = [...arguments];
}

[...document.getElementsByClassName('test')]

polyfill

const toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})();



Array.of()

该方法可以将一组数据转换为数组

demo:

Array.of(1,2,3) // [1,2,3]

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同导致的重载，它总是能返回参数值组成的数组，如果没有参数，就返回一个空数组

polyfill

const arrayOf = (() => {
    return [].slice.call(arguments);
})



copyWithin()

数组实例的copyWithin方法，可以在当前数组内部将指定位置的成员赋值到其他位置（会覆盖原有成员），然后返回当前数组。

参数：

  • target（必须）：从该位置开始替换数据
  • start（可选）：从该位置开始读取数据，默认为0，负数表示为倒数
  • end（可选）：结尾，默认等于数组长度，负数表示倒数

上述参数应该为数值，如果不是，会自动转换

demo：

[1,2,3,4,5].copyWithin(0,3)
// [4,5,3,4,5]
// 从3好位置知道数组结束的成员（4,5）复制到从0号位置开始的位置，覆写了原有的1,2

[1,2,3,4].copyWithin(0,2,3)
// [3,2,3,4]

[1,2,3,4].copyWithin(1,2,3)
// [1,3,3,4]

[1,2,3,4].copyWithin(0,-1,-2)
// [3,2,3,4]

// 兼容写法
[].copyWithin.call(new Int32Array([1,2,3,4,5]), 0,3,4);
// Int32Array [4,2,3,4,5]

find()和findIndex()

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

[1,2,3,4].find((n) => n>2)
// 3

数组实例的findIndex方法返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1.

[1,2,3,4].findIndex((value,index,arr) => {
    return value > 2;
})
// 2

对indexOf的补充

这两个方法都可以发现NaN：

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

fill()

fill方法使用给定值填充数组

[1,2,3].fill(5)
// [5,5,5]

new Array(3).fill(1)
// [1,1,1]

由上可见，fill方法用在空数组的初始化非常方便。填充的时候会覆写原有的元素。该方法还可以接收第二个和第三个参数，用于指定填充位置的始末。

[1,2,3].fill(5,1,2)
// [1,5,3]

[1,2,3].fill(5,3,5)
// [1,2,3] 理解填充的意思，越界了就不是填充

keys()、values()、entries()

他们都是用来遍历数组，返回的都是一个遍历器对象。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'

let iter = ['a','b','c'];
let entries = iter.entries();
console.log(entries.next().value); //[0,'a']

includes()

返回一个布尔值，表示某个数组是否含有指定值，它支持判断NaN，类似字符串的includes方法
可以设置第二个和第三个参数，分别代表起始

[1,2,3].includes[2]; // ture
[1,2,NaN].includes[NaN]; // true
[1,2,3].includes[3,-1]; // true

polyfill

const contains = (() => {
    Array.prototype.includes
    ? (arr,value) => arr.includes(value)
    : (arr,value) => arr.some(el => el === value)
})();
contains(['a','b'],'test'); // false