Was ist neu in es6 im Vergleich zu es5?

青灯夜游
Freigeben: 2022-10-21 19:08:10
Original
2277 Leute haben es durchsucht

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().

Was ist neu in es6 im Vergleich zu es5?

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
Nach dem Login kopieren

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];
Nach dem Login kopieren

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);
Nach dem Login kopieren

Array:

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

// 输出:
// ['a', 'b', 1, 2, 3, 4, 'c']
Nach dem Login kopieren

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}
Nach dem Login kopieren

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]
Nach dem Login kopieren

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};
Nach dem Login kopieren

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]
Nach dem Login kopieren

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');
Nach dem Login kopieren

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}
Nach dem Login kopieren

Kartenmethode:

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

Funktion neuer Inhalt:

  • Pfeilfunktion: keine this und argumentsthisarguments

  • 参数默认值

数组新增方法:

构造函数的方法:

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

    参数:

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

    另一种方法: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:< /code>Array- wie 🎜🎜<code>mapFunc:Die Operationsfunktion für jedes Element des Array-ähnlichen 🎜🎜mapThis:Ersetzt mapFuncs this < /code>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
        Nach dem Login kopieren
      • 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() {}
        };
        Nach dem Login kopieren
      • 属性名表达式:

        let name = "小明";
        let obj = {
          [name]: 111
        };
        console.log(obj);
        // 输出:
        // obj: {&#39;小明&#39;: 111}
        
        // 等价于:
        let obj = {};
        obj[name] = 111;
        Nach dem Login kopieren
      • 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);
        Nach dem Login kopieren
      • Object.is(value1, value2):判断两个值是否相等(强类型)

        ===的区别:

        +0 === -0;	// true
        Object.is(+0, -0);	// false
        
        NaN === NaN; // false
        Object.is(NaN, NaN); // true
        Nach dem Login kopieren

        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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!