ES6 - Note3：数组、对象与函数的扩展

时间：2022-09-23 14:39:48

一、数组的扩展，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

而且该方法拷贝不了不可枚举的属性

　

　

　　

　

　　

相关文章