前端编程工作中对数组的操作是非常多的,如果你对数组操作的不好,就很难写出令人惊奇的程序,所以这次记录一下ES6新增的一些数组操作方法。

JSON数组格式转换成数组

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,我们先来看一下JSON的数组格式怎么写。

let  json = {
    '0': 'html',
    '1': 'css',
    '2': 'javascript',
    length:3
}

这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组,并打印在控制台。

let  json = {
    '0': 'html',
    '1': 'css',
    '2': 'javascript',
    length:3
}

let arr=Array.from(json);
console.log(arr)

实际开发中这种方法还是比较常用的,毕竟节省了我们代码行数,也让我们的程序更清晰。

Array.of()方法

它可以把一堆文本或者数字转换成数组。

let arr =Array.of(3,4,5,6);
console.log(arr);

这个方法的主要目的是为了弥补数组构造函数Array()的不足,因为参数个数的不同,会导致Array()的行为有差异

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

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

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

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

当然它不仅可以转换数字,字符串也是可以转换的,看下边的代码:

let arr =Array.of('html','css','javascript');
console.log(arr);

find()实例方法

所谓实例方法就是并不是以Array对象开始的,而是必须有一个已存在的数组实例,然后在使用的方法。

这里find()实例方法,用于找出数组中第一个符合条件的数组成员。如何没找到则返回undefined,它的参数是一个回调函数:

所有数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。

let arr = [1,2,3,4,5];
arr.find(function(value,index,arr){
    return value > 3;
})

上面的代码会打印出4,说明找到了数组中第一个大于3的值,并且返回。

fill()实例方法

fill方法使用指定的值,填充数组。它可以传入三个参数,

fill(value, startIndex, endIndex);

第一个参数为填充的值,第二个参数为填充的起始位置,第三个参数为填充结束的位置(该位置的值不会填充),且后两个参数可省略,表示数组所有成员都被替换

let arr = ['a','b','c','d'];
arr.fill(3,1,2);
console.log(arr); //['a',3,'c','d']

arr数组中的下标为1的成员被替换成3,再试试省略后两个参数

let arr = ['a','b','c','d'];
arr.fill(3);
console.log(arr); //[3,3,3,3]

数组的所有成员都被替换成了3

数组的遍历

1.for…of循环

let arr=['html','css','javascript']

for (let item of arr){
    console.log(item);
}

遍历数组的索引

let arr=['html','css','javascript']

for (let index of arr.keys()){
    console.log(index);
}

遍历数组的索引和内容,这里需要entries()方法的配合,entries()是对键值对的遍历

let arr=['html','css','javascript']

for (let [index,val] of arr.entries()){
    console.log(index,val);
}

2.forEach

let arr = ['sp','ps','web'];
arr.forEach((val, index) => console.log(index,val));

3.filter

let arr = ['sp','ps','web'];
arr.filter((val, index) => console.log(index,val));

4.some

let arr = ['sp','ps','web'];
arr.some((val, index) => console.log(index,val));

5.map

let arr = ['sp','ps','web'];
arr.map((val, index) => console.log(index,val));