ES6 数组相关

1.1扩展运算符(...)

1.1.1 用于函数调用

将一个数组变为参数序列；可与正常的函数参数结合使用；扩展运算符后面也能够放表达式；若是扩展运算符后面是空数组，不产生任何效果。只有函数调用时，扩展运算符才能够放到圆括号里。

const array1 = [];
const array2 = [];
const arr = [1,2,3];
function push(array,...items){
  array.push(...items);
  console.log(...(items+'1')); // 1 , 2 , 3 1
}
push(array1,...arr);
push(array2,...[]);

array1 // [1,2,3]
array2 //[]
复制代码

1.1.2 替代Apply方法

apply方法的第二个参数把数组转换为函数的参数，有了扩展运算符，能够替代apply的这个做用

function f(x, y, z) {
  // ...
}

// ES5 的写法
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
let args = [0, 1, 2];
f(...args);
复制代码

1.1.3 复制数组

数组是复合数据类型，直接复制只是复制了数组的地址，没有从新建立一个数组。扩展运算符能够提供复制数组的简便方法。若是数组成员是对象，只能复制对象的引用，若是修改了新数组成员，会同步反映到原数组（浅拷贝）

const a1 = [1, 2];
const a2 = a1;
// 只复制了a1的地址
a2[0] = 2;
a1 // [2, 2]

// ES5
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

// 扩展运算符方法
const a2 = [...a1]; // 写法一
const [...a2] = a1; // 写法二
复制代码

1.1.4 合并数组

提供了数组合并的新写法

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
复制代码

1.1.5 结合解构赋值

扩展运算符能够与解构赋值结合生成数组，只能把扩展运算符，会报错

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错
复制代码

1.1.6 将字符串转为数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]
复制代码

1.1.7 将==定义了Iterator==接口的对象转换为数组

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// 没有部署Iterator接口的相似数组的对象
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
复制代码

1.1.8 带有Iterator接口的对象可以使用扩展运算符

扩展运算符背后调用的是遍历器接口

// map结构
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

// generator
const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};
[...go()] // [1, 2, 3]
复制代码

1.2Array.from()

用于将相似数组的对象和可遍历的对象转为真正的数组。==对象里必须有length属性==,任何有length属性对对象均可以经过Array.from()转为数组。扩展运算符也能够将某些数据结构转为数组。

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

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

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

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
复制代码

Array.from()还能够接受第二个参数，做用相似数组的map方法，用来对每一个元素进行处理，处理后放入数组。

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
复制代码

1.3Array.of()

将一组值转为数组，这个函数主要为了弥补构造函数Array()由于参数个数不一样，致使Array()行为有差别的不足。

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

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

1.4数组实例的copyWithin()

把当前数组内部指定位置的成员复制到其余位置（会覆盖原有成员），而后返回当前数组。能够修改当前数组。

参数：

1. target（必须）：从该位置开始替换数据。若是为负值，表示倒数。
2. start（可选）：从该位置开始读取数据，默认为 0。若是为负值，表示从末尾开始计算。
3. end（可选）：到该位置前中止读取数据，默认等于数组长度。若是为负值，表示从末尾开始计算。

// 将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]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束，复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
复制代码

1.5数组实例find(),findIndex()

1.find方法：用于找出第一个符合条件的数组成员。参数是一个回调函数，全部数组成员依次执行该回调函数，知道找到第一个返回值为true的成员，而后返回该成员。find方法的回调参数能够接受三个参数，依次为当前值、当前位置和原数组。

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

2.findIndex方法：和find相似，返回符合条件的成员位置。

这两个方法能够接受第二个参数，用来绑定回调函数的this对象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26
复制代码

能够发现NaN，弥补了indexOf方法的不足。

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

[NaN].findIndex(y => Object.is(NaN, y))
// 0
复制代码

1.6数组实例fill()

使用给定值，填充数组

参数：

1. value：用来填充数组元素的值
2. start（可选）：起始索引，默认为0
3. end（可选）：终止索引，默认为this.length

若是参数只有第一个，会把数组全部元素覆盖，适合用于给空数组赋初值。

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

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

1.7数组实例entries(),keys(),values()

1. 三个方法的相同点：都是用于遍历数组。返回一个遍历器对象。
2. 区别：entries遍历键值对，keys遍历键名，values遍历键值。

console.log(...['a','b','c'].keys()); // 0 1 2
console.log(...['a','b','c'].values()); // a b c
console.log(...['a','b','c'].entries()); // [ 0, 'a' ] [ 1, 'b' ] [ 2, 'c' ]
复制代码

3. 遍历 能够用for...of循环遍历，也能够手动调用遍历器的next方法。

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

// 遍历器
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
复制代码

1.8数组实例includes()

表示数组是否包含给定的值。

参数：

1. valueToFind：须要查找的元素值
2. fromIndex（可选）：从fromIndex索引处开始查找。若是第二个参数为负数，则表示倒数的位置，若是这时它大于数组长度（好比第二个参数为-4，但数组长度为3），则会重置为从0开始。

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

与Map，Set的has方法的区别：

1. Map的has方法：查找键名
2. Set的has方法：查找值

1.9数组实例的flat(),flatMap()

1.flat()：用于将嵌套的数组拉平，返回一个一维数组，对原数据没有影响。参数：depth-指定要提取嵌套数组的结构深度，默认值为1。若是无论有多少层嵌套，都要转成一维数组，能够用Infinity关键字做为参数。若是原数组有空位，flat()方法会跳过空位。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
复制代码

2.flatMap()：首先使用映射函数映射每一个元素，而后将结果压缩成一个新数组。

参数：

1. callback-能够生成一个新数组中的元素的函数，能够传入三个参数：currentValue（当前正在数组中处理的元素），index（可选，数组中正在处理的当前元素的索引）， array（可选，被调用的 map 数组）
2. thisArg-可选，执行 callback 函数时 使用的this值

// 至关于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

// flatMap只能展开一层数组
// 至关于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
复制代码

1.10数组的空位

数组对空位是指数组对某一位置没有任何值，空位不是undefined，一个位置值等于undefined仍然是有值。

ES5对空位的处理不一致，大多数状况忽略空位。ES6明确将空位转为undefined。上述ES6新增的数组方法都不会忽略空位。

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

1.11数组经常使用方法（ES5的）

1.11.1 some和every方法

1. some()：测试是否==至少有一个==元素能够经过被提供的函数方法。返回Boolean类型
2. every()：测试是否==全部元素==都能经过被提供的函数方法。返回Boolean类型。

参数（两个方法参数一致）：

1. callback-测试元素的函数，可接受三个参数：element（测试的当前值）；index（可选，测试的当前值的索引）；array（可选，调用some，every的当前数组）
2. thisArg-执行callback使用的this值

const hasProvider = providerList.some(item => item.providerNumber === providerNumber);

arr2.every((item, index) => item === arr1[index])
复制代码

1.11.2 filter方法

建立一个新数组,其包含经过所提供函数实现的测试的全部元素。

参数（两个方法参数一致）：

1. callback-测试元素的函数，可接受三个参数：element（测试的当前值）；index（可选，测试的当前值的索引）；array（可选，调用的当前数组）
2. thisArg-执行callback使用的this值

const newlist = list.filter(item => item.channelNumber === channelNumber);
复制代码

1.11.3 map方法

建立一个新数组，其结果是该数组中的每一个元素都调用一个提供的函数后返回的结果。

参数：

1. callback-测试元素的函数，可接受三个参数：currentValue（测试的当前值）；index（可选，测试的当前值的索引）；array（可选，调用的当前数组）
2. thisArg-执行callback使用的this值

const channelNumberList = channelList.map(item => item.channelNumber)
复制代码

1.11.4 forEach方法

对数组的每一个元素执行一次提供的函数

参数：

1. callback-测试元素的函数，可接受三个参数：currentValue（测试的当前值）；index（可选，测试的当前值的索引）；array（可选，调用的当前数组）
2. thisArg-执行callback使用的this值

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});
复制代码

1.11.5 push(), pop(), shift(), unshift()方法

1.push()：将一个或多个元素添加到数组末尾，并返回数组新长度。

参数：elementN-被添加到数组末尾到n个元素（按顺序添加）

能够用来合并两个数组

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// 将第二个数组融合进第一个数组
// 至关于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); 
// ['parsnip', 'potato', 'celery', 'beetroot']
复制代码

2.pop()：删除数组最后一个元素，返回该元素的值。

对于空数组使用pop方法，返回undefined。

var arr = ['a', 'b', 'c'];

arr.pop() // 'c'
arr // ['a', 'b']
[].pop() // undefined
复制代码

3.shift()：删除数组第一个元素，返回该元素的值。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']
复制代码

push和shift方法结合使用，构成了先进先出的队列结构。

4.unshift()：在数组第一个位置添加元素，返回添加新元素后数组长度。可接受多个参数。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']
复制代码

1.11.6 join(), concat()方法

1.join()：指定参数做为分隔符，将全部数组成员链接成字符串返回。不提供参数默认用逗号分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
复制代码

2.concat()：用于多个数组的合并，将新数组的成员加到原数组成员后部，==返回一个新数组==，原数组不变。

参数：valueN-将数组和/或值链接成新数组

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]
复制代码

1.11.7 slice(), splice()方法

1.slice()：提取目标数组的一部分，返回一个新数组，原数组不变。

参数：

1）begin 可选 提取起始处的索引，从该索引开始提取原数组元素，默认为 0。

若是该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

若是省略 begin，则 slice 从索引 0 开始。

若是 begin 大于原数组的长度，则会返回空数组。

2）end 可选 提取终止处的索引，在该索引处结束提取原数组元素，默认为 0。slice 会提取原数组中索引从 begin 到 end。

若是该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

若是 end 被省略，则slice 会一直提取到原数组末尾。

若是 end 大于数组的长度，slice也会一直提取到原数组末尾。

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]
复制代码

2.splice()：用于删除原数组的一部分红员，并能够在删除的位置添加新的数组成员，返回值是被删除的元素。注意，==该方法会改变原数组==。

参数：

1）start-指定修改的开始位置（从0计数）

若是超出了数组的长度，则从数组末尾开始添加内容；

若是是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素而且等价于array.length-n）；

若是负数的绝对值大于数组的长度，则表示开始位置为第0位。

2）deleteCount-可选，整数，表示要移除的数组元素的个数。

若是 deleteCount 大于 start 以后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

若是 deleteCount被省略了，或者它的值大于等于array.length-start(也就是说，若是它大于或者等于start以后的全部元素的数量)，那么start以后数组的全部元素都会被删除。

若是 deleteCount 是 0 或者负数，则不移除元素。这种状况下，至少应添加一个新元素。

3）item1, item2, ... 可选

要添加进数组的元素,从start 位置开始。若是不指定，则 splice() 将只删除数组元素。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
复制代码

---

摘自阮一峰

参考MDN