es6에서 구조 분해 할당의 역할은 무엇입니까?

기능: 1. 두 변수의 값을 교환합니다("[x,y] = [y,x];" 구문). 2. 문자열을 분해하고 문자를 변수에 전달합니다("[variable 구문). list]=string" ; 3. 함수에서 여러 값을 반환합니다. 구문은 "[변수 목록] = function"입니다. 4. json 데이터를 추출합니다. 구문은 "{변수 목록} = json 변수"입니다. .

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

es6 구조 분해 할당

es6을 사용하면 배열이나 객체에서 값을 추출하고 특정 패턴에 따라 변수에 값을 할당할 수 있습니다. 이를 구조 분해 할당이라고 합니다.

구조 분해 할당은 코드 작성 시 간단하고 이해하기 쉬우며 의미가 명확하므로 복잡한 객체의 데이터 필드를 편리하게 얻을 수 있습니다.

디스트럭처링 모델

디스트럭처링에서 디스트럭처링 소스는 디스트럭처링 할당 표현식의 오른쪽에 위치하고, 디스트럭처링 대상은 디스트럭처링 표현식의 왼쪽에 있습니다.

구조 분해 할당의 역할

1. x, y 변수의 값을 교환합니다

세 번째 변수를 사용하지 않고 두 변수의 값을 교환하려면 구조 분해 할당을 사용하세요

    let x = 1;
    let y = 2;
    console.log('x:'+x, 'y:'+y);   //x:1 y:2
    //结构赋值  
    [x,y] = [y,x];
    console.log('x:'+x, 'y:'+y);   //x:2 y:1

2. 문자열을 분해하고 해당 문자를 변수

var [a,b,c,d,e] = "hello";
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

3. 함수에서 여러 값 반환

//함수는 하나의 값만 반환할 수 있습니다. 배열이나 객체를 가져와서 반환합니다.

  function example(){
        //返回一个数组
        return [1,2,3]
    }
    let [a,b,c]= example();
    console.log('a:'+a,'b:'+b,'c:'+c);  //a:1 b:2 c:3
    
    
    function example2(){
        //返回一个对象
        return {
            name:'kang+',
            age:20
        }
    }
    let {name,age} = example2();
    console.log('name:'+name,'age:'+age);  //name:kang+ age:20

4. 함수 매개변수 정의

 //参数是一组有次序的值
         function f([x,y,z]){
             console.log('x:'+x);
             console.log('y:'+y);
             console.log('z:'+z);
         }

         f([1,2,3]);


        //参数是一组没有次序的值
         function f({x,y,z}){
             console.log('x:'+x);
             console.log('y:'+y);
             console.log('z:'+z);
         }
         f({z:3, x:2, y:1});

5. json 데이터 추출(프로젝트 개발에 사용해야 함)

    let jsonData = {
        number:01,
        status:'200',
         data:[{person:'kang+',age:20}]

     }
    // 获取json数据

     let {number,status,data,data:[{person,age}]} = jsonData;
     console.log('number:'+number);   //number:1
     console.log('status:'+status);   //status:200 
     console.log(data)                // [{…}]
     console.log('person:'+person);   //person:kang+
     console.log('age:'+age);         //age:20

6. 함수 매개변수의 기본값(개인적으로는 다음과 같습니다. 유용하지 않음) 큼)

   function Person(name,age,school = 'xiyou'){
         this.name = name;
         this.age = age;
        this.school = school;
     }
     var son = new Person('kang+',20);
     console.log(son)   // {name: "kang+", age: 20, school: "xiyou"}

7. 지도 구조 탐색

 Map 结构原生支持 Iterator接口，配合变量的解构赋值获取键名和键值就非常方便。    var map = new Map();
    map.set('name','kang+');
    map.set('age','20');

    for(let [key, value] of map){
        console.log(key + ' is ' + value);
    }
    name is kang+
    age is 20

    获取键名    var map = new Map();
    map.set('name','kang+');
    map.set('age','20');
    for(let [key] of map){
        console.log(key);    //name   age
    }

    // 获取键值
    var map = new Map();
    map.set('name','kang+');
    map.set('age','20');
    for(let [,value] of map){
        console.log(value);   // kang+    20
    }

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

위 내용은 es6에서 구조 분해 할당의 역할은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!