对象数组循环的方法总结（js）

• 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()方法详解及高级技巧