Que sont Es6 et Es5

ECMAScript est un langage de programmation de script standardisé par Ecma International via ECMA-262. Le nom complet d'es6 est ECMAScript 6, qui est la sixième version d'ECMAScript ; le nom complet d'es5 est ECMAScript 5, qui est la cinquième version d'ECMAScript ; .

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

ECMAScript est un langage de programmation de script standardisé par Ecma International via ECMA-262. Ce langage est largement utilisé sur le World Wide Web. Il est souvent appelé JavaScript ou JScript, il peut donc être compris comme un standard pour JavaScript, mais en fait ces deux derniers sont des implémentations et des extensions de la norme ECMA-262.

Qu'est-ce que ES5

En tant que cinquième version d'ECMAScript (la quatrième version a été abandonnée car trop complexe), la prise en charge du navigateur est visible dans la première image. Les fonctionnalités ajoutées sont les suivantes.

1. mode strict

mode strict, restreindre certaines utilisations, 'utiliser strict';

2. Méthode d'ajout de tableau

ajoutée chaque, certains, forEach, filter, indexOf, lastIndexOf, isArray, map , Réduire, méthode réduireRight PS : Il existe d'autres méthodes Function.prototype.bind, String.prototype.trim, Date.now

3 Méthode d'objet

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

. Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS : Seulement parler de ce qui existe, pas de ce que c'est.

Qu'est-ce que ES6

ECMAScript6 fournit un grand nombre de nouvelles fonctionnalités tout en assurant une compatibilité descendante. La compatibilité actuelle du navigateur est la suivante : Les fonctionnalités d'ES6 sont les suivantes :

1.

2. Raccourci de valeur de propriété pour les littéraux d'objet

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Method definitions
    toString() {
    // Super calls
    return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

3. Déconstruction d'affectation

let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] =  /^(dddd)-(dd)-(dd)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2

4. Paramètres de fonction - valeur par défaut, emballage des paramètres, expansion du tableau (Default, Rest, Spread)

//Default
function findArtist(name='lu', age='26') {
    ...
}
//Rest
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
//Spread
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

5. .Fonctions fléchées

(1). Simplifie la forme du code et renvoie le résultat de l'expression par défaut.

(2). Lier automatiquement la sémantique this, c'est-à-dire this lors de la définition d'une fonction. Comme dans l'exemple ci-dessus, ceci est utilisé dans le paramètre de fonction anonyme de forEach.

6. Chaînes de modèle

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

7. Itérateurs + for..of

L'itérateur a une méthode suivante, et l'appel retournera : (1) Renvoie l'un des objets itérateurs Elements : { done). : false, value: elem }

(2). Si la fin de l'objet itéré a été atteinte : { done: true, value: retVal }

for (var n of ['a','b','c']) {
  console.log(n);
}
// 打印a、b、c

8. La classe a un constructeur, un extend et un super, mais il s'agit essentiellement de sucre syntaxique (cela n'a aucun impact sur le fonctionnement du langage, mais il est plus pratique à utiliser pour les programmeurs).

class Artist {
    constructor(name) {
        this.name = name;
    }
    perform() {
        return this.name + " performs ";
    }
}
class Singer extends Artist {
    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }
    perform() {
        return super.perform() + "[" + this.song + "]";
    }
}
let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true
james.perform(); // "Etta James performs [At last]"

10.Modules

Les fonctions de module intégrées d'ES6 s'appuient sur les avantages respectifs de CommonJS et d'AMD : (1) Il présente les caractéristiques de la syntaxe simplifiée de CommonJS, des exportations uniques et des dépendances cycliques. (2). Semblable à AMD, il prend en charge le chargement asynchrone et le chargement de modules configurables.

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});
// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

11.Map + Set + WeakMap + WeakSet Quatre types de collections

Les objets WeakMap et WeakSet en tant que clés de propriété seront recyclés et libérés si aucune autre variable ne s'y réfère.

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

12.Math + Number + String + Array + Object APIs

Quelques nouvelles API

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })

13Utilisez un proxy pour écouter le fonctionnement de l'objet, puis vous pourrez faire certaines choses correspondantes.

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};
var p = new Proxy(target, handler);
p.world === 'Hello, world!';

Opérations pouvant être surveillées : get, set, has, deleteProperty, apply, construct, getOwnPropertyDescriptor, definitionProperty, getPrototypeOf, setPrototypeOf, enumerate, ownKeys, PreventExtensions, isExtensible.

14.Symboles Le symbole est un type de base. Le symbole est généré en appelant la fonction symbol, qui reçoit un paramètre name facultatif. Le symbole renvoyé par cette fonction est unique.

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

15. Promises

Les promesses sont des objets qui gèrent des opérations asynchrones. Après avoir utilisé les objets Promise, vous pouvez utiliser une méthode d'appel en chaîne pour organiser le code afin de le rendre plus intuitif (similaire à l'objet différé de jQuery).

function fakeAjax(url) {
  return new Promise(function (resolve, reject) {
    // setTimeouts are for effect, typically we would handle XHR
    if (!url) {
      return setTimeout(reject, 1000);
    }
    return setTimeout(resolve, 1000);
  });
}
// no url, promise rejected
fakeAjax().then(function () {
  console.log('success');
},function () {
  console.log('fail');
});

Résumé

Pour ES6, cela devient plus compliqué de savoir si elle répétera les erreurs de ES4 d'une certaine manière ou peut-être qu'après quelques années, la capacité d'acceptation de chacun deviendra plus forte, et je pense que cela devrait être le cas. Je pense que c'est plutôt bien, car ils sont rétrocompatibles Même si vous ne connaissez pas la syntaxe complexe, vous pouvez toujours utiliser les méthodes que vous connaissez, et le sucre syntaxique qu'elles fournissent est assez pratique. Cet article est un peu long, je vais donc le terminer ici. Cet article vise à parler de ce qui existe et devrait couvrir la plupart du contenu, mais il n'y a pas d'analyse détaillée. Une partie du contenu provient de documents en ligne, je ne les énumérerai donc pas un par un.

Apprentissage recommandé : Tutoriel vidéo JS

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!