ES7 只有两个新功能，这是它们的工作原理
（点击
上方公众号
，可快速关注）
编译： 伯乐在线/唐耶尔
让我们来聊一聊 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
这里的区别是元素 4 的位置。在第一个例子中 4 位于数组末尾，所以 includes 方法会搜索整个数组。按规范，.includes() 方法会在找到 searchElement 后立即返回，所以第二个例子执行地更快。
SameValueZero 算法与严格相等比较（.indexOf()采用）的最大区别就是它允许检测 NaN 元素。
元素被找到就返回 true，否则返回 false。不再使用索引作为结果了
与 .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
如果不提供 fromIndex 参数则默认其为 0 ，这时整个数组都将被搜索。
当 fromIndex 大于数组长度时，.includes() 立即返回 false。
如果 fromIndex 是负值, 那么起始索引计算方式为 array.length?—?fromIndex 。这在搜索数组末尾元素时很有用。例如 fromIndex = -5 意味着只搜索最后 5 个元素。
为了避免 .includes() 执行中断，当计算得到的起始索引小于 0 时，整个数组会被搜索。我个人更希望中断 ??
好了——最后一个新功能……
指数运算符（**）
我们一直期待着指数计算也能像进行加减乘除一样方便。
是的，这一天已经到来。
操作符 ** 和 Math.pow() 的行为一致。它返回第一个操作数的第二个操作数次的乘方值 (例如 x ** y)。
#
x
**
y
(
aka
Math
.
pow
(
x
,
y
))
>
2
**
2
4
>
2
**
"operand"
NaN
就这么多！
现在你已经掌握 ES7 ！好好用吧！
觉得本文对你有帮助？请分享给更多人
关注「前端大全」，提升前端技能
淘口令
：
复制以下红色内容，再打开手淘即可购买范品社，使用￥极客T恤￥抢先预览（长按复制整段文案，打开手机淘宝即可进入活动内容）
- 99%的签证通过率？全家办签证，只有这样才高效！
- 【重要】备考中山，这两个时间节点要牢记！
- 一定要告诉你的孩子：能抛弃你的，只有你自己！
- 买房心经之地段篇:两个维度教你判断如何地段是好是坏
- 考前最后两个月, 还能提高多少分？看高考大神们如何逆袭！
- 建成两个生态环境和资源司法保护基地
- 40万免费送给陌生人，自己卡里只有1.36元！看完惊呆了...
- 两个“80后”刷屏资本市场，800亿买单背后，基金投资会受影响吗
- 只有潮汕人才懂这种水果的奇特吃法，吃过一次就让你忘不了！
- 球鞋老祖宗 —— 只有 AIR JORDAN 才称得上！