Un résumé commun des extensions JavaScript ES6 aux tableaux, fonctions et objets-js tutoriel-php.cn

Un résumé commun des extensions JavaScript ES6 aux tableaux, fonctions et objets

巴扎黑

Libérer： 2017-07-22 16:56:21

original

1300 Les gens l'ont consulté

1.1. La méthode Array.from()

Array.from est utilisée pour convertir deux types d'objets en tableaux réels : les objets de type tableau (tableau -like object) et objets traversables (itérable) (y compris ES6nouvelles structures de données Set et Carte).

Ce qui suit est un objet de type tableau, Array.from le convertit en un véritable tableau.

let arrayLike = {

    &#39;0&#39;: &#39;a&#39;,

    &#39;1&#39;: &#39;b&#39;,

    &#39;2&#39;: &#39;c&#39;,

    length: 3};

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

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

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

// [1, 2, 3]

Array.from(&#39;hello&#39;)

// [&#39;h&#39;, &#39;e&#39;, &#39;l&#39;, &#39;l&#39;, &#39;o&#39;]

Copier après la connexion

Array.from peut également accepter un deuxième paramètre, Le La méthode map est similaire à un tableau. Elle est utilisée pour traiter chaque élément et mettre la valeur traitée dans le tableau renvoyé.

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

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

 

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

// [1, 4, 9]

Copier après la connexion

1.2 Array.of()

Array.of méthode. Utilisé pour convertir un ensemble de valeurs en un tableau.

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

Array.of(3) // [3]

Array.of(3).length // 1

Copier après la connexion

1.3 entries() d'instance de tableau, <🎜. >keys() et values()

ES6

propose trois nouvelles méthodes —— entries(), keys() et values() - est utilisé pour parcourir le tableau. Ils renvoient tous un objet traverseur, qui peut être parcouru à l'aide de la boucle for...of. La seule différence est que keys() sert à parcourir les noms de clés et . values() est un parcours de paires clé-valeur, et entries() est un parcours de paires clé-valeur.

for (let index of [&#39;a&#39;, &#39;b&#39;].keys()) {

  console.log(index);

}

// 0// 1

for (let elem of [&#39;a&#39;, &#39;b&#39;].values()) {

  console.log(elem);

}

// &#39;a&#39;// &#39;b&#39;

for (let [index, elem] of [&#39;a&#39;, &#39;b&#39;].entries()) {

  console.log(index, elem);

}

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

Copier après la connexion

1.4

Valeurs par défaut des paramètres de fonction<🎜. >ES6

Permet de définir des valeurs par défaut pour les paramètres de fonction, c'est-à-dire écrites directement après la définition du paramètre.

function log(x, y = &#39;World&#39;) {

  console.log(x, y);}

log(&#39;Hello&#39;) // Hello World

log(&#39;Hello&#39;, &#39;China&#39;) // Hello China

log(&#39;Hello&#39;, &#39;&#39;) // Hello

Copier après la connexion

Les variables de paramètres sont déclarées par défaut, vous ne pouvez donc pas utiliser

let ou const Déclaration encore.

function foo(x = 5) {

  let x = 1;

 // error

  const x = 2; 

// error

}

Copier après la connexion

Dans le code ci-dessus, la variable paramètre

x est déclarée par défaut dans la fonction. body, Il ne peut pas être déclaré à nouveau avec let ou const, sinon une erreur sera signalée. 1.5. Application de

opérateur de propagation

(1) fusionner Le L'opérateur d'expansion array

fournit une nouvelle façon d'écrire des combinaisons de tableaux.

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

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

var arr1 = [&#39;a&#39;, &#39;b&#39;];var arr2 = [&#39;c&#39;];var arr3 = [&#39;d&#39;, &#39;e&#39;];

// ES5的合并数组

arr1.concat(arr2, arr3);

// [ &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39; ]

// ES6的合并数组

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

// [ &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39; ]

Copier après la connexion

1.6

Fonctions fléchéesES6

Il est permis de définir des fonctions en utilisant

"flèche " (=>). var f = v => v;

La fonction flèche ci-dessus est équivalente à :

var f = function(v ) {

return v;

};

Exemple

$(function() {

       var a=()=>{

         const [a, b, c, d, e] = &#39;hello&#39;;

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

       }

        a();//不带参数

//h__e__l__l__o

    var b=(name,password)=>{

         

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

       }

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

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

        });

Copier après la connexion

1.7. Extension de

objet1.8. Représentation concise des

attributs. ES6

permet d'écrire des variables et des fonctions directement en tant que propriétés et méthodes d'objets. Ce type d'écriture est plus concis.

上面代码表明，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 })

// [&#39;2&#39;, &#39;10&#39;, &#39;b&#39;, &#39;a&#39;, Symbol()]

Copier après la connexion

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!