Quelles sont les caractéristiques de l'ES6 qui méritent d'être étudiées?

Le karma est travailleur

01 Préface

ES6 est désormais le standard du langage de nouvelle génération. L'apprentissage frontal a atteint une nouvelle étape. Notre langage JavaScript peut déjà être utilisé pour écrire des applications complexes à grande échelle et devenir un langage de développement au niveau de l'entreprise. Et le poste de développement front-end est désormais l'un des postes les plus importants de l'entreprise, il est donc normal d'apprendre de nouvelles technologies et de piloter des produits avec la technologie.

Pour l’étude de l’ES6, nous suggérons de jeter un œil au tutoriel de M. Ruan Yifeng, qui détaille chaque point de connaissance, qui est très facile à comprendre. Ensuite, je vais parler de certaines des fonctionnalités les plus importantes que ES6 a ajoutées, qui peuvent être utilisées dans nos projets et interviewer les questions fréquemment posées.

02 Nouvelles fonctionnalités

De nombreuses nouvelles fonctionnalités ont été ajoutées à ES6, et il est impossible de les développer ici. J'ai rencontré ce qui suit dans l'interview. Vous pouvez le passer si vous les décrivez clairement.

La différence entre let, var et const
Fonction flèche
Mission de restructuration
Chaîne de modèle
Set, Map structure de données
Objet de promesse
Procuration

La différence entre let, var et const

Ce sont tous des mots clés utilisés pour déclarer des variables / constantes. Dans le passé, nous utilisions généralement var pour déclarer, mais il y a quelques inconvénients et il est facile de faire des erreurs.

Comprenons d'abord le problème de la promotion et de la portée des variables.

Promotion variable: lorsque vous utilisez var pour la déclaration, vous pouvez l'utiliser sans déclaration. Par exemple:

console.log(a); //undefined

La fonction s'améliorera-t-elle? Quelle fonction ou variable a la priorité la plus élevée?

console.log(a);  //f (a){}
var a=1;
function a(){};

Le résultat que nous obtenons est que la fonction a une priorité plus élevée que la variable. Quelle est donc la portée?

var a=1;
function b(){
  var a=2
  console.log(a);
}
b()

L'exécution de ce code, on obtiendra le résultat est 2

var a = 1;
function b() {
    // var a = 2
    console.log(a);
}
b()

Mais lorsque nous commentons le code, nous constatons que le résultat devient 1.

Portée: lorsque vous ne pouvez pas trouver une instruction dans le domaine de travail actuel, vous allez dans la portée du parent pour la trouver. De cette façon, vous trouverez progressivement la chaîne et finirez par former une chaîne. Il s'agit de la chaîne de portée.

Let et var sont des opérateurs qui peuvent être utilisés pour déclarer des variables, mais la différence entre eux est que var a une promotion de portée, et let est limité à l'utilisation de la portée actuelle, sinon une erreur sera signalée. Il sera également erroné d'utiliser avant la déclaration.

console.log(a)
let a

Dira qu'un n'est pas défini

const est utilisé pour déclarer une constante. Elle ne peut pas être modifiée après la déclaration, et il n'y a pas de problème de promotion de variable. Son utilisation avant la modification ou la déclaration signale une erreur. Nous devons également noter que les déclarations let et const ne seront pas accrochées à la fenêtre.

var a = 1
let b = 1
const c = 1
console.log(window.b) // undefined
console.log(window. c) // undefined

La question d'entrevue pour l'examen régulier est, qu'est-ce que la sortie de code suivante:

for (var i =0; i <5; i++) {
    setTimeout(()=>{
        console.log(i);
    },i*1000)
}
//5 5 5 5 5

C'est le problème de l'étendue au niveau du bloc. S'il est remplacé par une instruction let, il affichera 0 1 2 3 4

Pour résumer:

var a une promotion variable et peut être utilisé avant la déclaration. Les deux autres ont une zone morte temporaire et ne peuvent pas être utilisés avant la déclaration
let et const sont fondamentalement les mêmes, ce dernier ne peut pas être attribué à nouveau
Promotion des fonctions grâce à une promotion variable

Fonction flèche

La fonction flèche est une nouvelle méthode d'écriture de fonction ajoutée par ES6. Les deux méthodes d'écriture suivantes sont en fait les mêmes:

setTimeout(function(){
    console.log("Hello World!");
},1000)

setTimeout(()=>{
    console.log("Hello World!");
},1000)

Quelle est la différence entre elle et les fonctions ordinaires?

Ne peut pas être utilisé comme constructeur, pas de prototype
cela indique hérité et ne changera pas

Mission de restructuration

La déstructuration est une façon d'écrire la correspondance de motifs. Dans le passé, lorsque nous attribuions des valeurs, nous devions généralement les affecter séparément, telles que:

let a = 1;
let b = 2;
let c = 3;

Cependant, l'affectation de la déstructuration nous permet d'affecter des valeurs de cette manière. Les côtés gauche et droit correspondent à la copie. Si la déstructuration échoue, la valeur ne sera pas définie.

let [a, b, c] = [1, 2, 3];

let [a, b, c] = [1, 2];
console.log(a,b,c); //1, 2, undefined

Il y a généralement deux aspects que nous utilisons couramment: l'un est la déconstruction des chaînes JSON, comme:

const {name,age,number} = {name:'rose',age:12,number:123}
console.log(name,age,number);  //rose 12 123

Il existe également une opération d'échange que nous pouvons utiliser pour les données, telles que:

let a=1;
let b=2;

[a,b]=[b,a];

console.log(a,b);  //2, 1

Chaîne de modèle

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

Par rapport à l'utilisation précédente, la couture + est beaucoup plus simple et plus lisible. La syntaxe consiste à utiliser des backticks pour déclarer, et la variable utilise $ {variable}.

Set, Map structure de données

Set it est un constructeur, utilisé pour générer la structure de données Set. Semblable à un tableau, mais contrairement à un tableau, il ne répète pas chaque élément. L'effet peut également être utilisé pour les opérations de déduplication des baies.

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

Déduplication de tableau, relativement simple

function unique(arr) {
    return [...new Set(arr)]
}

La carte est une collection de paires clé-valeur similaires aux objets, mais la plage de clés n'est pas limitée aux chaînes, et divers types de valeurs peuvent être utilisés comme clés, y compris l'objet.

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

En tant que constructeur, Map peut également accepter un tableau en tant que paramètre, les membres du tableau sont également un tableau de paires clé-valeur.

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

Objet de promesse

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Le constructeur Promise accepte une fonction comme paramètre. Les deux paramètres de la fonction sont résoudre et rejeter. Ce sont deux fonctions fournies par le moteur JavaScript et n'ont pas besoin d'être déployées par vous-même.

La fonction de la fonction de résolution consiste à faire passer l'état de l'objet Promise de "non terminé" à "réussi" (c'est-à-dire de l'attente à la résolution), qui est appelé lorsque l'opération asynchrone réussit et transmet le résultat de l'opération asynchrone en tant que paramètre; rejeter La fonction de la fonction est de changer l'état de l'objet Promise de "non terminé" en "échoué" (c'est-à-dire de l'attente au rejeté), appelé lorsque l'opération asynchrone échoue et de transmettre l'erreur signalée par l'opération asynchrone en tant que paramètre.

Une fois l'instance Promise générée, vous pouvez utiliser la méthode then pour spécifier respectivement la fonction de rappel de l'état résolu et de l'état rejeté.

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Procuration

Le proxy peut être compris comme la mise en place d'une couche "d'interception" devant l'objet cible. L'accès extérieur à l'objet doit d'abord être intercepté par cette couche. Par conséquent, il fournit un mécanisme pour filtrer et réécrire l'accès extérieur. Il existe les 13 types d'interception de proxy suivants: Pour une utilisation spécifique, vous pouvez trouver le proxy que j'ai écrit auparavant.

get (target, propKey, receiver) intercepte la lecture des propriétés de l'objet
set (cible, propKey, valeur, récepteur) Paramètres de propriété d'objet d'interception
a (cible, propKey) 拦截 propkey dans le proxy
deleteProperty (cible, propKey) 拦截 supprimer le proxy [propKey]
ownKeys (cible)
getOwnPropertyDescriptor (target, propKey) renvoie l'intercepteur d'objet de description de propriété d'objet
defineProperty (cible, propKey, propDesc)
proventExtensions (cible)
getPrototypeOf (cible)
isExtensible (cible)
setPrototypeOf (cible, proto)
appliquer (cible, objet, arguments)
construct (target, args) intercepte les instances proxy en tant qu'opérations appelées par le constructeur

03 Résumé

De nombreuses nouvelles fonctionnalités d'ES6 peuvent simplifier la nôtre, mais nous devons en comprendre tous les détails, car une mauvaise écriture peut entraîner des résultats d'exploitation différents pour notre programme. Si les lecteurs veulent en savoir plus, je recommande de lire la troisième édition de la norme d'entrée ES6 de Ruan Yifeng, qui gagnera certainement beaucoup.
Insérez la description de l'image ici