es6 における構造化代入の役割は何ですか

関数: 1. 2 つの変数の値を交換します (構文 "[x,y] = [y,x];")。 2. 文字列を分解し、文字を変数に渡します。構文 "[変数リスト] = string"; 3. 関数から複数の値を返す構文 "[変数リスト]=関数"; 4. json データを抽出する構文 "{変数リスト}=json 変数"すぐ。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 代入の構造化

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

構造化代入は、明確なセマンティクスを備えたコード記述でシンプルかつ理解しやすいため、複雑なオブジェクトのデータ フィールドを取得するのに便利です。

分割モデル

分割では、分割のソースは分割代入式の右側にあり、分割のターゲットは分割代入式の左側にあります。破壊的な表現。

分割代入の役割

1. x, y変数の値を交換する

分割代入を使用すると、3 番目の変数を使用せずに 2 つの変数の値を交換できます

    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 , 関数から複数の値を返す

//関数は 1 つの値のみを返すことができます。複数の値を返したい場合は、それらを配列に入れるか、異議を唱えて返してください。

  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 ビデオ チュートリアル 、Web フロントエンド ]

以上がes6 における構造化代入の役割は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。