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

解構(gòu)表示對數(shù)據(jù)結(jié)構(gòu)進行分解，賦值是指將某一數(shù)值賦給變量的過程。在ES6中，允許按照對應(yīng)的方式，從數(shù)組或?qū)ο笾刑崛≈?，然后將提取出來的值賦給變量。解構(gòu)賦值的優(yōu)點是它可以讓編寫的代碼簡潔易讀，語義更加清晰，并且可以方便地從數(shù)組或?qū)ο笾刑崛≈?。下面將分別講解數(shù)組和對象的解構(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行代碼中等號的右邊是數(shù)組，數(shù)組中有3個值，分別是1、2、3。等號左邊的中括號不是數(shù)組，它代表解構(gòu)，而中括號中寫的是變量的名字，分別為a、b、c。等號左邊中括號里的變量與等號右邊數(shù)組中的值實際上是一一對應(yīng)的關(guān)系，即變量a的值是1.變量b的值是2，變量e的值是3。等號左邊中括號前面的let關(guān)鍵字表示中括號內(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行代碼等號左邊的中括號內(nèi)的變量d在右邊數(shù)組中沒有與之對應(yīng)的值，因此這個變量的值就為undefined。

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

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

<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)鍵字聲明了一個person變量，其值為一個對象，在person對象中，有name和age兩個屬性。其中，name屬性的值為zhangsan,age屬性的值為20。第3行代碼中，等號右邊是person對象，等號左邊的大括號表示對象解構(gòu)，在大括號中有name變量和age變量。等號左邊的name變量匹配 person對象中的name屬性，age變量匹配person對象中的age屬性，所以name變量的值為zhangsan，age變量的值為20。

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

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

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

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