3.7 解构赋值

目录

3.7.1 对象解构

3.7.2 数组解构

        在JavaScript，我们经常需要从某个对象或者数组中提取特定的数据赋值给变量，这种操作重复且无趣。代码如下所示：

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}


// 提取对象中的数据赋值给变量
let title = book.title;
let isbn = book.isbn;
let price = book.price;
let category = book.category.name;


// 提取数组中的数据给变量
let arr = [1,2,3]
let a = arr[0], b = arr[1], c = arr[2];

        ES6为对象和数组提供了解构功能，允许按照一定模式和数组中提取值，并对变量进行赋值。

3.7.1 对象解构

        对象解构的语法形式是在一个赋值操作符的左边放置一个对象字面量。代码如下所示：

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}

let { title, isbn, price } = book;
console.log(title);   // Vue.js从入门到实战
console.log(isbn);    // 7165671
console.log(price);   // 98

        如果变量之前已经声明，之后想用解构语法给变量赋值，那么需要用圆括号包裹整个解构赋值语句。代码如下所示：

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}

let title,isbn,price;
{title,isbn,price} = book;  // 语法错误
({title,isbn,price}) = book;  // 正确

        对象解构的其他使用场景：

        1. 给变量赋值的同时向函数传递参数

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}
let title,isbn;

function outputBookInfo(book){
    console.log(book);
}

outputBookInfo({ title,isbn } = book);
console.log(title);   // Vue.js从入门到实战
console.log(isbn);    // 7165671

        2. 解构中的变量默认值

        使用解构时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined,这种情况下，可以考虑为该变量定义一个默认值。代码如下所示：

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}

let { title, isbn, salesVolume = 0} = book;
console.log(title);         // Vue.js从入门到实战
console.log(isbn);          // 7165671
console.log(salesVolume);   // 0

        3. 解构对象属性的不同变量名称

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}

let { title: bookTitle, isbn: bookIsbn} = book;
console.log(bookTitle);         // Vue.js从入门到实战
console.log(bookIsbn);          // 7165671

        4. 嵌套对象解构取值

let book = {
    title: "Vue.js从入门到实战",
    isbn:"7165671",
    price:98,
    category:{
        id:1,
        name:"web前端"
    }
}

let { title,isbn,category:{name:category2}} = book;
console.log(title);         // Vue.js从入门到实战
console.log(isbn);          // 7165671
console.log(category2);     // web前端

        嵌套的含义是：在找到book对象的 category属性后，继续深入下一层查找name属性，并将其赋值给category2局部变量。

        5.展开运算符与解构的结合使用 

let person = {
    name:"张三",
    age:18
}

let { ...newObject} = person;
let { anotherObject} = person;
let { name, age, gendar } = {...person,gender:'男'};

console.log(newObject);      // { name:"张三",age: 18}
console.log(anotherObject);  // undefined
console.log(name);           // 张三
console.log(gendar );        // 男

3.7.2 数组解构

        与对象解构语法不同，数组解构使用方括号。此外，由于数据解构本质上的不同，数组解构没有对象属性名的问题，因此语法上更简单。代码如下所示：

let arr = [1,2,3];
let [a, b, c] = arr;
console.log(a);   // 1
console.log(b);   // 2
console.log(c);   // 3

       数组解构的其他使用场景：

        1. 获取指定位置的数组元素值

        数组解构语法中，变量值是根据数组元素中的顺序进行选取的。如果要获取指定位置的数组元素值，可以只为该位置的元素提供变量名。例如，要获取数组中第3个位置的元素，可以采用以下的代码来实现：

let arr = [1,2,3];
let [, , c] = arr;

console.log(c);   // 3

        2. 声明过的变量，数组解构赋值

let arr = [1,2,3];
let a,b,c;
[a, b, c] = arr;   // ok

        3. 解构默认值

let arr = [1,2,3];
let [a, b, c,d = 0] = arr;   // ok
console.log(d);  // 0

        4.嵌套的解构

let categories = ["C/C++",["Vue","React","Java"]];
let [language1,[,language2]] = categories;
console.log(language1);  // C/C++
console.log(language2);  // React

        5.与展开运算符结合使用

let arr = [1,2,3];
let [a, ...others] = arr;    // 将arr数组的剩余元素赋给others变量
let [...newArr] = arr;       // 数组复制的另一种实现方式
console.log(a);              // 1
console.log(others);         // [ 2, 3]
console.log(others[0]);      // 2
console.log(newArr);         // [ 1, 2, 3]