上海 有哪些做网站的公司好,营销型企业网站诊断,网站开发过程记录,有情怀的网站设计MENU 前言解构对象解构数组解构混用 前言 ES6中允许按照一定模式#xff0c;从数组和对象中提取值#xff0c;对变量进行赋值#xff0c;这被称为解构(Destructuring)。 使用解构赋值可以将复杂的代码整理的更加干净整洁。 解构对象 在没有使用解构之前#xff0c;想要确定… MENU 前言解构对象解构数组解构混用 前言 ES6中允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构(Destructuring)。 使用解构赋值可以将复杂的代码整理的更加干净整洁。 解构对象 在没有使用解构之前想要确定对象中的某些属性那么就需要从对象中获取属性然后赋值给变量这样会让代码显得非常冗余。 let obj { name: 张三, age: 22 };
let name obj.name;
let age obj.age;// 张三 22
console.log(name, age);
// 张三 22
console.log(obj.name, obj.age);基本解构格式 如果使用解构的话保持将变量名和对象属性名同名才可取到值。 let { name, age } { name: 张三, age: 22 };// 张三 22
console.log(name, age);变量别名 如果解构的对象中属性名和外部的变量名重名将会报错可以使用别名的方式进行解构。 let name 王五;
let { name: newName, age } { name: 张三, age: 22 };// 张三 22
console.log(newName, age);变量默认值 如果目标对象属性中没有要解构的属性不指定默认值那么将会undefined此时可以给解构变量写默认值。 let { name, age, gender 男 } { name: 张三, age: 22 };// 张三 22 男
console.log(name, age, gender);此种为变量设置默认值的方法常应用于函数参数中加入调用函数时没传递参数有可能会对函数运行造成错误。那就可以在形参位置进行对象解构对变量指定默认值。 function fn({ name 李四, age 30 } {}) {// 李四 30console.log(name, age);
}fn();解构数组 解构数组和对象有些不同解构对象的时候属性前后位置不影响。但是解构数组需要按照索引顺序解构。 数组基础解构用法 如果在没有解构之前需要拿到数组中的前3位字符串那么只能按照索引值的方式定义变量。 let arr [HTML5, JavaScript, Vue, React, NodeJS];
let str1 arr[0];
let str2 arr[1];
let str3 arr[2];// HTML5 JavaScript Vue
console.log(str1, str2, str3);
// HTML5 JavaScript Vue
console.log(arr[0], arr[1], arr[2]);解构赋值 let [str1, str2, str3] [HTML5, JavaScript, Vue, React, NodeJS];// HTML5 JavaScript Vue
console.log(str1, str2, str3);基于这种特性如果一次性想要定义多个变量就可以使用这种解构的方式定义。相当于一次性定义了三个变量并对变量进行了赋值。 选择解构 数组的特性是按照索引值顺序执行如果只要取得数组最后几位或者第几位需要预留出其他值的位置。 let [, , , value1, value2] [HTML5, JavaScript, Vue, React, NodeJS];// React NodeJS
console.log(value1, value2);扩展运算符 在一个数组中解构可以取得数组第一位剩下的通过扩展运算符(展开运算符)统一放置到一个数组中。 let [value, ...other] [HTML5, JavaScript, Vue, React, NodeJS];// HTML5 [JavaScript, Vue, React, NodeJS]
console.log(value, other);默认值 同上面对象别名方式一致。 let [v1, v2, v3 Vue] [HTML5, JavaScript];// HTML5 JavaScript Vue
console.log(v1, v2, v3);交换变量值
let name1 张三;
let name2 李四;[name2, name1] [name1, name2];// 李四 张三
console.log(name1, name2);解构混用 在实际开发中基本没有上面那种简单的结构大多数都是比较复杂的数据结构。用好了解构赋值才会让代码看起来更加整洁。 let person {name: 坤坤,age: 25,like: [唱, 跳, rap, 篮球],works: {music: [Wait Wait Wait, 鸡你太美],movies: [童话二分之一, 鬼畜区常青树]},friend: [丞丞, 大宝贝, 大黑牛]
};传统型
let result person.works.music[1];// 鸡你太美
console.log(result);浅层解构
let { works } person;// 鸡你太美
console.log(works.music[1]);连续解构
let { works: { music } } person;// 鸡你太美
console.log(music[1]);数组与对象混用
let { works: { music: [, result] } } person;// 鸡你太美
console.log(result);解构别名
let { works: { music: [, result], movies: newMov } } person;// 鸡你太美 [童话二分之一, 鬼畜区常青树]
console.log(result, newMov);
