重学JS-6-一图掌握解构赋值
思维导图
通过下面的思维导图，我们先对JavaScript的解构赋值有一些基本的了解。
《重学JavaScript-解构赋值》思维导图
什么是解构赋值
解构赋值是ES6的新语法，作用是将对象或者数组“拆包”到一系列变量中。
数组解构
几个例子，介绍数组解构的用法。
基础用法
涉及的知识点：
- 等号左边可以是任何内容（变量或者对象的属性）
- 等号右边可以是任何可迭代对象（数组、Set、Map）
- 可以用额外的逗号来忽略元素
- 用等号设置默认值
let user = {};
[user.name, ,user.surname] = "John and Smith".split(' ');
alert(user.name); // John
alert(user.surname); // Smith默认值
// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];
alert(name); // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）巧用：交换对象
let guest = "Jane";
let admin = "Pete";
// 让我们来交换变量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];
alert(`${guest} ${admin}`); // Pete Jane（成功交换！）巧用：用Object.entries遍历对象的键值对
对象也可以转换成可迭代的。
let user = {
name: "John",
age: 30
};
// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
alert(`${key}:${value}`); // name:John, then age:30
}对象解构
基本用法
let {var1, var2} = {var1:…, var2:…}- 右侧对象属性，赋值给左侧同名属性。
- 可以用冒号，设置左侧变量名称。
- 变量顺序不重要
- 用等号设置默认值
let options = {
title: "Menu"
};
let {width: w = 100, height: h = 200, title} = options;
alert(title); // Menu
alert(w); // 100
alert(h); // 200展开语法
**展开语法(Spread syntax)**：用于展开数组或对象。
展开数组为函数参数
在参数中，展开语法可以在任意位置使用，也可以多次使用。
作用和apply类似。
let foo = function(firstName, middleName, lastName) {
console.log(firstName);
console.log(middleName);
console.log(lastName);
}
let arr = ['John', 'whatever', 'Smith'];
//传统写法
foo(arr[0], arr[1], arr[2]);
//使用展开语法
foo(...arr);
//部分使用展开语法
let arr2 = ['whatever', 'Smith'];
foo(arr[0], ...arr2);
//John
//whatever
//Smith拷贝和合并数组
这里的拷贝，是浅拷贝，只遍历一层，其行为和Object.assign()一致。
拷贝的数组，引用地址不同，但是元素的引用是直接拷贝引用，所以元素的引用地址相同。
let a = { foo: 3 }
var arr = [1, 2, a];
var arr2 = [...arr];
console.log(arr===arr2); // false, 引用地址不同
console.log(arr[2]==arr2[2]); // true, 元素是引用，则是直接拷贝的引用，所以元素引用地址相同
var arr3 = [...arr, 4, 5, 6];
console.log(arr3); // [1, 2, {foo: 3}, 4, 5, 6]拷贝和合并对象
同样也是浅拷贝。
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }剩余语法
剩余语法(Rest syntax) ：与展开语法相反，用于合并多个元素组合成数组或者对象。
合并函数参数为数组
//主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(...args) {
for (let el of args) {
console.log(el);
}
}
bar(1, 2, 3, 4);
//1
//2
//3
//4
bar = function(a, ...args) {
console.log(a);
console.log(args);
}
bar(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]解构时承接数组或对象的剩余元素
// 数组
const [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]
// 对象配合
const {age, ...rest} = {name: 'qxj', age: 24, hobby: 'write code'};
console.log(age); //24
console.log(rest); //{ name: 'qxj', hobby: 'write code' }本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
