本节主要讲解数组的方法
- forEach
- map
- filter
- find
- every
- some
- reduce
先说原始的方法
var arr = [1,2,3,4,5];
for(var i=0;i<arr.length;i++)
{
console.log(arr[i]);
}
ES6的方法
(1)forEach方法
//第一种写法:
let arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item, index) => {
console.log(item + "||" + index);
})
//第二种写法:
let arr = [1, 2, 3, 4, 5, 6];
function abc(item, index) {
console.log(item + "||" + index);
}
arr.forEach(abc);
(2)map方法
- 有map必有return否则和foreach一样,因为map有返回值,要是不写新的数组存的就是undefined
map 第一种写法
let arr = [1, 2, 3, 4, 5, 6];
function abc(item, index) {
return item + 1;
}
let arr1 = arr.map(abc);
console.log(arr1);
map第二种写法
let arr2 = [3, 4, 5, 6, 7];
let arr3 = arr2.map((item, index) => {
return item * 2;
})
console.log(arr3);
map第三种写法
let arr4 = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" },
{ id: 3, age: 15, name: "嘿嘿", sex: "女" },
{ id: 4, age: 11, name: "啪啪", sex: "男" },
];
let arr5 = arr4.map((item, index) => {
return item.name;
})
console.log(arr5);
(3)filter过滤器
- filter必有return
//场景一
//假定有一个对象数组(A)获取数组中指令类型的对象放到数组B中
let arr = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" },
{ id: 3, age: 15, name: "嘿嘿", sex: "女" },
{ id: 4, age: 11, name: "啪啪", sex: "男" },
];
let arr2 = arr.filter((content, index) => {
return content.sex == "男"
})
console.log(arr2);
//场景 二
//假定有一个数组(A)过滤掉不满足一下条件的。
//条件:性别男,并且年龄大于20的
let arr = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" },
{ id: 3, age: 15, name: "嘿嘿", sex: "女" },
{ id: 4, age: 11, name: "啪啪", sex: "男" },
];
let arr3 = arr.filter((item, index) => {
return item.sex === "男" && item.age > 20
})
console.log(arr3);
//场景三
//假定两个数组(a,b)根据A中id值,过滤掉B数组中不符合的数据
let arr = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" }
];
let arr2 = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" },
{ id: 3, age: 15, name: "嘿嘿2", sex: "女" },
{ id: 4, age: 11, name: "啪啪2", sex: "男" },
];
function filter(arr, arr2) {
let result = [];
arr2.filter((content, index) => {
result.push(arr.filter((item, index2) => {
return item.age == content.age && item.name == content.name;
})[0]);
})
let result2 = result.filter((item, index) => {
return item
})
return result2;
}
console.log(filter(arr, arr2));
//场景四
//去掉undefined
let arr4 = [1, 2, 3, undefined, undefined];
let arr3 = arr4.filter((content, index) => {
return content;
})
console.log(arr3);
无论是map还是filter他返回的都是一个新的数组
(4) find 找到符合条件的
find必有return并且他找到以后就不会往下执行了,也就是说要是有2个符合条件的,他只能找到第一个,返回的不是数组
/*假定有一个对象数组A找到符合条件的对象*/
let arr2 = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" },
{ id: 3, age: 15, name: "嘿嘿2", sex: "女" },
{ id: 4, age: 23, name: "啪啪2", sex: "男" },
];
let arr3 = arr2.find((item, index) => {
return item.age == 23;
})
console.log(arr3); // { id: 1, age: 23, name: "哈哈", sex: "男" }, 符合的第二个就找不到
/*场景2有一个对象数组A,根据指定对象的条件找到数组中符合条件的对象*/
/*假定有一个对象数组A找到符合条件的对象*/
let arr2 = [
{ id: 1, age: 23, name: "哈哈", sex: "男" },
{ id: 2, age: 20, name: "呵呵", sex: "女" },
{ id: 3, age: 15, name: "嘿嘿2", sex: "女" },
{ id: 4, age: 23, name: "啪啪2", sex: "男" },
];
let arr = { id: 1, title: "Node.js" }
let arr3 = arr2.find((item, index) => {
return arr.id == item.id;
})
console.log(arr3);
every和some
- every和some返回就是布尔值
- every指的是每一项都要求符合条件就是逻辑与&&一假都假
- some 指的是有一个符合就可以了||一真都真
let computers = [
{ "name": "APPLE", ram: 16 },
{ "name": "IBM", ram: 4 },
{ "name": "Acer", ram: 32 }
];
let state = true;
let somestate = false;
let every = computers.every(function(item, index) {
return item.ram > 2;
})
console.log(every);
(5) reduce 一般求综合的时候使用 2个参数,前面第一个是回调函数,第二个是all的初始值。回调函数的参数也不一样。第一个是合集,第二个是每一个分项。reduce必须有return
比如:
/*场景一*/
/*计算数组中所有值得和*/
let arr = [1, 2, 3];
let b = arr.reduce(function(all, item) {
return all + item;
}, 0);
console.log(b);
//老办法
let a = 0;
arr.forEach(function(item, index) {
a += item;
})
console.log(a);
再比如:
/*场景二*/
/*假将数组中某个属性抽离到另外的数组中*/
let a2 = [
{ color: "red", id: 1 },
{ color: "blue", id: 2 },
{ color: "yellow", id: 3 },
{ color: "green", id: 4 }
];
let b3 = a2.reduce(function(all2, item) {
all2.push(item.color);
return all2;
}, []);
console.log(b3);
网友评论