ES6数组

发表于 | 分类于

介绍

本次介绍数组的一些扩展方法，都是简单地总结下一些方法的使用，详细的请参考：数组的扩展

数组

扩展运算符

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

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

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

有了扩展运算符，对于许多操作能更方便了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//复制数组
const a1 = [1, 2];

const a2 = [...a1];
// 或
const [...a2] = a1;   



//合并数组
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

var arr4 = [...arr1,...arr2,...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]


//还记得解构赋值吧，你也可以结合扩展运算符一起用
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
//注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
const [...rest,first] = [1, 2, 3, 4, 5];   //报错


//扩展运算符还可以将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]


//还有一个很棒的功能
let oLi = document.querySelectorAll('li');
let array = [...oLi];

//看明白了吗，可以将类数组转为真正的数组         
//当然只有部署了 Iterator 接口的对象才可以才能用扩展运算符转为真正的数组

Array.from()

Array.from方法用于将两类对象转为真正的数组，分别是类似数组的对象和可遍历的对象

用于类似数组的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let obj = {
	'0':1,
	'1':2,
	'2':3,
	length:3
};
let arr = Array.from(obj);
console.log(arr);  //[1,2,3]

//注意：对象的键值须是序号，不能是其他的，末尾要指定长度

//键值不为序号
let obj = {
	'a':1,
	'b':2,
	'c':3,
	length:3
}
let arr = Array.from(obj);  //[undefined, undefined, undefined]

//不指定长度
let obj = {
	'0':1,
	'1':2,
	'2':3
}
let arr = Array.from(obj);  //[]

用于可遍历的对象

1
2
3
4
5
6
7
8
9
10
11
let oLi = document.querySelectorAll('li');
Array.from(obj).forEach(function (li) {
  console.log(li);
});

//querySelectorAll方法返回的是一个类似数组的对象，可以将这个对象转为真正的数组，再使用forEach方法


//只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

Array.of()

Array.of方法用于将一组值，转换为数组

1
2
3
4
5
6
7
8
9
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1


//注意它与new Array()的区别
let arr1 = new Array();   //[]
let arr2 = new Array(2);   //[ , ,]
let arr3 = new Array(1,2,3);  //[1,2,3]

fill()

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

1
2
3
4
5
6
7
8
9
['a', 'b', 'c'].fill(7)
// [7, 7, 7]  数组中已有的元素，会被全部抹去

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

//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

includes()

includes方法返回一个布尔值，表示某个数组是否包含给定的值

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