js中的数组方法

一、forEach：遍历数组

这个方法有两个参数，第一个是回调函数，第二个参数改变this指向

array.forEach(fun[,obj]); 1

我们首先看只有一个参数的情况，第一个参数是回调函数，这个回调函数也有3个参数 看到这里，你是不是觉得这个方法有点复杂了，不然，其实很简单，而且，之后的方法参数大致都是一样的

只有一个参数

array.forEach(function(currentValue,index,arr)) 1

根据单词意思，我们就可以知道，第一个参数表示的是数组的当前项值，第二参数是当前项索引，第三个是数组对象本身

var arr = [1,2,3,4] arr.forEach(function(value,index,arr){ console.log(value);//会依次输出 1，2，3，4 console.log(index);//会依次输出索引 0,1,2,3 console.log(arr);//输出三遍 arr = [1,2,3,4] }) 123456

我们再来看个例子：遍历数组中的值，并计算总和

var numbers = [1,2,3,4,5]; var sum = 0; numbers.forEach(function(number){ sum += number; }) console.log(sum)//15 123456

相信看到这里，聪明的你就明白forEach的基本使用了，不要怀疑自己，你学习能力很强的。

有两个参数 使用场景，有几个li标签，我们要把数组中的每个值按顺序分别给li标签

这里是HTML结构

<ul> <li></li> <li></li> <li></li> <li></li> </ul> 123456

这里是我们的js

var arr = [1,2,3,4] arr.forEach(function(value,index,arr){ this[index].innerHTML = value },document.getElementsByTagName('li')); 1234

二、map:将数组映射成另一个数组

map 通过指定函数处理数组的每个元素，并返回处理后新的数组，map不会改变原始数组。 forEach和map的区别在于，forEach没有返回值。 map需要返回值，如果不给return，默认返回undefined

使用场景1： 假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组

var numbers = [1,2,3]; var doubledNumbers = []; var doubled = numbers.map(function(number){ return number * 2; }) console.log(doubled);//[2,4,6] 123456

使用场景2： 假定有一个对象数组(A),将A数中对象某个属性的值存储到B数组中

var cars = [ {model:"Buick",price:"CHEAP"}, {model:"BMW",price:"expensive"} ]; var prices = cars.map(function(car){ return car.price; }) console.log(prices);//["CHEAP", "expensive"] 12345678

三、filter：从数组中找出所有符合指定条件的元素

filter()检测数组元素，并返回符合条件所有元素的数组

使用场景1：假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中

var porducts = [ {name:"cucumber",type:"vegetable"}, {name:"banana",type:"fruit"}, {name:"celery",type:"vegetable"}, {name:"orange",type:"fruit"} ]; var filtered2 = porducts.filter(function(product){ return product.type === "vegetable"; }) console.log(filtered2); 12345678910

你可以试想一下结果输出什么

[{name: "cucumber", type: "vegetable"}, {name: "celery", type: "vegetable"}] 12

输出一个数组，里面包含两个type为vegetable的对象，很显然，另外两个type为fruit的对象没有被存进新数组

使用场景2： 有一个包含数值的数组，我们要得到一个新的数组，里面的值都大于10小于100

var arr = [1, 45, 75, 61, 434, 843, 14, 346]; var newarr = arr.filter(function(value) { return value > 10 && value < 100; }) console.log(newarr); 12345

四、every&some

every：数组中是否每个元素都满足指定的条件，如果返回是true some：数组中是否有元素满足指定的条件，如果是返回true 这么一说就很简单了吧。

我们首先来看看every方法，数组中的每一项都会执行给定的函数，如果数组中每一项执行该函数都返回为true，那么我们的结果就返回true，否则就返回false。 接下来我们来看看some方法，数组中的每一项都会执行给定的函数，只要有一项为true，那么结果就是true。 下面这个例子，当我们设置item > 5 时，第二项就符合，我们直接返回true。 注意：some方法会在数组中任一项执行函数返回true最后，不在进行循环 一言以蔽之：Some: 一真即真；Every: 一假即假

以下为ES6方法

五、reduce：将数组合成一个值

reduce()方法接受一个方法作为作为累加器，数组中的每个值(从左往右)开始合并，最终为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue) function(total, currentValue, currentIndex, arr)必需。用于执行每个数组元素的函数。 initialValue可选。传递给函数的初始值，如果缺省，初始值为数组的第一项，从数组的第一个项开始叠加，缺省参数要比正常传值少一次运算。 123

使用场景：计算数组中所有值的总和

var numbers = [54, 45, 74, 31]; var sum = numbers.reduce(function(total, num) { console.log(total); // 54 99 173 return total + num }) console.log(sum); //204 123456

具体我们来看看这个代码，我们可以看到total就是数组每两项的和。比如第一个是54，第二个就是54 45 = 99，以此类推。最后，我们把结果返回给了sum，那sum自然就是数组的每一项之和。这是没有设置第二个参数的情况。

我们可以看出，当设置了第二个参数。我们第一个prev输出的结果就是第二个参数的值。设置了这个参数，会多执行一次。

顾名思义，reduceRight()就是从右到左，就不详细说了。

六、find：该方法主要应用于查找第一个符合条件的数组元素

它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找到第一个返回值为true的成员 ，然后返回该成员。如果没有找到符合条件的成员，则返回undefined。

var ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }] var newarr = ary.find(function(item, index) { return item.id == 1 }) console.log(newarr); //{id: 1, name: "张三"} 1234567891011

会返回{id: 1, name: “张三”}

七、from：将伪数组转化成一个真正的数组

from里面添加一个伪数组，方法的返回值就是一个真正的数组 这个方法还可以接收第二个参数，作用类似于map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。