ES6数组新特性及操作方法总结

一、扩展运算符

扩展运算符是...，可以将数组转为用逗号隔开的参数序列，它的用法有很多，以下列举几种

console.log([1, 2, 3]); // [1, 2, 3]
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5

合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // 1 2 3 4 5 6

最小值、最大值

Math.min(...[1, 2, 3]); // 1
Math.max(...[1, 2, 3]); // 3

解构赋值

扩展运算符只能放在最后一位，否则会报错，且必须前后格式一致

const [a, ...b] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // [2, 3, 4, 5]

字符串转数组

[...'hello']; // [ "h", "e", "l", "l", "o" ]

二、Array.form()

Array.form()可以将任何有length属性的对象转成数组，如类数组对象、可遍历对象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
Array.from(arrayLike); // ['a', 'b', 'c']

也可以将字符串转成数组

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

Array.form()还可以接受一个函数作为第二个参数，第一个参数为值（数组或类数组对象），类似于数组的map方法，对原数组的每一个值进行处理，并将处理后的值返回原数组（改变原数组的值）

let arr = [1, 2, 3, 4, 5];
Array.from(arr, val => val + 1); // [2, 3, 4, 5, 6]

三、Array.of()

Array.of()的用法比较简单，用于将一组值转成数组

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

四、find()，findIndex()，findLast()，findLastIndex()

find()用于找出符合条件的第一个数组成员，并返回该成员

findIndex()用于找出符合条件的第一个数组成员，并返回该成员所在位置下标

findLast()用于找出符合条件的最后一个数组成员，并返回该成员

findLastIndex()用于找出符合条件的最后一个数组成员，并返回该成员所在位置下标

let arr = ["a", "b", "c", "d", "e", "b"];

arr.findIndex((val) => val === "b"); // "b"
arr.find((val) => val === "b"); // 1
arr.findLast((val) => val === "b"); // "b"
arr.findLastIndex((val) => val === "b"); // 5

五、includes()

检查数组是否包含给定的值，返回布尔值，true表示包含，false表示不包含

["a", "b", "c"].includes('s'); // false
["a", "b", "c"].includes('a'); // true

六、fill()

用给定值，替换掉数组的值

["a", "b", "c"].fill('s'); // ['s', 's', 's']
new Array(3).fill('s'); // ['s', 's', 's']

也可以指定替换的起点和终点，分别为第2、3位参数（数组下标，从第二位参数开始替换，包含起点位置，到第3位参数结束，不包含终点位置）

["a", "b", "c"].fill('s', 1, 2); // ['a', 's', 'c']

七、sort()

对数组内的值进行排序

[3, 1, 2, 5, 4].sort(); // [1, 2, 3, 4, 5]
["b", "a", "d", "c", "e"].sort(); // ['a', 'b', 'c', 'd', 'e']

八、at()

传入一个整数参数（可以是负数），返回对应位置的值

[1, 2, 3, 4, 5].at(0); // 1
[1, 2, 3, 4, 5].at(-1); // 5

九、flat()，flatMap()

flat()可以将多维数组变成一维数组，接收一个正整数参数，表示改变的维数，默认为1，如果传入的值超过数组最大维数，也会将数组变成一维数组

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

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

flatMap()相当于先执行数组的map()方法，再执行flat()方法，但只能展开一层

[1, 2, 3, 4, 5].flatMap((val) => [val]); // [1, 2, 3, 4, 5]
[1, 2, 3, 4, 5].flatMap((val) => [[val]]); // [[1], [2], [3], [4], [5]]

[1, 2, [3, 4], 5].flatMap((val) => val); // [1, 2, 3, 4, 5]
[1, 2, [3, 4], 5].flatMap((val) => val*2); // [2, 4, NaN, 10]
[1, 2, [3, 4, [5]]].flatMap((val) => val); //  [1, 2, 3, 4, [5]]

尚有很多不够完善的地方，后面会持续更新…