资讯专栏INFORMATION COLUMN

js之灵活使用可遍历数组的API

sutaking / 1882人阅读

摘要:总结遍历数组的时候应该尽量使用这些,灵活运用可以让代码更加优雅,这种尽可能使用函数和链式调用的风格很接近函数式编程,可以提高代码质量。

js中有很多可以遍历数组的API,既然已经封装的这么好,为什么不在平常开发的时候使用,本文讲讲forEach、map、filter、some、every、reduce这些API的使用,并且和普通的for语句作对比。

我们以一个对象数组作为测试数据:

const testArr = [
    { id: 1, name: "张三", age: 18 }, 
    { id: 2, name: "李四", age: 24 }, 
    { id: 3, name: "王小二", age: 22 }
];
forEach

打印出所有对象的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吧!)

map

现在我们想得到所有对象的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]。

filter

有时候我们需要筛选出符合指定条件的元素,比如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 ]
map + filter

获取所有对象的某种属性,事先需要判断对象是否具有该属性,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); // [ "李四", "王小二" ]

还是很优雅。

some

有时候我们需要添加新对象但是某些属性不能重复,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
every

我们需要检测某个数组里的每个对象是否都具有某种属性,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替代。

reduce

计算[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,灵活运用可以让代码更加优雅,这种尽可能使用函数和链式调用的风格很接近函数式编程,可以提高代码质量。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92842.html

相关文章

  • 工作中常用es6+特性

    摘要:结合工作中使用情况,简单对进行一些复习总结,包括常用的语法,等,以及短时间内要上手需要重点学习的知识点不同工作环境可能有一些差别,主要参考链接是阮一峰的博客以及外文博客阮老师大部分文章是直接翻译的这个博客简介先说一下,是一个标准化组织,他们 结合工作中使用情况,简单对es6进行一些复习总结,包括常用的语法,api等,以及短时间内要上手需要重点学习的知识点(不同工作环境可能有一些差别),...

    xcold 评论0 收藏0
  • Vue.js 实践(2):实现多条件筛选、搜索、排序及分页表格功能

    摘要:基础布局的中主要为部分,分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后,提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部...

    Profeel 评论0 收藏0
  • Vue.js 实践(2):实现多条件筛选、搜索、排序及分页表格功能

    摘要:基础布局的中主要为部分,分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后,提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部...

    ChanceWong 评论0 收藏0
  • java集合和泛型知识点归纳1

    摘要:接口也是集合中的一员,但它与接口有所不同,接口与接口主要用于存储元素,而主要用于迭代访问即遍历中的元素,因此对象也被称为迭代器。迭代器的实现原理我们在之前案例已经完成了遍历集合的整个过程。 【Collection、泛型】 主要内容 Collection集合 迭代器 增强for 泛型 教学目标 [ ] 能够说出集合与数组的区别 [ ] 说出Collection集合的常用功能 [ ]...

    daryl 评论0 收藏0
  • C++vector:灵活数组

    摘要:走近可以肤浅地理解成为灵活的数组,我们在定义数组的时候,是要确定数组的大小的。在内部,向量使用一个动态分配的数组来存储它们的元素。当插入新元素时,为了增加数组的大小,可能需要重新分配数组,这意味着分配一个新数组并将所有元素移动到该数组中。 ...

    mj 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<