ES6 新機能の概要

目次

let コマンドと const コマンド

テンプレート文字列

スプレッド演算子

代入の構造化

オブジェクトの分解

配列の構造化

拡張機能

パラメータのデフォルト値を持つ関数

残りのパラメータは不定パラメータを表します

アロー関数

拡張オブジェクト

変数や関数をオブジェクトのプロパティやメソッドとして直接記述する

新增Object.is()/Object.assign()/Object.keys/Object.value/Object.entries/Object.getOwnPropertyDescriptors メソッド

拡張値

シンボル

マップとセット

設定

地図

イテレータとジェネレータ/プロキシ オブジェクト

約束

クラスクラス

モジュール式の実装

---

let コマンドと const コマンド

ES6 では、変数を宣言するための 2 つの新しいキーワード、 let と constが追加されています。

• var 宣言に変数の昇格の問題があり、let と const には変数の昇格がありません

 console.log(a); // undefined 变量提升了 实际代码变为 var a; console.log(a)
 console.log(b); // 报错 Uncaught ReferenceError: Cannot access 'b' before initialization
 console.log(c); // 报错 Uncaught ReferenceError: Cannot access 'c' before initialization
 var a = 120;
 let b = 'false';
 const c = 100;

• let と const はブロックスコープでのみアクセス可能です

// 使用var
var arr = [];
  for (var i = 0; i < 10; i++) {
    arr[i] = function() {
      return i
    };
  }
console.log(arr[5]()); // 10


// 使用let或const
const arr = [];
  for (let i = 0; i < 10; i++) {
    arr[i] = function() {
      return i
    };
  }
console.log(arr[5]()); // 5

if(true) {
  var a = 120;
  let b = 'false';
  const c = 100;
}
console.log(a); // 120
console.log(b);  // 报错：Uncaught ReferenceError: b is not defined
console.log(c);  // 报错：Uncaught ReferenceError: c is not defined

•  Let と const は同じスコープ内で同じ名前の変数を宣言できませんが、var は宣言できます。

var a = 120;
let b = 'false';
const c = 100;
var a = 130;
let b = 'true'; // Uncaught SyntaxError: Identifier 'b' has already been declared
const c = 200; // Uncaught SyntaxError: Identifier 'c' has already been declared
console.log(a); // 130

• const は定数を定義することしかできず、変更することはできません 

const b = false;
b = 12;
console.log(b); // Uncaught TypeError: Assignment to constant variable

• グローバル変数を汚さない

console.log(window.RegExp); // ƒ RegExp() { [native code] }
let RegExp = 10;
console.log(RegExp); // 10 
console.log(window.RegExp); // ƒ RegExp() { [native code] }

テンプレート文字列

バックティック``を使用してテンプレート文字列を作成し、変数を挿入するときに ${変数名} を使用します。

  let name = '小明';
  let age = '12';
  console.log(name + '今年'+ age + '岁啦！'); // 小明今年12岁啦！
  console.log(`${name}今年${age}岁啦！`); // 小明今年12岁啦！

この方法を使用すると、多数の + と ' ' の使用を避けることができます。

スプレッド演算子

スプレッド演算子は...を参照します。これは、反復可能な型または配列を拡張するために使用されます。

• スプレッド演算子を使用して配列を結合する

const arry1 = ['小明', '小红'];
const arry2 = [...arry1, '小李', '小强'];
console.log(arry2); // ['小明', '小红', '小李', '小强']

• スプレッド演算子を使用して配列をコピーする

const arry1 = ['小明', '小红'];
const arry2 = [...arry1];
console.log(arry2); // ['小明', '小红']
arry2[2] = '小强';
console.log(arry1, arry2); // ['小明', '小红'] ['小明', '小红', '小强']

スプレッド演算子を使用したコピーの結果は参照アドレスの単純なコピーではないため、変更は影響を受けません。 

• オブジェクトを使用したスプレッド演算子

const obj1 = {name: '小明', age: 12};
const obj2 = {hobby: '踢足球'};
const obj3 = {...obj1, ...obj2}
console.log(obj3); // {name: '小明', age: 12, hobby: '踢足球'}

オブジェクト拡張演算子は、レイヤー数が 1 の場合はディープコピーです。2 番目のレベルより上のレベルはディープ コピーではありません。

const obj1 = {name: '小明', age: 12};
const obj2 = {
   project: {
        English: 20,
        huaxue: 30,
       }
};
const obj3 = {...obj1, ...obj2}
console.log(obj3); // {name: '小明', age: 12, hobby: '踢足球'}
obj3.project.huaxue = 90
console.log(obj2); // project: {English: 20, huaxue: 90} obj2的huaxue属性也被改变了
console.log(obj3); // {name: '小明', age: 12, project: {English: 20, huaxue: 90}

代入の構造化

分割代入は、配列またはオブジェクトのパターン マッチングである代入演算子の拡張であり、その中の変数に値を代入します。これにより、コードが簡潔で読みやすくなります。

オブジェクトの分解

 let student = {
    name: '小凡',
    age: 18
 }
 let {name, age} = student
 console.log(name, age); // 小凡 18

 オブジェクトが分解されると、左側の変数名がオブジェクト内のキー値に対応する必要があります。{} を使用します。

let student = {
  name: '小凡',
  age: 18
}
let {name, age, sex} = student
console.log(name, age, sex); // 小凡 18 undefined

不完全な分解も可能です。

let student = {
  name: '小凡',
  age: 18,
  sex: '男'
}
let {name} = student
console.log(name); // 小凡

スプレッド演算子と一緒に使用できます。

let student = {
  name: '小凡',
  age: 18,
  sex: '男'
}
let {name, ...attribute} = student
console.log(name, attribute); // 小凡 {age: 18, sex: '男'}

すべての変数は拡張変数に入れられます。

 let student = {
    name: '小凡',
    age: 18,
    sex: '男',
    school: {
      name: '一中',
      location: '村里'
    }
  }
  let {name, school, ...attribute} = student
  console.log(name,school, attribute); // 小凡 {name: '一中', location: '村里'} {age: 18, sex: '男'}

配列の構造化

配列の分解には [ ] を使用します。左側の変数名は任意です。

let student = ['小凡', 18, '男'];
[name, age, sex] = student
console.log(name, age, sex); // 小凡 18 男

その他はオブジェクトの分解と同じです。 

拡張機能

パラメータのデフォルト値を持つ関数

ES6 ではパラメータのデフォルト値が追加されるため、関数内にエラー耐性のあるコードを記述する必要はありません。

// es5的写法
function add(a,b) {
  a = a || 10; // 若无定义a，则默认为10
  b = b || 20; // 若无定义b，则默认为20
  return a+b
}
console.log(add()); // 30

// es6的写法
function add(a = 10, b = 20) {
  return a + b
}
console.log(add()); // 30

残りのパラメータは不定パラメータを表します

可変パラメータ関数は es5 の引数と同じです。

// es5写法
function pick(obj) {
  let result = {};
  for(let i = 1; i < arguments.length; i++) {
    result[arguments[i]] = obj[arguments[i]]
  }
  return result;
}
let book = {
  name: '活着',
  author: '余华',
  pages: 400
}
let bookData = pick(book, 'name', 'author','pages');
console.log(bookData); // {"name": "活着", "author": "余华","pages": 400}

function pick(obj, ...keys) {
  let result = {};
  for(let i = 0; i < keys.length; i++) {
    result[keys[i]] = obj[keys[i]];
  }
  return result;
}
let book = {
  name: '活着',
  author: '余华',
  pages: 400
}
let bookData = pick(book, 'name', 'author','pages');
console.log(bookData); // {"name": "活着", "author": "余华","pages": 400}

アロー関数

アロー関数には引数もプロトタイプ属性もなく、アロー関数はオブジェクトではないため、 new キーワードを使用してアロー関数をインスタンス化することはできません。

=>を使用して定義します。function() {} は () => {} と同等です。

アロー関数の this は、その親オブジェクトの this を指します。

拡張オブジェクト

変数や関数をオブジェクトのプロパティやメソッドとして直接記述する

// es6写法
const name = "活着";
const author = "余华";

const book = {
  name,
  author,
  sayName() {
    console.log('这是一本很好看的书籍');
  }
}
book.sayName() // 这是一本很好看的书

 上記の短縮メソッド名は、属性と属性値が同じ場合にのみ短縮できます~

// es5写法
const name = "活着";
const author = "余华";

const book = {
  name: name,
  author: author,
  sayName: function() {
    console.log('这是一本很好看的书籍');
  }
}
book.sayName() // 这是一本很好看的书

新增Object.is()/Object.assign()/Object.keys/Object.value/Object.entries/Object.getOwnPropertyDescriptors メソッド

• オブジェクト.is()

Object.is()メソッドは2つの値が厳密に等しいかどうかを判定してブール値を返すメソッドですが、===との違いはNaNと+0、-0の処理結果が異なる点です。

object1 = {
   name: '小明',
   age: 12
}
object2 = {
   name: '小明',
   age: 12
}
console.log(object2.name === object2.name); // true
console.log(Object.is(object1.name, object2.name)); // true
console.log(null === null); // true
console.log(Object.is(null, null)); // true
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0,-0)); // false
console.log(+0 === -0); // true

// 补充几个烦人的比较
console.log(null instanceof Object); // false，但null也是个对象
console.log(null === undefined); // false
console.log(null == undefined); // true
console.log(NaN == NaN); // false
console.log(undefined == undefined); // true
var x = new Boolean(false);
console.log(x); // Boolean {false} 
var y = Boolean(0);
console.log(y);  // false

• Object.assign()

Object.assign() メソッドは、複数のオブジェクトのすべての列挙可能なプロパティをマージし、ターゲット オブジェクトを返すために使用されます。これは浅いコピーメソッドです~

object1 = {
    name: '小明',
    age: 12
}
object2 = {
    sex: 'male'
}
console.log(Object.assign(object1, object2)); // {name: '小明', age: 12, sex: 'male'}

• Object.keys()

Object.keys() は、オブジェクト内のすべてのプロパティを返すために使用され、配列を返します。

object1 = {
   name: '小明',
   age: 12
}
console.log(Object.keys(object1)); // ['name', 'age']

• オブジェクト.値()

Object.values() は、オブジェクト内のすべての属性値を返すために使用され、配列を返します

object1 = {
  name: '小明',
  age: 12
}
console.log(Object.values(object1)); // [['小明', 12]

•  Object.entries()

Object.entries() は複数の配列を返すために使用されます。各配列はキーと値で構成されます

 object1 = {
   name: '小明',
   age: 12,
   classes: ['语文', '数学', '英语']
 }
 console.log(Object.entries(object1)); // [ "name","小明"],["age",12],["classes",["语文","数学","英语"] ] ]

• Object.getOwnPropertyDescriptors

このメソッドは、指定されたオブジェクトのすべてのプロパティの説明オブジェクトを返します。

<script>
  const obj = {
    name: 'xiaoming'
  }
  console.log(Object.getOwnPropertyDescriptors(obj)); 
</script>

リテラルによって作成されたオブジェクトの場合、デフォルトの enumerable プロパティは true、構成可能なプロパティ configurable (deletable およびその他のプロパティ) は true、writable プロパティは true です。

補足: Object.creat()メソッドでオブジェクトを作成し、既存のオブジェクトを新規作成オブジェクトのプロトタイプとして使用します。

拡張値

• Number.EPSILON は最小精度を表し、通常、小数が等しいかどうかを判断するために使用されます。
• Number.isFinite は、値が有限値であるかどうかを確認するために使用されます。
• Number.isNaN は、値が NaN であるかどうかを確認するために使用されます。
• Number.parseInt は、文字列の整数部分を抽出するために使用されます。 Number.parseFloat は、文字列内の浮動小数点数を抽出するために使用されます。
• Number.isInteger 値が整数かどうかを判断します
• Math.trunc は数値の小数部分を消去するために使用されます
• Math.sign は数値が正負か 0 かを判断するために使用されます。正の数値は 1 を返し、負の数値は -1 を返し、0 は 0 を返します。

console.log(0.1+0.2 === 0.3); // false
// 但是可以写个函数 判断如果0.1+0.2 与0.3相差小于Number.EPSILON,则表明0.1+0.2 与0.3相等
console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(100/0)); // false
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(0)); // false
console.log(Number.parseInt('321flos3')); // 321
console.log(Number.parseInt('3.21flos3')); // 3
console.log(Number.parseFloat('3.21flos3')); // 3.21
console.log(Number.parseFloat('3.2.1flos3')); // 3.2
console.log(Number.isInteger(3.21)); // false
console.log(Number.isInteger('3')); // false
console.log(Number.isInteger(3)); // true
console.log(Math.trunc(3.45)); // 3
console.log(Math.sign(3.45)); // 1
console.log(Math.sign(-3.45)); // -1
console.log(Math.sign(0)); // 0

シンボル

一意の値を表すために、新しい基本データ型シンボルが追加されました。特徴は次のとおりです。

シンボルの値は一意であり、名前の競合を解決するために使用されます。

シンボル値を他のデータで操作することはできません。

Symbol() または Symbol.for() を通じてシンボル値を作成します。

Symbol で定義されたオブジェクト プロパティは、for...in ループを使用して走査することはできませんが、Reflect.ownKeys を使用してオブジェクトのすべてのキー名を取得できます。

    <script>
        let s1 = Symbol();
        console.log(s1, typeof s1); // Symbol() 'symbol'
        // 带有标识的创建
        let name = Symbol('小明');
        console.log(name, typeof name); // Symbol(小明) 'symbol'
        // 使用Symbol.for创建
        let project = Symbol.for('英语');
        console.log(project, typeof project); // Symbol(英语) 'symbol'
    </script>

 通常、オブジェクトの一意のプロパティを作成する場合は、シンボルを使用します。

     <script>
        const project = Symbol()
        const number = Symbol()
        let school = {
            name: '一中',
            location: '这里',
            [project]: function() {
                console.log('我喜欢英语');
            },
            [number]: 200
        }
        school[project](); // 我喜欢英语
        console.log(school[number]); // 200
    </script>

Symbol は JavaScript の 6 番目の基本データ型であり、unknown、null、Number、String、Boolean~ と並んでいます。

マップとセット

設定

ES6 は新しいデータ構造 Set (コレクション) を提供しますが、メンバーの値は一意であり、コレクションは反復子インターフェイスを実装しているため、拡張演算子とfor...of... を使用して走査できます。

Set オブジェクトのプロパティとメソッドには主に次のものがあります。

        size: コレクション内の要素の数を返します (配列内の length 属性に相当します)。

        add: 新しい要素を追加し、現在のコレクションを返します。

        delete: 要素を削除し、ブール値を返します。

        has: 要素がコレクションに含まれているかどうかを確認し、ブール値を返します。

 let newSet = new Set([1,3]);
 console.log(newSet); // Set(2) {1, 3}
 console.log(newSet.add([4,5])) // Set(3) {1, 3, [4, 5]}
 console.log(newSet.delete(3)) // true
 console.log(newSet.delete(4)) // false
 console.log(newSet.has(1)) // true
 console.log(newSet.size); // 2

• Set オブジェクトの一意性の特性を利用して、配列の重複排除を実現できます~

  let newSet = [...new Set([1,3,3,5,4,4,6,7])];
  console.log(newSet); //  [1, 3, 5, 4, 6, 7]

• 配列の交差を実現~

let arr1 = [1,2,3,4,5];
let arr2 = [1,4,6,7];
let arr3 = [...new Set(arr1)].filter(item => new Set(arr2).has(item))
console.log(arr3); //  [1, 4]

• 配列の違いを実感してください~

let arr1 = [1,2,3,4,5];
let arr2 = [1,4,6,7];
let arr3 = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)))
console.log(arr3); //  [2,3,5]

• 配列の結合を実現~

 let arr1 = [1,2,3,4,5];
 let arr2 = [1,4,6,7];
 let arr3 = [...new Set([...arr1, ...arr2])]
 console.log(arr3); //  [1, 2, 3, 4, 5, 6, 7]

地図

ES6 では、キーと値のペアのコレクションである Map データ構造が提供され、キーの定義はオブジェクトのような文字列に限定されなくなり、さまざまな種類の値 (オブジェクトを含む) が含まれます。同時に、Map はイテレータ インターフェイスを実装しているため、for...of; を使用してトラバースできます。

Map のプロパティとメソッドには主に次のものがあります。

        size: マップ内の要素の数を返します。

        set: 新しい要素を追加し、現在のマップを返します。

        get: キー/値オブジェクトのキー値を返します。

        has: 現在のマップに要素が含まれているかどうかを検出し、ブール値を返します。

        clear: コレクションをクリアし、未定義を返します。

let newMap = new Map();
newMap.set('name', '小明');
newMap.set('classes', ['语文', '数学', '英语']);
console.log(newMap); //  Map(2) {'name' => '小明', 'classes' => Array(3)}
console.log(newMap.size); // 2
console.log(newMap.has('name')); // true
for (const item of newMap) {
   console.log(item); // (2) ['name', '小明'] (2) ['classes', Array(3)]
}
console.log(newMap.delete('classes')); // true
console.log(newMap.size); // 1
console.log(newMap.get('name')); // 小明

イテレータとジェネレータ/プロキシ オブジェクト

戻って詳しく話してください

約束

2023 年を目前にして、まだプロミスのことで頭が痛いですか?_混乱した Xiaoxiaotao のブログ - CSDN ブログ

クラスクラス

クラスの本質はやはり関数です

高度な JavaScript チュートリアル (オブジェクト指向プログラミング)を参照してください。

モジュール式の実装

モジュール化とは、複雑なプログラムを特定のルールに従って個別のファイルに分割し、最終的にそれらを結合することです。これにより、コードの複雑さが軽減され、名前の競合が回避され、再利用性が向上します。

ES6 のモジュール機能は主に、export と importの 2つのコマンドで構成されます。export コマンドはモジュールの外部インターフェイスを公開するために使用され、import コマンドは他のモジュールが提供する機能を導入するために使用されます。

エクスポートされたモジュールは、次の 3 つの異なる方法で公開できます。

• 個別の露光方法

エクスポートされたモジュールが次のように個別に公開される場合:

// test.js文件
  // 通用暴露
export let name = '小明';
export function exam() {
  console.log('明天又要考试～');
}

• 均一露出

エクスポート モジュールが次のような統合露出方法を採用している場合:

// test.js文件
// 统一暴露
let name = '小明';
function exam() {
    console.log('明天又要考试～');
};
export {name, exam};

ここでの {name,exam} は代入を分割することを意味するのではなく、単に ~ を記述する方法であることに注意してください。

次に、モジュールをインポートするときに次を使用します。

<script type="module">
  // 通用暴露
  import * as m1 from './test.js'
  // 给*起了别名m1
  console.log(m1); // m1中包含name属性和exam方法
</script>

• デフォルトで公開される

エクスポート モジュールがデフォルトの露出方法を採用する場合、この方法は通常、次のようにファイル内の1 つの露出にのみ適用されます。

// test.js文件
// 默认暴露
export default {
    name : '小明',
    exam: function() {
        console.log('明天又要考试～');
    }
};

モジュールを公開する方法に応じて、モジュールをインポートするさまざまな方法があります。

• 一般的なインポート方法

この方法は、上記の 3 つの露光方法に使用できます。

<script>
  // 通用暴露
  import * as m1 from 'm1.js'
  // 给*起了别名m1
  console.log(m1); // 对于前两种暴露方式m1中包含name属性和exam方法，
  // 对于默认暴露方式，m1中包含default 取m1.default.name才可
</script>

• 代入の分割

最初の 2 つの暴露方法では、次のコードを通じて名前または検査を直接取得できます。

<script type="module">
  // 通用暴露
  import { name,exam } from './test.js'
  // 或
  import { name as xingming,exam as kaoshi } from './test.js'
  // 给name/exam起了别名
</script>

ただし、デフォルトの露出の場合は、次を使用します。

<script type="module">
   import { default as m1 } from './test.js'
   // 一般要给default取个别名，通过别名.name或别名.exam拿到
</script>

• デフォルト露出の簡単なインポート方法

<script type="module">
   import m3 from './test.js'
   // 通过m3.name或m3.exam拿到
</script>

上記3つの露出方法を上書きせずに別ファイルに同時に導入可能

ここでは、もう 1 つの重要なモジュール仕様メソッド CommonJs が単純に追加されています。

CommonJs のモジュール化されたコードは、nodejs などのサーバー側、またはブラウザー側 (Browserify ツールを使用してコンパイルする必要があります) で実行でき、これを公開する方法は 2 つだけです。

• exports.xxx = 値、値は公開するデータ、xxx は名前です
• module.exports = 値、値は公開されるデータです

原則として、サーバー側では、exports===module.exports={ } となり、どちらも同じ空のオブジェクトを指します。

これら 2 つのメソッドを混合することはできません。混合した場合、module.exports によって公開されるメソッドがメインになります。値は何ですか。module.exports によって公開されるものは何ですか。

englishNameの属性がないことがわかりますが、

導入方法は２つしかないのですが、

• サードパーティのモジュール、require(xxx) を導入します。xxx はモジュール名です。
• カスタム モジュールをインポートします。require(xxx)、xxx はモジュール ファイル パスです。