首頁 > web前端 > js教程 > 主體

es6解構有哪些方法

php中世界最好的语言
發布: 2018-04-18 15:14:20
原創
1486 人瀏覽過

這次帶給大家es6解構有哪些方法,es6解構的注意事項有哪些,下面就是實戰案例,一起來看一下。

如果要將一個已經宣告的變數用來解構賦值,必須非常小心。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
登入後複製

上面程式碼的寫法會報錯,因為 JavaScript 引擎會將{x}理解成一個程式碼區塊,進而發生語法錯誤。只有不將大括號寫在行首,避免 JavaScript 將其解釋為程式碼區塊,才能解決這個問題。

// 正确的写法
let x;
({x} = {x: 1});
登入後複製

如果變數名與屬性名不一致,就必須寫成下面這樣。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
登入後複製

也就是說,物件的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變數。真正被賦值的是後者,而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
登入後複製
let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
登入後複製

注意:這時p是模式,不是變量,因此不會被賦值。如果p也要當變數賦值,可以寫成下面這樣。

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
登入後複製

解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
登入後複製

函數的參數也可以使用解構賦值。

function add([x, y]){
 return x + y;
}
add([1, 2]); // 3
登入後複製

上面程式碼中,函數add的參數表面上是一個數組,但在傳入參數的那一刻,數組參數就被解構成變數x和y。對於函數內部的程式碼來說,它們能感受到的參數就是x和y

undefined就會觸發函數參數的預設值。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦讀取:

HTML標籤與DOM節點結合

#js禁止瀏覽器後退事件

以上是es6解構有哪些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!