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

この記事では、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

その他

括弧が使用できない場合

1. 変数宣言文
2. 関数パラメータ
3. 代入ステートメントのモード

括弧が使用できる場合

1. 代入ステートメントの非モード部分では、括弧を使用できます。使用

代入の構造化の目的

##変数の値の交換
1. #関数から複数の値を返す
2. #関数パラメータの定義
JOSNデータの抽出
4. 関数パラメータのデフォルト値
5. Map構造のトラバース
6. 入力モジュールの指定方法

以上がES6 での変数の構造化代入の使い方の紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。