Eine allgemeine Zusammenfassung der JavaScript ES6-Erweiterungen für Arrays, Funktionen und Objekte

1.1. Die Methode Array.from()

Array.from wird verwendet, um zwei Arten von Objekten in echte Arrays umzuwandeln: Array-ähnliche Objekte (array -ähnliches Objekt) und durchquerbare (iterierbare) Objekte (einschließlich ES6neue Datenstrukturen Set und Karte).

Das Folgende ist ein Array-ähnliches Objekt, Array.from konvertiert es in ein echtes Array.

let arrayLike = {

    '0': 'a',

    '1': 'b',

    '2': 'c',

    length: 3};

// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from([1, 2, 3])

// [1, 2, 3]

Array.from('hello')

// ['h', 'e', 'l', 'l', 'o']

　

Array.from kann auch einen zweiten Parameter akzeptieren, The Die map-Methode ähnelt einem Array. Sie wird verwendet, um jedes Element zu verarbeiten und den verarbeiteten Wert in das zurückgegebene Array einzufügen.

Array.from(arrayLike, x => x * x);

// 等同于Array.from(arrayLike).map(x => x * x);

 

Array.from([1, 2, 3], (x) => x * x)

// [1, 4, 9]

　

1.2 Array.of()

Array.of Methode Wird verwendet, um eine Reihe von Werten in ein Array umzuwandeln.

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

Array.of(3).length // 1

　

1.3. Einträge() der Array-Instanz, keys() und values()

ES6 bietet drei neue Methoden —— entries(), keys() und values() – wird zum Durchlaufen des Arrays verwendet. Sie alle geben ein Traverser-Objekt zurück, das mit der for...of-Schleife durchlaufen werden kann. Der einzige Unterschied besteht darin, dass keys() zum Durchlaufen von Schlüsselnamen dient und Values( ) ist eine Durchquerung von Schlüssel-Wert-Paaren und entries() ist eine Durchquerung von Schlüssel-Wert-Paaren.

for (let index of ['a', 'b'].keys()) {

  console.log(index);

}

// 0// 1

for (let elem of ['a', 'b'].values()) {

  console.log(elem);

}

// 'a'// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {

  console.log(index, elem);

}

// 0 "a"// 1 "b"

　

1.4.Standardwerte von Funktionsparametern

ES6 Ermöglicht das Festlegen von Standardwerten für Funktionsparameter, d. h. das Schreiben direkt nach der Parameterdefinition.

function log(x, y = 'World') {

  console.log(x, y);}

log('Hello') // Hello World

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

log('Hello', '') // Hello

　

Parametervariablen werden standardmäßig deklariert, daher können Sie nicht let oder const verwenden Erklärung nochmal.

function foo(x = 5) {

  let x = 1;

 // error

  const x = 2; 

// error

}

　

Im obigen Code ist die Parametervariable x standardmäßig in der Funktion deklariert body, Es kann nicht erneut mit let oder const deklariert werden, andernfalls wird ein Fehler gemeldet.

1.5. Anwendung des Spread-Operators

(1) merge The array

Der Spread-Operator bietet eine neue Möglichkeit, Array-Kombinationen zu schreiben.

// ES5[1, 2].concat(more)

// ES6[1, 2, ...more]

var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e'];

// ES5的合并数组

arr1.concat(arr2, arr3);

// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组

[...arr1, ...arr2, ...arr3]

// [ 'a', 'b', 'c', 'd', 'e' ]

　

1.6. Pfeilfunktionen

ES6 Es ist erlaubt, Funktionen mit "Pfeil " (=>) zu definieren.

var f = v => v;

Die Pfeilfunktion oben entspricht:

var f = function(v ) {

return v;

};

Beispiel

$(function() {

       var a=()=>{

         const [a, b, c, d, e] = 'hello';

            console.log(a++b++c++d++e);

       }

        a();//不带参数

//h__e__l__l__o

    var b=(name,password)=>{

         

            console.log("用户名："+name+",密码："+password);

       }

      b("张三","123456");//带参数

//用户名：张三,密码：123456

        });

　

1.7. Erweiterung des Objekts

1.8. Prägnante Darstellung von -Attributen

ES6 ermöglicht das direkte Schreiben von Variablen und Funktionen als Eigenschaften und Methoden von Objekten. Diese Art des Schreibens ist prägnanter.

var foo = 'bar';

var baz = {foo};

baz // {foo: "bar"}

// 等同于var baz = {foo: foo};

　　

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

1.9. 属性的遍历

ES6 一共有5种方法可以遍历对象的属性。

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 或字符串，也不管是否可枚举。

以上的5种方法遍历对象的属性，都遵守同样的属性遍历的次序规则。

• 首先遍历所有属性名为数值的属性，按照数字排序。

• 其次遍历所有属性名为字符串的属性，按照生成时间排序。

• 最后遍历所有属性名为 Symbol 值的属性，按照生成时间排序。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })

// ['2', '10', 'b', 'a', Symbol()]

　　

上面代码中，Reflect.ownKeys方法返回一个数组，包含了参数对象的所有属性。这个数组的属性次序是这样的，首先是数值属性2和10，其次是字符串属性b和a，最后是 Symbol 属性。

 

注释：对于Object.values等ES2017刚出来的函数，大多数浏览器不支持，暂时就不列出来了

Das obige ist der detaillierte Inhalt vonEine allgemeine Zusammenfassung der JavaScript ES6-Erweiterungen für Arrays, Funktionen und Objekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!