赶紧阅读读此文,我保证,在过去的几个月里我,我确定我在数组问题上犯过4次错误。于是我写下这篇文章,阅读这篇文章可以让你更准确的使用javascript数组的一些方法

使用Array.includes替代 Array.indexOf

“如果你在数组中搜索某个元素,那么请使用Array.indexOf” ,我记得在学习javascript时看到过这个句子,毫无疑问,这句话很对。

MDN文档上这样描述 rray.indexOf“返回第一个被搜索到的元素的下标(索引)” ,所以如果你想要搜索某个元素的下标,那么Array.indexOf可以很好的解决。

但是,如果我们想查看一个数组中是否包涵某个元素该如何做呢。就像yes/no这样的问题,也就是布尔值。这里我们推荐使用返回布尔值的Array.includes方法。

const persons = ["jay","leinov","jj","nico"];

console.log(persons.indexOf("leinov"));
// 1 console.log(persons.indexOf("beyond"));
// -1 console.log(persons.includes("leinov"));
// true console.log(persons.includes("beyond"));
// false

使用Array.find代替Array.filter

Array.filter是一个非常有用的方法,它通过一个数组的回调参数创建一个新的数组,正如他的名字所示,我们使用它过滤出一个更短的数组

但是 如果我们明确的知道回调函数返回的只是数组中的一项,这样的话我不推荐使用他,例如,当使用的回调参数过滤的是一个唯一的id,这种情况,Array.filter返回一个新的包涵这一项的数组。寻找一个特殊的id,我们目的只想取一项出来,这个返回的数组就是无用的。

接下来我们看下性能,为了返回能够匹配回调函数的每一项,Array.filter必须检索整个数组,此外让我们想象下,我们有数百个项满足我们的回调参数函数,我们过滤的数组就非常大了。

为了避免这种情况,我推荐Array.find ,他同Array.filter一样需要一个回调函数参数,并且返回第一个能够满足回调函数参数的那一项。并且Array.find 在满足筛选后停止筛选,不会检索整个数组。

use strict';

const singers = [
{ id: 1, name: '周杰伦' },
{ id: 2, name: '李建' },
{ id: 3, name: '庾澄庆' },
{ id: 4, name: '谢霆锋' },
{ id: 5, name: '周杰伦' },
]; function getSinger(name) {
return signer => signer.name === name;
} console.log(singers.filter(getSinger('周杰伦')));
// [
// { id: 1, name: '周杰伦' },
// { id: 5, name: '周杰伦' },
// ] console.log(characters.find(getSinger('周杰伦')));
// { id: 1, name: '周杰伦' }

使用Array.some代替Array.find

我承认经常在这上面犯错,然后,我的一个好朋友提醒我看下MDN文档去寻找一个更好的方式解决,这点跟上面的Array.indexOf/Array.includes很相似

在前面提到 Array.find 需要一个回调函数作为参数来返回一个满足的元素。如果我们需要知道数组是否包涵某个值时,Array.find是最好的方式吗。或许不是,因为返回的是一个值,不是一个布尔值。

在这种情况下,我推荐使用Array.some,它返回的是一个是否满足回调参数的布尔值

'use strict';

const characters = [
{ id: 1, name: 'ironman', env: 'marvel' },
{ id: 2, name: 'black_widow', env: 'marvel' },
{ id: 3, name: 'wonder_woman', env: 'dc_comics' },
]; function hasCharacterFrom(env) {
return character => character.env === env;
} console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' } console.log(characters.some(hasCharacterFrom('marvel')));
// true

使用Array.reduce 代替 Array.filter and Array.map

让我们来看看Array.reduce,Array.reduce并不太好理解,但是如果我们执行Array.filter,Array.map感觉我们好像错过了什么。

我的意思是,我们检索了数组两次,第一次过滤和创建了一个短的数组,第二次创建了一个新的包涵我们过滤获取到的数组。为了获取结果我们使用了两个数组方法,每个方法都有一个回调函数和一个数组,其中一个Array.filter创建的我们之后是用不到的。

为了避免这个性能的问题,我建议使用Array.reduce来代替。相同的结果,更好的代码。Aaray.reduce允你筛选和添加满足的项目到累加器中。例如,这个累加器可以是一个数字增量,一个要填充的对象,一个字符串或一个数组。

在我们之前的例子中,我们一直在使用Array.map,所以我建议使用Array.reduce来使用累加器来连接数组。在下面的示例中,根据env的值,我们将将其添加到累加器中,或者将此累加器保留为原来的值。

'use strict';

const characters = [
{ name: 'ironman', env: 'marvel' },
{ name: 'black_widow', env: 'marvel' },
{ name: 'wonder_woman', env: 'dc_comics' },
]; console.log(
characters
.filter(character => character.env === 'marvel')
.map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ] console.log(
characters
.reduce((acc, character) => {
return character.env === 'marvel'
? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
: acc;
}, [])
)
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]

原文:Here’s how you can make better use of JavaScript arrays

如有哪里翻译错误请指正 3Q

【译】如何更好的使用javascript数组的更多相关文章

  1. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  2. Javascript数组方法(译)

    在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...

  3. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  4. Javascript数组操作(转)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  5. 也谈面试必备问题之 JavaScript 数组去重

    Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  6. 什么才是正确的javascript数组检测方式

    前面的话 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof 首先,使用最常用的类型检测工具——typeof ...

  7. javascript数组对象排序

    javascript数组对象排序 JavaScript数组内置排序函数 javascript内置的sort函数是多种排序算法的集合 JavaScript实现多维数组.对象数组排序,其实用的就是原生的s ...

  8. javascript数组浅谈2

    上次说了数组元素的增删,的这次说说数组的一些操作方法 join()方法: ,,] arr.join("_") //1_2_3 join方法会返回一个由数组中每个值的字符串形式拼接而 ...

  9. 第七章:Javascript数组

    数组是值的有序结合.每个值叫做一个元素,而每个元素在数组中都有一个位置,用数字表示,称为索引. javascript数组是无类型的:数组的元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类 ...

随机推荐

  1. E - Evaluate Matrix Sum

    Description Given a matrix, the elements of which are all integer number from 0 to 50, you are requi ...

  2. 代码面试集锦 2 - Google

    Given the root to a binary tree, implement serialize(root), which serializes the tree into a string, ...

  3. MySQL 5.7并发复制和mysqldump相互阻塞引起的复制延迟

    本来MySQL BINLOG和mysqldump命令属于八竿子打不着的两个事物,但在最近故障排查中,发现主库和从库已经存在很严重的复制延迟,但从库上显示slave_behind_master值为0,复 ...

  4. Asp .Net core 2 学习笔记(1) —— Starup

    这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...

  5. [NOI2017]蔬菜(贪心)

    神仙题啊! 早上开了两个多小时,终于肝出来了,真香 我们考虑从第 \(10^5\) 天开始递推,先生成 \(p=10^5\) 的解,然后逐步推出 \(p-1,...,2,1\) 的解. 那怎么推出 \ ...

  6. 18_python_类关系

    一.类与类之间的关系          1.依赖关系 class Elephant: def __init__(self, name): self.name = name def open(self, ...

  7. linux shell实现批量关闭局域网中主机端口

    假设局域网中有多台主机,只能开通ssh服务(端口22),如果发现其他服务打开,则全部关闭.通过运行一个shell脚本,完成以上功能.在实际运维中,可以通过puppet等工具更快更好的完成这个功能,所以 ...

  8. 读配置文件property文件

    import java.io.IOException;import java.util.Properties; import org.springframework.core.io.support.P ...

  9. 使用python及工具包进行简单的验证码识别

    相信大家利用 Python 写的爬虫应该遇到过要输入验证码的尴尬局面,又或者写了个自动填充表单的小程序,结果就卡在了验证码上. 在ctf中有⼀一些题⽬目,本身有弱验证码识别绕过,那么我们怎么解决呢? ...

  10. MyBatis全局配置文件标签详解

    一.全局配置文件结构 configuration 配置 properties 属性:可以加载properties配置文件的信息 settings 设置:可以设置mybatis的全局属性 typeAli ...