ES6学习笔记之数组的扩展

✏️1. 扩展运算符

扩展运算符（spread）是三个点（...）,将一个数组转为用逗号分隔的参数序列。

• 普通用法

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

• 数组拷贝(普通类型深拷贝,复杂类型浅拷贝)

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [...arr1];
arr2[0] = 666;
console.log('arr2:', arr2);//[666,2,3,4,5]
console.log('arr1:', arr1);//[1,2,3,4,5]

• 分割数组(解构赋值)

const arr1=[1,'2','3','4'];
const [,...arr2]=arr1;
console.log('arr2 :', arr2);//arr2 : ["2", "3", "4"]

• 合并数组

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

• 传递参数

function add(x,y) {
    return x+y;
}
const arr=[1,2];
console.log(add(...arr));//3

• 替代函数的 apply 方法

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

// ES5 的写法
Math.max.apply(null, [14, 3, 77])//77

// ES6 的写法
Math.max(...[14, 3, 77])//77

// 等价于
Math.max(14, 3, 77);//77

• 字符串转数组

[..."abcdefg"];//[a,b,c,d,e,f,g]

---

✏️2. 扩展的实例方法

1.Array.from

将类数组转换为数组 (①带有length属性的,②可遍历)

转换自定义对象

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('hello')

Set转数组

    let set=new Set(['name','age']);
    console.log(Array.from(set));//["name", "age"]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)

2.Array.fill()

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

{
    // 1参数
    const arr1 = [1, 2, 3, 4, 5];
    let arr2 = [...arr1].fill(3);

    // 三参数:用6从下标0开始填充直到下标3之前
    console.log(arr2);//333333
    console.log([...arr1].fill(6, 0, 3))//66645

    const arr3 = [];
    console.log(arr3.fill(0, 0, 10));//[]

    // 初始化数组
    let arr=new Array(5).fill(0);
    console.log(arr);//[0,0,0,0,0]
}

3.Array.find(),Array.findIndex

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

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

• 查找数组中第一个大于5的成员

let arr=[1,3,4,2,8,4,8];
let res=arr.find(v=>{
    return v>5;
})
let resIndex=arr.findIndex(v=>{
    return v>5;
})
console.log(res,resIndex);//8 4

• find,findIndex方法的回调有三个参数,依次为当前值,当前的位置,原数组

let res=[1,2,3,4,5].find((v,i,arr)=>{
    return arr[i]===v;
})
console.log(res);//1

4.Array.includes() 和 Array.indexOf()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false

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

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

在此之前用indexOf判断是否包含目标值,indexOf方法有两个缺点，1.不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。2.它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

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

5.Array.flat()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组展开，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

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

flat()默认只会展开一层，如果想要展开多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要展开的层数，默认为1。

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

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

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果有空,则会自动跳过空处

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