ES6 実践テクニック

1. const は定数を定義します

ES6 ではこれまで定数を宣言する方法が定義されていなかったため、ES6 標準では定数を定義するための新しいキーワード const が導入されました。

定数a=123;

a=456; //エラーが報告され、定数は上書きできません

コンソール.ログ(a);

2 つ目は、ブロックレベル変数を使用することです

let で定義された変数はブロック内でのみ機能し、変数の外側のブロック (括弧) は破棄されます。

真であれば){     

        var a=123;     

         b=456とする

}

  コンソール.ログ(a);

console.log(b); // 変数にアクセスできないため、エラーを報告します

a=123とする。

a=456とする。

console.log(a); // 繰り返される変数は上書きできません

3. テンプレートリテラル

文字列の結合とテンプレートの書き込みには、` (バックティック、左上隅の波線) を使用し、変数には ${} を使用します。 

var user="張三";

年齢は22歳でした。

var sex ="男";

console.log(`皆さん、こんにちは。私の名前は "${user}"、年齢は ${age}、年齢は ${sex}`);

console.log("皆さんこんにちは、私の名前は "+user+"、私は今年 "+age+" 歳、私は "+sex+" の学生です");//伝統的な書き方

4. 代入の分割

交換価値

変数a=1;

var b=2;

[a,b]=[b,a];

コンソール.log(a,b); // 2 1

配列から要素を取得する

var 配列=[1,2,3,4];

var [a, ,b]=配列;

コンソール.log(a,b); // 1 3

オブジェクトから値を取得します

var obj={ユーザー: "Zhang San"、年齢: "22 歳"、性別: "男性"、職種: "フロントエンド開発"}

var {ユーザー,ジョブ}=obj;

console.log(ユーザー,ジョブ)

戻り値の分解

 関数 arr(){     

             var a=1、b=2、c=3、d=4;     

             {a、b、c、d} を返す

 }  

var {a,c}=arr();  

コンソール.log(a,c); // 1 3

5. アロー関数

アロー関数は無名関数と同等であり、関数定義を簡素化します。()内にパラメータを入れます。パラメータがない場合は省略し、関数本体は矢印の後ろにあります。

var fun=(x,y)=>{     

         コンソール.log(x+y);

}

楽しい(2,3)

ES6以前は関数外でthisにアクセスするのが面倒でしたが、アロー関数は最も発信するthisに変換せずに直接アクセスできます。

六、オブジェクト内の関数の宣言

var obj={     

               ユーザー: 「張三」、     

               仕事(){         

                       「Web フロントエンド開発」を返す

    }

}

console.log(obj.job())

7、for-of ループトラバーサル

var arr=["aaaa","bbbb","cccc","ddddd"];

for(obj の変数 i){     

     コンソール.ログ(i)

}

8. デフォルトパラメータ

関数 fun(x=0,y=2,z=true){     

        console.log(x,y,z);

}         

楽しい(); // 0 2 true fun(4,0,false); // 4 0 false

ナイン、拡張オペレーター...

arr1=[1,2,3,4,5];

arr2=["a","b","c","d"];

arr3=arr1.concat(arr2);

arr4=[...arr1,...arr2];

console.log( arr3 ); //[1, 2, 3, 4, 5, "a", "b", "c", "d"] console.log( arr4 ); //[1、2、3、4、5、"a"、"b"、"c"、"d"]

おすすめ

転載: blog.csdn.net/weixin_53630942/article/details/124095235