赶紧阅读读此文,我保证,在过去的几个月里我,我确定我在数组问题上犯过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. spring中的两个数据库事务DataSourceTransactionManager 和 JtaTransactionManager区别

    在spring与数据框架(mybatis或hibernate)容器的配置文件中通常会有 <!-- (事务管理)transaction manager, use JtaTransactionMan ...

  2. day03_雷神_文件操作

    day03 上周回顾_问题总结: 地址值: li = [] name = ['name','price','count'] dic = {} #如果这里定义空列表,后边的dic[name[i]] = ...

  3. cmd如何进入d盘

    首先打开CMD 点开始 运行输入 CMD 在CMD窗口中输入 CD\(就是返回根目录) 回车 在输入 D: 即可在D盘操作状态

  4. Android-HttpClient-Get请求获取网络图片设置壁纸

    第一种方式使用httpclient-*.jar (需要在网上去下载httpclient-*.jar包) 把httpclient-4.5.jar/httpclient-4.4.1.jar包放入到libs ...

  5. 搭建一台deeplearning的服务器

    在计算机时代的早期,一名极客的满足感很大程度上来源于能DIY一台机器.到了深度学习的时代,前面那句话仍然是对的. 缘起在2013年,MIT科技评论将深度学习列为当年十大科技突破之首.其原因在于,模型有 ...

  6. ubuntu下sqlite命令

    介绍 Linux上的小巧的数据库,一个文件就是一个数据库. 安装Sqlite3 要安装 Sqlite3,可以在终端提示符后运行下列命令: sudo apt-get install sqlite3 检查 ...

  7. 【BZOJ1052】 [HAOI2007]覆盖问题

    BZOJ1052 [HAOI2007]覆盖问题 前言 小清新思维题. 最近肯定需要一些思维题挽救我这种碰到题目只会模板的菜鸡. 这题腾空出世? Solution 考虑一下我们二分答案怎么做? 首先转换 ...

  8. vue.js - 1

    最近开发公司vue前端项目,做一下笔记,偶尔上来查漏补缺 Vue指令之v-bind的三种用法 直接使用指令v-bind 使用简化指令: 在绑定的时候,拼接绑定内容::title="btnTi ...

  9. Android自定义组合控件详细示例 (附完整源码)

    在我们平时的Android开发中,有时候原生的控件无法满足我们的需求,或者经常用到几个控件组合在一起来使用.这个时候,我们就可以根据自己的需求创建自定义的控件了,一般通过继承View或其子类来实现. ...

  10. UICollectionView设置首个cell默认选中

    设置UICollectionView中某个cell的默认选中,刚开始为追求性能,采用同一个cellId去标识UICollectionViewCell,却由于cell的重用会导致之前选中的cell在被重 ...