JSのES6バージョンは主要なブラウザーによって広くサポートされており、多くのフロントエンドフレームワークもES6を使用しており、Babelを互換性に使用できるため、ES6はアプリケーション段階に入りました。
ES6に慣れていない場合は、ES6をすばやく理解するのに役立つ4つの簡単な基本的な使用法を次に示します。
1. LETおよびconstを使用して変数を宣言します
従来のES5コードでは、可変宣言には2つの主な問題があります
(1)ブロックスコープのサポートの欠如
(2)定数は宣言できません
ES6では、これらの2つの問題が解決され、2つの新しいキーワードが追加されました。
ブロックスコープにletを使用します
var a = 1; if(true){var b = 2;} console.log(a); // 1console.log(b); // 2ES5では、IFブロックで宣言された変数Bは、ブロックの外側にアクセスできます。
// es6let a = 1; if(true){let b = 2;} console.log(a); // 1console.log(b); //参照エラー:Bは定義されていませんES6では、ブロックをブロックの外側にアクセスできない場合は、LeTINを使用して宣言された変数B
次のコードは、一般的な混乱のある状況です
var a = []; for(var i = 0; i <5; i ++){a.push(function(){console.log(i);});} a.foreach(function(value){value();});実行の結果は、5、5、5、5、5です
LETを使用して、ループで変数Iを宣言します
var b = []; for(let i = 0; i <5; i ++){b.push(function(){console.log(i);});} b.foreach(function(value){value();});実行の結果は:0、1、2、3、4です
constを使用して定数を定義します
// in es5var my_constant = true; my_constant = false;
定数はES5で定義することはできず、値を変更することができ、自分でしか保証できません。
// es6const my_constant = true; my_constant = false; // contaught typeerror:定数変数への割り当て
ES6で宣言されたconstは変更できません
2。テンプレート文字列
文字列と変数をスプライシングする次の方法がより一般的です
var url = 'http:// www。' + domain + '.com/' + path + '?' + queryparams;
ES6は簡潔な使用法を提供します
let url = `http://www.$ {domain} .com/$ {path}?$ {queryparams}`;
3。新しいセットとマップオブジェクト
ES5では、たとえば動的データを保存するために配列を使用することがよくあります
var collection = []; collection.push(1、2、1); console.log(collection); // [1、2、1]
複製データが含まれています。複製データが必要ない場合は、データを使用してそれを判断する必要があります。
関数addtocollection(collection、value){if(collection.indexof(value)<0){collection.push(value)}}}}ES6は設定されたオブジェクトを提供するため、この状況を処理するのがはるかに便利です。
let collection = new set(); collection.add(1); collection.add(2); collection.add(1); console.log(collection); // set {1、2}セットは、セットを便利に通過して、セット内のデータを処理することもできます。
ES5は通常、Key-Valueペアデータを保存するために使用されます。たとえば
var collection = {}; collection.a = 'abc'; collection.b = 'xyz';ES6にはマップがあるため、使用できます
let collection = new Map(); collection.set( 'a'、 'abc'); collection.set( 'b'、 'xyz');
トラバーサルも非常に単純です
collection.foreach(function(value、key){console.log(key + ":" + value);}); console.log(collection.size);4。関数パラメーター
ES6の関数のパラメーターには2つの新機能があります
デフォルト値
function dosomething(someobject){console.log(someobject);}ここにはランタイムエラーがあり、パラメーターを検証する必要があります。
function dosomething(some object){if(someobject === undefined){someObject = {}; } console.log(SomeObject);}このタイプの検証コードは非常に一般的です。 ES6のパラメーターのデフォルト値を設定できますが、これははるかに単純です。
function dosomething(someobject = {}){console.log(someobject);}オブジェクト破壊
多くの場合、キー値ペアを含むオブジェクトを関数のパラメーターとして渡し、関数内のオブジェクトのさまざまなプロパティを取得します
function dosomething(some object){var one = someobject.propone; console.log(one); var two = someobject.proptwo; console.log(2); var 3 = someobject.propthree; console.log(3);}ES6を使用すると、パラメーターでオブジェクトパラメーターを直接分解できます
function dosomething({propone、proptwo、propthree}){console.log(propone); console.log(proptwo); console.log(propthree);}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。