es5 と比較して es6 の新機能は何ですか?-フロントエンドQ&A-php.cn

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

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

このチュートリアルの動作環境: 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 = [&#39;a&#39;, &#39;b&#39;, ...arr1, &#39;c&#39;];
console.log(arr2);

// 输出：
// [&#39;a&#39;, &#39;b&#39;, 1, 2, 3, 4, &#39;c&#39;]

ログイン後にコピー

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, &#39;a&#39;]);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete(&#39;a&#39;);
// 查看集合是否包含某个值
s.has(&#39;a&#39;);
// 添加一项，返回集合本身的引用
s.add(&#39;b&#39;);

ログイン後にコピー

# # Map オブジェクト:

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

マップの機能:

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

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

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

ログイン後にコピー

マップメソッド:

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

ログイン後にコピー

新しい関数の内容:

アロー関数: いいえ

および
arguments
パラメータのデフォルト値

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

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

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

パラメータ:
arrLike:
クラス配列
- mapFunc:クラス配列の各項目の演算関数
- mapThis:
- の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: {&#39;小明&#39;: 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 サイトの他の関連記事を参照してください。