JavaScript--ES6の説明

巴扎黑

リリース： 2017-07-22 15:24:08

オリジナル

1166 人が閲覧しました

セクション 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"