1. ECMAScript の概要

1.ECMAとは何ですか

ECMA (欧州コンピュータ製造者協会) の中国語名は欧州コンピュータ製造者
協会であり、この組織の目的は電気通信とコンピュータの標準を評価、開発、承認することです。1994 年以降、
組織はその名前を Ecma International に変更しました。

2. ECMAScriptとは何ですか

ECMAScript は、ECMA-262 を通じて Ecma International によって標準化されたスクリプトプログラミング言語です。

3. ECMA-262とは

Ecma International は多くの標準を開発しており、ECMA-262 はそのうちの 1 つにすぎません。すべての標準のリストについては、
http://www.ecma-international.org/publications/standards/Standard.htmを参照してください。

4. ES6 を学ぶ理由

ES6 バージョンには最も多くの変更があり、マイルストーンです
ES6 は多くの新しい文法機能を追加し、プログラミングをよりシンプルかつ効率的にします。
ES6はフロントエンド開発のトレンド、就職に必要なスキル

2. ECMAScript 6 の新機能

1. let キーワード

let キーワードは変数を宣言するために使用されます。let を使用して宣言された変数には、いくつかの特徴があります。

重複したステートメントは許可されません

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

ブロックスコープ

       {
    
    
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

変数ホイスティングは存在しません

console.log(song);// ReferenceError: Cannot access 'song' before initialization
let song = '恋爱达人';

スコープチェーンには影響しません

 {
    
    
            let school = 'baicaotang';
            function fn(){
    
    
                console.log(school);
            }
            fn();//baicaotang
        }

応用シナリオ: 今後変数を宣言するには let を使用するのが正しいです

2. const キーワード

const キーワードは定数を宣言するために使用されます。const 宣言には次の特徴があります。

宣言では初期値を割り当てる必要があります

const a;// SyntaxError: Missing initializer in const declaration

識別子は通常大文字です

const PI = "3.1415926";

重複したステートメントは許可されません

const a=1;
const a=2;
//SyntaxError: Identifier 'a' has already been declared

値の変更は許可されていません

const SCHOOL = 'baicaotang';
SCHOOL = 'ATGUIGU';
//TypeError: Assignment to constant variable.

ブロックスコープ

{
    
    
            const PLAYER = 'UZI';
        }
        console.log(PLAYER);
        //ReferenceError: PLAYER is not defined

注: オブジェクトプロパティの変更および配列要素の変更は、const エラーアプリケーションシナリオをトリガーしません。const を使用してオブジェクト型を宣言し、非オブジェクト型宣言の場合は let を選択します。

3. 変数分解代入

ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。これは、
分割代入と呼ばれます。

1. 配列の分割代入

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

2. オブジェクト構造の割り当て

let {
    
    a = 10, b = 5} = {
    
    a: 3};
// a = 3; b = 5;
let {
    
    a: aa = 10, b: bb = 5} = {
    
    a: 3};
// aa = 3; bb = 5;

注: オブジェクトメソッドと配列要素を頻繁に使用する場合は、分割代入形式を使用できます。

4. 文字列

1. 拡張メソッド文字列の識別

ES6 では、文字列に部分文字列が含まれているかどうかを判断するために、indexOf メソッドが使用され、部分文字列識別メソッドが追加されました。

include(): パラメータ文字列が見つかったかどうかを判断するためのブール値を返します。
startsWith(): パラメータ文字列が元の文字列の先頭にあるかどうかを判断するためのブール値を返します。
opensWith(): パラメータ文字列が元の文字列の末尾にあるかどうかを判断するためのブール値を返します。

上記の 3 つのメソッドは、検索する文字列とオプションの検索開始位置インデックスの 2 つのパラメーターを受け入れることができます。

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

2. 文字列の繰り返し

repeat(): 文字列が指定された回数だけ繰り返されることを示す新しい文字列を返します。

console.log("Hello,".repeat(2));  // "Hello,Hello,"

3. 文字列の補完

PadStart: 新しい文字列を返します。元の文字列が先頭 (左側) からパラメータ文字列で完成したことを示します。
PadEnd: 新しい文字列を返します。これは、元の文字列がパラメータ文字列で最後 (右側) から完成したことを示します。

上記の 2 つのメソッドは 2 つのパラメーターを受け入れます。最初のパラメーターは生成される文字列の最小長を指定し、2 番目のパラメーターは補完に使用される文字列です。2 番目のパラメータが指定されていない場合は、デフォルトで空白が埋められます。

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"

4. テンプレート文字列

テンプレート文字列 (テンプレート文字列) は、バッククォート (`) で識別される文字列の拡張バージョンであり、次のような特徴があります。

文字列内に改行文字を含めることができます

let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;

変数は ${xxx} の形式で出力できます。

 let lovest = '魏翔';
        let out = `${
      
      lovest}是我心目中最搞笑的演员!!`;
        console.log(out);

注: 文字列と変数を連結する場合は、テンプレート文字列を使用します。

5. ラベルテンプレート

タグ付きテンプレートは、呼び出しの引数がテンプレート文字列である関数呼び出しです。

alert`Hello world!`;
// 等价于
alert('Hello world!');

5.記号

ES6 では、一意の値を表す新しいプリミティブデータ型 Symbol が導入されています。最大の用途は、オブジェクトの一意のプロパティ名を定義することです。

ES6 データ型には、数値、文字列、ブール値、オブジェクト、null、未定義に加えて、シンボルも追加されています。
シンボルの特徴

Symbol の値は、名前の競合を解決するために一意です。
シンボル値を他のデータで操作することはできません
Symbol で定義されたオブジェクトプロパティは、for...in ループを使用して走査することはできませんが、
Reflect.ownKeys を使用してオブジェクトのすべてのキー名を取得できます。

//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);
//添加标识的 Symbol
let s2 = Symbol('baicaotang');
let s2_2 = Symbol('baicaotang');
console.log(s2 === s2_2);
//使用 Symbol for 定义
let s3 = Symbol.for('baicaotang');
let s3_2 = Symbol.for('baicaotang');
console.log(s3 === s3_2);
let sy = Symbol("key1");
//作为属性名 
// 写法1
let syObject = {
    
    };
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
    
    
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {
    
    };
Object.defineProperty(syObject, sy, {
    
    value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

注: 固有のシナリオが発生した場合は、Symbol を考慮する必要があります。Symbol 値がプロパティ名として使用される場合、そのプロパティはプライベートプロパティではなくパブリックプロパティであり、クラスの外部からアクセスできます。ただし、for…in、for…of ループには表示されず、Object.keys()、Object.getOwnPropertyNames() によって返されることもありません。オブジェクトの Symbol プロパティを読み取りたい場合は、Object.getOwnPropertySymbols() および Reflect.ownKeys() を通じて取得できます。

シンボル組み込み値

ES6 は、それ自体で使用される Symbol 値を定義するだけでなく、言語によって内部的に使用されるメソッドを指す 11 個の組み込み Symbol 値も提供します。これらのメソッドは、特定のシナリオで自動的に実行されるため、マジックメソッドと呼ぶことができます。

参照文書

6.マップとセット

1.セット

ES6 は新しいデータ構造 Set (コレクション) を提供します。配列に似ていますが、そのメンバーの値はすべて一意です
。コレクションは反復子インターフェイスを実装しているため、「拡張演算子」と「for...of...」を使用して走査できます。
コレクションのプロパティとメソッド:

size はコレクション内の要素の数を返します。
add は新しい要素を追加し、現在のコレクションを返します。
delete は要素を削除し、ブール値を返します。
has はコレクションに要素が含まれているかどうかをチェックし、ブール値を返します。
Clear はコレクションをクリアし、未定義を返します。

//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

2.地図

ES6 は Map データ構造を提供します。これはオブジェクトに似ており、キーと値のペアのコレクションでもあります。ただし、「キー」の範囲は
文字列に限定されず、さまざまな種類の値（オブジェクトを含む）をキーとして使用できます。Map は
イテレータインターフェイスも実装しているため、「スプレッド演算子」と「for...of...」を使用して走査できます。Map の
プロパティとメソッド:

size はマップ内の要素の数を返します。
set は新しい要素を追加し、現在のマップを返します。
get はキーオブジェクトのキー値を返します
has は要素がマップに含まれているかどうかを検出し、ブール値を返します
Clear はコレクションをクリアし、未定義を返します。

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
 ['name','baicaotang'],
 ['slogon','不断提高']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

7. 数値展開

1. 2進数と8進数

ES6 は、それぞれプレフィックス 0b と 0o で表される、2 進値と 8 進値を記述する新しい方法を提供します。

//二进制
console.log(0b11 === 3); // true
console.log(0B11 === 3); // true
//八进制
console.log(0o11 === 9); // true
console.log(0O11 === 9); // true

2. Number.isFinite() と Number.isNaN()

Number.isFinite() は、値が有限であるかどうかを確認するために使用されます

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true
// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false
 
console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false
 
// Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false

Number.isNaN() は、値が NaN かどうかを確認するために使用されます。

console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true
 
// 在全局的 isNaN() 中，以下皆返回 true，因为在判断前会将非数值向数值转换
// 而 Number.isNaN() 不存在隐式的 Number() 类型转换，非 NaN 全部返回 false
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({
    
    });         // false
Number.isNaN("true");     // false

3. Number.parseInt() と Number.parseFloat()

ES6 は、グローバルメソッド parseInt および parseFloat を Number オブジェクトに移植し、変更せずに使用します。

// 不指定进制时默认为 10 进制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12
 
// 指定进制
Number.parseInt('0011',2); // 3
 
// 与全局的 parseInt() 函数是同一个函数
Number.parseInt === parseInt; // true
Number.parseFloat()
用于把一个字符串解析成浮点数。
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45
 
// 无法被解析成浮点数，则返回 NaN
Number.parseFloat('abc') // NaN
 
// 与全局的 parseFloat() 方法是同一个方法
Number.parseFloat === parseFloat // true

4. Math.trunc

数値の小数部分を削除し、整数部分を返すために使用されます。

Math.trunc(12.3); // 12
Math.trunc(12);   // 12
 
// 整数部分为 0 时也会判断符号
Math.trunc(-0.5); // -0
Math.trunc(0.5);  // 0
 
// Math.trunc 会将非数值转为数值再进行处理
Math.trunc("12.3"); // 12
 
// 空值或无法转化为数值时时返回 NaN
Math.trunc();           // NaN
Math.trunc(NaN);        // NaN
Math.trunc("hhh");      // NaN
Math.trunc("123.2hhh"); // NaN

5. Number.isInteger

Number.isInteger() は、値が整数かどうかを判断するために使用されます。

Number.isInteger(value)
Number.isInteger(0); // true
// JavaScript 内部，整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值
Number.isInteger(1);   // true
Number.isInteger(1.0); // true
 
Number.isInteger(1.1);     // false
Number.isInteger(Math.PI); // false
 
// NaN 和正负 Infinity 不是整数
Number.isInteger(NaN);       // false
Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
 
Number.isInteger("10");  // false
Number.isInteger(true);  // false
Number.isInteger(false); // false
Number.isInteger([1]);   // false
 
// 数值的精度超过 53 个二进制位时，由于第 54 位及后面的位被丢弃，会产生误判
Number.isInteger(1.0000000000000001) // true
 
// 一个数值的绝对值小于 Number.MIN_VALUE（5E-324），即小于 JavaScript 能够分辨
// 的最小值，会被自动转为 0，也会产生误判
Number.isInteger(5E-324); // false
Number.isInteger(5E-325); // true
Number.isSafeInteger()
//用于判断数值是否在安全范围内。
Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

参考ドキュメント: ルーキーチュートリアル
 参考書籍: Ruan Yifeng チュートリアル

ES6 の簡単な概要