intitle 无线网站制作,徐州建筑工程招投标网站,中国官网查询系统,网件路由器刷机[ES6]解构与赋值 解构模型对象属性解构函数参数解构字符串的解构数组解构REST 运算符参与的解构--...数组解构属性解构 解构的赋值 解构赋值是对赋值运算符的扩展。
通过解构#xff0c;可以更加简单的获取复杂对象的属性
解构模型
解构的源#xff0c;解构赋值表达式的右… [ES6]解构与赋值 解构模型对象属性解构函数参数解构字符串的解构数组解构REST 运算符参与的解构--...数组解构属性解构 解构的赋值 解构赋值是对赋值运算符的扩展。
通过解构可以更加简单的获取复杂对象的属性
解构模型
解构的源解构赋值表达式的右边部分 解构的目标解构赋值表达式的左边部分
对象属性解构
当变量名称与对象中的属性名称一致时可简写
const PI Math.PI;
const E Math.E;//等价于const { PI, E } Math;函数参数解构
//解构
// const PI Math.PI;
// const E Math.E;const { PI, E } Math;const circle {label: circleX,radius: 2
};//设置参数默认值 {precision2}{}表示参数可选,设置其他参数值 {precision:4}
const circleArea ({ radius }, { precision 2 } {}) (PI * radius * radius).toFixed(precision);console.log(circleArea(circle, { precision: 4 }));{attr}使用解构方式获取对象参数中的对应属性,这样在函数内部就可以直接使用该属性变量 attr而不是通过对象再去获取对应的属性 obj.attr 的方式去使用该属性值
{attrvalue}使用该方式设置解构参数的默认值 {radius}对 circle 对象进行解构获取当前函数所需属性 字符串的解构
let [a, b, c, d, e] hello;
// a h
// b e
// c l
// d l
// e o数组解构
如果不需要当前位置解构对应的位置置空但是必须用逗号隔开
const [one, two, , , five] [1, 2, 3, 4, 5];
console.log(one); //1
console.log(two); //2
console.log(five); //5REST 运算符参与的解构–…
数组解构
const [first, ...rest] [1, 2, 3, 4, 5];
console.log(first); //1
console.log(rest); //[2,3,4,5]构建新的数组
const array1 [...rest];
console.log(array1); //[2,3,4,5]array1 是 rest 副本浅拷贝 属性解构
解构
const { temp0, temp1, ...person } obj;
console.log(temp0);
console.log(person);构建新的对象键值对
const newObj {...person
};newObj 是 person 副本浅拷贝 解构的赋值
解构的过程中
如果左边的变量在右边存在匹配值则解构后值为匹配值
let [a] [3]; // a 3如果左边的变量设置了默认值并且在右边存在匹配值则解构后值为匹配值
let [a 2] [3]; // a 3如果左边的变量在右边不存在匹配值则解构后值为 undefined
let [a] []; //aundefined
let [a] [undefined]; //aundefined如果左边的变量设置了默认值并且在右边不存在匹配值则解构后值为默认值
let [a 2] []; // a 2
let [a 2] [undefined]; // a 2如果右边对应匹配值为 undefined也即没有匹配值 示例
let [a 3, b a] []; // a 3, b 3
let [a 3, b a] [1]; // a 1, b 1
let [a 3, b a] [1, 2]; // a 1, b 2
