重学JS-6-一图掌握解构赋值

2023-04-22 16:17:33 浏览数 (2)

思维导图

通过下面的思维导图，我们先对JavaScript的解构赋值有一些基本的了解。

什么是解构赋值

解构赋值是ES6的新语法，作用是将对象或者数组“拆包”到一系列变量中。

数组解构

几个例子，介绍数组解构的用法。

基础用法

涉及的知识点：

  1. 等号左边可以是任何内容（变量或者对象的属性）
  2. 等号右边可以是任何可迭代对象（数组、Set、Map）
  3. 可以用额外的逗号来忽略元素
  4. 用等号设置默认值
代码语言：javascript复制
let user = {};
[user.name, ,user.surname] = "John and Smith".split(' ');

alert(user.name); // John
alert(user.surname); // Smith

默认值

代码语言：javascript复制
// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）

巧用：交换对象

代码语言：javascript复制
let guest = "Jane";
let admin = "Pete";

// 让我们来交换变量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane（成功交换！）

巧用：用Object.entries遍历对象的键值对

对象也可以转换成可迭代的。

代码语言：javascript复制
let user = {
  name: "John",
  age: 30
};

// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

对象解构

基本用法

代码语言：javascript复制
let {var1, var2} = {var1:…, var2:…}
  1. 右侧对象属性，赋值给左侧同名属性。
  2. 可以用冒号，设置左侧变量名称。
  3. 变量顺序不重要
  4. 用等号设置默认值
代码语言：javascript复制
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类似。

代码语言：javascript复制
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()一致。

拷贝的数组，引用地址不同，但是元素的引用是直接拷贝引用，所以元素的引用地址相同。

代码语言：javascript复制
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]

拷贝和合并对象

同样也是浅拷贝。

代码语言：javascript复制
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) ：与展开语法相反，用于合并多个元素组合成数组或者对象。

合并函数参数为数组

代码语言：javascript复制
//主要用于不定参数，所以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 ]

解构时承接数组或对象的剩余元素

代码语言：javascript复制
// 数组
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' }
变量 对象 数组 思维导图 语法

0 人点赞