解构赋值

￡神魔★判官ぃ 2022-02-01 13:11 284阅读 0赞

# 详解解构赋值 #

## 什么是解构赋值？ ##

传统做法

var array = ['hello', 'JavaScript', 'ES6'];
    var x = array[0];
    var y = array[1];
    var z = array[2];

ES6中，使用解构赋值，可以直接对多个变量同时赋值

// 如果浏览器支持解构赋值就不会报错:
    var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
    // x, y, z分别被赋值为数组对应元素:
    console.log('x = ' + x + ', y = ' + y + ', z = ' + z);
    // x = hello, y = JavaScript, z = ES6

当对数组元素进行解构赋值时，多个变量要用\[…\]括起来。  
如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致

let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
    x; // 'hello'
    y; // 'JavaScript'
    z; // 'ES6'

解构赋值还可以忽略某些元素

let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
    z; // 'ES6'

如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性

'use strict';
    
    var person = { 
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678',
        school: 'No.4 middle school'
    };
    var { name, age, passport} = person;
    
    // name, age, passport分别被赋值为对应属性:
    console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);
    
    // name = 小明, age = 20, passport = G-12345678

当一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用心的语法获取

var person = { 
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678',
        school: 'No.4 middle school'
    };
    
    // 把passport属性赋值给变量id:
    let { name, passport:id} = person;
    name; // '小明'
    id; // 'G-12345678'
    // 注意: passport不是变量，而是为了让变量id获得passport属性:
    passport; // Uncaught ReferenceError: passport is not defined

解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题

var person = { 
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678'
    };
    
    // 如果person对象没有single属性，默认赋值为true:
    var { name, single=true} = person;
    name; // '小明'
    single; // true

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：

// 声明变量:
    var x, y;
    // 解构赋值:
    { x, y} = {  name: '小明', x: 100, y: 200};
    // 语法错误: Uncaught SyntaxError: Unexpected token =

这是因为JavaScript引擎把\{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

({ x, y} = {  name: '小明', x: 100, y: 200});

## 使用场景 ##

解构赋值在很多时候可以大大简化代码。例如，交换两个变量x和y的值，可以这么写，不再需要临时变量：

var x=1, y=2;
    [x, y] = [y, x]

快速获取当前页面的域名和路径：

var { hostname:domain, pathname:path} = location;

如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。例如，下面的函数可以快速创建一个Date对象：

function buildDate({ year, month, day, hour=0, minute=0, second=0}) { 
        return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
    }

它的方便之处在于传入的对象只需要year、month和day这三个属性：

buildDate({  year: 2017, month: 1, day: 1 });
    // Sun Jan 01 2017 00:00:00 GMT+0800 (CST)

也可以传入hour、minute和second属性：

buildDate({  year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
    // Sun Jan 01 2017 20:15:00 GMT+0800 (CST)

使用解构赋值可以减少代码量，但是，需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome，Firefox，Edge等。