在 Javascript 如何對數(shù)組和對象進(jìn)行結(jié)構(gòu)?下面,通過本篇文章,我們一起來探索一下 Javascript 中的解構(gòu)。
定義
對于解構(gòu)賦值,沒有比 MDN 更簡潔的定義:
解構(gòu)賦值語法是一個 JavaScript 表達(dá)式,可以將數(shù)組中的值或?qū)ο笾械膶傩越獍鼮椴煌淖兞俊?/blockquote>數(shù)組解構(gòu)
我們使用?方括號:[]
?來解構(gòu)數(shù)組。讓我們看看我們可以使用解構(gòu)賦值的不同場景,考慮一個包含三個元素的數(shù)組,現(xiàn)在你想分別用數(shù)組中的值創(chuàng)建三個不同的變量。舊方法是使用索引為每個新變量分配數(shù)組中的值。
const arr = [1, 2, 3]; const a = arr[0]; // a = 1 const b = arr[1]; // b = 2 const c = arr[2]; // c = 3
但是,使用解構(gòu)賦值可以大大減少執(zhí)行相同任務(wù)的工作量。
const arr = [1, 2, 3]; const [a, b, c] = arr; // a = 1, b = 2, c = 3
注意:原始陣列不受影響,保持原樣。只有賦值操作從左到右進(jìn)行。如果我們只需要數(shù)組中的兩個元素,我們可以對兩個變量使用相同的語法。數(shù)組中超過兩個元素的剩余值將被丟棄。
我們也可以根據(jù)需要使用數(shù)組中該元素的空格跳過中間元素。請參閱示例以更好地理解:
const arr = [1, 2, 3, 4]; // a = 1, b = 2 const [a, b] = arr; // x = 2, y = 4 const [ , x, , y] = arr;
使用解構(gòu)交換值
傳統(tǒng)上,我們可以使用臨時變量顯式交換值,然后在三個變量之間賦值和重新賦值,但現(xiàn)在我們可以使用解構(gòu)直接賦值,示例如下:
let a = 10, b = 20; // Old way let temp = a; a = b; b = temp; // a = 20, b = 10 // Using destructuring [a, b] = [b, a]; // a = 20, b = 10
從函數(shù)調(diào)用中接收多個值
讓我們考慮一個具有很少屬性的對象 ?
restaurant
?:const restaurant = { name: 'La\' Pinoz Pizza', location: 'Ghaziabad', categories: ['Italian', 'Vegetarian', 'Non-Vegetarian', 'Organic'], starterMenu: ['Garlic Bread', 'Fries', 'Pastries'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], order: function(starterIndex, mainIndex) { return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; } }
?
restaurant
?對象的 order 屬性是一個函數(shù),它接受兩個參數(shù)并返回一個包含兩個值的數(shù)組。我們可以在這里使用解構(gòu),將 Array 的元素直接賦值給變量。const [starter, mainCourse] = restaurant.order(2,1); console.log(starter, mainCourse); // output: Pastries Pasta
嵌套解構(gòu)
顧名思義,非常簡單,在數(shù)組中解構(gòu)數(shù)組。考慮一個帶有嵌套數(shù)組的數(shù)組:[1, 2, [3, 4]]。當(dāng)我們用這個數(shù)組分配 a,b,c 的值時,每個人都會得到分配的單個元素,即 a = 1, b = 2, c = [3,4]。如果我們想從數(shù)組 c 中分離出值,那么我們可以使用類似的解構(gòu)語法并實現(xiàn)它。
const nested = [1, 2, [3, 4]]; const [a, b, c] = nested; // a = 1, b = 2, c = [3, 4] const [x, , [y, z]] = nested; // x = 1, y = 3, z = 4
默認(rèn)值
如果我們不知道傳入數(shù)組中包含的數(shù)據(jù),那么分配給變量的默認(rèn)值是?
undefined
?。讓我們看一個例子并理解:const unknownArray = [1, 5, 9]; const [a, b, c, d] = unknownArray; console.log(a,b,c,d); // Output: 1 5 9 undefined
對象解構(gòu)
我們使用?花括號:{}
?來解構(gòu)對象。我們必須提供與對象中的屬性名稱完全匹配的變量名稱。(盡管我們還將看到一種如何使用不同變量名稱的方法)。讓我們考慮與上面類似的?
restaurant
?對象,還有更多的屬性:const restaurant = { nameOfRestaurant: 'La\' Pinoz Pizza', location: 'Ghaziabad', categories: ['Italian', 'Vegetarian', 'Non-Vegetarian', 'Organic'], starterMenu: ['Garlic Bread', 'Fries', 'Pastries'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], order: function(starterIndex, mainIndex) { return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; }, openingHours: { thu: { open: 11, close: 22 }, fri: { open: 10, close: 23 }, sat: { open: 11, close: 23 } } }
我們可以使用其屬性名稱來解構(gòu)?
restaurant
?對象,現(xiàn)在這里屬性的順序無關(guān)緊要,因為只要屬性名稱匹配就可以訪問它。const {nameOfRestaurant, openingHours, mainMenu} = restaurant; console.log('Name: ', nameOfRestaurant); console.log('Opening Hours: ', openingHours); console.log('Main Menu: ', mainMenu); // Output: // Name: La' Pinoz Pizza // Opening Hours: { // thu: { open: 11, close: 22 }, // fri: { open: 10, close: 23 }, // sat: { open: 11, close: 23 } // } // Main Menu: [ 'Pizza', 'Pasta', 'Risotto' ]
使用不同的變量名
即使我們想更改與屬性名稱不同的變量名稱,我們?nèi)匀恍枰崆爸缹傩悦Q。所以查找傳入的對象總是一個好習(xí)慣。好的,所以我們可以使用?
冒號(:)
?為屬性名稱指定別名。const {nameOfRestaurant: name, openingHours: timing, mainMenu: menu} = restaurant; console.log('Name: ', name); console.log('Opening Hours: ', timing); console.log('Main Menu: ', menu); // We get the output similar to the above output.
設(shè)置默認(rèn)值
我們總是可以在解構(gòu)對象時為變量分配一個默認(rèn)值。如果值存在于對象中,則將其分配給變量;如果不存在,則將默認(rèn)值分配給變量。
const {nameOfRestaurant: name = 'PizzaHut', menu = [ ]} = restaurant; // Lets assume that the restaurant object has no property with name 'nameOfRestaurant', // In this case the name becomes 'PizzaHut'. // On the other hand there is no menu property so menu is assigned with empty array.
變異值
在使用對象解構(gòu)來改變值時,我們應(yīng)該小心花括號,因為 javascript 會在遇到開放花括號時立即期望代碼塊。
為了解決這種情況,我們將解構(gòu)代碼包裝在括號內(nèi)。let a = 11; let b = 23; let obj = { a: 120, b: 34 }; ({ a, b } = obj); // Important line console.log(a, b); // a = 120, b = 34