es5 と比較して es6 の新機能は何ですか?

新しい内容: 1. Let および const キーワードは、変数の宣言、ブロック レベルのスコープのサポート、一時的なデッド ゾーンの設定に使用されます; 2. 構造化代入は配列またはオブジェクトのパターン マッチングであり、その意味は次のとおりです。変数に値を割り当てる; 3. 展開演算子を使用して、セットおよび配列内の要素を単一の要素に展開できます; 4. セット オブジェクト、配列に似た新しいデータ構造ですが、メンバーの値すべて一意であり、重複する値はありません; 5. コンストラクター メソッド Array.from() および Array.of()。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES5 よりも ES6 の新機能

let、const:

let および const のサポートブロック レベルのスコープであり、一時的なデッド ゾーンがあります (最初に宣言してから使用する必要があり、変数のプロモーションはサポートされていません);

const は定数であり、宣言時に値を割り当てる必要があります。値。代入が参照型の場合、その参照は変更できませんが、配列のプッシュ、配列の追加、削除、変更など、参照型に対する操作は実行できます。オブジェクトのプロパティ

##代入の構造化:

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

構造化代入は、明確なセマンティクスを備えたコード記述でシンプルかつ理解しやすいため、複雑なオブジェクトのデータ フィールドを取得するのに便利です。

オブジェクト分割代入:

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

配列分割代入: (文字列と同じ)

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出：
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

Expand 演算子:

3 つのドット (...) で表される、JavaScript スプレッド演算子は ES6 で導入されました。これを使用して、コレクションおよび配列内の要素を単一の個別の要素に展開できます。

スプレッド演算子を使用すると、配列やオブジェクトの作成と複製、配列を関数の引数として渡したり、配列から重複を削除したりすることができます。

スプレッド演算子は反復可能なオブジェクトでのみ使用できます。これは反復可能オブジェクトの前に分離せずに使用する必要があります。例:

console.log(...arr);

Array:

let arr1 = [1, 2, 3, 4];
let arr2 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

// 输出：
// ['a', 'b', 1, 2, 3, 4, 'c']

Object:

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出：
// {a: 1, b: 2, c: 3, d: 4}

残りのパラメータ処理:

配列:

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: [3, 4, 5]

オブジェクト:

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制（不是传地址）
let obj2 = {...obj};

Set オブジェクト:

Set は提供される関数ですby ES6 配列に似た新しいデータ構造ですが、メンバーの値は一意であり、重複する値はありません。

• Set 自体は、Set データ構造を生成するために使用されるコンストラクターです。

• Set オブジェクトを使用すると、プリミティブ値でもオブジェクト参照でも、あらゆるタイプの一意の値を保存できます。

• Set 内の要素は 1 回だけ表示されます。つまり、Set 内の要素は一意です。

• また、Set には NaN と unknown の両方を格納でき、NaN は同じ値として扱われます (NaN !== NaN ですが)。

• Set 関数は、配列 (または反復可能なインターフェイスを備えた他のデータ構造) を初期化用のパラメーターとして受け入れることができます。

#配列重複排除:

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

セットメソッド:

let s = new Set([1, 1, 2, 3, 'a']);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项，返回集合本身的引用
s.add('b');

# # Map オブジェクト:

ES6 は Map データ構造を提供します。オブジェクトと似ており、キーと値のペアの集合でもありますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値（オブジェクトを含む）をキーとして使用できます。言い換えると、Object 構造は「文字列と値」の対応を提供し、Map 構造は「値と値」の対応を提供します。これは、ハッシュ構造のより完全な実装です。 「キーと値」のデータ構造が必要な場合は、オブジェクトよりもマップの方が適しています。

マップの機能:

マップ オブジェクトはキーと値のペアを保存し、キーの元の挿入順序を記憶できます。

• 任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。

• let arr = [
    ['a', 1],
    ['b', 2],
    ['c', 3]
  ];
  let m = new Map(arr);
  // m: {'a' => 1, 'b' => 2, 'c' => 3}

  マップメソッド:

// 清空Map
m.clear();
// 删除某一项，返回操作是否成功
m.delete(key);
// 获取某一项的值，返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项，返回Map本身的引用
m.set(key, val);

新しい関数の内容:

アロー関数: いいえ

this
• および

  arguments

  パラメータのデフォルト値
## 配列の新しいメソッド:

コンストラクター メソッド:

クラス配列を実数配列に変換:

Array.from(arrLike [,mapFunc,mapThis]);

• パラメータ:

  arrLike:

  クラス配列
  • mapFunc:クラス配列の各項目の演算関数
  • mapThis:
  mapFunc
  • のthisを置き換えます。 #別のメソッドをポイントします: let arr = [...arrLike];

  パラメータ リストを変換します 配列の場合:

• Array.of(...items);

• 检测一个对象是否是一个数组：

  Array.isArray(obj);

对象的方法：

• arr.find(callback [, thisArg])：查找数组中满足条件的第一个元素的值

  let arr = [1, 2, 3, 4];
  let val = arr.find((item, index) => item >= 3);
  // val: 3
  let val = arr.find((item, index) => item >= 5);
  // val: undefined

• arr.findIndex(callback [, thisArg])：查找数组中满足条件的第一个元素的索引

• 数组扁平化：

  • arr.flat([depth])

    参数：depth：指定要提取嵌套数组的结构深度，默认为1，当depth = infinity时，无论数组多少层，都提取为一维数组。

  • arr.flatMap(callback[, thisArg])

    参数：callback：对原数组的每个元素进行操作，返回新数组的元素；

    该函数值支持深度为1的扁平化

• 数组元素填充：arr.fill(value[, start[, end]]);

  用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引；不会改变数组长度

  参数：

  • value：用来填充数组元素的值；
  • start：起始索引，默认值为0；
  • end：终止索引，默认值为 arr.length ；

• arr.includes(valueToFind[, fromIndex])：判断数组中是否包含一个指定的值

  参数：

  • valueToFind：需要查找的值
  • fromIndex：从 fromIndex 处开始向后查找

字符串新增方法：

• str.startsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串开头

  参数：

  • searchString：要搜索的字符串
  • position：在 str 中搜索 searchString 的开始位置，默认为0，也就是真正的字符串开头处

• str.endsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串结束

  参数：

  • searchString：要搜索的字符串
  • position：在str中反向搜索的开始位置，默认为 str.length

• str.repeat(times)：返回重复str字符串times次的字符串

模版字符串：

反引号：``，可以换行

插值表达式：${}

对象新增方法：

• 简洁表示法：

  let a = 1, b = 2;
  // 原来的表示方法：
  let obj = {
    a: a,
    b: b,
    c: function() {}
  };
  // 简洁表示法：
  let obj = {
    a,
    b,
    c() {}
  };

• 属性名表达式：

  let name = "小明";
  let obj = {
    [name]: 111
  };
  console.log(obj);
  // 输出：
  // obj: {'小明': 111}
  
  // 等价于：
  let obj = {};
  obj[name] = 111;

• Object.assign(obj1, obj2, ...)：将第二个参数即之后的参数对象合并到第一个参数对象中

  let obj1 = {a: 1, b: 2};
  let obj2 = {c: 3, d: 4};
  Object.assign(obj2, obj1);
  // 等价于
  obj2 = {
    ...obj1,
    ...obj2
  }
  // 等价于
  obj2 = Object.assign({}, obj1, obj2);

• Object.is(value1, value2)：判断两个值是否相等（强类型）

  和===的区别：

  +0 === -0;	// true
  Object.is(+0, -0);	// false
  
  NaN === NaN; // false
  Object.is(NaN, NaN); // true

babel编译器：

将es6语法编译为es5语法

【相关推荐：javascript视频教程、编程视频】

以上がes5 と比較して es6 の新機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。