js中有很多可以遍历数组的API，既然已经封装的这么好，为什么不在平常开发的时候使用，本文讲讲forEach、map、filter、some、every、reduce这些API的使用，并且和普通的for语句作对比。本文主要和大家分享js使用可遍历数组的API实例分享，希望能帮助到大家。
我们以一个对象数组作为测试数据：
const testArr = [ { id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ];
打印出所有对象的id，for语句写法如下：
for (let i = 0, len = testArr.length; i < len; i++) { console.log(testArr[i].id); // 1, 2, 3 }
简单易懂，接下来看看forEach的写法：
testArr.forEach(item => console.log(item.id)); // 1, 2, 3
两者结果是一样的，for语句是命令式编程风格，而forEach是声明式编程风格；前者会告诉机器该如何做，而后者只关注要做什么。我们推崇后一种写法，应该尽量使用forEach，这样我们还不需要写for()里面一大串的表达式，何乐而不为。（ps：如果对性能吹毛求疵的话，还是老老实实用for吧！）
现在我们想得到所有对象的name并组成新的数组，for语句写法如下：
let names = []; for (let i = 0, len = testArr.length; i < len; i++) { names.push(testArr[i].name); } console.log(names); // [ '张三', '李四', '王小二' ]
比较啰嗦，这种对原数组每个元素进行指定操作并最后返回新数组的问题用map再合适不过了：
testArr.map(item => item.name); // [ '张三', '李四', '王小二' ]
对比for语句，map是多么优雅啊！
关于map，有个需要注意的点：
[1, 2, 3].map(parseInt); // [ 1, NaN, NaN ]
这里有些同学会有些疑惑，为什么结果不是[1, 2, 3]呢？
其实很简单，map会将三个参数（当前正在遍历的元素，当前元素索引，原数组本身）传给parseInt，而parseInt是可以有两个参数的。
这时候就相当于执行以下代码：
parseInt(1, 0); // 1 parseInt(2, 1); // NaN parseInt(3, 2); // NaN
所以结果为[1, NaN, NaN]，而不是[1, 2, 3]。
有时候我们需要筛选出符合指定条件的元素，比如age大于18的对象，for的写法如下：
let newArr = []; for (let i = 0, len = testArr.length; i < len; i++) { if (testArr[i].age > 18) { newArr.push(testArr[i]); } } console.log(newArr); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]
可以看到，写法很啰嗦，此时用filter的话就很方便了：
testArr.filter(item => item.age > 18); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]
filter还可以用于数组去重，代码如下：
const arr2 = [1, 2, 4, 1, 3, 2, 6]; arr2.filter((item, idx, arr) => { return arr.indexOf(item) === idx; }); // [ 1, 2, 4, 3, 6 ]
获取所有对象的某种属性，事先需要判断对象是否具有该属性，for写起来有点丑陋：
function getAllOfSomeProps (array, props) { let arr = []; array.forEach((item) => { if (item[props]) { arr.push(item[props]); // => item[props] && arr.push(item[props]) } }) return arr; } getAllOfSomeProps(testArr, 'sex'); // [] getAllOfSomeProps(testArr, 'id'); // [ 1, 2, 3 ] getAllOfSomeProps(testArr, 'name'); // [ '张三', '李四', '王小二' ]
map + filter的组合就优雅的多了：
return array.map(item => item[props]).filter(item => item);
我们再举个比较通俗的例子，比如我们需要获得数组里所有age大于18的对象的name，for语句如下：
let newNames = []; for (let i = 0, len = testArr.length; i < len; i++) { if (testArr[i].age > 18) { newNames.push(testArr[i].name); } } console.log(newNames); // [ '李四', '王小二' ]
再看看 map + filter 的写法：
testArr.filter(item => item.age > 18).map(item => item.name); // [ '李四', '王小二' ]
还是很优雅。
有时候我们需要添加新对象但是某些属性不能重复，for的写法如下：
function isRepeat (array, props, value) { for (let i = 0, len = array.length; i < len; i++) { if (array[i][props] === value) { return true; } } return false; }
some方法测试数组中的某些元素是否通过指定函数的测试，改写如下：
function isRepeat (array, props, value) { return array.some(item => item[props] === value); } isRepeat(testArr, 'name', '张三'); // true isRepeat(testArr, 'name', '李白'); // false
我们需要检测某个数组里的每个对象是否都具有某种属性，for的写法如下：
function hasSomeProps (array, props) { for (let i = 0, len = array.length; i < len; i++) { if (!array[i][props]) { return false; } } return true; }
every方法测试数组的所有元素是否都通过了指定函数的测试。改写如下：
function hasSomeProps (array, props) { return array.every(item => item[props]); } hasSomeProps(testArr, 'name'); // true
有时需要在满足某条件下终止循环，比如打印对象信息，直到name为李四：
for使用break：
for (let i = 0, len = testArr.length; i < len; i++) { if (testArr[i].name === '李四') { break; } console.log(testArr[i]); // { id: 1, name: '张三', age: 18 } }
some，当条件为真时返回true跳出循环：
testArr.some((item) => { if (item.name === '李四') { return true; } console.log(item); // { id: 1, name: '张三', age: 18 } })
every，当条件为真时返回false跳出循环：
testArr.every((item) => { if (item.name === '李四') { return false; } console.log(item); // { id: 1, name: '张三', age: 18 } })
因为forEach是没有break的，这里我们可以使用some，every替代。
计算[343, 34, 232, 4, 343, 335, 353535]的总和，for的写法如下：
const arr = [343, 34, 232, 4, 343, 335, 353535]; let sum = 0; for (let i = 0, len = arr.length; i < len; i++) { sum += arr[i]; } console.log(sum); // 354826
使用reduce来做这种累加操作很方便：
arr.reduce((prev, curr) => prev + curr) // 354826
其实用法远不止如此，同学们在平常学习或者工作中可以慢慢积累。
总结：遍历数组的时候应该尽量使用这些API，灵活运用可以让代码更加优雅，这种尽可能使用函数和链式调用的风格很接近函数式编程，可以提高代码质量。
相关推荐：
以上是js使用可遍历数组的API实例分享的详细内容。更多信息请关注PHP中文网其他相关文章！
