前端编程工作中对数组的操作是非常多的,如果你对数组操作的不好,就很难写出令人惊奇的程序,所以这次记录一下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,它的参数是一个回调函数:
- value: 当前的值
- index: 当前的位置
- arr: 当前的数组
所有数组成员依次执行该回调函数,直到找到第一个返回值为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));

