微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

ES7 只有两个新功能,这是它们的工作原理

2018-04-02 20:00 前端大全

(点击上方公众号,可快速关注)


编译: 伯乐在线/唐耶尔


让我们来聊一聊 JavaScript 新版本:ECMAScript 2016 (通常被称为 ES7)。


ES7 带来了两个新功能:Array.prototype.includes() 和 新的指数运算符:**


Array.prototype.includes()


使用 .indexOf() 来确定一个元素是否在数组中存在的方式已经成为历史。


['my','mom','hates','me'].indexOf('mom')  // 1


// 虽然有些难以理解,但返回值 1 表示 'mom' 字符串在数组中的索引值,而不是数组中只有一个 'mom'。


重点其实是“存在”。


.indexOf() 的“本职工作”应该是用来确定某个值在数组中的索引。


而如果我们的目的是确定一个元素是否在数组中存在,那么使用 .indexOf() 并不是最好的选择。理由很简单:当查询某个东西的存在性时我们希望得到一个布尔值,而不是数值。


Array.prototype.includes() 做的恰恰就是这件事。它能确定数组中是否包含给定元素,有就返回 true,否则返回 false 。


var life = ['mom', 'dad', 'brother']

 

life.includes('mom')          // true

life.includes('girlfriend')   // false


深入标准


Array.prototype.includes ( searchElement [ , fromIndex ] )


  • searchElement —— 要查找的元素。

  • fromIndex (可选的) — 开始查询的起始索引。


深入了解 规范,就像一次寻找力量之旅。


规范中的内容如下:


让我们循序渐进,用一些例子来理解规范。


# includes

 

# [1] searchs in ascending order

# 搜索按升序进行

> Array(10000000).concat(4).includes(4)

true # [Time] 500 miliseconds 耗时 500ms

> [4].concat(Array(10000000)).includes(4)

true # [Time] 90 miliseconds 耗时 90ms

 

# [2] uses SameValueZero algorithm

# 使用 SameValueZero 算法比较

> [NaN].indexOf(NaN)

-1

> [NaN].includes(NaN)

true

 

# [3] if found at any position returns true

# otherwise, false is returned

# 在任何位置找到都会返回 true,否则返回 false

> [1, 2, 3].includes(2)

true

> [1, 2, 3].includes(7)

false

 

# [4] it treats missing array elements as undefined

# 将数组中缺失的元素视为 undefined

> [1, , 3].indexOf(undefined)

-1

> [1, , 3].includes(undefined)

true


  1. 这里的区别是元素 4 的位置。在第一个例子中 4 位于数组末尾,所以 includes 方法会搜索整个数组。按规范,.includes() 方法会在找到 searchElement 后立即返回,所以第二个例子执行地更快。

  2. SameValueZero 算法与严格相等比较(.indexOf()采用)的最大区别就是它允许检测 NaN 元素。

  3. 元素被找到就返回 true,否则返回 false。不再使用索引作为结果了

  4. 与 .indexOf() 相反,.includes() 并不会跳过缺失的数组元素,而会将其视为 undefined。


你已经开始感受到力量了么?我们还没说 fromIndex 呢。


规范中是这样写的:


可选的第二参数 fromIndex 默认值为 0(这意味整个数组都会被搜索)。如果这个参数的值大于或等于数组长度,则会直接返回 false ,数组将不会被搜索。如果值为是负数,则代表相对于数组末尾的偏移量。如果偏移量超过数组长度,则整个数组都会被搜索。


# fromIndex

 

# [1] it defaults to 0

# 默认为 0

> [1,2,3].includes(1)

true

 

# [2] if >= array.length, false is returned

# 如果 >= array.length, 返回 false

> [1,2,3].includes(1, 10)

false

 

# [3] if negative, it is used as the offset, i.e.

# 如果为负数,则被用作偏移

# offset = array.length + fromIndex

> [1,2,3].includes(3, -2) # fromIndex = 3 (array length) + -2 (fromIndex) = 1

true

 

# [4] if offset < 0, the whole array is searched

# 如果根据偏移计算的搜索起始索引 < 0,则整个数组都会被搜索

> [1,2,3].includes(1, -5) # fromIndex = 0

true


  1. 如果不提供 fromIndex 参数则默认其为 0 ,这时整个数组都将被搜索。

  2. 当 fromIndex 大于数组长度时,.includes() 立即返回 false。

  3. 如果 fromIndex 是负值, 那么起始索引计算方式为 array.length — fromIndex 。这在搜索数组末尾元素时很有用。例如 fromIndex = -5 意味着只搜索最后 5 个元素。

  4. 为了避免 .includes() 执行中断,当计算得到的起始索引小于 0 时,整个数组会被搜索。我个人更希望中断 💥


好了——最后一个新功能……


指数运算符(**)


我们一直期待着指数计算也能像进行加减乘除一样方便。


是的,这一天已经到来。


操作符 ** 和 Math.pow() 的行为一致。它返回第一个操作数的第二个操作数次的乘方值 (例如 x ** y)。


# x ** y (aka Math.pow(x,y))

> 2 ** 2

4

 

> 2 ** 'operand'

NaN


就这么多!


现在你已经掌握 ES7 !好好用吧!



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

 
前端大全 更多文章 前端小知识——地图坐标转换 前端面试题-url、href、src 2018 浅谈前端面试那些事 2018 年了,你还是只会 npm install 吗? 前端开发者必备思维
猜您喜欢 Android MultiDex实践:如何绕过那些坑? Facebook像素应用安装到网站中 我从编程写软件学到的 7 件事 2017,那些我们一起删库跑路的日子 Performance Optimization for Mobile Me