ES6数组新增操作的总结(与ES5对比总结)

Posted 2021-03-06 ljy2017

一.ES5和ES6的数组遍历方法总结

　　1.for循环。

for(var i=0;i<arr.length;i++){
        console.log(arr[i]);
    }

　　这种方法最简单也没有什么要注意的，但书写稍微有些复杂，所以我们接着来讲下面的方法。

　　2.forEach

const arr = [1,2,3,4,5];
arr.forEach((item)=>{
    console.log(item);
})

　　这种方法看起来简便很多，但却不能通过break和continue来停止或继续，如果加上continue,break会报错。所以说这种方式没法在中间停止和跳过，只能挨个的从头到尾遍历。

3.every

const arr = [1,2,3,4,5];
arr.every((item)=>{
    console.log(item);
})

　　every的存在很好的解决了forEach不能中断和跳过的问题，上面这段代码只会输出一个1，不会输出1,2,3,4,5。如果every 的函数return true那么就接着往下遍历，如果return false就相当于break，就会中断。如果什么都不返回，效果等同于return false，会直接中断。

const arr = [1,2,3,4,5];
arr.every((item)=>{
　　if(item==2)return true;
　　console.log(item);
　　return true;
})

　　这段代码的效果会输出1，3，4，5相当于在2处，使用了continue;

4.for...in..

　　

const arr = [1,2,3,4,5];
for(var index in arr){
    console.log(index,arr[index]);
}

这种方法其实是用来遍历对象的，其中index的类型是字符串类型，这段代码的输出是：

0 1

1 2

2 3

3 4

4 5

前面是字符串类型，后面是数字，虽然看起来和上面的输出结果差不多，但是如果代码稍加修改：

const arr = [1,2,3,4,5];
arr.p =100;
for(var index in arr){
    console.log(index,arr[index]);
}

输出结果是：

0 1

1 2

2 3

3 4

4 5

p 100

可以看到区别了吧？所以for...in是专门为对象的遍历准备的，一般的数组遍历还是不要用为好！

5.for...of

for of是ES6新增加的。

const arr = [1,2,3,4,5];
for(let item of arr){
    console.log(item);
}

使用方法如上，和for in类似。

二.ES5和ES6中将伪数组转化成数组各自的方法：

伪数组为什么叫做伪数组呢，因为他具有数组的特性：有长度，可遍历等，但是他不具有数组的另外一些操作，比如slice等等。

先点明伪数组的定义:一个有length属性并且按索引方式存储数据的对象就是伪数组。

1.通过call实现

let arr = [].slice.call(arguments);

这里假设arguments是一个伪数组。

2.通过ES6中新增的from来实现

from(arrayLike,mapFn,this.Arg)第一个参数表示待转化的伪数组，第二个参数代表要对每一项进行的操作，第三个参数代表第二个函数的this指向。

let arr = Array.from(arguments)

可通过上述方式把类数组转化成数组。

其实from还有另一种用法，可以通过from初始化数组内容。

let arr = Array.from({length:5},()=>{ return 1; });

上面的操作代表初始化一个长度为5的数组，并把内容全部初始化1。

三.ES5和ES6创建新数组的方法

 

    let arr = Array(5);
    let arr = [];

　　let arr = Array.from({length:5},()=>{ return 1; });//创建一个长度为5的数组，并把数组全部赋值为1.

　　let arr = Array.of(1);//创建一个数组，数组的值[1]
　　let arr = Array(5).fill(1);//创建一个长度为5的数组，并把数组全部赋值为1.

 

上面两种是ES5的最常见的方法，第一种可以指定长度，但第二种不能指定。下面三种方法是ES6中的。

Array.fill(value,start,end).第一个是要填充的值，第二个第三个为起始和结束的位置。

四.ES5和ES6寻找元素的方法。

let array = [1,2,3,4,5];
let find = array.filter((item)=>{
    return item%2===0
})
console.log(find);

上述代码返回值是[2,4]，这是ES5中的的查找元素的方法，它会一直找到数组结尾并返回一个数组。如果我们只想找到第一个满足条件的元素时，这种方法会显得有些浪费时间。

let array = [1,2,3,4,5];
let find = array.find((item)=>{
    return item%2===0
})
console.log(find);

上面这种方法是ES6新增的，最后的结果为2，如果我们只想找第一个元素时，使用这种方法比较合理。

 

总结：上面文章我们总结了ES6和ES5数组的遍历，转换，生成，查找操作，并进行了对比。只有明白每个方法的特性，才能在适当的时候选择适当的方法。