站長(zhǎng)資訊網(wǎng)
es6解構(gòu)支持字符串。ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)；通過(guò)解構(gòu)賦值可以將屬性值從對(duì)象/數(shù)組中取出賦值給其他變量。字符串也可以解構(gòu)賦值，字符串會(huì)被轉(zhuǎn)換成了一個(gè)類(lèi)似數(shù)組的對(duì)象；類(lèi)似數(shù)組的對(duì)象都有一個(gè)length屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。
前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6版、Dell G3電腦。
es6的解構(gòu)是什么意思
destructuring：百度百科的意思是結(jié)構(gòu)分解，ES6 中允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）。
解構(gòu)賦值語(yǔ)法是一種 Javascript 表達(dá)式，通過(guò)解構(gòu)賦值可以將屬性值從對(duì)象/數(shù)組中取出賦值給其他變量
ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)
開(kāi)發(fā)中比較常見(jiàn)的有字符串解構(gòu)、對(duì)象解構(gòu)、 數(shù)組解構(gòu)、混合解構(gòu)。這是一種將數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過(guò)程，從而達(dá)到簡(jiǎn)化提取信息的目的。
1. 基本數(shù)據(jù)類(lèi)型解構(gòu)
1-1 字符串解構(gòu)賦值
字符串也可以解構(gòu)賦值，字符串會(huì)被轉(zhuǎn)換成了一個(gè)類(lèi)似數(shù)組的對(duì)象
類(lèi)似數(shù)組的對(duì)象都有一個(gè)length 屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值
// 會(huì)將字符串轉(zhuǎn)換成一個(gè)類(lèi)數(shù)組對(duì)象 let [a, b, c, d ,e] = 'hello'; console.log(a, b, c, d ,e); // h e l l o // 類(lèi)數(shù)組對(duì)象lenth 屬性解構(gòu) let {length : num} = 'hello'; console.log(num); // 5
登錄后復(fù)制
1-2 數(shù)值、布爾值解構(gòu)賦值
解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象
解構(gòu)賦值的規(guī)則是，只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象
數(shù)值和布爾值的包裝對(duì)象都有 toString 屬性，變量都能取到值
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
登錄后復(fù)制
由于 undefined 和 null 無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)
let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
登錄后復(fù)制
2. 數(shù)組解構(gòu)
2-1 基本用法
- 數(shù)組可以變量聲明并賦值時(shí)解構(gòu)，也可以在變量先聲明后賦值時(shí)解構(gòu)
// 數(shù)組可以在變量聲明并賦值時(shí)解構(gòu) let arr = ['jsx', 'ljj', 'zdj', 'ddc'] let [one, two, three, four] = arr; console.log(one, two, three, four); // jsx ljj zdj ddc // 也可以在變量先聲明后賦值解構(gòu) let name1, name2, name3, name4; [name1, name2, name3, name4] = ['jsx', 'ljj', 'zdj', 'ddc']; console.log(name1, name2, name3, name4); // jsx ljj zdj ddc
登錄后復(fù)制
2-2 完全解構(gòu)
- 只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值
let [one, two, three] = ['html', 'css', 'js']; console.log(one, two, three); // html css js let [str1, [str2], str3] = ['jsx', ['ljj'], 'ddc'] console.log(str1, str2, str3); // jsx ljj ddc
登錄后復(fù)制
- 數(shù)組中不想要的元素也可以使用逗號(hào)
,來(lái)忽略
let [, , name] = ['haha', 'xixi', 'jsx']; console.log(name); // jsx let [, xixi , ] = ['haha', 'xixi', 'jsx']; console.log(xixi); // xixi
登錄后復(fù)制
- 當(dāng)解構(gòu)一個(gè)數(shù)組時(shí)，可以使用擴(kuò)展語(yǔ)法
...，將數(shù)組剩余部分賦值給一個(gè)變量
let [num, ...numN] = [1, 2, 3, 4]; console.log(num); // 1 console.log(numN); // [2, 3, 4]
登錄后復(fù)制
- 交換變量值，在一個(gè)解構(gòu)表達(dá)式中可以交換兩個(gè)變量的值
let name1 = 'jsx'; let name2 = 'ljj'; let name3 = 'ddc'; [name1, name2, name3] = [name3, name1, name2]; console.log(name1, name2, name3); // ddc jsx ljj
登錄后復(fù)制
- 等號(hào)右側(cè)可以是任何可迭代對(duì)象（具備
Iterator接口對(duì)象或數(shù)組）
let [a, b, c] = 'jsx'; console.log(a, b, c); // j s x let [one1, two1, three1] = new Set([1, 2, 3]); console.log(one1, two1, three1); // 1 2 3
登錄后復(fù)制
2-3 不完全解構(gòu)
- 當(dāng)?shù)忍?hào)左邊的變量只匹配一部分的等號(hào)右邊的數(shù)組，右邊的數(shù)組多余元素會(huì)被忽略
let [one, two] = [1, 2, 3]; console.log(one, two); // 1 2 let [a, [b], c] = [1, [2, 3], 4] console.log(a, b, c); // 1 2 4
登錄后復(fù)制
- 當(dāng)?shù)忍?hào)左邊的變量數(shù)量多于等號(hào)右邊的數(shù)組元素，解構(gòu)賦值左邊多余的變量則為
undefined
let [str1, str2] = ['jsx']; console.log(str1, str2); // jsx undefined
登錄后復(fù)制
- 擴(kuò)展語(yǔ)法
...變量解構(gòu)時(shí)匹配不到元素值時(shí)返回[]空數(shù)組
let [str3, ...str4] = ['jsx']; console.log(str3, str4); // jsx []
登錄后復(fù)制
- 如果等號(hào)的右邊不是數(shù)組，也不是可迭代對(duì)象，那么解構(gòu)賦值將會(huì)報(bào)錯(cuò)
let [foo1] = 1; let [foo2] = false; let [foo3] = NaN; let [foo4] = undefined; let [foo5] = null; let [foo6] = {}; console.log(foo1, foo2, foo3, foo4, foo5, foo6); // is not iterable
登錄后復(fù)制
2-4 默認(rèn)值
- 數(shù)組解構(gòu)時(shí)可以在表達(dá)式左邊的數(shù)組中為任意對(duì)象預(yù)設(shè)默認(rèn)值
let [name1 = 'jsx', name2 = 'ljj'] = []; console.log(name1, name2); // jsx ljj
登錄后復(fù)制
ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符===判斷一個(gè)位置是否有值，當(dāng)一個(gè)數(shù)組缺少的值時(shí)，元素嚴(yán)格等于undefined，默認(rèn)值才會(huì)生效
let [num = 123] = [undefined]; console.log(num); // 123 // null ！== undefined means let [num1 = 123] = [null]; // null嚴(yán)格相等undefined所有默認(rèn)值無(wú)效 console.log(num1); // null
登錄后復(fù)制
- 如果默認(rèn)值是一個(gè)函數(shù)聲明，函數(shù)聲明是惰性求值的，只有在右邊沒(méi)有匹配值時(shí)才會(huì)執(zhí)行
function func() { return 123 } let [num2 = func()] = [undefined]; console.log(num2)
登錄后復(fù)制
- 默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明
let [str1 = 'jsx', str2 = str1] = []; console.log(str1, str2); // jsx jsx // str4未聲明 let [str3 = str4, str4 = 'ljj'] = []; // Uncaught ReferenceError
登錄后復(fù)制
3. 對(duì)象解構(gòu)
3-1 基本用法
- 基本語(yǔ)法
let {var1, var2} = {var1:…, var2:…}
登錄后復(fù)制
- 對(duì)象解構(gòu)賦值與先聲明后獨(dú)立進(jìn)行解構(gòu)賦值
let { name, age } = { name: 'jsx', age: 22 }; console.log(name, age); // jsx 22 // 先聲明后獨(dú)立解構(gòu)賦值 let a, b; // 賦值語(yǔ)句需要通過(guò)()包圍 因?yàn)閧}是一個(gè)塊級(jí)而不是字面量 ({a, b} = {a: 1, b: 2}); console.log(a, b); // 1 2
登錄后復(fù)制
3-2 屬性變量同名
- 對(duì)象的屬性沒(méi)有次序，左邊的變量必須與對(duì)象屬性同名，才能取到正確的值
let {name, age} = {name: 'jsx', age: 22}; console.log(name, age); // jsx 22
登錄后復(fù)制
- 當(dāng)變量沒(méi)有對(duì)應(yīng)的同名對(duì)象屬性時(shí)，會(huì)導(dǎo)致1取不到值返回
undefined
// 如果解構(gòu)失敗，變量的值等于undefined let {a, b} = {a: 'jsx', c: 'ljj'}; console.log(a, b); // jsx undefined
登錄后復(fù)制
3-3 屬性變量不同名
- 當(dāng)變量名與對(duì)象屬性名不一致時(shí)，可以使用冒號(hào)
:來(lái)設(shè)置，將對(duì)象屬性值賦值給:冒號(hào)后的變量
let {user: name, age: num} = {user: 'jsx', age: 22} console.log(name, num); // jsx 22
登錄后復(fù)制
foo:baz此時(shí)冒號(hào)前面foo則是匹配模式匹配對(duì)象屬性，baz則是匹配屬性的值
let {foo:baz} = {name: 'jsx'}; console.log(foo); // ncaught ReferenceErro console.log(baz); // undefined
登錄后復(fù)制
- 先找到同名屬性，然后再賦給對(duì)應(yīng)的變量，真正被賦值的是后者，而不是前者
let {name: str, age: num1} = {user: 'jsx', age: 22}; console.log(str, num1); // undefined 22
登錄后復(fù)制
- 數(shù)組對(duì)象嵌套解構(gòu)賦值
let obj = { lesson: ['html', { class: 'css' }] } let { lesson: [x, { class: y }] } = obj; // console.log(x, y); // html css let { lesson } = obj; console.log(lesson); // ['html', {…}] let obj1 = {}; let arr1 = []; ({ foo: obj1.prop, bar: arr1[0] } = { foo: 123, bar: true }); console.log(obj1) // {prop:123} console.log(arr1) // [true]
登錄后復(fù)制
- 對(duì)象的解構(gòu)賦值可以取到對(duì)象繼承的屬性
let obj2 = {}; let obj3 = { user: 'ljj' }; Object.setPrototypeOf(obj2, obj3); let { user } = obj2; console.log(user); // ljj
登錄后復(fù)制
- 可以使用擴(kuò)展語(yǔ)法
...將對(duì)象剩余的屬性與值賦值給一個(gè)變量
let options = { title: "Menu", height: 200, width: 100 }; // title = 名為 title 的屬性 // rest = 存有剩余屬性的對(duì)象 let { title, ...rest } = options; // 現(xiàn)在 title="Menu", rest={height: 200, width: 100} console.log(rest.height); // 200 console.log(rest.width); // 100
登錄后復(fù)制
3-4 默認(rèn)值
- 對(duì)象的解構(gòu)也可以指定默認(rèn)值，默認(rèn)值生效的條件是對(duì)象的屬性值嚴(yán)格等于
undefined
let {name = 'jsx'} = {}; console.log(name); // jsx let {name1 = 'jsx'} = {name1: 'ljj'}; // 默認(rèn)值失效 console.log(name1); // ljj // 當(dāng)對(duì)象屬性值為undefined時(shí)有效 let {name2 = 'jsx'} = {name2: undefined}; console.log(name2); // jsx let {x: y = 3} = {x: 5}; console.log(y); // 5 let {x1 = 3} = {x1: null}; console.log(x1); // null
登錄后復(fù)制
- 當(dāng)指定的對(duì)象屬性不存在時(shí)，直接在變量后添加默認(rèn)值
- 當(dāng)指定的對(duì)象屬性存在，而屬性值不存在或者為
undefined時(shí)，先匹配屬性再在變量值后添加一個(gè)等號(hào)=和相應(yīng)的默認(rèn)值即可
let {user: xm = 'jsx'} = {}; console.log(xm); // jsx
登錄后復(fù)制
4. 嵌套解構(gòu)
如果一個(gè)對(duì)象或數(shù)組嵌套了其他的對(duì)象和數(shù)組，我們可以在等號(hào)左側(cè)使用更復(fù)雜的模式（pattern）來(lái)提取更深層的數(shù)據(jù)
// 數(shù)組嵌套 let [name, [name1, [name2]]] = ['jsx', ['ljj', ['ddc']]]; console.log(name, name1, name2); // jsx ljj ddc // 對(duì)象解構(gòu) let obj = { title: '對(duì)象解構(gòu)', info: { target: '對(duì)象', difficulty: { level: 1 } } } let { title, info, info: { target, difficulty, difficulty: { level } } } = obj; console.log(title, info, target, difficulty, level); // 對(duì)象解構(gòu) // {target: '對(duì)象', difficulty: {…}} // 對(duì)象 // {level: 1} // 1 // 對(duì)象數(shù)組嵌套 let objArr = { message: '對(duì)象數(shù)組嵌套', lesson: ['html', 'css', 'js'], news: { main: '新消息' } } let { message, lesson, lesson: [item1, item2, item3], news, news: { main } } = objArr; console.log(message, lesson, item1, item2, item3, news, main) // 對(duì)象數(shù)組嵌套 // ['html', 'css', 'js'] // html css js // {main: '新消息'} // 新消息
登錄后復(fù)制
5. 函數(shù)參數(shù)解構(gòu)
一個(gè)函數(shù)可以有很多參數(shù)，其中大部分的參數(shù)都是可選的
- 把所有參數(shù)當(dāng)作一個(gè)數(shù)組來(lái)傳遞，然后函數(shù)馬上把這個(gè)數(shù)組解構(gòu)成多個(gè)變量
function arrFn([name, age]) { console.log(name, age) } arrFn(['jsx', 22]); // jsx 22
登錄后復(fù)制
- 把所有參數(shù)當(dāng)作一個(gè)對(duì)象來(lái)傳遞，然后函數(shù)馬上把這個(gè)對(duì)象解構(gòu)成多個(gè)變量
let obj = { title: "My menu", items: ["Item1", "Item2"] } function objFn({ title, items: [item1, item2] }) { console.log(title); // My menu console.log(item1, item2); // Item1 Item2 } objFn(obj);
登錄后復(fù)制
- 可以使用帶有嵌套對(duì)象和冒號(hào)映射的更加復(fù)雜的解構(gòu)
// 語(yǔ)法 function({ incomingProperty: varName = defaultValue ... }) let obj1 = { message: '嵌套帶冒號(hào)', info: { name: 'jsx', lesson: ['html', 'css'], grilfriend: { xm: 'ljj' } } } function complexFn({ message, info: { name, lesson: [list1, list2], grilfriend: { xm } } }) { console.log(message); // 嵌套帶冒號(hào) console.log(list1, list2); // html css console.log(xm); // ljj } complexFn(obj1);
登錄后復(fù)制
- 可以通過(guò)指定空對(duì)象
{}為整個(gè)參數(shù)對(duì)象設(shè)置默認(rèn)值
function nullFn({ info = 'jsx', width = 100, height = 200 } = {}) { console.log(info); // jsx console.log(width); // 100 console.log(height); // 200 } nullFn();
登錄后復(fù)制
6. 圓括號(hào)問(wèn)題
不可以使用圓括號(hào)的情況：
-
變量聲明語(yǔ)句，不得使用圓括號(hào)
-
函數(shù)參數(shù)也屬于變量聲明，因此不能帶有圓括號(hào)
-
賦值語(yǔ)句的模式，將整個(gè)模式放在圓括號(hào)之中，導(dǎo)致報(bào)錯(cuò)
// 聲明語(yǔ)句時(shí)不能使用圓括號(hào)包裹變量 let [(num)] = [1]; console.log(a); // Uncaught SyntaxError let {(name: str)} = {name: 'jsx'}; console.log(str); // Uncaught SyntaxError // 函數(shù)參數(shù)內(nèi)也不可以 function fn([(a)]) { console.log(a); } fn(1); // 賦值語(yǔ)句內(nèi)不可使用圓括號(hào)包裹 let a, b; ([a, b]) = [1, 2]; console.log(a, b) // Uncaught SyntaxError
登錄后復(fù)制
可以使用圓括號(hào)的情況：
- 賦值語(yǔ)句的非模式部分，可以使用圓括號(hào)
let num; [(num)] = [123]; console.log(num); // 123 let str; ({name: str} = {name: 'jsx'}); console.log(str); // jsx
登錄后復(fù)制
7. 解構(gòu)賦值使用場(chǎng)景
- 交換變量的值
let name1 = 'jsx'; let name2 = 'ljj'; [name1, name2] = [name2, name1]; console.log(name1, name2); // ljj, jsx
登錄后復(fù)制
- 從函數(shù)返回多個(gè)值
function returnFn() { return { name: 'jsx', age: 22 } } let { name, age } = returnFn(); console.log(name, age); // jsx 22
登錄后復(fù)制
- 函數(shù)參數(shù)的定義
function argumentFn([list1, list2]) { console.log(list1); // jsx console.log(list2); // ljj } argumentFn(['jsx', 'ljj']) function argumentFn1({obj}) { console.log(obj); // jsx } argumentFn1({obj: 'jsx'})
登錄后復(fù)制
- 提取
JSON數(shù)據(jù)
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42 'OK' (2) [867, 5309]
登錄后復(fù)制
- 函數(shù)參數(shù)的默認(rèn)值
function func({ title = '默認(rèn)值' } = {}) { console.log(title) } func(); // 默認(rèn)值
登錄后復(fù)制
- 遍歷
Map結(jié)構(gòu)
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); // first is hello // second is world }
登錄后復(fù)制
- 與
.entries()方法進(jìn)行循環(huán)操作
let user = { name: "John", age: 30 }; for (let [key, value] of Object.entries(user)) { console.log(`${key}: ${value}`); // name: John // age: 30 }
登錄后復(fù)制
- 輸入模塊的指定方法
<script type="module"> import {sayHi, sayHello} from './index.js'; sayHi(); // say hi sayHello(); // say hello </script>
登錄后復(fù)制
// index.js export function sayHi() { console.log('say hi') } export function sayHello() { console.log('say hello') }
登錄后復(fù)制
【
