ES6基礎-變量的解構賦值

做者 | Jeskson
來源 | 達達前端小酒館

解構賦值：

數組的解構賦值，對象的解構賦值，字符串的解構賦值，數值與布爾值的解構賦值，函數參數的解構賦值。

開發環境準備：

編輯器，VS Code，Atom，Sublime，或IDE（Webstorm）瀏覽器（最新的Chrome）或Node.js環境越新越好。

數組的解構賦值：

解構賦值語法是一個JavaScript表達式，這使得能夠將值從數組或屬性從對象提取道不一樣的變量中。

重點解構賦值的概念理解：

數組的解構賦值
對象的解構賦值
字符串的解構賦值
數值和布爾值的解構賦值
函數參數的解構賦值

數組的解構賦值

const arr = [1,2,3,4];
let [a,b,c,d] = arr;

更復雜的匹配規則

const arr = ['a','b',['c','d',['e','f','g']]];
const [ , b] = arr;

const [ , , g] = ['e', 'f', 'g']
const [ , , [ , , g]] = ['c','d',['e','f','g']];

const [ , , [ , , [ , , g]]] = arr;

擴展運算符

const arr1 = [1,2,3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [arr1, arr2, arr3];

const arr4 = [...arr1, ...arr2, ...arr3];

const arr = [1,2,3,4];
const [a,b,...c] = arr;

const arr = [1, undefined, undefined];
const [a,b,c,d] = arr;

默認值：

const [a, b=2, c, d = 'a'] = arr;

交換變量

let a = 2;
let b = 1;
let temp;

temp = a;
a = b;
b = temp;

[a,b] = [b,a];

接收多個函數返回值

function getUserInfo(id) {
 // ...ajax
 return {
  true, // 第一個參數
  // 第二個參數
  {
   name: 'dada',
   gender: '男',
   id: id
  },
  '請求成功'
 };
};

const [status, data, msg] = getUserInfo(1)

對象的解構賦值：

對象的解構賦值與數組的解構賦值類似，等號左右兩邊都爲對象解構

const { a, b } = {a:1, b:2}

左邊的{}中爲須要賦值的變量，右邊爲須要解構的對象

對象的解構賦值：

對象解構賦值的方法，稍微複雜的解構條件，擴展運算符，如何對已經申明瞭的變量進行對象的解構賦值，默認值。

對象的解構賦值的主要用途，提取對象屬性，使用對象傳入亂序的函數參數，獲取多個函數的返回值。

對象的解構賦值：

const obj = {
 name: 'da',
 age: '12'
};

const { name, age } = obj;

提取對象的屬性：

結合擴展運算符：

如何對已經申明瞭的變量進行對象的解構賦值

// 報錯
let age;
const obj = {
 name: 'da',
 age: 12
};
{age} = obj;

({age} = obj); // 對的
let {age} = obj;

默認值：

let girlfriend = {
 name: '小紅',
 age: 22, // age: undefined
};

let {name,age = 24, hobby = ['學習'] } = girlfriend;

提取對象的屬性：

const { name, hobody: [ hobby1 ] } = {
 name: "小紅",
 hobby: ['學習']
};

使用對象傳入亂序的函數參數：

function AJAX(option) {
 var type = option.type || 'get';
 console.log(option);
};
AJAX({
 url: '/getinfo',
 data: {
  a: 1
 },
});

獲取多個函數返回值：

function getUserInfo(uid) {
 // ...ajax
 return { 
  status: true,
  data: {
   name: 'da',
  },
  msg: '1'
 };
};
const { status, data, msg } = getUserInfo(1);

字符串的解構賦值

const str = 'i am';
const [a,b,c,...ath] = str;

數值與布爾值的解構賦值：

// 數值與布爾值的解構賦值

const { valueOf } = 1;

函數參數的解構賦值：

function m ([x,y]) {
 return [y,x];
}

let arr = [1,2];
arr = m(arr);

對象的解構賦值：

推薦閱讀

一、你知道多少this，new，bind，call，apply？那我告訴你

二、爲何學習JavaScript設計模式，由於它是核心

三、一篇文章把你帶入到JavaScript中的閉包與高級函數

四、大廠HR面試ES6中的深刻淺出面試題知識點

五、一篇JavaScript技術棧帶你瞭解繼承和原型鏈

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

做者Info：

【做者】：Jeskson

【原創公衆號】：達達前端小酒館。

【轉載說明】：轉載請說明出處，謝謝合做！~
關於目前文章內容即涉及前端，PHP知識點，若是有興趣便可關注，很榮幸，能被您發現，真是慧眼識英！也感謝您的關注，在將來的日子裏，但願可以一直默默的支持我，我也會努力寫出更多優秀的做品。咱們一塊兒成長，從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。分享 Web 前端相關的技術文章、工具資源、精選課程、熱點資訊。

---

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

---

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客