ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript--ES6の説明

JavaScript--ES6の説明

巴扎黑
巴扎黑オリジナル
2017-07-22 15:24:081169ブラウズ

セクション 1 let

// ES6 — let

let a = 1;

if (1 === a) {
let b = 2;
}

for (let c = 0; c }

function letDeclareAnotherOne() {

let d = 4;
}

console.log(a) // 1

console.log(b);は定義されていません
console.log(c); // ReferenceError: c が定義されていません
console.log(d); // ReferenceError: d が定義されていません

// window

console.log(window.a) ; // 1
console.log(window.b); // 未定義
console.log(window.c); // 見ての通り、今回は変数 a のみがグローバルとして宣言されています。 let は、その外部では定義されていないブロック スコープ変数を宣言する方法を提供します。

//todo

let と const は両方とも変数を宣言するために使用されますが、実際のアプリケーションでは、どちらも独自の特別な用途があります。
demo1

var name = 'shitu91'

if(true) {
var name = 'shituketang'

console.log(name) //shituketang

}

console.log(name) //shituketang
使用変数これは、ES5 にはグローバル スコープと関数スコープのみがあり、ブロック レベルのスコープがないためです。

そして、実際に新しいブロックレベルのスコープを JavaScript に追加してみましょう。これで宣言された変数は、let コマンドが配置されているコード ブロック内でのみ有効です。

let name = 'shitu91'

if (true) {

let name = 'shituketang'

console.log(name) //shituketang
}


console.log(name) //shitu91

demo2 をカウントしましたループ変数がグローバル変数として漏洩

var a = [];

for (var i = 0; i a[i] = function () {
console.log(i);
};
}
a6; // 10
上記のコードでは、変数 i は var で宣言されており、グローバル スコープで有効です。したがって、ループするたびに、新しい i 値で古い値が上書きされ、最終出力は最後のラウンドの i の値になります。
letを使用する場合、この問題は発生しません。

var a = [];
for (let i = 0; i a[i] = function () {

console.log(i);
};
}
a6; // 6
demo3
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console .log(i)
}


当初は別の clickBox をクリックして別の i を表示したいと考えていましたが、実際には、どの clickBox をクリックしても出力は 5 です。クロージャを使用してそれを行う方法を見てみましょう。

function iteratorFactory(i){

var onclick = function(e){

console.log(i)
}
return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i)
}
const は変数の宣言にも使用されます。定数の値は、一度宣言すると変更できません。
const PI = Math.PI

PI = 23 //モジュールのビルドに失敗しました: SyntaxError: /es6/app.js: "PI" is read-only
const で宣言された定数を変更しようとすると、ブラウザでエラーが発生します報告されます。 Const には優れたアプリケーション シナリオがあります。つまり、サードパーティのライブラリを参照するときに変数を宣言すると、将来の誤った名前変更によって引き起こされるバグを回避できます。 +

const monent = require('moment')
/ / todo

let キーワードで宣言された変数には、変数巻き上げ機能がありません
let および const 宣言は、最も近いブロック (中括弧内) でのみ有効です

定数 const 宣言を使用する場合は、大文字の変数を使用してください。 CAPITAL_CASING

const は、宣言時に値を割り当てる必要があります
Let:

変数の操作方法を変更できるようにする ES6 によって追加された新しいキーワード。JavaScript:

var name = 'Max';

console.log (name;

let new_name = 'Max';
console.log(new_name);

Console:


"Max"
"Max"

ここでは、let と var の両方が同じことをしていることがわかります。では、違いは何ですか?


let を使用すると、変数のスコープを制御できます。 「if」ステートメントの
コンソール:

"error"

"参照エラー: age が定義されていません

別の例として、for ループ内で変数を使用する場合、インデックスはループの外では使用されなくなります。

以上がJavaScript--ES6の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。