ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
以前的写法:
let obj = {username:'JavaScript123',pwd:'123456'}; let username = obj.username; let pwd = obj.pwd; console.log(username); console.log(pwd);
解构赋值:
let obj = {username:'JavaScript123',pwd:'123456'}; let{username,pwd} = obj; console.log(username,pwd);
还可以这样写:
let obj = {username:'JavaScript123',pwd:'123456'}; function func({username,pwd}){ console.log(username,pwd); } func(obj);
他可以对数组进行解构:
let arr = ['a','b',false,123,'你好']; let[a,b,,,]=arr; console.log(a,b);
没有值就不用打印,以免报错
对象模型解构中的剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; console.log(a); console.log(b); console.log(rest);
解构默认值:
let {a = 10, b = 5} = {a: 3}; // a = 3; b = 5; let {a: aa = 10, b: bb = 5} = {a: 3}; // aa = 3; bb = 5;
例: 计算函数任意个参数之和:
function sum(...num) { var sum = 0; for (let i = 0; i < num.length; i++) { sum += parseInt(num[i]) //parseInt() 函数可解析一个字符串,并返回一个整数。 } console.log(sum) } sum(1, 2, 3) //6 sum(1, 2, "3") //6 sum(1, 2, "4和5") //7
arguments:类数组对象
// arguments类数组对象 function fn1(){ console.log(arguments); } // 无论多少对象都可以全部接收 fn1('a',0,{foo:'Hello'});
总结解构赋值:
1、解构赋值就是把数据解构进行分解,然后给其变量进行赋值。
2、如果解构不成功,也就是变量和值的个数不一致的时候,变量值为undefined。
3、数组解构用中括号包裹,多个变量用逗号隔开,对象解构用花括号包裹,多个变量用逗号隔开
4、利用解构赋值能够让我们方便的去取对象中的属性跟方法
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数
function sum (first, ...args) { console.log(first); // 10 console.log(args); // [20, 30] } sum(10, 20, 30)
剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi']; let [s1, ...s2] = students; console.log(s1); // 'wangwu' console.log(s2); // ['zhangsan', 'lisi']