ES6의 변수 구조 분해 할당 사용법 소개(코드 포함)

이 글은 ES6의 변수 할당 및 구조 분해에 대한 소개입니다. 특정 참조 값이 있으므로 도움이 필요한 분들에게 도움이 되기를 바랍니다.

배열의 구조 분해 할당

기본 사용법

ES6에서는 배열과 객체에서 값을 추출하고 구조라고 하는 특정 패턴에 따라 변수에 값을 할당할 수 있습니다.

ES6 이전에는 변수에 값을 할당하려면 다음과 같이 해당 값만 지정할 수 있었습니다.

let a = 1;
let b = 2

ES6에서는 다음과 같이 작성할 수 있습니다.

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

주목할 가치가 있는 것은 방정식의 양쪽 값이 동일해야 하므로 왼쪽의 변수에만 오른쪽의 해당 값이 할당됩니다. 왼쪽의 값이 같지 않으면 왼쪽의 값이 undefine으로 나타납니다. , 다음과 같습니다:

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에서 엄격한 동등 연산자를 사용하여 구조 할당에 기본값을 적용해야 합니다. undefine이어야 합니다. 이면 기본값이 사용되고, 그렇지 않으면 할당이 사용됩니다. 위의 경우 null은 엄밀히 정의되지 않은 ++

과 동일하지 않습니다. 기본값의 할당이 표현식인 경우 등호 오른쪽 할당에 a가 없는 경우에만 표현식의 값이 사용됩니다.

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

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

객체 구조 분해 할당

과 배열의 차이점은 올바르게 할당하려면 배열의 요소가 할당된 요소와 동일한 위치에 있어야 한다는 점입니다. 반면 객체의 구조 분해 할당은 올바른 값을 얻으려면 등호 양쪽에 있는 변수와 속성의 이름이 동일해야 합니다. 그렇지 않으면 값은 undefine

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)

등호 왼쪽에 있는 변수 이름이 등호 오른쪽에 있는 객체와 동일 속성 이름이 일치하는 경우 다음 형식으로 작성해야 합니다:

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

Nested 할당

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 및 undefine을 제외한 다른 값이 객체로 변환됩니다. 다음과 같습니다.

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

Others

괄호를 사용할 수 없는 경우

1. 변수 선언문
2. 함수 매개변수
3. 대입문의 모드

괄호를 사용할 수 있는 경우

1. 대입문의 모드가 아닌 부분의 경우 괄호를 사용하여

할당의 목적을 분석하고

1. 변수의 값을 교환하고
2. 함수에서 여러 값을 반환할 수 있습니다
3. 함수 매개변수 정의
4. JOSN 데이터 추출
5. 기본 함수 매개변수 값
6. 맵 구조 탐색
7. 입력 모듈 지정 방법

위 내용은 ES6의 변수 구조 분해 할당 사용법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!