Résumé des nouvelles fonctionnalités de JS--ES 2015/6-js tutoriel-php.cn

Résumé des nouvelles fonctionnalités de JS--ES 2015/6

怪我咯

Libérer： 2017-06-26 12:01:29

original

1054 Les gens l'ont consulté

ES 2015/6 propose de nombreux nouveaux contenus. Voici seulement un aperçu (pas nécessairement exhaustif) de ces fonctionnalités. En fait, il y aura beaucoup de connaissances dans chaque point que vous creuserez. Cet article vise à les résumer, il ne mènera donc pas de discussion ni de recherche approfondies sur ces caractéristiques. Ensuite, si j'ai le temps, j'écrirai quelques blogs distincts pour approfondir les points couramment utilisés et avoir des échanges approfondis avec tout le monde.

Fonction flèche

La fonction flèche, une forme abrégée de fonction implémentée via la syntaxe =>, a une syntaxe similaire en C#/JAVA8/CoffeeScript. Contrairement aux fonctions, les fonctions fléchées partagent le même this avec leur contexte d'exécution. Si une fonction flèche apparaît à l'intérieur d'un objet fonction, elle partage la variable arguments avec la fonction.

// Expression bodiesvar odds = evens.map(v => v + 1);var nums = evens.map((v, i) => v + i);// Statement bodiesnums.forEach(v => {
  if (v % 5 === 0)    fives.push(v);});// Lexical thisvar bob = {
  _name: "Bob",
  _friends: [&#39;jim&#39;],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f)); // Bob knows jim
  }};// Lexical argumentsfunction square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }

    return numbers;
  };

  return example();}square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

Copier après la connexion

Class Class

Javascript 类 n'introduit pas de nouveau modèle d'héritage d'objet orienté objet , mais du sucre syntaxique basé sur l'héritage prototypique. Il fournit une syntaxe plus simple et plus claire pour créer des objets et gérer l'héritage. La classe

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }}

Copier après la connexion

ne déclare pas de promotion, vous devez vous assurer qu'elle a été déclarée avant d'appeler.

Constructor constructor est une méthode spéciale utilisée pour créer et initialiser des instances d'une classe.

Méthode statiquestatic le mot-clé est utilisé pour déclarer la méthode statique

Créer une sous-classeextends le mot-clé est utilisé pour créer une sous-classe, veuillez noter ici : extends ne peut pas être utilisé pour étendre des objets normaux (non -constructible/non constructible), si vous souhaitez hériter d'un objet normal, utilisez Object.setPrototypeOf(). Le mot-clé

Call super classsuper peut être utilisé pour appeler des méthodes dans la classe parent

Mix-ins Mixte

Littéraux d'objet améliorés

Il peut être implémenté sous forme de littéraux pour définir des prototypes, des abréviations de paires clé-valeur, des méthodes de définition, etc., et des noms d'attributs dynamiques.

var obj = {
    // Sets the prototype. "__proto__" or &#39;__proto__&#39; would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    [&#39;__proto__&#39;]: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42};

Copier après la connexion

Chaîne de modèle

La chaîne de modèle fournit du sucre syntaxique pour la construction de chaînes, dans Prel/ Des fonctionnalités similaires sont également disponible en python et dans d'autres langages.

// Basic literal string creation
`This is a pretty little template string.`

// Multiline strings
`In ES5 this is
 not legal.`

// Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

Copier après la connexion

Affectation Destructuration

La méthode Destructuring est une expression Javascript, qui permet d'extraire une valeur d'un tableau ou une propriété d'un objet dans un milieu de variable différent.

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// object matching (用新变量名赋值)
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

// 变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

// 对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Copier après la connexion

Default + Rest + Spread

Fournit des valeurs par défaut pour les paramètres de fonction & ... Nombre fixe de paramètres

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15


function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6



function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Copier après la connexion

Let + Const

let est utilisé pour déclarer des variables de portée au niveau du bloc. const est utilisé pour déclarer des constantes.

function f() {
  {
    let x;
    {
      // this is ok since it&#39;s a block scoped name
      const x = "sneaky";
      // error, was just defined with `const` above
      x = "foo";
    }
    // this is ok since it was declared with `let`
    x = "bar";
    // error, already declared above in this block
    let x = "inner";
  }
}

Copier après la connexion

Itérateur

Des itérateurs personnalisés peuvent être créés via symbol.iterator.

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

Copier après la connexion

Générateurs

Les fonctions normales utilisent des déclarations de fonction, tandis que les fonctions génératrices utilisent des déclarations de fonction*.

À l'intérieur de la fonction génératrice, il y a une syntaxe de type retour : le mot-clé rendement. La différence entre les deux est qu'une fonction normale ne peut retourner qu'une seule fois, tandis qu'une fonction génératrice peut produire plusieurs fois (bien sûr, elle ne peut également produire qu'une seule fois). Pendant l'exécution du générateur, il s'arrêtera immédiatement lorsqu'il rencontrera une expression de rendement, et l'état d'exécution pourra être repris plus tard.

function* quips(name) {
  yield "你好 " + name + "!";
  yield "希望你能喜欢这篇介绍ES6的译文";
  if (name.startsWith("X")) {
    yield "你的名字 " + name + "  首字母是X，这很酷！";
  }
  yield "我们下次再见！";
}

Copier après la connexion