1. Intervieweur : Parlez de la différence entre var, let et const
Avant ES6, les variables étaient créées à l'aide de var, et après cela, les variables étaient créées à l'aide de let/const
La différence entre var, let et const peut être étendue autour des cinq points suivants :
1. Promotion variable
La variable déclarée par var a une promotion de variable, c'est-à-dire que la variable peut être appelée avant la déclaration et que la valeur est indéfinie
Il n'y a pas de promotion de variable pour let et const, c'est-à-dire que les variables qu'ils déclarent doivent être utilisées après la déclaration, sinon une erreur sera signalée
2. Zone morte temporaire
Il n'y a pas de zone morte temporaire dans la var. Il y a une zone morte temporaire entre let et const. Ce n'est que lorsque la ligne de code qui déclare la variable apparaît que la variable peut être acquise et utilisée
3. Portée au niveau du bloc
var n'a pas de portée de bloc
let et const ont une portée au niveau du bloc
4. Répétez la déclaration
var permet la déclaration répétée de variables
Let et const ne sont pas autorisés à déclarer des variables à plusieurs reprises dans la même portée
5. Modifier la variable déclarée
var et laisser peut
const déclare une constante en lecture seule. Une fois déclarée, la valeur d'une constante ne peut pas être modifiée
6. Utilisez
Utilisez const autant que possible lorsque vous pouvez utiliser const, et utilisez let dans la plupart des autres cas, évitez d'utiliser var
2. Interviewer : Quelles extensions sont ajoutées aux baies dans ES6 ?
Tout d'abord, l'application de l'opérateur de propagation
ES6 convertit un tableau en une séquence de paramètres séparés par des virgules en développant le symbole de l'élément...
console.log(...[1,2, 3]) // 1 2 3L'opérateur d'étalement peut être combiné avec une affectation de déstructuration pour générer des tableaux
const[first, ...rest] = [1, 2, 3, 4, 5];
first // 1 rest // [2, 3, 4, 5]Deuxièmement, la nouvelle méthode du constructeur
1、Array.from()
Transforme deux types d'objets en tableaux réels : les objets de type tableau et les objets itérables
arrayLike est un objet de type tableau
letarr2 = Array.from(arrayLike); //['a', 'b', 'c']2、Tableau.de()
Utilisé pour convertir un ensemble de valeurs en un tableau
Array.of(3,11, 8) // [3,11,8]3. Nouvelle méthode d'objet d'instance
1. copyWithin() : copiez les membres à l'emplacement spécifié vers d'autres emplacements (les membres d'origine seront écrasés) et renvoyez le tableau actuel
2. find() est utilisé pour trouver le premier membre éligible du tableau
3. includes() : utilisé pour déterminer si le tableau contient une valeur donnée
flat() : Aplatit le tableau et renvoie un nouveau tableau sans affecter les données d'origine
[1,2, [3, 4]].flat() // [1, 2, 3, 4]Quatrièmement, l'éventail des postes vacants
La vacance du tableau signifie qu'il n'y a pas de valeur dans une certaine position du tableau, et ES6 convertit explicitement la vacance en undefined
5. Stabilité de tri
Définissez sort() par défaut sur un algorithme de tri stable
3. Interviewer : Quelles extensions sont ajoutées aux objets dans ES6 ?
1. Abréviation des attributs
Dans ES6, lorsque le nom de la clé d'objet est égal au nom de la valeur correspondante, il peut être abrégé et la méthode peut également être abrégée
Deuxièmement, l'expression du nom d'attribut
ES6 permet aux expressions d'être placées entre parenthèses lors de la définition d'objets avec des littéraux
let lastWord = 'last word';
consta = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"
Trois, super mot-clé
Le mot clé this pointe toujours vers l'objet actuel où se trouve la fonction, et ES6 ajoute un autre mot clé similaire super, qui pointe vers l'objet prototype de l'objet actuel
Quatrièmement, l'application de l'opérateur de propagation
Dans l'affectation de déstructuration, les propriétés traversables qui n'ont pas été lues sont affectées à l'objet spécifié
let{ x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x// 1 y // 2 z // { a: 3, b: 4 }Cinq, traversée d'attributs
for...in : boucle sur les propriétés énumérables propres et héritées de l'objet
Object.keys(obj) : renvoie un tableau, y compris les noms de clé de toutes les propriétés énumérables (à l'exception des propriétés de symbole) de l'objet lui-même (à l'exclusion de celles héritées)
Six, la méthode d'ajout d'un objet
Object.is() : Juge strictement si deux valeurs sont égales
L'une est que +0 n'est pas égal à -0, et l'autre est que NaN est égal à lui-même
Objet.assign()
La méthode Object.assign() est utilisée pour fusionner des objets, cible, source1, source2 sont tous des objets
Objet.assign(cible,source1, source2);
Remarque : La méthode Object.assign() est une copie superficielle et elle sera remplacée lorsqu'elle rencontrera un attribut portant le même nom.
4. Interviewer : Quelles extensions ont été ajoutées à la fonction dans ES6 ?
1. Paramètres
ES6 permet de définir des valeurs par défaut pour les paramètres des fonctions
Les paramètres formels de la fonction sont déclarés par défaut et ne peuvent pas être déclarés à nouveau avec let ou const
Deux, les attributs
L'attribut length de la fonction : length renverra le nombre de paramètres qui ne spécifient pas de valeur par défaut
attribut name : renvoie le nom de la fonction de la fonction
3. Portée
Une fois la valeur par défaut du paramètre définie, le paramètre formera une portée distincte lorsque la fonction sera déclarée et initialisée
4. Mode strict
Tant que les paramètres de la fonction utilisent des valeurs par défaut, des affectations de déstructuration ou des opérateurs d'expansion, la fonction ne peut pas être définie explicitement sur le mode strict, sinon une erreur sera signalée
5. Fonctions fléchées
Utilisez les "flèches" (=>) pour définir les fonctions
L'objet this dans le corps de la fonction est l'objet où il est défini, pas l'objet où il est utilisé
5. Interviewer : Comment comprenez-vous les nouvelles structures de données de Set et Map dans ES6 ?
1 jeu
Set est une structure de données appelée collection et Map est une structure de données appelée dictionnaire
Set est une nouvelle structure de données dans es6, similaire à un tableau, mais les valeurs de ses membres sont uniques et il n'y a pas de valeurs répétées. Nous l'appelons généralement un ensemble
La méthode d'ajout, de suppression, de modification et de vérification de l'instance de Set :
add() : ajoute une valeur et renvoie la structure Set elle-même. Lors de l'ajout d'éléments qui existent déjà dans l'instance, l'ensemble ne traitera pas l'ajout
delete () : supprime une valeur et renvoie une valeur booléenne indiquant si la suppression a réussi
has() : renvoie une valeur booléenne pour déterminer si la valeur est membre de Set
clear() : efface tous les membres, aucune valeur de retour
Les méthodes pour parcourir les instances de Set sont les suivantes :
1. keys() : renvoie le traverseur du nom de la clé
2. values() : renvoie le traverseur de la valeur de la clé
3. entrées() : renvoie un traverseur de paires clé-valeur
4. forEach() : utilisez la fonction de rappel pour parcourir chaque membre
La combinaison de l'opérateur d'extension et de la structure Set réalise la déduplication d'un tableau ou d'une chaîne
letarr = [3, 5, 2, 2, 5, 5] ;
letunique = [...nouvel Ensemble(arr)] ; // [3, 5, 2]
2. Carte
Le type de carte est une liste ordonnée de paires clé-valeur, et les clés et les valeurs peuvent être de n'importe quel type
L'instance de la structure Map a les propriétés et les méthodes d'opération suivantes pour ajouter, supprimer, modifier et vérifier :
Attribut size : L'attribut size renvoie le nombre total de membres de la structure Map.
set () : définissez la valeur de la clé correspondant au nom de la clé clé à la valeur, puis renvoyez la structure complète de la carte
get() : la méthode get lit la valeur de la clé correspondant à la clé, si la clé est introuvable, renvoie undefined
has() : la méthode has renvoie une valeur booléenne indiquant si une clé se trouve dans l'objet Map actuel
delete() : la méthode delete supprime une clé et renvoie true. Renvoie faux si la suppression a échoué
clear() : la méthode clear efface tous les membres et n'a pas de valeur de retour
La structure Map propose nativement trois fonctions de génération de traverse et une méthode de traverse :
keys() : renvoie un parcours de noms de clés
values() : renvoie un parcours de valeurs clés
entrées() : renvoie un traverseur pour tous les membres
forEach() : parcourir tous les membres de la carte
6. Interviewer : Comment comprenez-vous Generator dans ES6 ? scènes à utiliser?
La fonction Générateur est une fonction ordinaire, mais a deux caractéristiques :
1. Il y a un astérisque entre le mot-clé de la fonction et le nom de la fonction
2. L'expression yield est utilisée dans le corps de la fonction pour définir différents états internes
function*helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();La fonction Generator renvoie un objet traverser, qui a la propriété Symbol.iterator, et le renvoie à lui-même
L'état de l'objet traverseur renvoyé par la fonction génératrice peut être suspendu par le mot-clé yield
Ce n'est que par la méthode suivante que l'état interne suivant sera traversé
hw.next() // { value: 'hello', done: false }
hw.next() // { value: 'world', done: false }
hw.next() // { value: 'ending', done: true }
hw.next() // { value: undefined, done: true }Tout simplement parce que la fonction Generator renvoie un objet Iterator, nous pouvons également parcourir for...of
solution asynchrone
L'expression yield peut suspendre l'exécution de la fonction et la méthode suivante est utilisée pour reprendre l'exécution de la fonction, ce qui rend les fonctions Generator très adaptées à la synchronisation de tâches asynchrones.
asynchrone/attendre
La fonction asynchrone renvoie un objet Promise. Lorsque la fonction est exécutée, une fois qu'elle rencontre une attente, elle revient en premier. Une fois l'opération asynchrone déclenchée terminée, l'instruction suivante dans le corps de la fonction est exécutée. Cela peut être compris comme l'abandon du thread et le saut hors du corps de la fonction asynchrone. Async est essentiellement le sucre grammatical de Generator, ce qui équivaut à exécuter automatiquement la fonction Generator
Async est plus concis dans son utilisation, et écrire du code asynchrone sous une forme synchrone est la solution ultime pour la programmation asynchrone
7. Interviewer : Comment comprenez-vous Promise dans ES6 ? scènes à utiliser?
Promise est une solution à la programmation asynchrone, résolvant le problème de l'enfer des rappels
Les avantages de la promesse pour résoudre les opérations asynchrones :
1. Le fonctionnement en chaîne réduit la difficulté de codage 2. La lisibilité du code est considérablement améliorée
L'objet promesse n'a que trois états
1. en attente (en cours) 2. réalisé (succès) 3. rejeté (échec)
L'objet Promise est un constructeur utilisé pour générer des instances Promise
constpromise = new Promise (fonction (résolution, rejet) {} );
Le constructeur Promise accepte une fonction comme paramètre dont les deux paramètres sont résoudre et rejeter
Le rôle de la fonction de résolution est de changer l'état de l'objet Promise de "non réalisé" à "succès"
La fonction de la fonction de rejet est de changer l'état de l'objet Promise de "non réalisé" à "échoué"
L'instance construite par Promise possède les méthodes suivantes :
1、puis() 2、attraper() 3、enfin()
alors est la fonction de rappel lorsque l'état de l'instance change, le premier paramètre est la fonction de rappel de l'état résolu et le deuxième paramètre est la fonction de rappel de l'état rejeté
La méthode then renvoie une nouvelle instance Promise, c'est pourquoi les promesses peuvent être écrites en chaînes
La méthode catch() est un alias pour .then(null, rejet) ou .then(undefined, rejet), qui est utilisé pour spécifier la fonction de rappel lorsqu'une erreur se produit
L'erreur de l'objet Promise a une nature "bouillonnante" et sera passée en arrière jusqu'à ce qu'elle soit détectée
La méthode finally() est utilisée pour spécifier l'opération qui sera effectuée quel que soit l'état final de l'objet Promise
Les méthodes suivantes existent pour le constructeur Promise :
1. La méthode Promise.all() est utilisée pour encapsuler plusieurs instances de Promise dans une nouvelle instance de Promise
2. La méthode Promise.race() encapsule également plusieurs instances Promise dans une nouvelle instance Promise
3. resolve() convertit les objets existants en objets Promise
4. La méthode Promise.reject(reason) renverra également une nouvelle instance de Promise dont le statut est rejeté
3. Scénarios d'utilisation
Écrivez le chargement de l'image sous forme de promesse, une fois le chargement terminé, l'état de la promesse change
8. Interviewer : Comment comprenez-vous Proxy dans ES6 ? scènes à utiliser?
Le proxy est utilisé pour créer un proxy d'un objet, afin de réaliser l'interception et la personnalisation des opérations de base (telles que la recherche d'attribut, l'affectation, l'énumération, l'appel de fonction, etc.)
Proxy est un constructeur utilisé pour générer des instances Proxy
varproxy = nouveau proxy (cible, gestionnaire)
target représente l'objet cible à intercepter (tout type d'objet, y compris les tableaux natifs, les fonctions ou même un autre proxy))
Le gestionnaire utilise généralement des fonctions comme attributs, et les fonctions de chaque attribut définissent le comportement du proxy p lors de l'exécution de diverses opérations.
En ce qui concerne les attributs d'interception du gestionnaire, il y a les suivants : (mémoriser temporairement trois)
1. get(target, propKey, receiver) : intercepter la lecture des propriétés de l'objet
2. set(target, propKey, value, receiver): intercepter le réglage des propriétés de l'objet
3. has(target, propKey) : Intercepter l'opération de propKey dans le proxy et renvoyer une valeur booléenne
9. Interviewer : Comment comprenez-vous le module dans ES6 ? scènes à utiliser?
Module (Module) est une collection d'instructions de programme qui peuvent être nommées individuellement et remplir certaines fonctions indépendamment
Le rôle de la modularisation peut abstraire le code, l'encapsulation du code, la réutilisation du code et la gestion des dépendances
Mécanismes de modularisation des programmes JavaScript, tels que
1. CommonJs 2. AMD (représentant type : require.js) 3. CMD
La fonction du module consiste principalement en deux commandes :
1. export : utilisé pour spécifier l'interface externe du module
2. import : utilisé pour importer des fonctions fournies par d'autres modules
L'exposition est divisée en exposition distincte, exposition unifiée et exposition par défaut
Après avoir utilisé la commande export pour définir l'interface externe du module, d'autres fichiers JS peuvent charger ce module via la commande import
scènes à utiliser
1. Composant Vue 2. Composant React
Y compris lors de la réalisation de certaines applications complexes, nous pouvons également les scinder en différents modules
10. Interviewer : Comment comprenez-vous Decorator dans ES6 ? scènes à utiliser?
Décorateur, c'est-à-dire décorateur, le mode décorateur est une théorie de conception qui étend dynamiquement les fonctions d'objet sans changer la classe d'origine et en utilisant l'héritage
Decorator a deux avantages :
1. La lisibilité du code est devenue plus forte, et le nom du décorateur équivaut à un commentaire
2. Développez la fonction d'origine sans modifier le code d'origine
Les objets de modification Docorator sont les deux types suivants :
1. Décoration de classe
2. Décoration des attributs de classe
Avis
Les décorateurs ne peuvent pas être utilisés pour modifier les fonctions, car les fonctions ont des déclarations de variables
Plusieurs décorateurs communs
@antobind: Le décorateur autobind fait que cet objet dans la méthode lie l'objet d'origine
@readonly : le décorateur en lecture seule rend la propriété ou la méthode non accessible en écriture
@deprecate : le décorateur obsolète ou obsolète affiche un avertissement dans la console indiquant que la méthode sera obsolète