建站
咨詢
售后
建站咨詢
新聞中心
解構(gòu)是JavaScript中的一個強(qiáng)大工具。它可以從數(shù)組和對象中提取出有意義的變量，并用解構(gòu)來處理JSON數(shù)據(jù)、嵌套對象或數(shù)組非常方便。
創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、珙縣網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為珙縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
下面的示例展示了創(chuàng)建解構(gòu)賦值表達(dá)式的最簡單的方法之一：
如果左側(cè)的解構(gòu)表達(dá)式中傳遞的變量名與對象屬性不匹配，則將該值作為undefined進(jìn)行分配。雖然這個例子看起來非常簡單，但它還可以通過解構(gòu)語法實現(xiàn)更多可能。
一起去探索一些解構(gòu)用例吧。
通過解構(gòu)別名進(jìn)行重命名
無論是在頂級對象中，還是在需要導(dǎo)入庫時，別名都有助于防止重名，在import語句中解構(gòu)別名與解構(gòu)對象不同：
- import { some-func1, some-func2 } from 'some-library';//use aliasing
- import { some-func1 as newFunc } from 'some-library';
- newFunc();import { * as some-library } from 'some-library'
要提供一個與屬性名不同的解構(gòu)變量，需要使用冒號語法來指定它，如下所示：
- const { work: {job : profession} } = person;
- console.log(profession) // Blogger
使用解構(gòu)表達(dá)式交換變量
通常會使用一個臨時變量進(jìn)行交換，示例如下(也可以通過一個數(shù)學(xué)公式和XOR運算符來做)：
- let a = 1;
- let b = 2;
- let temp;
- temp = a;
- a = b;
- b = temp;
通過解構(gòu)，可以在單個表達(dá)式中輕松地交換變量，如下所示：
- [a, b] = [b, a];
更有趣的一點是，解構(gòu)能夠交換n個變量：
- [a, b, c] = [b, c, a]
訪問嵌套屬性并設(shè)置默認(rèn)值
解構(gòu)也適用于嵌套對象，并有助于避免長鏈列表。示例如下：
- const person = {
- name: 'Fred',
- age: 26,
- work: {
- job: 'Blogger'
- }
- };const {work: {job} } = person;
- console.log(job); //prints: Blogger
注意，在上面的代碼中，work 引用沒有被解構(gòu)，只有最后一個嵌套屬性被分配給變量—job。為了使work 也得到嵌套屬性，我們需要
- const {work, work: {job} } = person;
如果被解構(gòu)對象中不存在鍵值，則會得到undefined 值?？梢酝ㄟ^設(shè)置一個默認(rèn)值來避免這種情況，如下所示：
現(xiàn)在考慮一下work 的屬性是否完全不可用。在這種情況下，需要用以下方式來書寫上面的解構(gòu)表達(dá)式：
- const { work: { job = 'NA', salary = 'NA'} = {} } = person;
在解構(gòu)中使用計算屬性
到目前為止，都在利用靜態(tài)鍵值進(jìn)行解構(gòu)。但是對于具有動態(tài)鍵值的對象，需要使用計算屬性。計算屬性用方括號指定，如下所示：
- const person = {
- name: 'Fred',
- work: {
- job: 'Blogger'
- }
- };let name = 'name'const { [name] : username } = person;
- console.log(username); //Fred
也可以創(chuàng)建屬性數(shù)組，如下所示：
訪問數(shù)組元素
就像對象解構(gòu)一樣，數(shù)組解構(gòu)也可以通過語法實現(xiàn)，如下所示：
- const arr = [1,2,3];
- const [a, b] = arr;
- //a = 1, b = 2
可以在=后面為每個解構(gòu)變量設(shè)置默認(rèn)值。如果有不想分配給局部變量的項目，也可以選擇跳過?？梢酝ㄟ^逗號操作符來實現(xiàn)：
- //skips the 2nd element
- const [first,,third] = arr;
對一個大數(shù)組使用逗號操作符可能是一項乏味的任務(wù)，我們可以使用類似語法的對象解構(gòu)——通過索引訪問元素，如下所示：
- const arr = ['a','b','c','d'];const {0: first, 3: fourth} = arr;
- console.log(fourth) //d
- const {0: first, 3: fourth, 9: tenth = 'z'} = arr;
上一條語句中定義了一個默認(rèn)值，以防數(shù)組沒有索引。也可以用訪問對象的方式來訪問嵌套數(shù)組元素：
- const arr = ['a', [1, 2, 3]
- const [first, [one, two, three]]= arr;
使用Rest語法省略屬性
Rest語法用于挑選多個元素并將它們設(shè)置為一個新元素，這有助于解構(gòu)時省略某個屬性。
- const arr = ["Hello", "How" , "are","you"];var [hello,...remaining] = arr;
- console.log(remaining) // ["How" , "are", "you"]
上述表達(dá)式也可以用于克隆數(shù)組?？梢允褂孟嗤倪壿媮頇z索或刪除嵌套對象：
解構(gòu)可能看起來有些棘手，但一旦適應(yīng)了，就可以利用它創(chuàng)建特定的模式，快速獲取所需要的東西。盡快掌握它吧!
網(wǎng)頁名稱：JavaScript的解構(gòu)技巧：排除對象屬性、避免命名沖突、交換……
標(biāo)題URL：http://fisionsoft.com.cn/article/dpopepg.html
