Maison  >  Article  >  interface Web  >  Introduction détaillée aux nouvelles fonctionnalités de JavaScript6

Introduction détaillée aux nouvelles fonctionnalités de JavaScript6

黄舟
黄舟original
2017-03-16 14:36:411684parcourir

JavaScript Quoi de neuf dans JavaScript 6 ? Jetons un coup d'œil à certaines des nouvelles fonctionnalités de JavaScript 6.

  • let, const (utilisé pour définir des blocs-localvariables), function

  • Déconstruction :

    let {x, y} = pt; let [s, v, o] = triple(); (à condition que
    )let pt = {x:2, y:-5}

  • Valeur du paramètre par défaut :

    function f(x, y=1, z=0) {⋯}

  • Autres paramètres : function g(i, j, ...r) { <a href="http://www.php.cn/wiki/135.html" target=" _blank">return</a> r.slice(i, j); }function g(i, j, ...r) { <a href="http://www.php.cn/wiki/135.html" target="_blank">return</a> r.slice(i, j); } (plus besoin d'utiliser
    ). arguments

  • Extension des données : soit a = [0,1,2,3], o = <a href="http://www.php.cn/wiki/%20165.html" target="_blank">nouveau<p> Quelque chose(...a);</p></a>. Peut également être utilisé pour les littéraux let a = [0,1,2,3], o = <a href="http://www.php.cn/wiki/165.html" target="_blank">new</a> Something(...a);array : [1, ...<a href="http://www.php.cn/wiki/1041.html" target="_blank"> array</a>, 4].[1, ...<a href="http://www.php.cn/wiki/1041.html" target="_blank">array</a>, 4]
  • Object abréviation : let one = 1; { one, func_one() {return 1;}, ['<a href="http://www.php.cn/wiki/1051.html" target="_blank">key<br> 'one] : 1</a>. let one = 1; { one, func_one() {return 1;}, ['<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a> ' one]: 1 }

  • Fonction abréviation a le même effet que (a) => a * a
    (function(a) { return a * a; }).bind(this)

  • carte , set : .let m = new Map(); m.set(key, value); m.has(key); m.get(key) comprend également .<a href="http://www.php.cn/wiki/917.html" target="_blank ">effacer <br>()</a>, .<a href="http://www.php.cn/wiki/1298.html" target="_blank">supprimer<code>.<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>()() , .<a href="http://www.php.cn/wiki/127.html" target="_blank">forEach<code>.<a href="http://www.php.cn/wiki/1298.html" target="_blank">delete</a>()(), .<a href="http://www.php.cn/wiki/127.html" target="_blank">forEach</a>() ..keys()

  • Carte faible :

    . Utilisez-le lorsqu'il y a une let map = new WeakMap()boucleréférence. Même chose . new WeakSet()

  • promesse :

    .new Promise((resolve, reject) => {…})

    • Quand

      , promise.then(value => {…}) renvoie la valeur promise (ou une Nouvelle promesse , formant un appel en chaîne) resolve(valueOrPromise)

    • Quand

      promise.then(…).then(…).catch(error => {…}) ne respecte pas sa promesse reject(new Error(…))

    • Création rapide d'une promesse :

      , Promise.resolve(value) .Promise.reject(error)

    • Itération : Promesse.<a href="http://www.php.cn/wiki/1483.html" target="_blank">all<p>(listOfPromises).then(listOfValues ​​​​=> …)</p></a>,Promise.<a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a>(listOfPromises).then(listOfValues => …)
      Promise.race(listOfPromises).then(valueThatResolvedFirst => …)
  • Agent : let obj = new Proxy(proto, han<a href="http://www.php.cn/wiki/596.html" target="_blank">dl<p>er)</p></a>.let obj = new Proxy(proto, han<a href="http://www.php.cn/wiki/596.html" target="_blank">dl</a>er)En termes simples :
    surcharge à l'aide d'éléments d'objet de classe (apporte toutes les propriétés accessibles.)
  • Générateur : function* gen() { yield 1; yield 2; } En fait,
    renverra un message contenant <a href="http://www.php.cn/wiki/1071.html" target="_blank">suivant <code>gen()() L'objet de la fonction. <a href="http://www.php.cn/wiki/1071.html" target="_blank">next</a>()

  • Boucle :

    . for (var [key, val] of items(x)) { alert(key ',' val); }

  • Utilisé dans la définition de classe<a href="http://www.php.cn/wiki/166.html" target="_blank">extends<p> </p></a>, <a href="http://www.php.cn/code/8202.html" target="_blank">super<code><a href="http://www.php.cn/wiki/166.html" target="_blank">extends</a> et <a href="http://www.php.cn/wiki/188.html" target="_blank">statique<code><a href="http://www.php.cn/code/8202.html" target="_blank">super</a> :<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>
    class Point extends Base {
      constructor(x,y) {
        super();
        this[px] = x, this[py] = y;
        this.r = function() { return Math.sqrt(x*x + y*y); }
      }
      get x() { return this[px]; }
      get y() { return this[py]; }
      proto_r() { return Math.sqrt(this[px] * this[px] +
          this[py] * this[py]); }
      equals(p) { return this[px] === p[px] &&
          this[py] === p[py]; }
    }
  • symbole Objet (Symbole), crée une clé privée, qui peut être utilisée dans les cartes et les classes (membres privés

    membres).

    let a = Map();
    {
      let k = Symbol();
      a.set(k, &#39;value&#39;);
      // 这里你可以访问和设置&#39;value&#39;,比如a.get(k)。
    }
    //这里不行,k是不可见的。
  • Modulaire :

    module math {
      export function sum(x, y) {
        return x + y;
      }
      export var pi = 3.141593;
    }
    
    import {sum, pi} from math;
    alert(sum(pi,pi));
  • Modèle

    Chaîne : Peut être multiple lignes et peut intégrer des variables.
    .`You are ${age} years old.`

    // 多行字符串
    re`line1: (words )*
    line2: \w+`
    
    // It desugars to:
    re({raw:&#39;line1: (words )*\nline2: \w+&#39;,
        cooked:&#39;line1: (words )*\nline2: \w+&#39;})
  • Tableau typé

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn