数组之es6新增方法及数组的遍历

一些新增方法

1.forEach():从头至尾遍历数组,为每个元素调用指定函数。改变数组本身。函数的参数依次是:数组元素,元素的索引,数组本身。
例子:

var arr = [1,2,3,4,5];
arr.forEach(function(element,index,arr1){
     arr1[index] = element+1;
 })      // arr = [2, 3, 4, 5, 6]

2.map():调用的数组的每一个元素传递给指定的函数,并返回一个新数组。不改变原数组。函数的参数只有传进来的数组元素。
例子:

var arr = [1,2,3,4,5];
var arr1 = arr.map(function(x){
     return x*x;                     //一对一的关系,传进来一个值,返回一个对应的值。
 })      //arr1 = [1,4,9,16,25]

3.filter():将数组元素执行特定函数,而返回一个子集。输入是执行逻辑判断的函数,该函数返回true或false,输出是判定为true的元素。

var arr = [1,2,3,4,5];
var arr1 = arr.filter(function(x){
     return x<3;
 })      //arr1 = [1,2]
  1. every()和some():对数组元素进行指定函数的逻辑判断。输入是特定函数,输出是true或者false.every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则最后返回true。some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则最后返回true。可以用来判断是否数组中所有数都满足某一条件或者是否存在某些值满足条件。
var arr = [1,2,3,4,5];
var arr1 = arr.some(function(x){
    return x<3;
})     //true
var arr = [1,2,3,4,5];
        var arr1 = arr.every(function(x){
            return x<3;
        })     //false

5.reduce():使用指定的函数将数组元素进行组合生成单个值。输入是两个参数,第一个是执行化简操作的函数。第二个(可选)的参数是一个传递给函数的初始值。多对一,输入多个值最终返回一个值
index值从1开始增加。
第一次迭代: prev = 1,curr = 2,index = 1
第二次迭代: prev = 3,curr = 3,index = 2
第三次迭代: prev = 6,curr = 4,index = 3
第四次迭代: prev = 10,curr = 5,index = 4
第五次迭代: prev = 15,curr = 5,index = 5
第六次迭代: prev = 20,curr=5,index = 6

求和:

var arr = [1,2,3,4,5,5,5];
var sum = arr.reduce(function(prev,curr,index,array){
    return prev+curr;
})     //sum = 25

将多个数组合并成一个数组:

var arr = [1,2,3,4,5],
arr1 = [6,7,8,9],
 arr2 = [10,11,12];
var newArr = [arr,arr1,arr2];
var ret = newArr.reduce(function(a,b){
 return a.concat(b);
})    // ret = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  1. indexOf():搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf()为返向搜索。
var arr = [1,2,3,4,5];
var arr1 = arr.indexOf(8);     //arr1 = -1
var arr2 = arr.indexOf(3);     //arr2 = 2
var arr3 = arr.lastIndexOf(5);   //arr3 = 4
  1. find()和findIndex():找到第一个符合条件的成员。输入是回调函数,所有数组成员一次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。find()输出为找到的原数组。findIndex()返回成员的位置。
var arr = [1,2,3,4,5,5,5];
var arr1 = arr.findIndex(function(x){
    return x == 5;
});     //arr1 = 4
var arr2 = arr.indexOf(5);     //arr2 = 4

8.includes():表示某个数组是否包含给定的值,第一参数(必选)表示待检查的值,第二个参数(可选)表示搜索的起始位置。
和indexOf对比,indexOf进行了运算符的强对比,会导致对NaN的误判。

var arr = [1,2,3,4,5,5,5,NaN];
var arr1 = arr.indexOf(NaN);     //-1
var arr2 = arr.includes(NaN);     //true

数组的遍历方法

数组的遍历方法主要有四种for,forEach,for…in, for…of
1.for:最传统的方法,不过多解释。

var arr = [1,2,3,4];
for(var i=0; i<arr.length; i++){
    console.log(arr[i]);
}

2.forEach:这种方法不能使用break语句跳出循环,也不能使用return语句从闭包函数中返回。

var arr = [1,2,3,4];
arr.forEach(function(ele,index,array){
    console.log(ele);
})

3.for…in:这种方法不仅数组本身元素将被遍历到,那些由用户添加的附加元素也将被遍历到,甚至连数组原型中的属性也将被遍历到。甚至在某些情况下,上面代码将会以任意顺序去遍历数组元素。
for…in是用于遍历包含键值对(key-value)的对象,对数组并不是那么友好。

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

4.for…of:是ES6定义的新的遍历数组的方法。

var arr = [1,2,3,4];
for(var key of arr){
     console.log(arr[key]);
 }

5.上文中介绍的其他函数:every(),some(),filter(),map(),reduce()等方法也可以遍历数组,需要在不同的情况下搭配不同的函数使用。

猜你喜欢

转载自blog.csdn.net/superyuan567/article/details/85012210
今日推荐