Was ist neu in es6 im Vergleich zu es5?

Neuer Inhalt: 1. Die Schlüsselwörter let und const werden verwendet, um Variablen zu deklarieren, den Gültigkeitsbereich auf Blockebene zu unterstützen und temporäre Totzonen zu haben. 2. Die Destrukturierungszuweisung besteht darin, einen Mustervergleich für Arrays oder Objekte durchzuführen und dann die darin enthaltenen Variablen abzugleichen Die Bedeutung der Zuweisung; 3. Expand-Operator, der zum Erweitern von Elementen in Mengen und Arrays in einzelne Elemente verwendet werden kann. 4. Set-Objekt, eine neue Datenstruktur, ähnlich einem Array, aber die Werte der Mitglieder sind eindeutig , es gibt keine doppelten Werte; 5. Konstruktormethoden Array.from(), Array.of().

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Neue Funktionen von ES6 als ES5

let, const:

let und const unterstützen den Bereich auf Blockebene und haben eine temporäre Totzone (muss zuerst deklariert und dann verwendet werden, Variablenförderung wird nicht unterstützt) ;

const ist eine Konstante, der bei der Deklaration ein Wert zugewiesen werden muss. Wenn es sich bei der Zuweisung um einen Referenztyp handelt, kann der Wert nicht geändert werden B. Push auf das Array, Hinzufügen, Löschen und Ändern von Objektattributen

Destrukturierende Zuweisung:

es6 ermöglicht das Extrahieren von Werten aus Arrays oder Objekten nach einem bestimmten Muster und das Zuweisen von Werten ​​in Variablen, was als destrukturierende Zuweisung bezeichnet wird.

Die Destrukturierungszuweisung ist beim Schreiben von Code einfach und leicht zu verstehen und verfügt über eine klare Semantik, sodass Datenfelder in komplexen Objekten bequem abgerufen werden können.

Zuweisung zur Objektdestrukturierung:

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

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

Array-Destrukturierungszuweisung: (wie String)

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];

Erweiterungsoperator:

Dargestellt durch drei Punkte (...), JavaScript-Erweiterungsoperatoren wurden in eingeführt ES6. Es kann verwendet werden, um Elemente in Sammlungen und Arrays in einzelne Einzelelemente zu erweitern.

Der Spread-Operator kann zum Erstellen und Klonen von Arrays und Objekten, zum Übergeben von Arrays als Funktionsargumente, zum Entfernen von Duplikaten aus Arrays und mehr verwendet werden.

Der Spread-Operator kann nur für iterierbare Objekte verwendet werden. Es muss ohne Trennung vor dem iterierbaren Objekt verwendet werden. Zum Beispiel:

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']

Objekt:

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

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

Verbleibende Parameterbehandlung:

Array:

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]

Objekt:

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-Objekt:

Set wird bereitgestellt von ES6 Eine neue Datenstruktur, ähnlich einem Array, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte.

• Set selbst ist ein Konstruktor, der zum Generieren einer Set-Datenstruktur verwendet wird.

• Mit Set-Objekten können Sie eindeutige Werte jeglicher Art speichern, unabhängig davon, ob es sich um Grundwerte oder Objektreferenzen handelt.

• Die Elemente im Set erscheinen nur einmal, das heißt, die Elemente im Set sind einzigartig.

• Darüber hinaus können sowohl NaN als auch undefiniert in Set gespeichert werden, und NaN wird als der gleiche Wert behandelt (auch wenn NaN !== NaN).

• Set-Funktion kann ein Array (oder eine andere Datenstruktur mit iterierbarer Schnittstelle) als Parameter für die Initialisierung akzeptieren.

Array-Deduplizierung:

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

Set-Methode:

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

Kartenobjekt:

ES6 stellt die Kartendatenstruktur bereit. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren, der Umfang von „Schlüssel“ ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden. Mit anderen Worten: Die Objektstruktur bietet eine „String-Wert“-Korrespondenz und die Map-Struktur eine „Wert-Wert“-Korrespondenz, was eine vollständigere Implementierung der Hash-Struktur darstellt. Wenn Sie eine „Schlüssel-Wert“-Datenstruktur benötigen, ist Map besser geeignet als Object.

Map-Funktionen:

• Map-Objekte speichern Schlüssel-Wert-Paare und können sich die ursprüngliche Einfügereihenfolge von Schlüsseln merken.

• Jeder Wert (Objekt oder Grundelement) kann als Schlüssel oder Wert verwendet werden.

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

Kartenmethode:

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

Funktion neuer Inhalt:

• Pfeilfunktion: keine this und argumentsthis和arguments

• 参数默认值

数组新增方法：

构造函数的方法：

• 把一个类数组转换成真正的数组：Array.from(arrLike [, mapFunc, mapThis]);

  参数：

  • arrLike:类数组
  • mapFunc:对类数组每一项的操作函数
  • mapThis:替换mapFunc的this指向

  另一种方法：let arr = [...arrLike];

• 将参数列表转换为数组：

  Array.of(...items);

  🎜🎜 Parameter Standard Wert 🎜🎜🎜

  🎜🎜Neue Array-Methode: 🎜🎜🎜

  🎜Konstruktormethode: 🎜

  🎜 🎜Konvertieren Sie ein Klassenarray in ein echtes Array: Array.from(arrLike [, mapFunc, mapThis]);🎜🎜Parameter: 🎜
  🎜arrLike:Array- wie 🎜🎜<code>mapFunc:Die Operationsfunktion für jedes Element des Array-ähnlichen 🎜🎜mapThis:Ersetzt mapFuncs this Zeigen Sie auf 🎜🎜🎜Eine andere Möglichkeit: <code>let arr = [...arrLike];🎜🎜🎜🎜Konvertieren Sie die Argumentliste in ein Array: 🎜🎜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视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonWas ist neu in es6 im Vergleich zu es5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!