一、数组的解构赋值:按照索引的顺序来解构
let [a,b]=[1,'bar']; console.log(a);//1 console.log(b);//bar let [c,,d]=[2,3,4]; console.log(c);//2 console.log(d);//4 let [f]=[5,6,7]; console.log(f);//5 let [g,h,k]=[8,9] console.log(g);//8 console.log(h);//9 console.log(k);//undefined // 允许设置默认值 let [x=100,y,z=200]=[10,20] console.log(x);//10 console.log(y);//20 console.log(z);//200
二、对象的解构赋值:按照对象的键名来解构
let {name,age}={name:'eric',age:18}; console.log(name);//reic console.log(age);//18 let {me,id}={me:'eric',age:18}; console.log(me);//eric console.log(id);//undefined let { foo: baz } = { foo: "aaa", bar: "bbb" }; console.log(baz);//aaa let { first: f, last: l } = { first: 'hello', last: 'world'}; console.log(f);//hello console.log(l);//world let {x, y = 5} = {x: 1}; let {x: z = 3} = {x: 5}; console.log(x);//1 console.log(y);//5 console.log(z);//5
三、字符串的解构赋值
const [a, b, c, d, e] = 'hello'; console.log(a,b,c,d,e);// // 类似数组的对象都有一个length属性 let {length : len} = 'hello'; console.log(len);//
四、数值和布尔值的解构赋值
// 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。 // 数值和布尔值的包装对象都有toString属性,因此变量s都能取到值 let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true // 解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。 // 由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错 let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
五、函数参数的解构赋值
//函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y function add([x, y]){ return x + y; } add([1, 2]); // 3 // 函数参数的解构也可以使用默认值。 //函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值 function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] // 函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。 function move({x, y} = { x: 0, y: 0 }) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, undefined] move({}); // [undefined, undefined] move(); // [0, 0] // undefined就会触发函数参数的默认值。 [1, undefined, 3].map(function(x='yes'){ return x }); // [ 1, 'yes', 3 ]
// 默认值的应用 function ajax({url,type='get'}){ console.log(url,type) } ajax({url:'/hello'});// /hello get // 在nodejs加载模块里的应用:指定模块里的某个方法 // var {readFile,writeFile}=require('fs'); // 函数的rest参数:把剩余的参数都包装到一个数组中 // 它的作用就是来代替arguments的 // arguments是伪数组,不能使用Array的一些原型方法,但是rest可以 function add(...args){ console.log(args);//[1, 2, 3, 4, 5] args.forEach(function(item){ console.log(item) }); } add(1,2,3,4,5);// 1 2 3 4 5
更多详细知识点,请参考ECMAScript 6 入门。