ES6学习——新的语法:函数参数解构

73 篇文章 23 订阅

解构赋值也可以发生在函数传参的时候,ES6中函数参数的灵活性大大提高了。函数参数的解构既可以用数组形式,也可以用对象形式,先看两个简单的例子:

function foo( [ x, y ] ) {
    trace( x + " " +y );
}
foo( [ 1, 2 ] ); // 1 2
foo( [ 1 ] ); // 1 undefined
foo( [] );


function bar( { x, y:YY } ) {
    trace( x + " " + YY );
}
bar( { y: 1, x: 2 } ); // 2 1
bar( { y: 42 } ); // undefined 42
bar( {} ); // undefined undefined

数组解构的时候还可以应用rest操作符:

function f3([ x, y, ...z], ...w) {
    trace( x + y + z + w );
}
f3( [] ); // undefined undefined [] []
f3( [1,2,3,4], 5, 6 ); // 1 2 [3,4] [5,6]

同样函数参数的解构也可以有默认值,看下面的例子:

		function f({ x = 10 } = {}, { y } = { y: 10 }) {
			trace( x + " " + y +"\n");
		}
		
		f(); // 10 10
		f( undefined, undefined ); // 10 10
		f( {}, undefined ); // 10 10
		f( {}, {} ); // 10 undefined
		f( undefined, {} ); // 10 undefined
		f( { x: 2 }, { y: 3 } ); // 2 3


数组参数解构也可以有默认值,但是如果传入undefined的话,将会报异常,因为undefined不能转换成iterator:

		function f([ x=2, y=3, z ]) {
			trace(x + " " +y + " " + z + "\n");
		}
		
		//f();//# Exception: f: cannot coerce undefined to object!
		f([1]);//1 3 undefined
		f([1,2]);//1 2 undefined
		f([1,2,3]);//1 2 3
		f([1,2,3,4]);//1 2 3


下面看一下参数函数默认值的两种形式的不同:

		function move1({x=0, y=0} = {}) {
			trace(x + " " + y + "\n");
		}
		
		function move2({x, y} = { x: 0, y: 0 }) {
			trace(x + " " + y + "\n");
		}
		
		move1({x: 3, y: 8}); // 3 8
		move1({x: 3}); // 3 0
		move1({}); //0 0
		move1(); //0 0 
		move1({z:3})//0 0 
		
		trace("\n");
		
		move2({x: 3, y: 8}); //3 8
		move2({x: 3}); //3 undefined
		move2({}); //undefined undefined
		move2(); //0 0
		move2({z:3})//undefined undefined

通过结果可以看出,采用{x=0,y=0} =  {}的形式,无论怎么传参,都能保证x,y的默认值是0,但是采用{x,y} = {x:0,y:0}的形式,如果传入的参数值不是undefined,那么将不能有效保证函数参数默认值是0,这里需要仔细区分两者的不同。


*以上代码全部在Kinoma Studio通过测试

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值