您的位置：首页 > 其它

ES6 --- 数组扩展

2018-03-14 07:18 190 查看

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

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

才会返回由参数组成的新数组。参数个
4000
数只有一个时，实际上是指定数组的长度。

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，3

。

Array.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]
}

我们使用

来替换了数组中的所有元素，当然，这个方法也可以指定替换的起始位置。

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

通过这个方式来替换，我们可以看到结果是

['a',7,7]

，得到的结论如下：

第一个参数 7 ：替换的值。

第二个参数 1：从数组下标为 1 的位置开始替换，就是起始位置。

第三个参数 3: 替换的结束位置，也是数组的下标。

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，2

。

keys()

方法返回的是数组的下标。

有了可以得到下标的方法，自然也有得到值的方法：

{
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来说很难识别的类型。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航