這篇文章為大家帶來了關於javascript的相關知識，其中主要整理了物件和陣列的解構賦值的相關問題，包括了陣列解構、物件解構以及函數參數解析等等內容，下面一起來看一下，希望對大家有幫助。
【相關推薦：javascript影片教學、web前端】
物件（Object ）和陣列（Array）是JavaScript中最常用的兩種資料結構，二者的共同特點是都可以儲存大量的資料。
問題是，當我們再參數傳遞和計算過程中，可能只需要物件和陣列中的一部分內容，而不是整個物件/陣列。
此時，就需要使用解構賦值將物件/陣列拆包，取得其內部的一部分數據，下面會使用案例介紹解構賦值在程式設計中的應用。
所謂陣列解構，就是取得陣列中一部分對我們有用的數據，舉個栗子：
let arr = ['first','second']let [x, y] = arr //解构操作console.log(x,y)
程式碼執行結果如下：
#程式碼的內容非常簡單，把數組中的內容賦值給了兩個變量，然後輸出。
陣列解構還可以和split函數搭配使用，優雅又高階：
let [x, y] = 'hello world'.split(' ')console.log(x, y)程式碼執行結果如下：
解構也可以叫做“解構賦值”，其本質就是把數組的元素複製給變量，所以原始數組沒有發生任何的變化。
let [x, y] = arr //{1}let x = arr[0] //{2}let y = arr[1]以上程式碼中的{1}和{2}是完全等價的，只是解構賦值的方式比較簡潔而已。
如果我們在使用解構賦值的時候，希望得到陣列的第1、3個元素，但不要第2個元素，該怎麼做呢？
舉個栗子：
let [x, ,z] = ['first','second','third']console.log(x,z)
程式碼執行結果如下：
#這樣就使用逗號，避開掉了第二個元素。
解構賦值不一定用在陣列上，在任何可迭代物件上都是可以使用的，舉個例子：
let [x, y, z] = 'xyz'let [a, b, c] = new Set(['a','b','c'])console.log(x,y,z)console.log(a,b,c)
程式碼執行結果：
解構賦值會對右邊的值進行迭代，然後將左邊的變數賦值。
在解構賦值的=右邊可以是任何和迭代的對象，而左側則可以是任何可以賦值的變量，並不局限於簡單的變數。
舉個栗子：
let country = {};[country.name, country.desc] = 'China Beautiful'.split(' ')console.log(country.name,country.desc)程式碼執行結果：
#注意：程式碼第一行的分號必須要加，否則將遇到錯誤！詳情可以了解《JavaScript語法構成》。
Object.entries(obj)方法會傳回物件obj的屬性列表，我們同樣可以將解構語法用在這裡：
let country = {
name:'China',
desc:'a beautiful country'}for(let[k, v] of Object.entries(country)){
console.log(k,v)}程式碼執行結果：
由於Map對象本身就是可迭代的，所以可以直接使用for...of語法結合解構語法：
let map = new Map()map.set('name','China')map.set('desc','Beautiful Country')for(let [k, v] of map){
console.log(k,v)}程式碼執行結果：
let a = 1;let b = 2;[a,b]=[b,a]console.log(`a=${a},b=${b}`)
##多餘的元素
let [a,b,c] = 'ab'console.log(a,b,c)
程式碼執行結果：
可见最后一个变量c被赋值undefined。
我们也可以为多余的左侧变量赋予默认值，举个例子：
let[a=0,b=0,c=0] = 'ab'console.log(c)
代码执行结果如下：
右侧多于左侧：
let [a, b] = 'abcd'console.log(a,b)
代码执行结果如下：
这里就没什么可解释的了。
但是，如果我们希望获得其他元素应该怎么做呢？
举例如下：
let [a, b, ...others] = 'abcdefg'console.log(others)
代码执行结果：
这里的变量others就将所有剩余选项全部都收集了起来，others可以是任何合法的变量名，不局限于others本身。
解构语法同样使用于对象，只不过语法上稍有不同：
let {var1, var2} = {...}举个例子：
let country = {
name:'China',
desc:'Beautiful'};let {name,desc} = country;console.log(name,desc)代码执行结果：
**注意：**这里的变量顺序是没有影响的，我们也可以交换name和desc的位置，如：
let {desc,name}=country;代码的执行结果并没有什么变化。
当然我们也可以指定变量和属性的映射，例如：
let country = {
name:'China',
desc:'Beautiful'}//对应的规则：{对象属性:目标变量}let {name:desc,desc:name} = country;console.log(`name:${name},desc:${desc}`)代码执行结果：
这样我们就强行交换了变量和属性之间的映射方式，或许下面的例子更直观：
let obj = {
x:'xiaoming',
y:'18'}let {x:name,y:age}=obj;console.log(`name:${name},age:${age}`)代码执行结果：
和数组一样，我们也可以使用=为变量指定默认值。
举例如下：
let obj = {
name:'xiaoming',
age:18}let {name='xiaohong',age=19,height=180} = obj
console.log(height)代码执行结果：
这样，即使对象没有对应的属性，我们同样可以使用默认值代替。
我们还可以结合映射和默认值：
let obj = {
x:'xiaoming',
y:'18'}let {x:name='xxx',y:age=18,height:height=180}=obj;console.log(`name:${name},age:${age},height:${height}`)代码执行结果：
和数组一样，我们可以取对象的一部分属性：
let obj = {
x:'x',
y:'y',
z:'z'}let {x:name}=obj
console.log(name)我们还可以使用...将剩余的属性重新打包为一个新对象：
let obj = {
x:'x',
y:'y',
z:'z'}let {x,...others}=obj
console.log(others)代码执行结果：
可能有写童鞋已经发现了，我们在使用解构操作时，总是把一个对象赋值给一个使用let新定义的变量，例如：let {...} = obj。
如果我们使用已经存在的对象，会发生什么事呢？
let a,b,c;//定义三个变量{a,b,c} = {a:'a',b:'b',c:'c'}console.log(a,b,c)代码执行结果如下：
为什么会出现这种错误呢？
这是因为JavaScript会把主代码流中的{...}作为一个代码块，代码块是一个独立的代码空间，用于语句的分组。
案例如下：
{
let a = 1;
let b = 2;
...}上例中的{a,b,c}就被错误的当成了这样的代码块，为了告诉引擎这不是一个代码块，我们可以这样：
let a,b,c;//定义三个变量({a,b,c} = {a:'a',b:'b',c:'c'})//加括号console.log(a,b,c)代码执行结果如下：
如果对象出现了嵌套，相应的我们也可以使用对应的嵌套层次进行解析：
let People = {
head:{
leftEye:'le',
rightEye:'re'
},
hands:['left-hand','right-hand'],
others:'others'}let {
head:{
leftEye,
rightEye },
hands:[left_hand,right_hand],
others} = People;console.log(leftEye,right_hand)代码执行结果：
有些情况下，一个函数需要非常多的参数，这不仅会让程序猿记忆困难，同时也会让代码变的冗长。
例如：
function createWin(title="Untitled",width=100,height=200,items=[]){
...}这种情况下，调用函数会变的非常困难。更令人苦恼的是，通常这些参数只要保持默认就可以了，而我们还要费尽心机的重写它们。就像这样：
createWin(title="Untitled",width=100,height=200,items=['i','j','k'])
解构赋值可以帮助我们解决这些问题，我们可以把对象传递给函数，而函数会自动的把对象解析为参数：
let options = {
title:'NewWin',
width:200,
height:100,
items:['items1','items2']}//传入的对象会被解构成下面的参数样式//等价于{title="Untitled",width=100,height=200,items=[]} = optionsfunction createWin({title="Untitled",width=100,height=200,items=[]}){
console.log(`title:${title},width:${width},height:${height},items:[${items}]`)}createWin(options)//只需要传递一个对象【相关推荐：javascript视频教程、web前端】
以上是JavaScript物件與陣列的解構賦值基礎詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
