ES7 includes方法

发表于 | 更新于 | 阅读次数 1
es7includes方法解析

ES7只新增了2个新特性

  • Array.prototype.includes
  • Exponentiation Operator(求幂运算)

本文只讲解includes方法，Exponentiation Operator(求幂运算)请移步ES7求幂运算

Array.prototype.includes用法都容易和简单。它是一个替代indexOf（ES6新增），开发人员用来检查数组中是否存在值，indexOf是一种尴尬的使用，因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字，而不是一个布尔值。

1
2
3
4
5
6
7
8
9
10
11
let arr = ['react', 'angular', 'vue']

// WRONG
if (arr.indexOf('react')) { // 0 -> evaluates to false, definitely as we expected
  console.log('Can use React') // this line would never be executed
}

// Correct
if (arr.indexOf('react') !== -1) {
  console.log('Can use React')
}

或者使用一点点hack 位运算符 ~ 使代码更加紧凑一些，因为~（位异或）对任何数字相当于-(a + 1):

1
2
3
4
5
6
let arr = ['react', 'angular', 'vue']

// Correct
if (~arr.indexOf('react')) {
  console.log('Can use React')
}

而在ES7中，可以使用includes开替代indexOf作为检测：

1
2
3
4
5
6
let arr = ['react', 'angular', 'vue']

// Correct
if (arr.includes('react')) {
  console.log('Can use React')
}

开发者还能在字符串中使用includes:

1
2
3
4
5
6
let str = 'React Quickly'

// Correct
if (str.toLowerCase().includes('react')) {  // true
  console.log('Found "react"')  
}

includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。

1
2
3
4
5
6
7
8
console.log([1, 2, 3].includes(2)) // === true
console.log([1, 2, 3].includes(4)) // === false
console.log([1, 2, NaN].includes(NaN)) // === true
console.log([1, 2, -0].includes(+0)) // === true
console.log([1, 2, +0].includes(-0)) // === true
console.log(['a', 'b', 'c'].includes('a')) // === true
console.log(['a', 'b', 'c'].includes('a', 1)) // === false
console.log('React Quickly'.includes('React')) // === true