ES6 - 数组扩展

225 阅读4分钟

数组的扩展中,我给大家介绍如下几个方法,比较常用的:

  • Array.of()
  • Array.from()
  • Array.fill()
  • Array.keys()
  • Array.values()
  • Array.entries()
  • Array.copyWithin()
  • Array.find()
  • Array.findIndex()
  • Array.includes()

它们都分别有什么作用呢,下面我们就逐个讲解。

1. Array.of()

Array.of() 的定义是:将一组值转化为数组。 我们来看两个简单的案例:

{
	let arr = Array.of(3,4,7,9,11);
	console.log('arr=',arr); //[3,4,7,9,11]

	let empty = Array.of();
	console.log('empty=',empty); // [] 
}

第一个arr,我们给Array.of()传入了一组值,输出的结果是一个包含所有值的数组。 在参数为空的情况下,可以打印出一个空数组。Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。 在《ECMAScript 6 入门》书中有这样的介绍:

Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。

Array.of基本上可以用来替代Array()new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

可以通过如下方法去实现Array.of()

function ArrayOf(){
  return [].slice.call(arguments);
}

2.Array.from()

Array.from() 把伪数组或者一个集合变量转换为数组。 首先我们创建一个html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</body>
</html>

在页面中引入我们创建的js文件。

{
	let p = document.querySelectorAll('p');
	let pArr = Array.from(p);
	pArr.forEach(function(item){
		console.log(item.textContent); // 1,2,3
	});
}

首先我们获取到元素p的dom集合,大家都知道,此时的p变量是一个伪数组,我们不能使用forEach去遍历它。所以我们通过Array.from(),将伪数组转成数组,然后我们通过遍历来获取每一个p的textContent,打印出的值分别是 1,2,3Array.from()除了这个用处外,还有一个类似map的方式。

{
	// 有类似map的方式
	let arr = Array.from([1,3,5], function(item){return item*2});
	console.log(arr);// [2,6,10]
}

map方法类似,遍历数组,对每个值进行操作,然后返回一个新数组。

3. Array.fill()

Array.fill()方法使用给定值,填充一个数组

{
	let arr1 = [1,'a',undefined].fill(7);
	console.log('fill-7', arr1); // [7,7,7]
}

我们使用7 来替换了数组中的所有元素,当然,这个方法也可以指定替换的起始位置

{
	let arr2 = ['a','b','c'].fill(7,1,3);
	console.log('fill,pos', arr2); // ['a',7,7]
}

通过这个方式来替换,我们可以看到结果是 ['a',7,7] ,得到的结论如下:

第一个参数 7 :替换的值。 第二个参数 1:从数组下标为 1 的位置开始替换,就是起始位置。 第三个参数 3: 替换的结束位置,也是数组的下标。

  1. Array.keys() - Array.values() - Array.entries()

这三个方法我们放在一起说,因为它们之间都互有联系,我们来看段代码:

{
	for(let index of ['1','c','ks'].keys()){
		console.log('keys', index);//0,1,2
	}
}

在这个for of 循环中,我们对数组使用了keys() 方法,遍历出来的结果是 0,1,2keys() 方法返回的是数组的下标。

有了可以得到下标的方法,自然也有得到值的方法:

{
	for(let value of ['1','c','ks'].values()){
		console.log('values ', value);//1,c,ks
	}
}

打印的结果不出所料,是数组的值。

Array.entries() 方法我想大家都能猜到了,返回的是下标和值。

{
	for(let [index,value] of ['1','c','ks'].entries()){
		console.log('values ', index,value);//0 1, 1 c ,2 ks
	}
}

从结果可以看出,entries() 方法返回的是下标和其对应的值。

5.Array.copyWithin()

数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

{ 
	// 0 从哪个位置开始替换,3 ,开始读取数据,4,截至位置之前
	console.log([1,2,3,4,5].copyWithin(0,3,4)); 
}

copyWithin()方法可以接收三个参数 :

  • 第一个参数: 从哪个位置开始替换,
  • 第二个参数:开始读取数据的下标,
  • 第三个参数:截至位置下标之前,就是不包括当前下标的值

6.Array.find() Array.findIndex()

这两个方法也是一对兄弟方法,分别返回值和下标:

{
	// find 只找到第一个符合条件的值
	let num = [1,2,3,4,5,6].find(function(item){
		return item>3
	})
	console.log(num); // 4

	// findIndex 只找到第一个符合条件的值 的 下标
	let index = [1,2,3,4,5,6].findIndex(function(item){
		return item>3
	})
	console.log(index); // 4
}

它们都有一个共同的特性:返回第一个符合条件的值或者是下标。

7.Array.includes()

includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。

{
	// 数组中是不是包含 1
	let bol1 = [1,2,NaN].includes(1);
	console.log(bol1); // true

	let bol2 = [1,2,NaN].includes(NaN);
	console.log(bol2); // true
}

同时includes()方法还可以判断出NaN这个对ES5来说很难识别的类型。