Welche Funktionen wurden durch es6 erweitert?

Erweiterte Funktionen von es6: 1. Destrukturierende Zuweisung, wodurch Werte aus Arrays oder Objekten extrahiert und Variablen nach einem bestimmten Muster zugewiesen werden können. 2. Der Zeichenfolge wird eine Traverser-Schnittstelle hinzugefügt, sodass die Zeichenfolge von der „for...of“-Schleife durchlaufen werden kann. 3. Die Vorlagenzeichenfolge ist eine erweiterte Version der Zeichenfolge. 4. Die Etikettenvorlage ist eine spezielle Form des Funktionsaufrufs 5. Legen Sie Standardwerte für die Parameter der Funktion fest. 6. Die Pfeilfunktion zeigt auf den übergeordneten Bereich. 7. Ermöglichen Sie das Schreiben von Variablen und Funktionen direkt in die geschweiften Klammern als Attribute und Methoden des Objekts . Tutorial-Betriebsumgebung: Windows 7-System, ECMAScript-Version 6, Dell G3-Computer

ES6 verbessert die ursprüngliche Syntax

1, Destrukturierungszuweisung

es6 ermöglicht das Befolgen eines bestimmten Musters Werte aus Arrays oder Objekten und das Zuweisen von Werten zu Variablen wird als Destrukturierungszuweisung bezeichnet. Die Destrukturierungszuweisung ist beim Schreiben von Code einfach und leicht zu verstehen, und die Semantik ist klar und es ist einfach, Datenfelder in komplexen Objekten zu erhalten Bei der Destrukturierung befindet sich die Quelle der Destrukturierung auf der rechten Seite des Destrukturierungsausdrucks und das Ziel der Destrukturierung auf der linken Seite des Destrukturierungsausdrucks (1), Destrukturierungszuweisung des Arrays

ES6 ermöglicht es, einem bestimmten Muster zu folgen und Werte aus dem Objekt zu extrahieren und Variablen zuzuweisen.

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

Diese Schreibmethode gehört im Wesentlichen zum „Mustervergleich“. Auf beiden Seiten des Gleichheitszeichens wird der Variablen auf der linken Seite der entsprechende Wert zugewiesen.

Wenn die Destrukturierung fehlschlägt, ist der Wert gleich undefiniert. Ein anderer Fall ist eine unvollständige Destrukturierung Die linke Seite des Gleichheitszeichens stimmt nur mit einem Teil des Arrays auf der rechten Seite des Gleichheitszeichens überein.

Für die Set-Struktur können Sie auch die destrukturierende Zuweisung von Arrays verwenden ein Standardwert

rrreeBeachten Sie, dass ES6 intern den strikten Gleichheitsoperator (===) verwendet, um zu bestimmen, ob eine Position einen Wert hat. Der Standardwert wird also nur wirksam, wenn ein Array-Mitglied strikt gleich undefiniert ist . Wenn ein Array-Mitglied null ist, wird der Standardwert nicht wirksam, da null im obigen Code nicht unbedingt gleich undefiniert ist, da x den Wert erhalten kann, sodass die Funktion f nicht wirksam ist Der obige Code entspricht tatsächlich dem folgenden Code: Objektdestrukturierung und -zuweisung. Es gibt einen wichtigen Unterschied zwischen Objektdestrukturierung und Array in der Reihenfolge angeordnet, und der Wert der Variablen wird durch ihre Position bestimmt, während die Attribute des Objekts keine Reihenfolge haben und die Variable denselben Namen wie das Attribut haben muss, um den korrekten Wert zu erhalten Das Objekt kann sehr praktisch sein, um die Methoden vorhandener Objekte einer bestimmten Variablen zuzuweisen. Das Beispiel 1 des obigen Codes weist den entsprechenden Variablen die Logarithmus-, Sinus- und Kosinusmethoden zu. was praktisch ist. Beispiel 2 weist der Protokollvariablen rrree

zu. Im obigen Code ist foo die Variable baz, nicht das Muster foo .

Der interne Mechanismus der Objektdestrukturierung und -zuweisung besteht darin, zunächst das gleichnamige Attribut zu finden und es dann der entsprechenden Variablen zuzuweisen. Was wirklich zugewiesen wird, ist Letzteres, nicht Ersteres.

Wie Arrays kann die Destrukturierung auch für Objekte verschachtelter Strukturen verwendet werden.

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

Standardwerte

• Durch die Destrukturierung von Objekten können auch Standardwerte festgelegt werden.

  let [foo = true] = [];
  foo // true
  let [x, y = 'b'] = ['a']; // x='a', y='b'
  let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
  let [x = 1] = [null];x // null

(3), Destrukturieren und Zuweisen von Strings

Array-ähnliche Objekte haben ein Längenattribut, daher kann dieses Attribut auch destrukturierend und zugewiesen werden.

function f() {
  console.log('aaa');
}
let [x = f()] = [1];

(4) Destrukturierende Zuweisung von numerischen und booleschen Werten Wenn bei der destrukturierenden Zuweisung die rechte Seite des Gleichheitszeichens ein numerischer Wert oder ein boolescher Wert ist, wird dieser zuerst in ein Objekt konvertiert .

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

(5), Destrukturierende Zuweisung von Funktionsparametern

// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

(6), Zweck

1) Tauschen Sie den Wert einer Variablen aus

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

2) Geben Sie mehrere Werte aus der zurück Funktion Nur Funktion Es kann einen Wert zurückgeben. Wenn Sie mehrere Werte zurückgeben möchten, können Sie diese nur in ein Array oder Objekt einfügen und zurückgeben. Mit destrukturierenden Zuweisungen ist es sehr praktisch, diese Werte abzurufen.

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

3) Definition von Funktionsparametern

Durch die destrukturierende Zuweisung kann ein Parametersatz leicht mit Variablennamen abgeglichen werden.

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

4) JSON-Daten extrahieren Die Destrukturierungszuweisung ist besonders nützlich zum Extrahieren von Daten aus JSON-Objekten.

let {length : len} = 'hello';
len // 5

5) Durchlaufen der Map-Struktur Jedes mit der Iterator-Schnittstelle bereitgestellte Objekt kann mithilfe einer for...of-Schleife durchlaufen werden. Die Map-Struktur unterstützt nativ die Iterator-Schnittstelle, und durch die Destrukturierung und Zuweisung von Variablen ist es sehr praktisch, Schlüsselnamen und Schlüsselwerte zu erhalten.

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

Wenn Sie nur den Schlüsselnamen oder Schlüsselwert erhalten möchten, können Sie ihn wie folgt schreiben.

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

2, Saitenverbesserung

ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

"\uD842\uDFB7"
// "?"
"\u20BB7"
// " 7"

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

（1）字符串的遍历器接口

ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

（2）模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还能调用函数。如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

字符串的新增方法

1,String.fromCodePoint()
ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。

2,String.raw()
ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

3, 实例方法：includes(), startsWith(), endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

3，函数的增强

（1）标签模板

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

let a = 5;
let b = 10;
function tag(s, v1, v2) {
  console.log(s[0]);
  console.log(s[1]);
  console.log(s[2]);
  console.log(v1);
  console.log(v2);
  return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"

（2）函数参数增强：参数默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

（3）箭头函数的简化

箭头函数的this指向上级作用域

    const name = 'tony'
    const person = {
      name: 'tom',
      say: () => console.log(this.name),
      sayHello: function () {
        console.log(this.name)
      },
      sayHi: function () {
        setTimeout(function () {
          console.log(this.name)
        }, 500)
      },
      asyncSay: function () {
        setTimeout(()=>console.log(this.name), 500)
      }
    }
    person.say()  //tony
    person.sayHello() //tom
    person.sayHi() //tony
    person.asyncSay()  //tom

4.对象的扩展

属性的简洁表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。除了属性简写，方法也可以简写。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};
const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

1、如果key与value变量名相同，省略:value
2、省略函数：function
3、计算属性：[Math.random()]

   const bar = 'bar'
    const obj = {
      bar,
      fn () {
        console.log('1111')
      },
      [Math.random()]: '123'
    }
    console.log(obj)

【推荐学习：javascript视频教程】

Das obige ist der detaillierte Inhalt vonWelche Funktionen wurden durch es6 erweitert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!