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的两个新功能的介绍到这里就结束了,希望对大家能有所帮助。