ES5常见的数组方法：forEach ，map ，filter

关于forEach

forEach()方法需要一个回调函数（这种函数，是由我们创建但是不由我们调用的）作为参数
回调函数中传递三个参数：
第一个参数，就是当前正在遍历的元素
第二个参数，就是当前正在遍历的元素的索引
第三个参数，就是正在遍历的数组
缺点： 不能使用break和continue

let myArr = ['王一', '王二', '王三'];

myArr.forEach((item, index, arr) => {
    console.log('item:' + item);
    console.log('index:' + index);
    console.log('arr:' + JSON.stringify(arr));
});

结果：

item:王一
index:0
arr:["王一","王二","王三"]
----------
item:王二
index:1
arr:["王一","王二","王三"]
----------
item:王三
index:2
arr:["王一","王二","王三"]
----------

注意：forEach() 没有返回值。也可以理解成：forEach() 的返回值是 undefined

即 let tempArry = myArr.forEach() 这种方式接收是没有意义的

forEach() 能不能改变原数组？

1. 数组的元素是基本数据类型：（无法改变原数组）

let numArr = [1, 2, 3];

numArr.forEach((item) => {
    item = item * 2;
});
console.log(numArr); // 打印结果：[1, 2, 3]

2. 数组的元素是引用数据类型：（直接修改整个元素对象时，无法改变原数组）

let objArr = [
    { name: '云牧', age: 20 },
    { name: '许嵩', age: 30 },
];

objArr.forEach((item) => {
    item = {
        name: '邓紫棋',
        age: '29',
    };
});
console.log(JSON.stringify(objArr)); 
// 打印结果：[{"name": "云牧","age": 20},{"name": "许嵩","age": 30}]

3. 数组的元素是引用数据类型：（修改元素对象里的某个属性时，可以改变原数组）

let objArr = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 30 },
];

objArr.forEach((item) => {
    item.name = '邓紫棋';
});
console.log(JSON.stringify(objArr));
// 打印结果：[{"name":"邓紫棋","age":28},{"name":"邓紫棋","age":30}]

如果你需要通过 forEach 修改原数组，建议用 forEach 里面的参数 2 和参数 3 来做

forEach() 通过参数 2、参数 3 修改原数组：（标准做法）

// 1、数组的元素是基本数据类型
let numArr = [1, 2, 3];

numArr.forEach((item, index, arr) => {
    arr[index] = arr[index] * 2;
});
console.log(JSON.stringify(numArr)); // 打印结果：[2, 4, 6]

// 2、数组的元素是引用数据类型时，直接修改对象
let objArr = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 34 },
];

objArr.forEach((item, index, arr) => {
    arr[index] = {
        name: '小明',
        age: '10',
    };
});
console.log(JSON.stringify(objArr)); 
// 打印结果：[{"name":"小明","age":"10"},{"name":"小明","age":"10"}]

// 3、数组的元素是引用数据类型时，修改对象的某个属性
let objArr2 = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 34 },
];

objArr2.forEach((item, index, arr) => {
    arr[index].name = '小明';
});
console.log(JSON.stringify(objArr2)); 
// 打印结果：[{"name":"小明","age":28},{"name":"小明","age":34}]

map映射

遍历数据并返回一个新的数组，对数据的处理会返回原先对应的位置

let newData = data.list.map((item, index) => {
  return {
    id: item.id,
    title: item.title,
    price: item.price * 0.6
  }
})
console.log(newData);

let newData = data.list.map((item, index) => {
  let {id,title,price} = item;
  return {id,title,price: price * 0.6}
})
console.log(newData);

filter

返回符合条件的记录
return true,则把当前记录存入新数组，否则不存

let newData = data.list.filter((item, index) => {
  return item.price > 400
})
console.log(newData);

some

如果有符合条件的记录，则返回真，否则返回假

let newData = data.list.some((item, index) => {
  console.log(index);
  return item.price == 400
})
console.log(newData);

every

如果每一个都符合条件，则返回真，否则返回假

let newData = data.list.every((item, index) => {
  console.log(index);
  return item.price > 600
})
console.log(newData);

reduce

常用来实现累加

// let arr = [300, 600, 200, 100]
// 首次调用时,sum是第一个元素，val是第二个元素，index是1
// 再次调用时，sum是上一次return的结果，val依次是下一个元素
let result = arr.reduce((sum, val, index) => {
  // console.log(sum, val, index);
  return sum + val;
})
console.log(result);

// 第二个参数是sum的初值， 则第一次调用 时， val是第一个元素
let result = data.list.reduce((sum, val, index) => {
  return sum + val.price;
}, 0)
console.log(result);