在 JavaScript 中正确使用地使用 Array 的方法如下:

用 Array.includes 代替 Array.indexOf

“如果你要在数组中查找元素,请使用 Array.indexOf”。

MDN 文档写道,Array.indexOf 将“返回第一次出现给定元素的索引”。因此,如果我们稍后要在代码中使用这个返回的索引,那么使用 Array.indexOf 找到索引就对了。

但是,如果我们只想知道数组是否包含某个值,该怎么办?这似乎是一个是与否的问题,或者说是一个布尔值问题。对于这种情况,建议使用返回布尔值的 Array.includes。

'use strict';
const characters = [
'ironman',
'black_widow',
'hulk',
'captain_america',
'hulk',
'thor',
];
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false
使用 Array.find 而不是 Array.filter

Array.filter 是一个非常有用的方法。它接受一个回调函数作为参数,基于一个包含所有元素的数组创建出一个新的数组。正如它的名字一样,我们使用这个方法来过滤元素,获得更短的数组。

但是,如果回调函数只能返回一个元素,那么我就不推荐使用这个方法,例如使用回调函数来过滤唯一 ID。在这种情况下,Array.filter 将返回一个只包含一个元素的新数组。我们的意图可能是通过查找特定的 ID 找到数组中包含的唯一值。

我们来看看这个方法的性能。要返回与回调函数匹配的所有元素,Array.filter 必须遍历整个数组。此外,我们假设有数百个元素可以满足回调参数,那么过滤后的数组会非常大。

为了避免这种情况,建议使用 Array.find。它需要一个像 Array.filter 一样的回调函数作为参数,并返回满足回调函数的第一个元素的值。此外,只要找到第一个满足回调函数的元素,Array.find 就会停止,无需遍历整个数组。通过 Array.find 来查找元素,我们可以更好地理解我们的意图。

'use strict';
const characters = [
{ id: 1, name: 'ironman' },
{ id: 2, name: 'black_widow' },
{ id: 3, name: 'captain_america' },
{ id: 4, name: 'captain_america' },
];
function getCharacter(name) {
return character => character.name === name;
}
console.log(characters.filter(getCharacter('captain_america')));
// [
// { id: 3, name: 'captain_america' },
// { id: 4, name: 'captain_america' },
// ]
console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }

用 Array.some 代替 Array.find

我承认这个错误我犯了很多次。然后,一位善良的朋友告诉我,最好可以先参考 MDN 文档。这与上面的 Array.indexOf/Array.includes 非常相似。

在前面的例子中,我们看到 Array.find 需要一个回调函数作为参数,并返回一个元素。如果我们想要知道数组是否包含某个值,Array.find 是最好的解决方案吗?可能不是,因为它返回的是一个元素值,而不是一个布尔值。

对于这种情况,建议使用 Array.some,它返回所需的布尔值。另外,从语义上看,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 和 Array.map

Array.reduce 不容易理解。事实确实如此!但是,如果我们使用 Array.filter 和 Array.map 的组合,总感觉缺少了什么,我们遍历了两次数组。第一次过滤数组并创建一个较短的数组,第二次又基于 Array.filter 获得数组创建一个包含新值的数组。为了获得我们想要的新数组,我们使用了两个 Array 方法。每个方法都有自己的回调函数和一个用不到的数组——由 Array.filter 创建的那个数组。

为了避免这种性能损耗,建议是使用 Array.reduce。结果是一样的,代码却更简单! 我们可以使用 Array.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'] } // ]

JavaScript中Array的正确使用方式的更多相关文章

  1. Javascript 中 Array的 sort()和 compare()方法

    Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...

  2. JavaScript中Array(数组) 对象

    JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

  3. Javascript中Array(数组)对象常用的几个方法

    Javascript中Array数组的几个常用方法 pop()  --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice()  --按照下 ...

  4. JavaScript 中Array数组的几个内置函数

    本文章内容均参考<JavaScript高级程序设计第三版> 今天在看JavaScript书籍的时候,看到之前没有了解过的JavaScript中Array的几个内置函数对象,为了之后再开发工 ...

  5. JavaScript中Array方法总览

    title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...

  6. JavaScript中获取HTML元素的方式

    JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象   document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...

  7. 学术Essay写作中Introduction的正确打开方式

    其实在学术essay写作过程中,很多留学生经常不知道如何写introduction,所以有些开头的模板句就出现了,比如,With the development of society/With the ...

  8. JavaScript中创建对象的三种方式!

    JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...

  9. JavaScript中Array的一些实用操作技巧

    最近在调试JSP页面时频繁与ajax打交道,在复杂场景下,ajax传参数就需要对大量参数进行处理.这时我才发现,熟练Array的处理真的会使开发轻松不少!! 关于Array Array的创建很灵活,可 ...

随机推荐

  1. API——SendMessageTimeout

    原文:http://www.cnblogs.com/lzjsky/articles/1777848.html 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,并且,如 ...

  2. vue2.0中的ref.html

    前置知识请戳这里 获取DOM对象以及组件对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  3. android的系统设置界面

    Intent 的 意图: Intent intent = new Inetnt(Setings); Setings:   1. ACTION_ACCESSIBILITY_SETTINGS : // 跳 ...

  4. Sql Server 如何去掉内容里面的Html标签

    DECLARE @str NVARCHAR(MAX)= ' <!DOCTYPE html> <html> <head> </head> <body ...

  5. Linux ->> UBuntu 14.04 LTE下设置静态IP地址

    UBuntu 14.04 LTE设置IP地址和一些服务器版本的Linux还不太一样.以Centos 7.0为例,网卡IP地址的配置文件应该是/etc/sysconfig/network-scripts ...

  6. 【Leetcode】【Medium】Binary Tree Right Side View

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  7. crt文件上传下载

    为了方便修改文件,下载与修改服务器文件,便利很多啊! 主要命令: sz filename #下载 rz 参数 #上传 弹窗选择文件 如果没有安装请装工具: yum install lrzsz man ...

  8. Hibernate初探之一对多映射 及 myeclipse自动生成hibernate文件方法

    实现单向一对多: 1)在one方的实体中添加保存many方的集合 2)在one方的配置文件中添加<one-to-many>配置 实现单向多对一: 1)在many方的实体中添加one方的引用 ...

  9. Hbase集群部署及shell操作

    本文详述了Hbase集群的部署. 集群部署 1.将安装包上传到集群并解压 scp hbase-0.99.2-bin.tar.gz mini1:/root/apps/ tar -zxvf hbase-0 ...

  10. BUG Review:关于getting 'android:xxx' attribute: attribute is not a string value的问题及解决方法

    我们在使用Android Studio开发完应用程序后,都要将打好的apk安装包上传到各大应用市场,但是有时候上传时应用市场会出现提交的安装包不能通过应用市场的aapt解析而被打回的情况. 他们使用a ...