es6 物件解構 陣列解構 引數解構

2021-10-02 10:33:30 字數 4607 閱讀 5400

使用es6的一種語法規則,將乙個物件或陣列的某個屬性提取到某個變數中。

解構不會對解構的目標造成任何影響

對於物件, 在我們要使用它的屬性時,通常把屬性儲存在變數裡

const user = 

}const age = user.age;

const name = user.name;

const *** = user.***;

或者如下分開宣告和賦值。(直接賦值可以用const;而分開先宣告變數,再賦值的寫法要用let)

// let name, age, ***, address;

// name = user.name;

// age = user.age;

// *** = user.***;

// address = user.address;

現在我們學習了解構,就可以下面這種方式書寫:

先定義4個變數,然後從物件中讀取同名屬性,放到變數中

let name, age, ***, adress;

( = user); //此處為了表明是解構語句,前面的不是物件,要用小括號括起來,表明「=user」和前面是乙個整體

console.log(name, age, ***, address); //kevin 11 男

合併書寫效果也是一樣的,它只是更方便書寫的語法糖

let  = user;
在解構中找不到同名屬性,會被賦值undefined;如果找不到同名屬性時想給它乙個預設值就用「變數名 = 預設值」的形式書寫

let  = user;
給變數宣告別名(就是變數和物件裡的屬性名不一樣,又要解構該屬性名的值時)用如下方式書寫:

let  = user

// 先定義4個變數name、age、gender、address,再從物件user中讀取同名屬性賦值,其中gender讀取的是***屬性

上兩種情況一塊出現可寫作:

let  = user;
如果需要深度解構,就是對物件的屬性又是乙個物件,對這個是物件的屬性進一步解構的情形:

const } = user //這是定義了兩個變數name、province,province是address屬性進一步解構得到

// console.log(name,address,provinc e)// uncaught referenceerror: address is not defined

console.log(name, province) //kevin 四川

陣列本質上就是乙個物件

const numbers = ["a", "b", "c", "d"];

console.log(numbers); //會顯示出物件樣式的結構

所以對陣列解構,可以像物件解構那樣解構就可以

const  = numbers;
同時es6下,可以可以用中括號直接對陣列解構

// 定義常量const時必須同時賦值,這裡分開寫要用let

let n1, n2;

([n1, n2] = numbers);

//const [n1,n2]= numbers; //按順序解構賦值

console.log(n1, n2)

const [n1,,,n4]=numbers;//解構賦值第一位和第四位

// 如果事先定義的變數多於陣列元素數,多出的變數賦值為undefined;當然也可以寫上預設值

const [n1,,,n4,n5=123]=numbers;

陣列的某一項仍是乙個陣列情形下的深層解構:

const numbers2 = ["a", "b", "c", "d", [1, 2, 3, 4]];

// 得到numbers2下標為4的陣列中的下標為2的資料,放到變數n中

const [, , , , [, , n]] = numbers2;

console.log(n);

陣列裡某一項是是物件的情況:

const numbers3 = ["a", "b", "c", "d", ];

// 得到numbers3下標為4的陣列的屬性a,賦值給變數a

const [, , , , ] = numbers3;

console.log(a);

//變數名宣告為別名

// const [, , , , ] = numbers3;

// console.log(a);

//也可以如下書寫,直接對陣列的下標為4的一項進行解構

// const = numbers3[4];

這個是物件的情形:

const user = 

}

解構出name,然後剩餘的所有屬性,放到乙個新的物件中,變數名為obj

name:kevin obj:}

const  = user;

console.log(name, obj);

這個是陣列的情形:

const numbers4 = [324, 7, 23, 5, 3243];

// 得到陣列前兩項,分別放到變數a和b中,然後剩餘的所有資料放到陣列nums

const [a, b, ...nums] = numbers4; //剩餘項的解構要放到最後乙個

// 以前可以用這樣的方法實現

//const a = numbers4[0],b=numbers4[1],nums=numbers4.slice(2);

console.log(a, b, nums);

陣列解構在變數數值調換是的運用

let a = 1,

b = 2;

[b, a] = [a, b]

console.log(a, b) //2,1

//以前要用乙個臨時變數中轉,用陣列解構的方法,顯得很方便

const article = 

}, }]}

第一種解構方式:

const 

}]} = article;

第二種解構方式:

const [, 

}] = article.comments;

第三種解構方式:

const 

} = article.comments[1]

// 有多種書寫方式,注意要解構出來項的位置很關鍵。

console.log(content, name)

函式的引數是物件,函式執行時要用到引數這個物件的屬性,以前的做法是這樣的(顯得有些麻煩,每句都要帶上user.):

function print(user) `)

console.log(`年齡:$`)

console.log(`性別:$`)

console.log(`省份:$`)

console.log(`城市:$`)

}const user =

}print(user)

在引數位置直接進行解構,則簡潔很多:

function print( }) `)

console.log(`年齡:$`)

console.log(`性別:$`)

console.log(`省份:$`)

console.log(`城市:$`)

}

再有乙個ajax的例子,以前的做法預設配置和傳參混合的模式,如果傳參則覆蓋預設值,不傳參則使用預設值

function ajax(options) 

const opt =

console.log(opt)

} ajax()

現在用解構的方法來做(簡潔很多吧)

function ajax() 

ajax()

這裡有個隱患:如果不傳參,則視為undefined,當你試圖對undefined或null進行解構會報錯在引數解構的位置預設賦值乙個空物件,是通常的解決方法。

function ajax( = {}) 

ajax()

ES6 物件解構

當從乙個物件中獲取屬性時,會進行這樣操作 const p1 const name p1.name tom shmith const age p1.age 20 const father p1.familly.father jack shmith const mother p1.familly.mot...

ES6物件,陣列和解引數解構

使用es6的一種語法規則,將乙個物件或陣列的某個屬性提取到某個變數中 const user 先定義5個變數,然後從物件中讀取同名屬性,放到變數中 let user console.log name,age,address,abc 解構不會對被解構的目標造成任何影響 const user 先定義4個變...

ES6 物件的解構賦值

es6的解構賦值,在我看來是提供了乙個整體賦值的方案。包括陣列和物件的整體賦值。基本原則如下 let x,y 1,2 x 1 y 2 let foo aaa bar bbb 但是物件的解構賦值,允許給賦值的變數重新命名。物件的重新命名解構 我自己去的名字,便於理解 其實在給物件進行解構賦值的時候,有...