es 6復習——letとconst

babel
es 6をes 5形式に変換すると、2つのフィールドがあります.

  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

presetsはトランスコードルールを指定し、pluginはプラグインです.
letコマンド
変数の昇格は存在しません.
let生命を使用する変数は声明のブロック内でのみ有効です.varで宣言した変数は「変数が上昇する」ため、letで宣言した変数は声明の後に呼び出さなければなりません.さもなければ、エラーが発生します.

// let    
console.log(bar); //   ReferenceError
let bar = 2;

一時死地
let宣言の変数は、外部の影響を受けずに、letコマンドを使用して変数を宣言する前に、この変数は使用できません.これは文法的には「一時的なデッドゾーン」と呼ばれています.

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上のコードの中で、tmpの後でtmpを宣言して、だから作用の領域はif内に結び付けられて、だから誤りを申し込みます.

比較隠蔽のデッドタイム

 

    function bar(x = y, y = 2) {
      return [x, y];
    }
    
    bar(); //   

上のコードの中で、x=y、yはまだ声明されていませんので、エラーが発生しました.
繰り返し宣言は許可されません.
letは同じスコープ内で同じ変数を繰り返し宣言することができません.

//  
function func(){
let a=1;
var a=10;
}
//  
function func(){
let a=10;
leta=20;
}
//             
function args(arg){
let arg;
}
func()//  
function args(arg){
let arg=10;
}
func()//   

es 6ブロックレベルのスコープ

s 5はブロックレベルの機能領域による不便がない

.
第一の場合:内層変数は外層変数をカバーする.

var  tmp=10;
function func(){
console.log(temp);
if(false){
tmp=20;
}
}
func()//  undefine，        
function func(){
console.log(tmp);
tmp=20;
if(false){}
}

第二の場合:カウントとして使用する変数がグローバル変数にリークされる.

for(var i=0;i<5;i++){
}
console.log(i)//5
   i             

s 6のブロックレベル作用領域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

ES 6は、ブロックレベルのスコープの任意のネストを許可する.外層作用領域では内層作用領域の変数を読めませんでした.

{{{{{let insane = 'Hello World'}}}}};

s 6規定関数は、ブロックレベルのスコープステートメント

にあり得る.

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    //         f
    function f() { console.log('I am inside!'); }
  }

  f();//es5   'I am inside!'，es6     
}());

ブロックレベルのスコープ内で関数を宣言することができます.関数宣言はvarに似ています.すなわち、グローバルスコープまたは関数スコープの頭に引き上げられます.また、関数宣言は、ブロックレベルのスコープの頭にも引き上げられます.

は、環境による挙動の違いを考慮して、ブロックレベルのスコープ内で関数を宣言することを避けるべきである.必要であれば、関数宣言文ではなく関数表現にも書くべきです.

//       
{
  let a = 'secret';
  function f() {
    return a;
  }
}

//      
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

また、もう一つ注意すべきところがあります.ES 6のブロックレベルのスコープは、宣言関数のルールを許可し、大かっこのみを使用して成立します.大かっこを使用していないと、エラーが発生します.

//    
'use strict';
if (true) {
  function f() {}
}

//   
'use strict';
if (true)
  function f() {}

コンサート
constはリードオンリーの定数を宣言しています.変更量は初期化しなければなりません.スコープはletと同じです.letと同じ一時的なデッドゾーンがあります.同様に声明を繰り返してはいけません.

var message = "Hello!";
let age = 25;

//         
const message = "Goodbye!";
const age = 30;

基本的な使い方
本質
constが実際に保証しているのは、変数の値を変えてはいけないのではなく、変数が指しているメモリアドレスに保存されているデータを変えてはいけないのです.単純なタイプのデータ(数値、文字列、ブール値)には、変数が指すメモリアドレスに値が保存されますので、定数と同じです.しかし、複合タイプのデータ(主に対象と配列)に対しては、変数が指すメモリアドレスは、実際のデータを指すポインタだけを保持しています.constは、このポインタが固定されている(つまり、常に他の固定されたアドレスを指す)ことを保証します.したがって、オブジェクトを定数として宣言するには十分注意が必要です.

const foo = {};

//   foo       ，    
foo.prop = 123;
foo.prop // 123

//   foo        ，    
foo = {}; // TypeError: "foo" is read-only

const a = [];
a.push('Hello'); //    
a.length = 0;    //    
a = ['Dave'];    //   

対象自体が凍結したいなら、object.freeze方法を使うことができます.

const foo = Object.freeze({});

//      ，        ；
//      ，     
foo.prop = 123;

s 6宣言変数の6つの方法
ES 5は2つの変数を宣言する方法しかありません.varコマンドとfunctionコマンドです.ES 6は、letとconstコマンドを追加する以外に、後の章でも言及されています.また、2つの変数を宣言する方法:importコマンドとclassコマンドです.したがって、ES 6は6つの変数を宣言する方法があります.
最上階のオブジェクトのプロパティ
ブラウザ環境のトップレベルのオブジェクトはwindowで、node環境はglobal varコマンドとfunction命令声明のグローバル変数で、依然としてトップレベルのオブジェクトの属性です.letコマンド、constコマンド、classコマンド宣言のグローバル変数は、上位オブジェクトの属性ではありません.つまり、ES 6からグローバル変数は、最上階のオブジェクトの属性と徐々に外れていきます.

var a = 1;
//     Node   REPL   ，     global.a
//         ，   this.a
window.a // 1

let b = 1;
window.b // undefined

globalオブジェクト
ブラウザーの中で、トップの対象はwindowですが、NodeとWeb Workerはwindowがありません.ブラウザやWebワーカーの中でも、selfは最上位のオブジェクトを指していますが、Nodeにselfはありません.Nodeの中で、最上階のオブジェクトはglobalですが、他の環境はサポートしていません.
同じセグメントのコードは、様々な環境で上位のオブジェクトにアクセスできるようにするために、現在は一般的にthis変数を使用していますが、限界があります.

グローバル環境において、thisは最上位のオブジェクトに戻る.しかし、NodeモジュールとES 6モジュールのうち、thisは現在のモジュールを返します.

関数の中のthisは、関数がオブジェクトとしての方法ではなく、単に関数として動作し、thisがトップオブジェクトを指します.ただし、厳しいモードでは、thisはundefinedに戻ります.

は、厳格なモードであれ、通常のモードであれ、new Function(「return this」)であれ、常にグローバルオブジェクトに戻る.ただし、ブラウザがCSP(Conttent Security Policy、コンテンツセキュリティポリシー)を使用している場合、eval、new Functionのような方法は使えないかもしれません.

現在、言語標準という意味では、トップレベルのオブジェクトとしてglobalを導入することを提案しています.つまり、すべての環境の下で、globalは存在しています.それからトップレベルのオブジェクトを手に入れることができます.
シム倉庫system.globalはこの提案をシミュレーションしました.すべての環境でglobalを入手できます.

// CommonJS    
require('system.global/shim')();

// ES6      
import shim from 'system.global/shim'; shim();

上のコードは様々な環境において、globalオブジェクトが存在することを保証します.

// CommonJS    
var global = require('system.global')();

// ES6      
import getGlobal from 'system.global';
const global = getGlobal();