- map()
let array = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
let temp = array.map(item => {
return item.age>30;
});
console.log(temp);// [false, false, true, true]
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}
map 遍历数组, 会返回一个新数组,
新数组中的项由我们自己选择,
通常用于删选id,
不会改变原来数组里的内容
- filter()
let array = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
let temp = array.filter(item => {
return item.age>30;
});
console.log(temp);
// 0: {name: "王五", age: 32}
// 1: {name: "赵六", age: 42}
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}
filter 会过滤掉数组中不满足条件的元素,
把满足条件的元素放到一个新数组中,
不改变原数组
- foreach()
let array = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
array.forEach(item=> {
console.log(item);
});
let array1 = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
array1.forEach(item=> {
item.age = item.age+1
});
console.log(array1);
forEach会遍历数组,
没有返回值,
不允许在循环体内写return,
原则上:不推荐改变原数组,但是可以操作
forEach()也可以循环对象
在项目中一般很少使用
- every()
let array = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
let temp = array.every(item => {
return item.age>30;
});
console.log(temp);
// false
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}
every遍历数组,
每一项都是true, 则返回true,
只要有一个是false, 就返回false
示例:上传文件的数组,当再次上传时判断上传的文件是否已经存在
- some()
let array = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
let temp = array.some(item => {
return item.age>30;
});
console.log(temp);
// true
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}
遍历数组的每一项,
有一个返回true,
就停止循环
- reduce()
// 高级用法1: 对象里的属性求和
let array = [
{name:'张三', age:12},
{name:'李四', age:22},
{name:'王五', age:32},
{name:'赵六', age:42}];
let temp = array.reduce((num,item)=> {
return item.age + num
// num初始值0 接收每次返回值
},0);
console.log(temp);
// 108 年龄总和
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}
// 高级用法2:将二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
// pre接收每一次return cur为arr的每一项
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
// 高级用法3:将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
// 高级用法4:数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
// 高级用法5:计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
用于对数组中的所有元素调用指定的回调函数,
该回调函数的返回值为累积结果,
并且此返回值在下一次调用该回调函数时作为参数提供
示例:file上传文件大小不能超过4M可以使用reduce() 对file对象里的size属性求和
文献参考:
JS数组reduce()方法详解及高级技巧