ES7的两个新功能(工作原理介绍)

JavaScript的新版本即ECMAScript2016,通常称之为ES7;这次ES7为我们带来了两个新功能:Array.prototype.includes() 和 新的指数运算符:**; 下边来具体说说这两个新的方法。

Array.prototype.includes()

之前我们会使用.indexOf()来确定一个元素是否在数组中存在,例如:

var strArray=['my','me','us','yes','no'];
var index=strArray.indexOf('me');//index=1 这里的1代表所要找的元素在数组中的索引位置。
var result=strArray.indexOf('find'); //result=-1 当所找元素不在数组时,返回-1

可见.indexOf()方法的重点其实是‘存在’,而不是‘是否’。
所以.indexOf()的‘本职工作’应该是用来确定某个值在数组中的索引位置。
那么当我们想确定一个元素是否在数组中存在的时候,使用.indexOf()方法就不是最好的选择了,因为我们想得到一个布尔值,但是.indexOf()返回的确是一个数值。
而Array.prototype.includes()方法做的正好就似乎这么一件事情。它的‘本职工作’就是确定在数组中是否包含给定的元素,如果包含就返回true,否则就放回false. 例如:

var nameArray=['xiaoming','max','jane','jack','isla','love','noah'];
var result = nameArray.includes('max');//result=ture
var result2=nameArray.includes('mas')//result=false

深入标准了解

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

  • searchElement --要查找的元素
  • fromIndex (可选参数) --开始查找的起始索引
    通过深入的了解规范,可以使自己对方法更加的了解。
    规范中的内容如下:
    让我们通过一些例子来慢慢的了解它。

例1

//搜索按照升序进行
//第一种
var result1=Array(10000000).concat(4).includes(4)//结果为result1= true,
//通过使用console.time(1)和console.timeEnded(1)得到耗时为:651.401123046875ms
//-----------------------------------------------------------------------------------
//第二种
var result2=[4].concat(Array(10000000)).includes(4)//结果为:result2=true
//通过使用console.time(1)和console.timeEnded(1)得到耗时为:75.423828125ms

讲解:这里的前后两种写法的区别在于元素4的位置,在第一中写法中,4位于数组的末尾,所以includes方法会搜索整个数组。按照规范,includes()方法会在找到searchElement后立即返回,因为第二种写法元素4在数组的开头,所以第二中写法执行的更快。

例2

//includes 使用的使SameValueZero算法比较
var result1=[NaN].indexOf(NaN)//结果为:result1=-1
var result2=[NaN].includes(NaN)//结果为:result2=true

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

例3

//在任何位置找到都会返回true,否则返回false
var result1=[1,2,3].includes(2); //结果为: result1=true
var result2=[1,2,3].includes(7); //结果为:result2=false

讲解: 元素被找到就会返回true,否则返回false。不再使用元素在数组中的索引作为结果。

例4

//将数组中缺失的元素视为undefined
var result1=[1,,3].indexOf(undefined); 结果为:result1=false
var result1=[1,,3].includes(undefined); 结果为:result1=true

讲解: 跟.indexOf()方法想法,.includes()并不会跳过缺失的数组元素,而会将其视为undefined。
这还只是searchElement一个参数的时候,当使用可选参数fromIndex参数的时候呢?
规范中是这么写的:

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

是不是感觉看着规范有种迷迷糊糊的感觉?不要怕,看到例子就会立马明白了。

例5

//默认为0
var result = [1,2,3].includes(2); //结果为:result=true

讲解: 如果不提供fromIndex参数,则其默认为0,这时候整个数组都会被搜索。

例6

//当fromIndex大于等于数组长度时,返回false
var result1=[1,2,3].includes(2,5); //结果为:result1=false
var result2=[1,2,3].includes(2,3); //结果为:result2=false

讲解: 当fromIndex大于等于数组长度时,.includes()会立即返回false

例7

//如果为负数,则被用作偏移
var result 1 = [1,2,3].includes(3,-2);
//可以这样理解 当fromIndex为负数时,
//相当于新的fromIndex=array.length+fromIndex(这个fromIndex是给定的那个,这里是-2) 
//所以这里就相当于var result1 = [1,2,3].includes(3,1);结果为 result1=true;

讲解: 如果fromIndex是负值,那么起始索引计算方式为array.length+fromIndex。这里的搜索数组末尾元素时很有用。例如,如果fromIndex=-5,则表示只搜索数组的后5个元素。

例8

//如果根据偏移计算得到的搜索起始索引小于0,则,整个数组都会被搜索。
var result = [1,2,3].includes(1,-4); 结果为:result=true;
//此时,因为(array.length+fromIndex )<0所以实际fromIndex相当于等于0.

讲解: 为了避免.includes()执行中断,当计算得到的起始索引小于0时,整个数组会被搜索。

指数运算符(**)

我想能够将指数运算做的能像进行加减乘除一样方便时很多程序员的梦想,哈哈,这一天来了。
操作符和Math.pow()行为一样。它返回第一个操作数的第二个操作数次的乘方值(例如mn)。

例9

var result1=2**2; //结果为:result1=4;
var result2 = 2**'m'; //结果为:result2=NaN
var result3 = 2**'2'; //结果为:result3=4

好了,关于ES7的两个新功能的介绍到这里就结束了,希望对大家能有所帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容