js原生数组工具方法总结

ECMAScript5 提供了几个数组迭代后操作的方法。

首先我们考虑这样的场景：

要判断数组中的所有元素是否都满足某个条件。

我们首先定义一个数组：

var testArray=[1,2,3,4,5,6,7,8,9];

我们需要知道这个数组里面是否所有的元素都小于5。
通常会怎么做呢？

 function compare1(testArray){
    var result=true;
    for (val of testArray) {
          if(val<5){
            return false;
          }
    }
    return result;
 }
alert(compare1(testArray));

那么是否有更简便的方法呢？

var everyResult=testArray.every(function(item,index,array){
    return (item<5);
})
alert(everyResult);

哪个更简洁 一目了然。

every() :对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

与every() 相对的则是some() 用法是完全一样的，只是some()是只要有一个满足就返回true。

some()适用于判断某种情况是否存在。

接下来我们还是这个数组，那么我们的需求变了，我们

要过滤出满足某个条件的元素。

我们现在要把所有小于5的元素找出来，放到一个数组里面。

我们还是看我们通常的解决办法。

var resultArr=[];
for (val of testArray) {
          if(val<5){
           resultArr.push(val);
          }
    }

alert(resultArr);

新的方法。

var resultArr=testArray.filter(function(item,index,array){
    return (item<5);
})
alert(resultArr);

filter() 对数组中的每一项运行给定函数，返回该函数会返回true项所组成的数组。

接下来，我们需要对这个数组里面的每一个元素都做一个统一的操作，比如乘以2。

for (var i = 0; i < testArray.length; i++) {
            testArray[i]=testArray[i]*2;
        };

alert(testArray)

换一种原生支持的方法

var resultArr=testArray.map(function(item,index,array){
    return item*2;
})

alert(resultArr)；

当然从代码上并没有少多少。但更简洁明确一些。

有了这些方法，我们在处理数组的时候就可以更加得心应手。
但是需要注意的是ECMAScript 版本，后端尤其注意。前端主流浏览器都已经支持。

ECMAScript5 还提供了数组归并的方法。

数组归并，就是将里面的元素按照某个方式合并为一个，最简单就是把里面的所有元素求和。还可以拼接成可以直接用于sql 的字符串等等。

reduce() 和 reduceRight()

还是上面的数组，我们直接看用法：

var sum=testArray.reduce(function(prev,cur,index,array){
    return prev+cur;
});

alert(sum)//45

而通常我们会这么写：

var sum =0;
for (val of testArray) {
         sum+=val;
    }
alert(sum)

这个方法避免了我们去做太多的循环，还是很有用的。

当然也可以做一些拼接操作

var sumStr=testArray.reduce(function(prev,cur,index,array){
    return prev+'|'+cur;
});

alert(sumStr)//1|2|3|4|5|6|7|8|9

reduceRight() 只是方向从后向前，其他的都一样

prev 表示上一个
cur 当前值
index 项的索引
array 数组对象