フロントエンドJavaScript ES6の詳細について

npm をインストール --save-dev @babel/core

# 最新のトランスコーディングルール $ npm install --save-dev @babel/preset-env

# react トランスコーディングルール$ npm install --save-dev @babel/preset-react
// `presets` フィールドはトランスコーディング ルールを設定します。公式 Web サイトでは次のルール セットが提供されており、必要に応じてインストールできます。
  {
    「プリセット」: [
      "@babel/env",
      「@babel/プリセット-react」
    ]、
    「プラグイン」: []
  }

$ npm インストール --save-dev core-js 再ジェネレーター ランタイム
'core-js' をインポートします。
'regenerator-runtime/runtime' をインポートします。

if(true){ a = 1; var b = 2 }
console.log(a) // ReferenceError: a は定義されていません
コンソールログ(b) // 2

var funcs = [];
(var i = 0; i < 5; i++) の場合 {
  funcs.push(関数() {
    コンソールにログ出力します。
  });
}
関数[1](); // 5

var funcs = [];
(var i = 0; i < 5; i++) の場合 { 
    （関数 （） {
            var ローカル = i
            funcs.push(関数() {
                console.log(ローカル);
            });
        }
    )()
}
関数[1](); // 1

（真）の場合{
 定数 PI = 3.141515926;
 PI = 66666 // TypeError: 定数変数への代入。
}
console.log(PI) // ReferenceError: PI が定義されていません

定数obj = {};
// obj に属性を追加します。これは成功です。obj.name = 'hello';

// obj を別のオブジェクトにポイントするとエラーが発生します obj = {}; // TypeError: "obj" は読み取り専用です

{名前、年齢} = {名前: "こんにちは", 年齢: 12}とします。
console.log(名前、年齢) // こんにちは 12

{ name = 'hi', age = 12 } = { name : 'hello' } とします。
console.log(名前、年齢) // こんにちは 12

let { name, ...残り } = { name: "hello", age: 12, gender: '男' };
console.log(name, 残り) // こんにちは {年齢: 12、性別: '男性'}

[a, ...残り] = [1, 2, 3, 4]とします。
console.log(a, 残り) // 1 [2, 3, 4]

[a, , ...残り] = [1, 2, 3, 4]とします。
console.log(a, 残り) // 1 [3, 4]

関数add([x, y]){
  x + y を返します。
}
追加([1, 2]); // 3

関数 add({x, y} = { x: 0, y: 0 }) {
  x + y を返します。
}
追加します({x:1,y:2});

x = 1 とします。
y = 2とします。

y = 0;

json = {
  コード: 0,
  データ: {名前: 'hi'}
};
{ コード、データ: ユーザー } = json;
console.log(コード、ユーザー); // 0 {名前: 'hi'}

定数マップ = 新しい Map();
map.set('name', 'hello');
map.set('年齢', 12);

for (let [キー, 値] of map) {
  console.log(キー + " is " + 値);
}

`ユーザー ${user.name} がログインしています...`);

関数 add(x, y = 1) {
 x + yを返す
}

// ES5 バージョン Math.max.apply(null, [1, 3, 2])

// ES6 の書き方 Math.max(...[1, 3, 2])

// ES5 の書き方 var list = [1,2]
リスト = リスト.concat([3])

// ES6の方法 var list = [1,2]
リスト = [...リスト、3]

データ = [1,2]
const resp = {data}; // 属性の省略形、{data: data} と同等
定数オブジェクト = {
  add(x, y) { // メソッドの省略形。add: function(x, y){...} と同等
    x + y を返します。
  }
};

定数点 = {x: 1, y: 2}
定数 pointD = {...ポイント、z: 3}
console.log(pointD) // {x: 1, y: 2, z: 3}

// 重複属性がある場合は順序に注意してください。
定数点 = {x: 1, y: 2}
定数 pointD = {...点、x: 4、z: 3}
console.log(pointD) // {x: 4, y: 2, z: 3}

定数点 = {x: 1, y: 2}
定数 pointD = {x: 4, z: 3, ...点}
console.log(pointD) // {x: 1, z: 3, y: 2}

定数点 = {x: 1, y: 2}
Object.getOwnPropertyDescriptor(ポイント、'x') 
/**
{ 設定可能: true
  enumerable: true // 列挙可能な値を示します: 1
 writable: true // 書き込み可能であることを示す}
**/

定数点 = {x: 1, y: 2}
for(let key in point){
  console.log(キー)
}

関数クローン(origin) {
  Object.assign({}, origin) を返します。
}

const merge = (target, ...sources) => Object.assign(target, ...sources);

定数DEFAULT_CONFIG = {
  デバッグ: true、
};

関数プロセス(オプション) {
  オプション = Object.assign({}, DEFAULT_CONFIG, オプション);
  console.log(オプション);
  // ...
}

2 ** 10 // 1024
2 ** 3 ** 2 // 512 は 2 ** (3 ** 2) に等しい

let a=10; a **= 3; // a = a * a * a と同等

const obj = {name: 'job', say(){console.log('hello')}}
obj?.name // obj == null と等しい ? undefined : obj.name
obj?.say() // obj == null と等しい ? undefined : obj.say()

const obj = {名前: ''}
obj.name || 'hello' // 'hello'
obj.name ?? 'hello' // ''

定数リスト = ['a', 'b', 'c']
for (let v in list){
  コンソール.log(v) // 0,1,2
}
for (let v of list){
  console.log(v) // a,b,c
}