ES6 での変数の構造化代入の使い方の紹介 (コード付き)-jsチュートリアル-php.cn

ES6 での変数の構造化代入の使い方の紹介 (コード付き)

不言

リリース： 2019-04-11 10:30:29

転載

2386 人が閲覧しました

この記事では、ES6 での変数の構造化と代入の使い方を紹介します (コード付き)。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

配列の代入の構造化

基本的な使用法

ES6 では、配列とオブジェクトから値を抽出し、と呼ばれる特定のパターンに従って変数に値を割り当てることができます。構造。

ES6 より前では、変数に値を割り当てたい場合は、次のように値を指定することしかできませんでした。

let a = 1;
let b = 2

ログイン後にコピー

ES6 では、次のように記述できます。

let [a,b] = [1,2]
// a = 1, b = 2

ログイン後にコピー

注目に値します。はい、左側の変数に右側の対応する値が割り当てられるように、方程式の両側の値は等しくなければなりません。左側の値が等しくない場合、unknown が次のように表示されます:

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右两边的 格式一定要对等，数量可以不对等。

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

ログイン後にコピー

等号の左側が配列であるが、等号の右側が他の値であるという別の状況もあります。とエラーが報告されます。次のように:

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都会报错

ログイン後にコピー

ただし、左側が配列で、右側が文字列の場合、文字列の最初の添え字の値が取得されます。

let [a] = '121321'  a = '1'
let [a] = 'adgasg'  a = 'a'

ログイン後にコピー

Set 構造体の場合、次のことができます。配列の分割代入も使用します。

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

ログイン後にコピー

デフォルト値

代入の構造化によりデフォルト値の指定が可能

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

ログイン後にコピー

Special

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

ログイン後にコピー

ヒント: es6の厳密等価演算子を使用して値を割り当てます。デフォルト値を有効にする必要がある場合は、同等の値が 未定義 である場合にのみデフォルト値を使用する必要があります。それ以外の場合は、代入が引き続き使用されます。上記の null は、厳密には未定義と等しくありません

デフォルト値の代入が式の場合、等号の右側の代入に値がない場合のみ未定義の場合、式の値が次のように取得されます。

function demo(){
    console.log('demo')
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

ログイン後にコピー

オブジェクトの割り当ての構造化

配列との違いは、配列の要素が同じ位置になければならないことです。正しい代入の場合は割り当てられた要素として、オブジェクトの分割代入の場合は等号の両側の変数と属性が同じ名前であれば正しい値が得られます。それ以外の場合、値は 未定義

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

// 上面两个的值 都是 a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

ログイン後にコピー

になります。次のように、オブジェクトの代入を構造化し、既存のオブジェクトのメソッドを新しい変数に代入します。

let {sin,cos} = Math
// Math 中的sin cos 方法将赋值给变量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

ログイン後にコピー

If 等号左側の変数名は、等号の右側にあるオブジェクトの属性名と同じにすることはできず、次の形式で記述する必要があります:

let {a:b} = {a:'ss'}     // b：ss
//a是属性名，b才是实际赋值的变量名

ログイン後にコピー

オブジェクトの構造化代入も可能です。

第一种：

let obj = {
    p:[
        'Hello',
        {y:'world'}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

这边的p只是属性不是变量，如果p想赋值可以写成：

let {p,:[x,{y}]} = obj

第二种：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

ログイン後にコピー

ネストされた割り当て

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

ログイン後にコピー

分割モードがネストされたオブジェクトの場合、子オブジェクトの親プロパティが存在しない場合、エラーが報告されます。次のようになります。

let {foo:{bar}} = {baz:'baz'} //报错

ログイン後にコピー

デフォルト値

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:以上左边 x为属性名，y为变量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同数组一样遵循 严格等于 
只有右边为undefined的时候默认值才会生效

ログイン後にコピー

注:

1) 宣言された変数は、すでにコードブロックであるため、構造化代入には使用できません。

文字列の代入の構造化

代入オブジェクトが配列の場合、文字列は代入に対応する配列の形式に分割されます

let [a,b] = 'ha'
// a = h , b = a

同时可以获得字符串的长度：

let {length:len} = '12121'
// len = 5

ログイン後にコピー

数値とブール値値の構造化代入

等号の右側が数値またはブール値の場合、オブジェクトに変換されます。つまり、配列とオブジェクトを除いて、その他の値はオブジェクトに変換されます。 null と未定義を除くオブジェクト。

let {t:s} = 123
let {t: s} = true

ログイン後にコピー

関数パラメータの代入の構造化

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右边的 x:0, y:0 所以是传值 33  8

m({x:32})         // [32,undefined]
//因为传值替代右边的赋值，但是只有x没有y
//所以y是取   左边y的默认值，因为你没有赋值 为undefined

m({})             // [undefined,undefined] 
// 取左边x,y的默认值，因为没有赋值 为undefined

m()               // [0,0]
// 没有传值，使用本身的赋值 都是0

ログイン後にコピー