一、数组的扩展,ES6在数组扩展了一些API,以实现更多的功能
1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示
var a = { ‘0‘:1,‘1‘:1,length:2 }; var arr = Array.from(a); console.log(arr) Array [ 1, 1 ] ---------------ES5的实现----------- var arr = [].slice.call(a); console.log(arr) Array [ 1, 1 ]
function fun(){ var arr = Array.from(arguments); console.log(arr); } fun(2,3,4); Array [ 2, 3, 4 ]
如果参数是真正的数组,则直接返回一个一样的新数组,参数也可是一个实现了Iterator接口的数据结构,如set,如下所示
var a = new Set([3,4]); var arr = Array.from(a); console.log(arr); Array [ 3, 4 ]
Array.from还支持第二个参数,是一个用来处理每一个元素的函数,然后将处理后的元素放回数组,如下所示
var a = new Set([3,4]); var arr = Array.from(a,x => x+1 ); console.log(arr); Array [ 4, 5 ]
因此可以利用该方法做一些方便的操作,如下所示
var arr = Array.from({length:3},()=>‘a‘);//生成一个有3个元素的数组,并初始化
2.Array.of:该方法可以将一组数转换成数组,且总是返回以参数为数值的数组,这个可以避免Array构造函数带来的歧义,如下所示
var arr = Array.of(1,2,3), arr1 = Array.of(1); console.log(arr); Array [ 1, 2, 3 ] console.log(arr1); Array [ 1 ] var arr2 = Array(3), arr3 = Array(1,2); console.log(arr2); Array [ <3 个空的存储位置> ] //这里的空位就是没有值,也不是undefined console.log(arr3); Array [ 1, 2 ]
3.数组实例方法find,用于找出数组中第一个符合条件的元素,没有找到则返回undefined,参数为函数 ,如下所示
var arr = [1,10,9,88]; console.log(arr.find(x=>x>10)); 88 console.log(arr.find(x=>x<1)); undefined
这里还有个findIndex的实例方法,找出匹配元素所在的位置,未找到就返回-1,如下所示
console.log(arr.findIndex(x=>x>50)); 3 console.log(arr.findIndex(x=>x>100)); -1
并且这两个方法都可遍历到NaN,如下所示
var arr = [NaN,1]; console.log(arr.findIndex(x=>Object.is(NaN,x))); 0
4.fill实例方法,使用给定值填充数组,并会覆盖以前的值,如下所示
console.log(new Array(1,3,4).fill(‘a‘)); Array [ "a", "a", "a" ] --------------- 也可以指定开始位置和结束位置 -------------- console.log(new Array(2,5,8,11).fill(‘a‘,1,2)); Array [ 2, "a", 8, 11 ]
5.返回遍历器的实例方法keys,entries,keys得到键的遍历器,entries是得到键值的遍历器,如下所示
var arr = [1,2,5,7,11,15]; for( let i of arr.keys()){console.log(i);}; 0 1 2 3 4 5 for(let [k,v] of arr.entries() ){ console.log(k+‘:‘+v); } 0:1 1:2 2:5 3:7 4:11 5:15
二、函数的扩展
1.函数参数允许默认值,在ES6以前实现默认值通常是先判断某个参数是否为undefined,然后赋值为默认值。如下所示
var func = function(x=0,y=7){ return x+y; } console.log(func()) 7 console.log(func(1,2)) 3 var fun1 = function(x,y){ x = x||0; y=y||7; return x+y; } //ES6以前的写法实现默认值 console.log(fun1()) 7 console.log(fun1(1)) 8
在使用默认值的时候,如果默认参数不是位于尾部,则该默认参数不能被跳过,如下所示
var fun2 = function(x=1,y){ return x+y; } console.log(fun2()) NaN console.log(fun2(,2)) SyntaxError: expected expression, got ‘,‘ console.log(fun2(null,2)) 2 console.log(fun2(undefined,2)) 3
使用了默认参数的函数的length属性的值将不准确,且不包涵rest参数,如下所示
var fun3 = function(a=0,b=1){ return a-b; } console.log(fun3.length); 0
rest参数:形式为"...变量"的参数,接收函数剩余参数,搭配的变量为一个数组,rest参数后面不能再有参数,用法如下所示
var fun4 = (...arg) => arg.sort((a,b) => a<b); console.log(fun4(8,87,1)); Array [ 87, 8, 1 ] //在rest参数还有参数便会报错 var fun5 = (...arg,x) => arg.sort((a,b) => a<b); SyntaxError: expected closing parenthesis, got ‘,‘ //函数的length会忽略rest参数 console.log(fun4.length) 0
扩展运算符(...),类似rest参数的逆运算,将一个数组转换成逗号分开的参数列表,用法如下所示
var fun5 = (...arg) => [...arg]; console.log(fun5(1,19)); Array [ 1, 19 ] //也可以用来取代apply在某些地方的应用 console.log(Math.max.apply(null,[1,98,7])); 98 console.log(Math.max(...[1,98,7])); 98
2.箭头函数
箭头函数是ES6新增的语法,允许使用箭头=>定义函数,如下所示
var fun = a=>a+1; console.log(fun(8)); 9 ---------------------- var fun1 = (a,b) => a*b; console.log(fun1(2,8)); 16
箭头函数有几个使用注意点。
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象,即便使用call,apply也不能改变。
(2)不可以当作构造函数,也就是说,不可以使用new
命令,否则会抛出一个错误。
(3)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield
命令,因此箭头函数不能用作Generator函数。
(function(){return (()=>console.log(this.a)).call({a:2})}).call({a:1}) 1
嵌套的箭头函数,如下所示
const pipefun = (...funs) => initVal => funs.reduce((f1,f2) => f2(f1),initVal ); var testfun = pipefun(a=>a+1,b=>b+1); testfun(10); 12
ES6中还明确规定在实现ES6代码时必须使用尾递归优化,尾递归优化就是在递归的尾部调用自身(尾调用就是在函数的最后一步调用另一个函数,且没有任何其他的操作),这样做到好处是不易造成栈溢出,如下所示
function fibonacci(n){ return n<=1?n:fibonacci(n-1)+fibonacci(n-2); } console.log(fibonacci(30)); 832040 //在这里参数给到100就会栈溢出,如果改成尾递归,则可解决这个问题 function fibonacci(n,acc1,acc2){ return n<=1?acc1:fibonacci(n-1,acc2,acc1+acc2); } console.log(fibonacci(30,1,1)); 832040 console.log(fibonacci(100,1,1)); 354224848179262000000
三、对象的扩展
1.属性和方法可以简写,可以直接使用变量和函数作为对象的属性和方法,如下所示
var x = 1, y = 2; var obj = { x, y, show(){ console.log(this.x,this.y); } }; console.log(obj.x,obj.y) 1 2 obj.show() 1 2
简洁写法的属性名总是字符串,所示不会出现关键字报错,如下所示
var obj1 = { //这里相当于‘new‘:function(){console.log("new");} new(){ console.log("new"); } }; obj1.new() new
在ES6以前访问对象的属性或者方法有两种方式,一是使用点(.)操作符,另一种是使用中括号["propertyName"],如下所示
var o = {x:1}; console.log(o.x); 1 console.log(o["x"]); 1
但是在定义对象的属性或方法是只能使用属性名:的方式,在ES6中则可以使用中括号来定义,如下所示
var name = ‘hehe‘; var obj2 = { [name]:"hello" } console.log(obj2[name]); hello
2.Object.is该方法可以用来判断两个值是否一样,可以判断NaN与NaN,-0和+0,采用的是等值算法,如下所示
console.log(+0===-0,NaN===NaN,"hello"==="hello",{x:1}==={x:1}); console.log(Object.is(NaN,NaN)); console.log(Object.is(+0,-0)); console.log(Object.is({x:1},{x:1})); true false true false true false false
3.Object.assign用来合并对象,采用的是浅复制且存在同名属性后者会覆盖前者,如下所示
var o = {x:1}, o1 = {y:2}, o2 = {y:3,x:2}; console.log(Object.assign(o,o1,o2)); var o3 = {z:4,fun:()=>console.log("hello")}; Object.assign(o,o3); o.fun(); o3.fun = null; o.fun(); Object { x: 2, y: 3 } hello
如果只给出一个参数且是对象,则直接返回这个对象,不是对象便会先转换成对象,如不能转换成对象则报错,如下所示
onsole.log(Object.assign(2)); console.log(Object.assign(undefined)); console.log(Object.assign(null)); Number { 2 } TypeError: can‘t convert undefined to object
而且该方法拷贝不了不可枚举的属性