數(shù)組和對(duì)象的解構(gòu)賦值怎么實(shí)現(xiàn)？【代碼演示】

解構(gòu)表示對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行分解，賦值是指將某一數(shù)值賦給變量的過程。在ES6中，允許按照對(duì)應(yīng)的方式，從數(shù)組或?qū)ο笾刑崛≈?，然后將提取出來的值賦給變量。解構(gòu)賦值的優(yōu)點(diǎn)是它可以讓編寫的代碼簡潔易讀，語義更加清晰，并且可以方便地從數(shù)組或?qū)ο笾刑崛≈怠Ｏ旅鎸⒎謩e講解數(shù)組和對(duì)象的解構(gòu)賦值。

1.數(shù)組的解構(gòu)賦值

數(shù)組的解構(gòu)賦值就是將數(shù)組中的值提取出來，然后賦值給另外的變量。

下面是數(shù)組解構(gòu)賦值的基本形式，即變量的數(shù)量和數(shù)組中值的數(shù)量相一致，示例代碼如下：

<script>
  let [a, b, c] = [1, 2, 3];
  console.log(a)；//輸出結(jié)果：1
  console.log(b)；//輸出結(jié)果：2
  console.log (c)://輸出結(jié)果：3
</script>

上述代碼中，第2行代碼中等號(hào)的右邊是數(shù)組，數(shù)組中有3個(gè)值，分別是1、2、3。等號(hào)左邊的中括號(hào)不是數(shù)組，它代表解構(gòu)，而中括號(hào)中寫的是變量的名字，分別為a、b、c。等號(hào)左邊中括號(hào)里的變量與等號(hào)右邊數(shù)組中的值實(shí)際上是一一對(duì)應(yīng)的關(guān)系，即變量a的值是1.變量b的值是2，變量e的值是3。等號(hào)左邊中括號(hào)前面的let關(guān)鍵字表示中括號(hào)內(nèi)的變量是使用let關(guān)鍵字聲明的。

如果變量的數(shù)量和數(shù)組中值的數(shù)量不一致，那么變量的值就等于undefined，也就是解構(gòu)不成功，示例代碼如下。

<script>
  let [a, b, c, d] = [1, 2, 3];
  console.log(a)；//輸出結(jié)果：1
  console.log (b)；//輸出結(jié)果：2
  console.log (c)；//輸出結(jié)果：3
  console.log(d)；//輸出結(jié)果：undefined
</script>

上述代碼中，第2行代碼等號(hào)左邊的中括號(hào)內(nèi)的變量d在右邊數(shù)組中沒有與之對(duì)應(yīng)的值，因此這個(gè)變量的值就為undefined。

2.對(duì)象的解構(gòu)賦值

對(duì)象解構(gòu)上許使用變量的名字匹配對(duì)象的屬性，如果匹配成功就將對(duì)象中屬性的值賦給變量。下面演示對(duì)象解構(gòu)賦值的基本形式。等號(hào)左邊的大括號(hào)中寫的是變量的名字，等號(hào)右邊要寫具體被解構(gòu)的對(duì)象，示例代碼如下。

<script>
  let. person ={ name: 'zhangsan', age: 20 };
  let { niane, age } = person;    //解構(gòu)賦值
  console.log (name);             //輸出結(jié)果：zhangsan
  console.log(age);               //輸出結(jié)果：20
</script>

上述代碼中，第2行代碼使用let關(guān)鍵字聲明了一個(gè)person變量，其值為一個(gè)對(duì)象，在person對(duì)象中，有name和age兩個(gè)屬性。其中，name屬性的值為zhangsan,age屬性的值為20。第3行代碼中，等號(hào)右邊是person對(duì)象，等號(hào)左邊的大括號(hào)表示對(duì)象解構(gòu)，在大括號(hào)中有name變量和age變量。等號(hào)左邊的name變量匹配 person對(duì)象中的name屬性，age變量匹配person對(duì)象中的age屬性，所以name變量的值為zhangsan，age變量的值為20。

由此可見，對(duì)象解構(gòu)實(shí)際上是屬性匹配，變量的名字匹配對(duì)象中屬性的名字。如果匹配成功，就將對(duì)象中屬性的值賦給變量。

上述示例是象解構(gòu)的一種形式，下面將使用另外一種形式去實(shí)現(xiàn)對(duì)象的解構(gòu)賦值。這種形式支持變量的名字和對(duì)象中屬性的名字不一樣的情況，等號(hào)左邊的大括號(hào)代表對(duì)象解構(gòu)，它的語法與對(duì)象類似，通過大括號(hào)中的屬性匹配對(duì)象中的屬性，示例代碼如下。

<acript>
  let person={name:‘zhangsan',age:20,sex:'男'}；
  let ( name: nyName ) - person;    //輸出結(jié)果：zhangsan
  console.log(nyName);
</script>

上述代碼中，第2行代碼使用let關(guān)鍵字聲明了一個(gè)person變量，其值為一個(gè)對(duì)象，在person對(duì)象中，有name、age和sex共3個(gè)屬性。其中，name屬性的值為zhangsan，age屬性的值為20，sex屬性的值為男。第3行代碼中，等號(hào)右邊是person對(duì)象；在等號(hào)左側(cè)的大括號(hào)中，冒號(hào)左側(cè)的屬性名僅用于屬性匹配(如name)，冒號(hào)右側(cè)是變量名(如 myName)。如果屬性匹配成功，則將對(duì)象屬性對(duì)應(yīng)的值賦給冒號(hào)左側(cè)的變量。例如，將第3行代碼冒號(hào)左側(cè)大括號(hào)中的name屬性和person對(duì)象中的name屬性進(jìn)行匹配，匹配成功后將person對(duì)象中name屬性的值zhangsan賦給myName變量。