es6数组的总结

1。扩展运算符

扩展运算符用三个点表示。可以将一个数组分隔成用逗号区分的参数序列

let a = [1,2,3,4,5,6];
console.log(...a)

1 2 3 4 5 6

主要用于函数的调用


add = (a,b) => {
    console.log(a+b)
}
add(...[10,20])

30

替代函数的 apply 方法

let array = [1,2];

add = (a,b) => {
    console.log(a+b)
};
// es5
add.apply(null,array);
//es6
add(...array)

3
3

求最大值

let a = [1,2,3,4,5,6];

console.log(Math.max.apply(null,a));
console.log(Math.max(...a));

6
6

push函数实现数组的添加

let a = [1,2,3,4,5,6];
let b = ['1','a','c'];

Array.prototype.push.apply(a,b);
console.log(a);
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];

arr1.push(...arr2);
console.log(arr1)

[ 1, 2,   3,   4,   5,  6, '1', 'a', 'c']
[ 0, 1, 2, 3, 4, 5 ]

console.log(new Date(...[new Date()]));
console.log(new Date(...[2015, 1, 1]))

2020-04-07T06:10:17.905Z
2015-01-31T16:00:00.000Z

二扩展运算符的应用

数组的复制

let a = [1,2,3,4,5,6];
let b = [...a];
c[0] = "es6";
console.log(b);
console.log(c);
console.log(a);

[ 1, 2, 3, 4, 5, 6 ]
[ 'es6', 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6 ]

数组的合并

let a = [1,2,3,4,5,6];
let b = ['1','a','c'];
let c = new Array();

// es5
c = a.concat(b);
console.log(c);
// es6
let d = new Array(...a,...b);
console.log(d)

[
  1, 2,   3,   4,   5,
  6, '1', 'a', 'c'
]
[
  1, 2,   3,   4,   5,
  6, '1', 'a', 'c'
]

与结构赋值一起使用。在进行赋值时扩展运算符必须放在最后一位否则会报错

let [q,...d] = [1,2,3,4,5];
console.log(q);
console.log(d);

let [w,...r] = [];
console.log(w);
console.log(r)

let [...s,t] = [1,2];
console.log(s);
console.log(t)

1
[ 2, 3, 4, 5 ]
undefined
[]
let [...s,t] = [1,2];
     ^^^^
SyntaxError: Rest element must be last element

字符串转数组

let str = 'hello';
let array = [...str];
console.log(array)

[ 'h', 'e', 'l', 'l', 'o' ]

实现了 Iterator 接口的对象

Map 和 Set 结构，Generator 函数

三 Array.from()

将一个类数组转化为真正的数组。一般为dom操作时返回的数组。以及函数arguments的对象都可以被转化为真的数组

let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

该方法可以接收一个函数为第二个参数对每个元素进行处理。返回新的数组

let a = [1,2,3,4]
a = Array.from(a,(item) => item * 100);
console.log(a)

[ 100, 200, 300, 400 ]

四 Array.of 将一组值转为数组

console.log(Array.of(1,2,3,4))
console.log(Array.of('q','e'));
console.log(Array.of(11,22).length);

[ 1, 2, 3, 4 ]
[ 'q', 'e' ]
2

五 copyWithin 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。


let a = [1,2,3,4,5];
a.copyWithin(1,2,3);
console.log(a);
a.copyWithin(3,4);
console.log(a)

[ 1, 3, 3, 4, 5 ]
[ 1, 3, 3, 5, 5 ]

六。数组实例的 find() 和 findIndex()

find()返回第一个符合条件的数组成员。找不到时返回undefined

let a = [1,2,3,4,5];
let b = a.find(a => a === 2);
console.log(b)

2

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

10

findIndex()返回符合条件的元素的位置。找不到时返回-1

let a = [1,2,3,4,5];
let b = a.findIndex(a => a > 20);
console.log(b)

let c = a.findIndex(a => a > 2);
console.log(c)

-1
2

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

let a = new Array(3).fill({name:""});
console.log(a)

[ { name: '' }, { name: '' }, { name: '' } ]

fill()可接收第二个和第三个参数作为起始位置和结束位置

let a = [1,2,3,4];
a.fill('es6' ,1, 3);
console.log(a)

[ 1, 'es6', 'es6', 4 ]

八。 entries()，keys() 和 values()遍历数组

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

// 遍历键值对
for (let [index,item] of a.entries()){
    console.log(index,item)
}

0 1
1 2
2 3
3 4

// 遍历键
for (let key of a.keys()){
    console.log(key)
}

0
1
2
3

// 遍历值
for ( let value of a.values()){
    console.log(value)
}

1
2
3
4

九 includes(). 返回一个布尔值。用于监测数组中是否包含给定的值

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

console.log(a.includes(3));
console.log(a.includes(100))


true
false

第二个参数表示开始的位置

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

console.log(a.includes(3,1));
console.log(a.includes(3,3))

true
false

十数组实例的 flat()，flatMap()

flat()用于将一个多维数组拉平

let a = [1,2,3,4,[1,2,3,[1,2,3,4,[1,2,3,4,5]]]];

// 拉平一层
let b = a.flat();
console.log(b)
// 拉平两层
let c = a.flat(2);
console.log(c)
//全部拉平
let d = a.flat(Infinity);
console.log(d)

[ 1, 2, 3, 4, 1, 2, 3, [ 1, 2, 3, 4, [ 1, 2, 3, 4, 5 ] ] ]
[ 1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 4, [ 1, 2, 3, 4, 5 ] ]
[
  1, 2, 3, 4, 1, 2,
  3, 1, 2, 3, 4, 1,
  2, 3, 4, 5
]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

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


let b = a.flatMap(a => [a * 12]);

console.log(b)

let c = a.flatMap(a => a * 12);
console.log(c)

let d = a.flatMap(a => [a, a * 12]);
console.log(d)


[ 12, 24, 36, 48 ]
[ 12, 24, 36, 48 ]
[
  1, 12, 2, 24,
  3, 36, 4, 48
]