es6给数组新增了find函数后,程序员需要快速了解它的实战处理

ES6为数组新增了一个方法-find。用来查找目标元素,找到就返回该元素,找不到返回undefined。

了解它的实战用法及写法,两分钟足够了。

一、之前的处理方式

之前,在你的项目中,你肯定像下面这样处理过问题:

如上这个结构,我们想自己编写一个find函数,来通过一个参数(这个参数可能是一个类型type,也可能是名字name),来找到对应其对应的信息。最常用的, 也是我现在能想到的最简洁的处理方式是使用一个for来遍历,如下代码所示:

上面这个循环很好理解,然后,我们类型于下面这样来使用它:

console.log(findDog('Tommy'))

输出结果:

二、用find处理

现在ES6给我们提供了一个find函数,上面这个事情就变的简单多了。如下代码所示:

console.log(pet)

输出结果:

三、找的只是第一个符合条件的

我将要查找的数据改一下,如下所示:

可以注意到这个数组中有两个name=Tommy的动物,一个是Cat,一个Dog。如果只通过name属性用for循环来写,返回的是Dog,这个好理解。

我们用find来处理,如下代码:

console.log(pet)

输出结果:

所以要记住:find()方法用于找出第一个符合条件的数组成员。

四、find写法可以更简洁

因为ES6有一个隐式返回值的概念,所以上面这段find函数的代码也可以简写成下面这样子:

注意到,少了一个return和{}。默认返回。

最后总结一下:

ES6也提供了一个findIndex()方法,与find()类似,返回第一个符合条件的数组成员的位置,如果所有的成员都不符合条件,就返回-1。可以关注一下。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180429A1CNWR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券