【JavaScript】高阶数组实例方法 (ES5)

forEach

arr.forEach(callback[, thisObj]) 用于遍历数组：

1. callback：(item, index, arr) => undefined
item-当前元素、index-当前下标、arr-当前数组
2. thisObj：callback 的 this 指向（箭头函数不生效 thisObj 配置项）

• 返回值：undefined

const arr = ['a', 'b', 'c'];
const result = arr.forEach(function (item, index, arr) {
    console.log(item, index, arr);
    return item; // 这里的 return 语句相当于没写
});
console.log(result); // undefined

通过参数 thisObj 可以设置回调函数的 this 指向：

const arr = ['a', 'b', 'c'];
arr.forEach(function () {
    console.log(this); // 此时 this 指向 [ 'a', 'b', 'c' ]
}, arr);

使用箭头函数作为回调函数时，即使配置了 thisObj 参数，也不会生效：

const arr = ['a', 'b', 'c', 'd'];
arr.forEach(() => {
    console.log(this); // this 取父级的 this
}, arr);

map

arr.map(callback[, thisObj]) 可基于原数组 获取新数组：

1. callback：(item, index, arr) => newItem
item-当前元素、index-当前下标、arr-当前数组
2. thisObj：callback 的 this 指向（箭头函数不生效 thisObj 配置项）

• 返回值：callback 的返回值组成的新数组

const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr); // [ 2, 4, 6 ]

如果回调函数 callback 没有 return 语句，则 map 返回长度为 arr.length、且数据项全为 undefined 的新数组：

const arr = [1, 2, 3];
const newArr = arr.map(() => {}); // 回调函数没有返回值
console.log(newArr); // [undefined, undefined, undefined]

作用 ①：浅拷贝数组

const arr = [1, 2, 3, , 4]; // map 会将空位记为 empty
const newArr = arr.map(item => item); // 复制数组
console.log(newArr); // [1, 2, 3, empty, 4]

注意：这种拷贝方法只是浅拷贝

const arr = [
    { title: 'aa', read: 100 },
    { title: 'bb', read: 10 },
];
const newArr = arr.map(item => item);
newArr[0].read = 300;
console.log(arr[0].read); // 300

作用 ②：调整数据结构

const arr = [
    { title: 'aa', read: 100 },
    { title: 'bb', read: 20 },
];
console.log(arr); // [ { title: 'aa', read: 100 }, { title: 'bb', read: 20 } ]

const newArr = arr.map(item => {
    const obj = {}; // 创建空对象
    obj.shop = `名称：${item.title}`;
    obj.price = `￥${item.read}元`;
    return obj;
});

console.log(newArr);
// [ { shop: '名称：aa', price: '￥100元' }, { shop: '名称：bb', price: '￥20元' } ]

filter

filter(callback[, thisObj]) 用于过滤数组：

1. callback：(item, index, arr) => boolean
item-当前元素、index-当前下标、arr-当前数组
2. thisObj：callback 的 this 指向（箭头函数不生效 thisObj 配置项）

• 返回值：callback 返回 true 的对应 item 组成的新数组

作用 ①：浅拷贝数组

const arr = [1, 2, 3];
const newArr = arr.filter(() => true);
console.log('newArr', newArr); // newArr [1, 2, 3]

注意：这里也是浅拷贝

作用 ②：数组去重

const arr = [2, 1, 3, 5, 2, 3, 1];
const newArr = arr.filter((item, index) => arr.indexOf(item) == index);
console.log('newArr', newArr); // newArr [2, 1, 3, 5]

some & every

arr.some(callback[, thisObj]) & arr.every(callback[, thisObj]) 用于检查数组：

1. callback：(item, index, arr) => boolean
item-当前元素、index-当前下标、arr-当前数组
2. thisObj：callback 的 this 指向（箭头函数不生效 thisObj 配置项）

• 返回值：boolean
  • some：有一个 callback 返回 true，则返回 true；否则返回 false
  • every：所有 callback 都返回 true，才返回 true；否则返回 false

作用 ①：查看数组是否含有指定值

const arr = ['a', 'b', 'c', 'd'];
const result = arr.some(item => item == 'c'); // 只要有一个 item == "c" 则返回 true
console.log(result); // true

作用 ②：查看数组所有数据项是否都满足指定条件

// 判断数组里面是否都为奇数
const arr = [1, 3, 7, 9, 5];
const result = arr.every(item => item % 2 == 1);
console.log(result); // true

reduce & reduceRight

arr.reduce(callback[, firstPrev]) & arr.reduceRight(callback[, firstPrev]) 一般用作统计数据：

1. callback：(prev, item, index, arr) => xxx
prev-上一个回调函数的返回值、item-当前元素、index-当前索引、arr-当前数组
2. firstPrev：用于设置第 1 个 prev 值

• reduce 从左往右遍历；reduceRight 从右往左遍历
• 返回值：最后一个 callback 的返回值

作用 ①：累加运算

如果不设置 firstPrev，则第一个 prev 为数组的第 1 项、第一个 item 为数组的第 2 项：

const arr = [1, 2, 3];
const result = arr.reduce((prev, cur, index, arr) => {
    console.log('prev:' + prev, 'cur:' + cur, 'index:' + index, 'arr:' + arr);
    // prev:1 cur:2 index:1 arr:1,2,3
    // prev:3 cur:3 index:2 arr:1,2,3
    return prev + cur;
});
console.log('result', result);
// result 6

可以通过参数 firstPrev 设置第 1 个 prev 值。此时第一个 item 为数组的第 1 项：

const result = arr.reduce((prev, cur, index, arr) => {
    console.log('prev:' + prev, 'cur:' + cur, 'index:' + index, 'arr:' + arr);
    // prev:0 cur:1 index:0 arr:1,2,3
    // prev:1 cur:2 index:1 arr:1,2,3
    // prev:3 cur:3 index:2 arr:1,2,3
    return prev + cur;
}, 0); // 设置参数 firstPrev 为 0
console.log('result', result);
// result 6

作用 ②：数组去重

const arr = [1, 2, 2, 3, 3];
const res = arr.reduce((prev, cur) => {
    if (!prev.includes(cur)) {
        prev.push(cur); // 将值 push 到新数组中
    }
    return prev;
}, []);
console.log('res', res); // res [1, 2, 3]

相关知识：

1. 【JavaScript】数组简介
2. 【JavaScript】数组实例方法 (ES5)
3. 【JavaScript】数组方法 (ES6)