这篇文章讲到数组的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将是数组中的第一个元素。