javascript数组5个常用方法详解

这篇文章讲到数组的5个使用方法，目前我比较常用的有indexOf和forEach，其它则很少见，这些属性熟记于心能够给你平时的编码带来意想不到的方便，有点可惜的是在IE9以下都不支持这些方法，不过如果你是在移动端和现代浏览器上则不需要考虑这些兼容，另外微信小程序也支持这种写法。

在ES5中，一共有9个Array方法：

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

我将挑选5种方法，我个人认为是最有用的，很多开发者都会碰到。

1) indexOf

indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。

使用前：

var arr = ['aa', 'hi', 'hello'],
flag = false;

for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i] === 'hello') {
flag = true;
}
}

console.log("是否找到:", flag);

使用后：

var arr = ['aa', 'hi', 'hello'];

console.log("是否找到:", arr.indexOf("hello") != -1);

2) filter

该filter()方法创建一个新的匹配过滤条件的数组。

使用前：

var arr = [
{"name": "apple", "count": 2},
{"name": "orange", "count": 5},
{"name": "pear", "count": 6},
{"name": "orange", "count": 10}
];

var newArr = [];

for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i].name === "orange") {
newArr.push(arr[i]);
}
}

console.log("过滤结果:", newArr);

使用后：

var arr = [
{"name": "apple", "count": 2},
{"name": "orange", "count": 5},
{"name": "pear", "count": 6},
{"name": "orange", "count": 10}
];

var newArr = arr.filter(function (item) {
return item.name === "orange";
});

console.log("过滤结果:", newArr);

3) forEach()

forEach为每个元素执行对应的方法。

var arr = [1, 2, 3, 4];

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

console.log("====forEach是用来替换for循环的====");

arr.forEach(function (item, index) {
console.log(item);
});

4) map()

map()对数组的每个元素进行一定操作（映射）后，会返回一个新的数组。

使用前：

var oldArr = [{
name: "张三",
age: 16
},
{
name: "李四",
age: 18
}];

function getNewArr() {

var newArr = [];

for (var i = 0, len = oldArr.length; i < len; i++) {
var item = oldArr[i];
item.info = ["姓名:",item.name, "年龄:",item.age].join(" ");
newArr[i] = item;
}

return newArr;
}

console.log(getNewArr());

使用后：

var oldArr = [{
name: "张三",
age: 16
},
{
name: "李四",
age: 18
}];

function getNewArr() {
return oldArr.map(function (item, index) {
item.info = ["姓名:", item.name, "年龄:", item.age].join(" ");
return item;
});
}

var name = "张三";

function getNewArr2() {
return oldArr.map(item => ({
...item,
info: ["name:", item.name, "age:", item.age].join(" "),
status: name.indexOf(item.name) > -1
}));
}

console.log(getNewArr());
console.log(getNewArr2());

5) reduce()

reduce()可以实现一个累加器的功能，将数组的每个值（从左到右）将其降低到一个值。

场景： 统计数组中有多少重复数据

使用前：

var arr = ["apple", "orange", "apple"];

function getNewArr() {
var obj = {};

for (var i = 0, len = arr.length; i < len; i++) {
var item = arr[i];
obj[item] = (obj[item] + 1 ) || 1;
}

return obj;
}

console.log(getNewArr());

使用后：

var arr = ["apple", "orange", "apple"];

function getNewArr() {
return arr.reduce(function (prev, next) {
prev[next] = (prev[next] + 1) || 1;
return prev;
}, {});
}

console.log(getNewArr());

　　reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假设函数它有个传入参数，prev和next,index和array。prev和next你是必须要了解的。
　　
　　一般来讲prev是从数组中第一个元素开始的，next是第二个元素。但是当你传入初始值(initialValue)后，第一个prev将是initivalValue，next将是数组中的第一个元素。