ES7新功能includes用法详解

简介: ES7新功能includes用法详解

Array.prototype.includes():

includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false

1.基本用法:

['a', 'b', 'c'].includes('a') // true
['a', 'b', 'c'].includes('d') // false

2.接收俩个参数:要搜索的值和搜索的开始索引

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

3.与ES6中的indexOf()比较

  • 有些时候是等效的
['a', 'b', 'c'].includes('a')          //true
['a', 'b', 'c'].indexOf('a') > -1      //true
var arr = [1, 2, 3]
var a = 1;
arr.includes(a)   //true
arr.indexOf(a)    //0
  • 在判断 +0 与 -0 时,被认为是相同的。
[1, +0, 3, 4].includes(-0)    //true
[1, +0, 3, 4].indexOf(-0)     //1
  • 只能判断简单类型的数据,对于复杂类型的数据,比如对象类型的数组,二维数组,这些,是无法判断的.
var arr = [1, [2, 3], 4]
arr.includes([2, 3])   //false
arr.indexOf([2, 3])    //-1

4.优缺点比较

  • 简便性
    includes()返回的是布尔值,能直接判断数组中存不存在这个值,而indexOf()返回的是索引,这一点上前者更加方便
  • 精确性
    两者都是采用===的操作符来作比较的,不同之处在于:对于NaN的处理结果不同。我们知道js中NaN === NaN的结果是false,indexOf()也是这样处理的,但是includes()不是这样的。
let demo = [1, NaN, 2, 3]
demo.indexOf(NaN)        //-1
demo.includes(NaN)       //true

5.总结

由于它对NaN的处理方式与indexOf不同,假如你只想知道某个值是否在数组中而并不关心它的索引位置,建议使用includes()。如果你想获取一个值在数组中的位置,那么你只能使用indexOf方法。

相关文章
|
9月前
|
SQL 存储 移动开发
结合ES6谈一下JS里面的find()方法的使用及注意事项
结合ES6谈一下JS里面的find()方法的使用及注意事项
87 0
|
JavaScript
ES6的基础用法
对js es6的用法进行简单介绍
|
前端开发
es6 语法简单使用2
es6 语法简单使用
69 0
|
网络架构
es6 语法简单使用1
es6 语法简单使用
80 0
|
JavaScript 前端开发
node.js入门学习(1): 让phpstorm配置支持ES语法,箭头函数正常代码格式化
node.js入门学习(1): 让phpstorm配置支持ES语法,箭头函数正常代码格式化
140 0
「TypeScript」你必须要知道的 TS 高级技能点 —— Utility Types
「TypeScript」你必须要知道的 TS 高级技能点 —— Utility Types
|
JavaScript 前端开发 索引
学习TypeScript24(TS进阶用法Partial & Pick )
keyof我们讲过很多遍了 将一个接口对象的全部属性取出来变成联合类型
168 0
|
JavaScript 前端开发 索引
学习TypeScript25(TS进阶用法Record & Readonly)
in 我们可以理解成for in P 就是key 遍历 keyof T 就是联合类型的每一项
229 0
|
JavaScript 前端开发 网络架构
【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型
【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型
120 0
【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型
|
JavaScript 前端开发 API
ES6入门之Symbol
ES6入门之Symbol