JavaScript常用数组迭代方法

JavaScript 数组操作

原文: https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

forEach

  • callback回答: 给你一个值, 随便你对它做什么, 我不管
  • callback参数: item, index, list
  • 最终返回值: 啥也没有, undefined
  • 代码示例:
1
2
3
4
['zhang', 'zhen', 'qiang'].forEach((val, index, thisArg) => {
console.log(index, val);
console.log(thisArg);
});

map:

  • callback回答: here’s an item. what should i put in the new list in its place(翻译不好)?
  • callback 有这些参数: item, index, list
  • 最终的返回值: 新项的列表
  • 代码示例
    1
    2
    3
    4
    5
    6
    7
    const objects = [{ id: 'a', name: 'chengyaojin' }, { id: 'b', name: 'zhangjunhui' }, { id: 'c', name: 'zhangzhenqiang' }];
    const res = objects.map((item, index, list) => {
    item['ctime'] = Date.now();
    return item;
    });

    console.log(res);

filter:

  • callback是个谓词 - 应该返回真值或假值
  • callback回答: 我应该保留这个值吗?
  • callback有这些参数: item, index, list
  • 最终返回值: 保留下来的值
  • 代码示例:
1
2
3
4
5
6
const ints = [1, 2];
const events = ints.filter(item => {
return item % 2 === 0;
});

console.log(ints === events, events);

reduce:

  • callback 回答(answers): 这是前一次迭代的返回结果,我应该继续下去吗?
  • callback的参数: result, item, index, list
  • 最后的返回结果:上一次的迭代结果
  • 代码示例:
1
2
3
4
5
6
7
8

// 注意:`reduce`和`reduceRight`在`callback`参数后都一个可选的`initalValue`参数,
// 如果忽略不填,则默认是第一项的值
const sum = [1, 2, 3].reduce((result, item) => {
return result += item;
}, 0);

console.log(sum);

reduceRight: 和reduce相同,只不过遍历的方向是相反的方向

some:

  • callback是个谓词(predicate) - 应该返回真值或假值
  • callback回答(answers): 这个值满足需求吗?
  • callback的参数: item, index, list
  • 最终返回值: 如果找到满足需求的值则返回true,否则返回false
  • 注意: 如果callback返回true则会停止迭代
  • 代码示例:
1
2
3
4
5
const hasNegativeNumbers = [1, 2, 3, -1, 4].some((item, index) => {
return item < 0;
});

console.log(hasNegativeNumbers);

every:

  • callback 是个谓词 - 返回真值(truthy)或假值(falsy)
  • callback回答(answers): 这个值满足需求吗?
  • callback的参数: item, index, list
  • 最终返回值: 如果找到满足需求的值则返回true,否则返回false
  • 注意: 如果callback返回false则会停止迭代
  • 代码示例:
1
2
3
4
5
const allPositiveNumbers = [1, 2, 3, -1, 4].every((item, index) => {
return item > 0;
});

console.log(allPositiveNumbers);

find:

  • callback 是个谓词 - 返回真值(truthy)或假值(falsy)
  • callback 回答:这是你要找的值吗?
  • callback的参数: item, index, list
  • 最终返回值:如果能找到,则返回该项,否则返回undefined
  • 注意: 一旦callback函数返回真值,迭代就会停止
  • 代码示例:
1
2
3
4
5
6
const objects = [{ id: 'a', name: 'chengyaojin' }, { id: 'b', name: 'zhangjunhui' }, { id: 'c', name: 'zhangzhenqiang' }];
const res = objects.find((item, index, list) => {
return item.id === 'c';
});

console.log(res);

findIndex:

  • callback 是个谓词 - 返回真值(truthy)或假值(falsy)
  • callback 回答:这是你要找的值吗?
  • callback的参数: item, index, list
  • 最终返回值:如果能找到,则返回该项的索引,否则返回-1
  • 注意: 一旦callback函数返回真值,迭代就会停止
  • 代码示例:
1
2
3
4
5
6
const objects = [{ id: 'a', name: 'chengyaojin' }, { id: 'b', name: 'zhangjunhui' }, { id: 'c', name: 'zhangzhenqiang' }];
const res = objects.findIndex((item, index, list) => {
return item.id === 'c';
});

console.log(res);