Comment gérer les neuf d'or et les dix d'argent ——Questions d'entretien JavaScript à haute fréquence

Comment gérer les neuf d'or et les dix d'argent ——Questions d'entretien JavaScript à haute fréquence

programmation fonctionnelle

La programmation de fonctions est une idée de conception, tout comme la programmation orientée objet est également une idée de conception. En général, la programmation fonctionnelle consiste à utiliser autant que possible des combinaisons de fonctions pour la programmation.Déclarez d'abord la fonction, puis chaque étape d'appel de la fonction a une valeur de retour.Chaque étape d'opération logique spécifique est abstraite et encapsulée dans la fonction. Combinez ensuite des fonctions pour écrire un programme.

Le problème souligné par ceci

• L'objet this dans le corps de la fonction fléchée est l'objet pointé par la portée dans laquelle la fonction est définie, et non l'objet pointé par la portée dans laquelle elle est utilisée.
• Dans l'environnement global : Dans le mode strict de l'environnement navigateur (différent du nœud), cela pointe vers window par défaut. Exécutez immédiatement les fonctions, les minuteries par défaut et d'autres fonctions, cela pointe également vers la fenêtre.
• Dans les fonctions d'objet : si la fonction est appelée en tant que propriété de l'objet, celle-ci pointe vers l'objet dans la fonction.
• Les propriétés de l'instance créée par le constructeur pointent vers le prototype du constructeur.
• Dans le nœud dom : Surtout dans la syntaxe jsx en réaction, nous devons généralement modifier le point this du dom, sinon la fonction d'exécution spécifiée ne peut pas être obtenue. Vous devez donc généralement utiliser bind pour lier des événements dans la déclaration de fonction.

// html
<button id="btn">myBtn</button>
// js
var name = 'window'
var btn = document.getElementById('btn')
btn.name = 'dom'
var fn =  function (){
    
    console.log(this.name)}
btn.addEventListener('click', f()) // this指向 btn
btn.addEventListener('click', f.bind(obj)) //  this指向 window

La raison pour laquelle les fonctions fléchées ne peuvent pas être utilisées comme constructeurs est que le constructeur utilise le nouveau mot-clé pour générer une instance d'objet. Le processus de génération d'une instance d'objet est également le processus de liaison de celle-ci à l'instance via le constructeur, et la fonction flèche le fait pas avoir son propre ceci. Par conséquent, les flèches ne peuvent pas être utilisées comme constructeurs et les fonctions fléchées ne peuvent pas être appelées via l'opérateur new.

La différence entre les fonctions fléchées et les fonctions ordinaires

1. La syntaxe est plus concise et claire
2. La fonction flèche ne crée pas son propre this
3. Le this hérité du La fonction de flèche pointe vers Ne jamais changer
4.call()/.apply()/.bind()Cela ne peut pas être modifié dans la fonction flèche Pointant vers
5. Les fonctions flèches ne peuvent pas être utilisées comme constructeurs
6. Les fonctions flèches n'ont pas leurs propresarguments
7. Les fonctions fléchées ne sont pas des prototypesprototype
8. Les fonctions fléchées ne peuvent pas être utilisées comme Generator fonctions, et le mot-clé yeild ne peut pas être utilisé. Les fonctions fléchées ne peuvent pas être utilisées en tant que constructeurs ? Le constructeur utilise le mot-clé new pour générer une instance d'objet. Le processus de génération d'une instance d'objet est également le processus de liaison de celle-ci à l'instance via le constructeur. La fonction flèche n'a pas son propre this. Par conséquent, les flèches ne peuvent pas être utilisées comme constructeurs et les fonctions fléchées ne peuvent pas être appelées via l'opérateur new.

type de données js

string
number
null
undefined
object
boolean
bigInt
Symbol

méthode js pour déterminer le type de données

• Pour les objets, les tableaux et null, la valeur renvoyée est object. Par exemple, les valeurs renvoyées par typeof {}, typeof [] et typeofnull sont toutes des objets.
• console.log(Object.prototype.toString.call(a) === '[object String]');// vrai
• une erreur de constructeur se produit lorsque la classe hérite
• instanceof doit être suivi d'un type d'objet

La différence entre plusieurs boucles en JS

Quatre méthodes de parcours de tableau en JavaScript : for VS forEach() VS for/in VS for/offor
Boucle, la différence entre forEach
Simple En d'autres termes, for of est le moyen le plus fiable de parcourir un tableau. Il est plus concis que la boucle for et n'a pas autant de cas particuliers étranges que for in et forEach(). L'inconvénient de for of est qu'il n'est pas pratique pour nous d'obtenir la valeur de l'index et que nous ne pouvons pas appeler forEach().forEach() dans cette chaîne. Utilisez for/of pour obtenir l'index du tableau, vous pouvez écrire comme ceci :

for (const [i, v] of arr.entries()) {
    
       
	console.log(i, v);
}

fonction est ceci
pour, pour/dans et pour/de conservera cela dans la portée externe. ForEach, à moins que des fonctions fléchées ne soient utilisées, le this de sa fonction de rappel changera.
Éléments vides
for/in et forEach ignoreront les éléments vides
Async/Await
forEach() ne « fonctionne pas bien » avec Async/Await et Generators. Vous ne pouvez pas utiliser wait dans la fonction de rappel forEach.
La différence entre les objets ordinaires et Maps
1. Il n'y a pas de limite sur les valeurs clés
2. Les objets ordinaires peuvent être parcouru directement.Afin de parcourir les clés, les valeurs et les entrées, vous devez les convertir en tableaux, par exemple en utilisant Object.keys(), Object.values() et Object.entries(), ou en utilisant for... in. De plus, il existe certaines restrictions sur la boucle for...in : elle ne traverse que les propriétés énumérables et les propriétés non-symboles, et l'ordre de parcours est arbitraire. Mais Map peut être parcouru directement, et comme il s'agit d'une collection de paires clé-valeur, vous pouvez directement utiliser for...of ou forEach pour parcourir. L'avantage de cette différence est qu'elle apporte une plus grande efficacité d'exécution à votre programme.
Présenter les différences entre Set, Map, WeakSet et WeakMap ?
Définir
1. Les membres ne peuvent pas être répétés
2. Uniquement les valeurs de clé, pas de noms de clé, quelque peu similaire aux tableaux.
3. Il peut être parcouru et les méthodes incluent add, delete et has

weakSet
Tous les membres sont des objets. Les membres sont des références faibles et peuvent disparaître à tout moment.
peut être utilisé pour enregistrer les nœuds DOM, ce qui ne provoquera pas facilement de fuites de mémoire et ne pourra pas être parcouru. Les méthodes incluent l'ajout, la suppression et has

Carte

Il s'agit essentiellement d'une collection de paires clé-valeur. Des collections similaires peuvent être parcourues avec de nombreuses méthodes et peuvent être converties en différents formats de données.

carte faible

Accepte directement l'objet comme nom de clé (sauf null), n'accepte pas d'autres types de valeurs​​comme objet pointé par le nom de clé et n'est pas inclus dans le mécanisme de récupération de place
ne peut pas être parcouru, méthode identique à get,set,has,delete

Comment IE fait-il directement référence à la syntaxe ES6 ?

navigateur.js

Comment décrire les promesses

Promise est un objet qui représente l'achèvement final ou l'échec d'une opération asynchrone.
Essentiellement, Promise est un objet renvoyé par une fonction. Nous pouvons lui lier une fonction de rappel, de sorte que nous n'ayons pas besoin de passer la fonction de rappel en paramètre à cette fonction au début.
Contrairement aux rappels entrants « à l'ancienne », lors de l'utilisation de Promise, il existe les conventions suivantes :

• La fonction de rappel ne sera pas appelée tant que le tour en cours de la boucle d'événements n'est pas terminé.
• Même si l'opération asynchrone est terminée (avec succès ou échec), la fonction de rappel ajoutée via then() sera appelée après cela.
• Plusieurs fonctions de rappel peuvent être ajoutées en appelant then() plusieurs fois, et elles seront exécutées dans l'ordre d'insertion.

Ce qu’il y a de bien avec Promises, c’est l’enchaînement.

Travailleur Web

Dans une page HTML, si l'état de la page n'est pas réactif lorsque le script est exécuté, la page ne deviendra réactive qu'une fois l'exécution du script terminée. Les Web Workers sont des js qui s'exécutent en arrière-plan, indépendamment des autres scripts et n'affecteront pas les performances de la page. Et les résultats sont renvoyés au fil de discussion principal via postMessage. De cette façon, le thread principal ne sera pas bloqué lors de l’exécution d’opérations complexes. Comment créer un Web Worker :
1. Vérifiez la prise en charge du navigateur pour les Web Workers
2. Créez un fichier Web Worker (js, fonction de rappel, etc.) a>
3. Créer un objet de travail Web

1. Introduction et suivi dans le fil principal

var worker = new Worker('work.js');
worker.onmessage = function (event) {
    
       
	console.log('Received message ' + event.data);   doSomething();
}

Pousser les événements vers le thread de travail

worker.postMessage('Hello World');
worker.postMessage({
    
    method: 'echo', args: ['Work']});

2.worker thread
Le thread de travail a besoin d'une fonction d'écoute pour écouter les événements de message

self.addEventListener('message', function (e) {
    
       
	self.postMessage('You said: ' + e.data);
}, false);

self représente le sous-thread lui-même, c'est-à-dire l'objet global du sous-thread, ce qui équivaut aux deux méthodes suivantes :

// 写法一
this.addEventListener('message', function (e) {
    
       
	this.postMessage('You said: ' + e.data);
}, false);
// 写法二
addEventListener('message', function (e) {
    
       
	postMessage('You said: ' + e.data);
}, false);

Vous pouvez également utiliser self.onmessage pour spécifier

self.addEventListener('message', function (e) {
    
       
	var data = e.data;
	//主线程发送过来的数据   
	switch (data.cmd) {
    
       
		case 'start':       
		self.postMessage('WORKER STARTED: ' + data.msg);       
		break;   
		case 'stop':       
		self.postMessage('WORKER STOPPED: ' + data.msg);       
		self.close();
		// Terminates the worker,用于在worker内部关闭自身       
		break;   
		default:       
		self.postMessage('Unknown command: ' + data.msg);   
	};
}, false);

asynchrone et attendre

Implémentation d'un simple async/await
Comme ci-dessus, nous maîtrisons l'utilisation de la fonction Generator. Le sucre de syntaxe Async/wait utilise la fonction Générateur + l'exécuteur automatique pour fonctionner. On peut se référer aux exemples suivants

// 定义了一个promise，用来模拟异步请求，作用是传入参数++
function getNum(num){
    
     
	return new Promise((resolve, reject) => {
    
       
	setTimeout(() => {
    
    
		resolve(num+1)
   	}, 1000)
  })
}

//自动执行器，如果一个Generator函数没有执行完，则递归调用
function asyncFun(func){
    
     
	var gen = func(); 
	function next(data){
    
       
		var result = gen.next(data);     
		if (result.done) return result.value;     
		result.value.then(function(data){
    
           
			next(data);
		});
	} next();
}

// 所需要执行的Generator函数，内部的数据在执行完成一步的promise之后，再调用下一步
var func = function* (){
    
    
	var f1 = yield getNum(1);
	var f2 = yield getNum(f1);
	console.log(f2);
};
asyncFun(func);

Différences de performances entre async/wait et promise

Lorsque la fonction a() est appelée, ces choses se produisent de manière synchrone. La fonction b() génère un objet de promesse et appelle la méthode then. La promesse sera résolue à un moment donné dans le futur, c'est-à-dire que la fonction de rappel dans then est ajouté à la chaîne de rappel. De cette façon, la fonction a() a été exécutée. Pendant ce processus, la fonction a() ne fera pas de pause. Par conséquent, lorsque la fonction asynchrone est résolue, la portée de a() n'existe plus. Alors, comment générer un fichier contenant a() ) ? Qu’en est-il des informations sur la pile ? Pour résoudre ce problème, le moteur JavaScript effectue un travail supplémentaire : il enregistre et sauvegarde les informations sur la pile en temps réel. Pour le moteur V8, ces informations de pile sont transmises avec Promise dans la chaîne Promise, afin que la fonction c() puisse également obtenir des informations de pile en cas de besoin. Cependant, cela entraîne sans aucun doute une surcharge supplémentaire et réduira les performances ; la sauvegarde des informations sur la pile occupera de la mémoire supplémentaire.

Lors de l'utilisation de wait, il n'est pas nécessaire de stocker les informations sur la pile, car il suffit de stocker le pointeur de b() vers a(). Lorsque la fonction b() est exécutée, la fonction a() est suspendue, donc la portée de la fonction a() est toujours accessible en mémoire. Si b() génère une erreur, la pile est rapidement construite via le pointeur. Si la fonction c() génère une erreur, les informations de pile peuvent également être générées comme une fonction synchrone, car c() est exécuté dans a(). Qu'il s'agisse de b() ou de c(), nous n'avons pas besoin de stocker les informations sur la pile, car les informations sur la pile peuvent être générées immédiatement en cas de besoin. Le stockage des pointeurs économise évidemment plus de mémoire que le stockage des piles.

Comment Promise implémente la sérialisation

function runPromiseByQueue(myPromises) {
    
     
	myPromises.reduce(
		(previousPromise, nextPromise) => previousPromise.then(
			() => nextPromise()
		),
		Promise.resolve()
	);
}

// 栈如何实现队列
var CQueue = function(){
    
    
	this.inStack = []
	this.outStack = []
}
CQueue.prototype.appendTail = function(value){
    
             
	// 加入元素 可以直接向instack里面push          
	this.inStack.push(value)
}
CQueue.prototype.deleteHead = function(){
    
    
	const {
    
    inStack,outStack} = this;
	if(outStack.length){
    
    
		return outStack.pop()
		//两个栈 一个instack 一个outstack 我想要删除队列头部的元素 用一个栈是不行的
		//要把instack里的元素倒进outstack里，然后取第一个元素
		while(inStack.length){
    
    
            outStack.push(inStack.pop());
		}
		return outStack.pop() || -1
	}
}
var obj = new CQueue()
	obj.appendTail(1)       
	obj.appendTail(2)       
	obj.appendTail(3)      
	console.log(obj) // [1,2]       
	obj.deleteHead()       
	console.log(obj) // [2]

Que faire si une requête revient dans 50ms, bloquant le rendu de l'UI (sharding, multi-processus ?)

setTimeout

Étant donné que les tâches longues prennent beaucoup de temps à s'exécuter, elles bloqueront le thread principal et les utilisateurs peuvent ressentir un décalage de page. Nous utilisons donc souvent setTimeout pour placer les tâches longues dans la file d'attente des tâches et attendons que l'exécution du code de synchronisation soit terminée avant de traiter le tâche longue :

const t = setTimeout(() =>{
    
    
	clearTimeout(t);
	// 长任务
},0)function ts(gen) {
    
    
	if (typeof gen === 'function') gen = gen();
	if (!gen || typeof gen.next !== 'function') return;
	return function next() {
    
    
		const start = performance.now();
		const res = null;
		do {
    
    
			res = gen.next();
		} while (!res.done && performance.now() - start < 25);
		if (res.done) return;
		setTimeout(next);
	};
}

L'idée centrale du code ci-dessus est la suivante : le mot-clé rendement peut être utilisé pour suspendre l'exécution d'une tâche, abandonnant ainsi le contrôle du thread principal ; le minuteur peut être utilisé pour remettre les "tâches inachevées" dans la file d'attente des tâches pour continuer l'exécution. . Dans le code ci-dessus, un do while est effectué : si le temps d'exécution actuel de la tâche est inférieur à 25 ms, plusieurs tâches seront exécutées ensemble, sinon elles seront exécutées comme une seule tâche jusqu'à ce que res.done = true. L'idée centrale du code : le mot-clé rendement peut être utilisé pour suspendre l'exécution d'une tâche et abandonner le contrôle du thread principal ; les tâches inachevées peuvent être replacées dans la file d'attente des tâches pour exécution via setTimeout.

WebWorker

<input type="text" id="ipt" value="" />
<div id="result"></div>
<script>
	const ipt = document.querySelector('#ipt');
	const worker = new Worker('worker.js');
	ipt.onchange = function() {
    
    
		// 通过postMessage发送消息
		worker.postMessage({
    
     number: this.value });
	};
	// 通过onmessage接收消息
	worker.onmessage = function(e) {
    
    
		document.querySelector('#result').innerHTML = e.data;
	};
</script>
// self 类似主线程中的window
self.onmessage = function(e) {
    
    
	self.postMessage(e.data.number * 2);
};

Comment trouver la longueur du type défini

nouvel ensemble ([2,2,3]).size

Présentation des types d'outils TypeScript

• Partiel, Obligatoire, Lecture seule
• Record<K étend keyof any, T> est utilisé pour convertir les valeurs de tous les attributs de K en type T
• La fonction de Pick<T, K extends keyof T> est de sélectionner les sous-propriétés d'un certain type et de les transformer en sous-types contenant certaines des propriétés de ce type.
• La fonction Exclure<T, U> est de supprimer un type qui appartient à un autre type.
• La fonction de Extract<T, U> est d’extraire U de T .
• La fonction de Omit<T, K extends keyof any> est d'utiliser tous les attributs de type T à l'exception du type K pour construire un nouveau type.

Comment Websocket établit-il une connexion ?

Processus d'établissement de la connexion Websocket :

1. Le client envoie une requête GET, mise à niveau
2. Le serveur passe le protocole au client
3. La communication webSocket est effectuée.

Le sens de la modularité frontale

Dans un projet, quelle que soit sa taille, si un fichier JS comporte des centaines ou des milliers de lignes et qu'il existe des dépendances entre plusieurs fichiers JS, pensez à quel point cela serait pénible. Dans le même temps, le principe de « cohésion élevée et faible couplage » a toujours été respecté.

1. 提高开发效率，有利于多人协同开发
2. 解决文件依赖问题，无需考虑引用包顺序
3. 避免全局变量污染
4. 方便代码的复用和后期的维护

Module CommonJS et ES6

• Étant donné que la syntaxe require de CommonJS est synchrone, la spécification du module CommonJS ne convient qu'à une utilisation côté serveur, tandis que le module ES6 peut être utilisé à la fois côté navigateur et côté serveur, mais côté serveur, vous devez toujours suivre Certaines règles spéciales peuvent être utilisées ;
• Le module CommonJS génère une copie de la valeur, tandis que le module ES6 génère une référence à la valeur ;
• Les modules CommonJS sont chargés au moment de l'exécution, tandis que les modules ES6 sont des interfaces de sortie au moment de la compilation, permettant d'analyser statiquement les modules JS ;
• Étant donné que les mécanismes de chargement des deux modules sont différents, ils se comporteront différemment en cas de chargement cyclique. Lorsque CommonJS rencontre une dépendance circulaire, il n'affichera que la partie qui a été exécutée. Les sorties ou modifications ultérieures n'affecteront pas les variables qui ont été sorties. Au contraire, les modules ES6 utilisent l'import pour charger une variable. La variable ne sera pas mise en cache et la valeur finale pourra être obtenue lorsque la valeur est effectivement obtenue ;
• Concernant le problème de ce pointage au niveau supérieur du module, au niveau supérieur de CommonJS, cela pointe vers le module actuel ; dans les modules ES6, cela pointe vers undefined ;
• Concernant le problème de deux modules se référençant l'un à l'autre, les modules ES6 prennent en charge le chargement des modules CommonJS. Mais à son tour, CommonJS ne peut pas nécessiter de modules ES6. Dans NodeJS, les deux solutions de modules sont traitées séparément.

Demande de fermeture

Fermeture : la fermeture fait référence à une fonction qui a accès à une variable dans la portée d'une autre fonction ;
Scénarios d'application :

• Passer les paramètres dans setTimeout
• rappeler
• Encapsuler les variables privées de la fonction privée
• nombre de boucles

let et const se comportent de la même manière que var dans de nombreuses situations, mais ce n'est pas le cas dans les boucles. Dans les boucles for-in et for-of, let et const peuvent créer une nouvelle liaison à chaque itération, ce qui signifie que les fonctions créées dans le corps de la boucle peuvent utiliser la valeur de la variable de boucle liée à l'itération en cours (tandis que Plutôt que d'utiliser var, le la valeur de la variable à la fin de la boucle est utilisée uniformément). Cela est également vrai lors de l'utilisation de déclarations let dans des boucles for, mais l'utilisation de déclarations const dans des boucles for provoquera des erreurs.

Nouvelles fonctionnalités ES6

• gentil
• Modulaire
• fonction flèche
• Valeur par défaut du paramètre de fonction
• chaîne de modèle
• Mission de déstructuration
• opérateur de propagation
• Abréviation de la propriété de l'objet
• Promesse
• Soit et Const

Procuration

Les objets proxy sont utilisés pour définir des comportements personnalisés pour les opérations de base (telles que la recherche d'attributs, l'affectation, l'énumération, l'appel de fonction, etc.), ce qui équivaut à apporter des modifications au niveau du langage. Il s'agit donc d'une sorte de "méta programmation" (méta programmation) programmation), c'est-à-dire programmer un langage de programmation.
Le proxy est comme un proxy entre les objets cibles. Toute opération sur la cible doit passer par le proxy. L'agent peut filtrer et réécrire les opérations externes.
Proxy est un constructeur, qui a deux paramètres target et handler.
target est l'objet cible enveloppé dans Proxy (peut être n'importe quel type d'objet, y compris des tableaux natifs, des fonctions ou même un autre proxy).
Un gestionnaire est un objet dont les propriétés sont des fonctions qui définissent le comportement de l'agent lors de l'exécution d'une opération.

var obj = new Proxy({
    
    }, {
    
    
	get: function (target, key, receiver) {
    
    
		console.log(`getting ${
      
      key}!`);
		return Reflect.get(target, key, receiver);
	}, set: function (target, key, value, receiver) {
    
    
		console.log(`setting ${
      
      key}!`);
		return Reflect.set(target, key, value, receiver);
	}
});
obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

Le proxy n'a qu'une seule méthode statique révocable (cible, gestionnaire) qui peut être utilisée pour créer un objet proxy révocable. Les deux paramètres sont les mêmes que ceux du constructeur. Il renvoie un objet contenant l'objet proxy généré lui-même et la méthode d'annulation de l'objet proxy.

Refléter

Reflect est un objet intégré qui fournit des méthodes pour intercepter les opérations JavaScript. Reflect n'est pas un objet fonction, il n'est donc pas constructible.

Itérateurs et générateurs

Itérateur : les structures de données originales de JavaScript représentant des « ensembles » sont principalement des tableaux (Array) et des objets (Object). ES6 ajoute Map et Set. Cela nécessite un mécanisme d'interface unifié pour gérer toutes les différentes structures de données. L'itérateur est un tel mécanisme. Il s'agit d'une interface qui fournit un mécanisme d'accès unifié à différentes structures de données. Tant qu'une structure de données déploie l'interface Iterator, elle peut terminer l'opération de traversée (c'est-à-dire traiter tous les membres de la structure de données en séquence).

Le rôle de l'itérateur :

为各种数据结构，提供一个统一的、简便的访问接口；
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

Comment fonctionnent les itérateurs

创建一个指针对象，指向数据结构的起始位置。
第一次调用next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
当遍历结束的时候返回的value值是undefined，done值为true

Écrivez-en un à la main

function myIterator(arr) {
    
    
	let nextIndex = 0
	return {
    
    
		next: function() {
    
    
			return nextIndex < arr.length
			? {
    
     value: arr[nextIndex++], done: false }
			: {
    
     value: undefined, value: true }
		}
	}
}
let arr = [1, 4, 'ads']
// 准备一个数据
let iteratorObj = myIterator(arr)
console.log(iteratorObj.next()) 
// 所有的迭代器对象都拥有next()方法，会返回一个结果对象
console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())

① La boucle for of ne prend pas en charge la traversée de la propriété Symbol.iterator d'un objet objet commun, pointant vers la méthode de traversée par défaut de l'objet. Lorsque vous utilisez for of pour parcourir une certaine structure de données, recherchez d'abord Symbol.iterator et parcourez-le s'il est trouvé. S'il n'est pas trouvé, il ne peut pas être parcouru. Uncaught TypeError : XXX n'est pas itérable
② Lors de l'utilisation de l'opérateur spread (...) ou de l'affectation de déstructuration aux tableaux et aux structures Set, la méthode Symbol.iterator sera appelée par défaut

Constructeur

1. Concept

• La fonction Générateur est une solution de programmation asynchrone fournie par ES6, et son comportement syntaxique est complètement différent des fonctions traditionnelles.
• Syntaxiquement, on peut d'abord comprendre que la fonction Générateur est une machine à états qui encapsule plusieurs états internes.
• En plus de la machine à états, la fonction Générateur est également une fonction de génération d'objets traverseurs.
• La fonction peut être suspendue (évaluation paresseuse), le rendement peut être suspendu et la méthode suivante peut être démarrée. Ce qui est renvoyé à chaque fois est le résultat de l'expression après le rendement

2.Caractéristiques

• Il y a un astérisque entre le mot-clé de fonction et le nom de la fonction ;
• Les expressions de rendement sont utilisées dans le corps de la fonction pour définir différents états internes.

3. rendement

L'expression elle-même n'a pas de valeur de retour ou renvoie toujours undéfini. La méthode suivante peut prendre un paramètre, qui sera traité comme la valeur de retour de l'expression de rendement précédente.

function* generatorExample() {
    
    
	console.log('开始执行')
	let result = yield 'hello'
	console.log(result)
	yield 'generator'
}
let MG = generatorExample()
MG.next()
MG.next(11)
// 开始执行
// 11
// {value: "generator", done: false}

4.Application asynchrone du générateur

function* sendXml() {
    
    
	// url为next传参进来的数据
	let url = yield getNews('http://localhost:3000/news?newsId=2');
	//获取新闻内容yield getNews(url);
	//获取对应的新闻评论内容，只有先获取新闻的数据拼凑成url,才能向后台请求
}
function getNews(url) {
    
    
	$.get(url, function (data) {
    
    
		console.log(data);
		let commentsUrl = data.commentsUrl;
		let url = 'http://localhost:3000' + commentsUrl;
		// 当获取新闻内容成功，发送请求获取对应的评论内容
		// 调用next传参会作为上次暂停是yield的返回值
		sx.next(url);
	})
}
let sx = sendXml();
// 发送请求获取新闻内容sx.next();

Relation avec l'interface Iterator
La méthode Symbol.iterator de tout objet est égale à la fonction de génération traverseur de l'objet. L'appel de cette fonction renverra un objet traverseur de l'objet. Puisque la fonction Generator est la fonction de génération d'itérateur, le Generator peut être affecté à la propriété Symbol.iterator de l'objet, afin que l'objet ait l'interface Iterator.

var myIterable ={
    
    };
myIterable[Symbol.iterator]=function*(){
    
    
	yield 1;
	yield 2;
	yield 3;
};
[...myIterable]
// [1, 2, 3]

Dans le code ci-dessus, la fonction Generator est affectée à la propriété Symbol.iterator, de sorte que l'objet myIterable ait une interface Iterator et puisse être parcouru par l'opérateur.... Une fois la fonction Générateur exécutée, un objet traverseur est renvoyé. L'objet lui-même possède également la propriété Symbol.iterator, qui se renvoie après exécution.

function* gen(){
    
    
// some code
}
var g = gen();
gSymbol.iterator === g
// true

Dans le code ci-dessus, gen est une fonction Générateur, et son appel générera un objet traverseur g. Sa propriété Symbol.iterator est également une fonction génératrice d'objet itérateur qui se retourne après exécution.

Nouvelles méthodes ES6

Object.assign(); Copier un objet
Object.keys(); Récupérer toutes les propriétés d'un objet;
Object.values(); Récupérer toutes les valeurs de propriétés énumérables d'un objet; La méthode trouve le premier membre qui remplit les conditions, et s'il n'y a pas de membre qualifié, elle renvoie undefined pour parcourir, la seule la différence est sur le tableau composé de la valeur de retour. Cette méthode renvoie un nouveau tableau sans modifier le tableau d'origine), puis exécute la méthode ne peut étendre qu'un seul calque du tableau. La méthode exécute une fonction sur chaque membre du tableau d'origine (équivalent à l'exécution de qui est utilisée pour "aplatir" le tableau imbriqué en un tableau unidimensionnel. Cette méthode renvoie un nouveau tableau et n'a aucun effet sur les données d'origine. Le paramètre transmis représente le nombre de calques à aplatir. La valeur par défaut est un calque. renvoie une valeur booléenne est un parcours de valeurs-clés paires est un parcours de valeurs clés, est un parcours de noms de clés, - utilisés pour parcourir le tableau, vous pouvez utiliser la boucle et , La méthode remplit un tableau avec une valeur donnée. La méthode fill peut également accepter les deuxième et troisième paramètres, qui sont utilisés pour spécifier la position de départ et la position de fin du remplissage. L'utilisation de la méthode est très similaire à la méthode find, renvoyant la position du premier membre du tableau qui répond aux critères, ou -1 si tous les membres ne répondent pas aux critères. est utilisée pour convertir un ensemble de valeurs, Convertir en tableau. Compensez les lacunes du constructeur de tableaux Array(). Parce que le nombre de paramètres est différent, le comportement de Array() sera différent La méthode est utilisée pour convertir deux types d'objets en tableaux réels : les objets de type tableau et les objets itérables (y compris les nouvelles structures de données Set et Map d'ES6); L'opération inverse des entrées;
Object.entries(); Obtenir un tableau de paires clé-valeur d'un objet;
Object.fromEntries()
Array.from
Array.of
find()
findIndex
fill()
entries()keys()values()for...ofkeys()values()entries()
includes()
flat()
flatMap()Array.prototype.map()flat()

// flat()
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
//flatMap()
[2, 3, 4].flatMap((x) => [x, x * 2])
//map执行完后是[[2, 4], [3, 6], [4, 8]]

Nouvelles fonctionnalités ES7

• La méthode arrayincludes() est utilisée pour déterminer si un tableau contient une valeur spécifiée. Selon la situation, si c'est le cas, elle renvoie vrai, sinon elle renvoie faux.
• opérateur exponentiel a ** b, qui est le même que Math.pow(a, b).

Nouvelles fonctionnalités ES8

• async/await
• Object.values()
• Object.entries()
• String padding : padStart() et padEnd(), la chaîne de remplissage atteint la longueur actuelle
• Les virgules sont autorisées à la fin des listes de paramètres de fonction
• Object.getOwnPropertyDescriptors()
• ShareArrayBufferObjets et Atomics pour lire et écrire dans des emplacements de mémoire partagée

Nouvelles fonctionnalités ES9

• Itération asynchrone
• Promise.finally()
• Rest/SpreadLes attributs
• Groupes de capture nommés par expressions régulières
• Assertion inverse d'expression régulière (lookbehind)
• Modèle dotAll d’expression régulière
• Échappement Unicode d'expression régulière
• Chaîne de modèle sans séquence d'échappement

Nouvelles fonctionnalités ES10

• Les symboles de délimiteur de ligne (U+2028) et de délimiteur de paragraphe (U+2029) sont désormais autorisés dans les littéraux de chaîne, ce qui rend la correspondance JSON plus conviviale.JSON.stringify
• Ajout de la méthode flat() et de la méthode flatMap() du tableau
• Ajout de la méthode trimStart() et de la méthode trimEnd() de String
• Object.fromEntries()
• Symbol.prototype.description
• String.prototype.matchAll
• Function.prototype.toString()Renvoie désormais les caractères exacts, y compris les espaces et les commentaires
• Simplificationtry {} catch {},Révision catchConclusion
• Nouveaux types de données de baseBigInt
• globalThis
• import()
• Legacy RegEx
• Méthodes et accesseurs d'instance privée

chaîne prototype

Utilisez des prototypes pour permettre à un type de référence d’hériter des propriétés et des méthodes d’un autre type de référence. Chaque constructeur possède un objet prototype. L'objet prototype contient un pointeur vers le constructeur et l'instance contient un pointeur interne vers l'objet prototype. Ainsi, si nous rendons l'objet prototype égal à une instance d'un autre type, l'objet prototype contiendra à ce moment un pointeur vers un autre prototype, et l'autre prototype correspondant contiendra également un pointeur vers un autre constructeur. instance d'un autre type. Ensuite, la relation ci-dessus est toujours valable et progresse couche par couche, formant une chaîne d'instances et de prototypes. C'est le concept de base de la chaîne de prototypes.

MVC et MVVM

Avantages :
1. Séparez toute la logique métier en Controller, avec un haut degré de modularité. Lorsque la logique métier change, il n'est pas nécessaire de modifier la vue et le modèle, il suffit de remplacer le contrôleur par un autre contrôleur (contrôleur échangeable).
2. Le mode observateur peut mettre à jour plusieurs vues en même temps.

Inconvénients :
1. ControllerLes tests sont difficiles. Parce que l'opération de synchronisation des vues est effectuée par View lui-même et View ne peut s'exécuter que dans un environnement avec interface utilisateur. Lors de tests unitaires Controller sans environnement d'interface utilisateur, l'exactitude de la Controller logique métier ne peut pas être vérifiée : Controller Mettre à jour quand des différents programmes sont différents comme un élément réutilisable pour une autre application, les composants sont difficiles . Parce que les spécifique. Si vous devez extraire ce dépend fortement d'un ne peut pas être composant. 2. ne peut pas être affirmée. Model, l'opération de mise à jour de View
ViewViewModelViewDomain Model

Comment juger un tableau

• Type ofNon
• instanceofImpossible de faire la distinction entre les tableaux et les objets
• Le tableau instancié a unconstructor attribut, qui pointe vers la méthode qui a généré le tableau.
• console.log(a.constructor == Array); // vrai
• constructorUne fois l'attribut modifié, vous ne pouvez pas utiliser cette méthode pour déterminer si le tableau est un tableau. À moins que vous puissiez garantir que l'attribut constructor ne sera pas écrasé, utilisez cette méthode pour déterminer que les tableaux ne sont pas non plus fiables.
• Une autre méthode efficace consiste à utiliser la méthode Object.prototype.toString pour déterminer. Chaque objet qui hérite de Object a la méthode toString .
• Array.isArray(a); // vrai

Quel est le principe de mise en œuvre de la différence entre var, let et const ?

• var et let peuvent déclarer des variables, mais const ne peut pas déclarer de variables, uniquement des constantes en lecture seule.

• varLa variable déclarée par n'a pas de portée au niveau du bloc et est globalement valide. Les déclarations de let et const ne sont valables que dans le bloc de code dans lequel elles se trouvent.

• let/constLa même variable/constante ne peut pas être déclarée dans la même portée.varPeut être déclarée plusieurs fois.

• var a une promotion de variable, donc var peut être utilisé avant la déclaration, mais let const doit être déclaré avant d'être utilisé.

• let/constIl existe une zone morte temporaire.

• constL'affectation doit être initialisée lors de la déclaration.Une fois déclarée, la valeur de l'affectation déclarée n'est pas autorisée à changer, encore moins les déclarations répétées.

principe

Les fonctions en JavaScript s'exécutent dans la portée dans laquelle elles sont définies, et non dans la portée dans laquelle elles sont exécutées.

• var pré-allouera directement de l'espace mémoire dans la mémoire de la pile, puis stockera les variables correspondantes lorsque l'instruction réelle est exécutée. Si un type de référence est passé, un espace mémoire sera ouvert dans la mémoire tas pour stocker le contenu réel, et la mémoire de pile stockera un pointeur vers la mémoire tas.
• let ne pré-allouera pas d'espace mémoire dans la mémoire de la pile, et lors de l'allocation des variables dans la mémoire de la pile, une vérification sera effectuée. Si le même nom de variable existe déjà, une erreur sera signalée.
• const ne pré-allouera pas d'espace mémoire, et la même vérification sera effectuée lors de l'allocation de variables dans la mémoire de la pile. Cependant, les variables stockées dans const ne peuvent pas être modifiées. Pour les types de base, vous ne pouvez pas modifier la valeur définie. Pour les types référence, vous ne pouvez pas modifier le pointeur alloué dans la mémoire de la pile, mais vous pouvez modifier les propriétés de l'objet pointé par le pointeur. .

Résumer

Basée sur le principe de portée au niveau bloc, la pile est une structure LIFO. Premier entré dernier sorti. Lors de l'exécution de for, poussez la pile et poussez la boucle for et la variable correspondante i dans la mémoire de la pile. À la fin de l'exécution, la mémoire de la pile est vidé. La variable i à l’intérieur n’existe plus. La promotion des variables consiste en fait à injecter les variables déclarées par var dans l'environnement des variables pendant la phase de compilation. L'implémentation de la portée au niveau du bloc consiste en fait à sauvegarder les variables déclarées en utilisant let et const dans le bloc à travers différents blocs, et à gérer les différents variables via le mécanisme de pile. Le contexte d'exécution joue un rôle important dans la compréhension de cela et des fermetures

Terminal mobile

fonction de balise de fenêtre

Vous verrez souvent une balise méta dans la section d'en-tête de chaque page HTML. Le contenu le plus couramment écrit dans cette balise est le suivant :

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Que signifie le contenu de cette balise ?

name est viewport, ce qui signifie qu'il est destiné aux appareils mobiles.
le contenu définit les attributs de la fenêtre.
width signifie que la largeur affichée sur l'appareil mobile est la largeur de l'appareil (device-width)
height signifie que la largeur affichée sur l'appareil mobile est celle de l'appareil largeur.
user-scalable indique la capacité de mise à l'échelle de l'utilisateur, et no indique que cela n'est pas autorisé.
initial-scale représente le rapport de mise à l'échelle de l'appareil par rapport à la fenêtre d'affichage.
Le maximum et le minimum représentent respectivement les valeurs maximale et minimale de la mise à l'échelle. Il convient de noter que le maximum doit être supérieur au minimum.
La balise méta ci-dessus indique au navigateur de ne pas zoomer lorsqu'elle est affichée sur le terminal mobile.

Appels mutuels entre JavaScript et Native

Formulaire API d'injection
Android :

// js 在全局window上声明一个函数供安卓调用 
window.callAndroid = function() {
    
    
	console.log('来自中h5的方法，供native调用')
	return "来自h5的返回值" 
}

Résumer:

1. 4.4 Avant, Native appelait la méthode js via loadUrl, qui ne pouvait exécuter qu'une certaine méthode js, mais ne pouvait pas obtenir la valeur de retour de la méthode. 2. 4.4 Par la suite, la méthode js était appelée de manière asynchrone via évaluerJavaScript, et la valeur de retour pouvait être obtenu dans onReceive.
2. Ne convient pas au transfert de grandes quantités de données
3. 4. La fonction mWebView.loadUrl("javascript: method name") doit être exécutée dans le thread de l'interface utilisateur, car mWebView est un contrôle de l'interface utilisateur et bloquera le thread de l'interface utilisateur.

js appelle le code natif

window.foo('test'); // 返回 'foo:test'    

Remarque : Avant iOS7, js ne pouvait pas appeler de méthodes natives. Après iOS7, vous pouvez introduire la bibliothèque JavaScriptCore fournie par un tiers
Résumé :

1. Cette méthode n'apparaissait que dans iOS 7. Avant cela, js ne pouvait pas appeler directement Native, mais ne pouvait être appelé que via JSBridge.
2. JS peut appeler l'API exposée et obtenir la valeur de retour correspondante
3. Le natif iOS lui-même ne peut pas être appelé par JS, mais en introduisant le "JavaScriptCore" tiers officiellement fourni, une API peut être développée pour les appels JS.

Le développement iOS est livré avec deux contrôles WebView

UIWebview (versions antérieures à iOS8, il est recommandé d'être obsolète)

• Ancienne version
• JavaScriptCore peut être utilisé pour injecter des objets personnalisés globaux
• Prend beaucoup de mémoire et se charge lentement

WKWebview

• Version plus récente
• Vitesse de chargement rapide et faible utilisation de la mémoire
• js utilise l'objet global window.webkit.messageHandlers.{NAME}.postMessage pour appeler des méthodes natives

Une autre méthode de communication entre natif et h5 : la méthode la plus populaire, le protocole JSBridge-bridge

JSBridge est une méthode de communication très populaire entre JS et Native dans le développement hybride. En termes simples, JSBridge définit la communication entre Native et JS. Native appelle JS uniquement via un objet pont fixe, et JS appelle uniquement via le pont fixe. l'objet appelle natif. Le principe de base est :
h5 --> Déclenche une URL d'une manière ou d'une autre --> native capture l'URL et effectue une analyse --> traitement natif --> le natif appelle l'objet JSBridge de h5 pour transmettre le rappel

Pourquoi utiliser JSBridge

Nous avons vu plus haut que le natif a déjà communiqué avec js, pourquoi devons-nous utiliser la méthode jsBridge du schéma d'url ?
1. Android4.2, la méthode addJavaScriptInterface présente des failles de sécurité < /span> 3. La méthode d'interaction du schéma d'URL est une solution mature existante et peut être compatible avec différentes versions
2. Sous iOS7 et versions antérieures, js ne peut pas appeler natif

• jsBridge est un concept interactif et un protocole, et le schéma d'URL ci-dessus est l'une de ses méthodes d'implémentation, donc en d'autres termes, même si l'implémentation ultérieure devient
  addJavaScriptInterface, JavaScriptCore , interagit également avec JSBridge

introduction du schéma d'URL

• le schéma d'url est un lien similaire à l'url, conçu pour permettre aux applications de s'appeler directement : en particulier : vous pouvez utiliser l'OpenURI du système
  pour ouvrir un lien similaire à l'url. (Les paramètres peuvent être épelés), puis le système rendra un jugement. S'il s'agit du schéma d'URL du système
  , ouvrez l'application système. Sinon, vérifiez s'il existe une application enregistrée dans le et ouvrez l'application correspondante. Veuillez noter que oui, ce système ne prendra effet qu'après l'enregistrement de l'application native. Par exemple, le système de WeChat est
  weixin://

• Le schéma L'URL dans JSBridge dans cet article
  est un emplacement spécifique calqué sur le formulaire ci-dessus. L'application n'enregistrera pas le schéma correspondant, mais la page d'accueil déclenchera le schéma d'une manière ou d'une autre. (Par exemple, utilisez
  iframe.src), puis le natif utilise une certaine méthode pour capturer l'événement déclencheur d'URL correspondant, puis obtient l'URL de déclenchement actuelle, et selon le protocole établi (schme://method...), analyser quelle méthode est actuellement déclenchée, puis l'implémenter selon la définition

Implémenter un JSBridge

1. Concevoir une interaction native et js全局桥对象
2. Comment appeler natif en js
3. Comment le natif sait-il que l'API s'appelle
4. Analyser le format des paramètres d'URL et des rappels
5. Comment appeler js en natif
6. Enregistrement et format des méthodes API en h5

• Concevoir un objet global qui natif interagit avec js ==> Il est stipulé que la communication entre js et natif doit être implémentée via un objet global h5 JSBridge

// Nom : JSBridge est une propriété accrochée à la fenêtre
var JSBridge = window.JSBridge || (window.JSBridge = {});

Cet objet a les méthodes suivantes :
registerHandler(String, Function) enregistre la méthode js locale. Après l'enregistrement, le natif peut être appelé via JSBridge. Après l'enregistrement, la méthode sera être enregistré dans la variable locale messageHandles.
sendHandler(String, JSON, Function) h5 appelle l'API ouverte native. Après l'appel, elle est en fait déclenchée localement via le schéma d'URL. Lorsqu'elle est appelée, la L'identifiant de rappel sera stocké dans la variable locale ResponseCallbacks_handleMessageFromNative h5 Notification de rappel après l'appel en natif
Les paramètres sont {reposeId : identifiant de rappel, ResponseData : données de rappel.

var JSBridge = {
    
       
	// 注册本地方法供原生调用   
	registerHandler: function(method, cb) {
    
         
		// 会将cb 放入 messageHandlers里面，待原生调用   
	},   
	messageHandles: {
    
    }, 
	// h5注册方法集合，供native通知后回调调用      
	// h5 主动调用native，需生成唯一的callbackId   
	sendHandler: function(mathod, data, succCb, errCb) {
    
         
		// 内部通过iframe src url scheme 向native发送请求     
		// 并将对应的回调注册进 responseCallbacks     
		// native 处理结束后将结果信息通知到h5 通过 _handleMessageFromNative     
		// h5 拿到返回信息处理 responseCallbacks 里对应的回调   
	},   
	responseCallbacks: {
    
    }, 
	// 回调集合      
	// native 通知 h5  
	_handleMessageFromNative: function(message) {
    
          
		// 解析 message，然后根据通知类型执行 messageHandles 或 responseCallbacks里的回调   
	} 
}  

Remarque :
1. Native appelle _handleMessageFromNative pour notifier h5, et le paramètre est une chaîne json
2. Lorsque native appelle activement la méthode h5 {methodName : nom de l'API, données, callbackId
methodName : le nom de l'API ouverte
données : transmises aux paramètres h5 après le traitement natif< a i=5> obligatoire Renvoyer la valeur de la fonction de rappel au natif pour l'obtenir, ou renvoyer un autre pont, le nom de la méthode est methodNameSuccess, ou c'est strictement interdit, le nom de la méthode est le callbackId produit par le natif

comme:

bridge.register("hupu.ui.datatabupdate", (name) => {
    
    
	if(name) {
    
    
		// 再发一个bridge通知原生tab更新成功，，，method 可以为native生成的 callbackId
		bridge.send('hupu.ui.datatabsuccess', {
    
    })
	}
});

• Comment appeler natif dans js ==> Appeler natif via la méthode sendHandler

// étapes d'exécution de sendHandler

1. Déterminez s'il existe une fonction de rappel. Si tel est le cas, générez un identifiant de fonction de rappel et ajoutez l'identifiant et le rappel correspondant dans la collection de fonctions de rappel ResponseCallbacks.
2. Grâce à une méthode de conversion de paramètres spécifique, les données entrantes et les noms de méthodes sont regroupés dans un schéma d'URL, comme suit :

var param = {
    
    
	method: 'methodName',
	data: {
    
    xx: 'xx'},
	success: 'successId',
	error: 'errorId'
}
// 变成字符串并编码
var url = schme://ecape(JSON.stringify(param))

3. Utilisez l'iframe créé en interne pour déclencher le schéma (location.href = peut provoquer des problèmes de saut)
   Créer une iframe

var iframe = document.createElment('iframe');
iframe.src = url;document.head.appendChild(iframe);
setTimeout(() => document.head.removeChild('iframe'), 200)

• Comment le natif sait-il que l'API s'appelle
• Schéma d'URL de capture Android : Shouldoverrideurlloading capture l'URL pour analyse
• Le côté Android peut également déclencher le schéma via window.prompt(url, '' de h5), puis le natif peut obtenir l'URL en réécrivant le onJsPrompt de webviewClient
  , et puis analysez
• ios : toutes les requêtes réseau initiées dans UIWebView WKWebview peuvent être notifiées au niveau de la couche native via la fonction de délégué, et le schéma d'URL déclenché dans la vue Web est capturé viashouldStartLoadWithRequest
• Analyser le format des paramètres d'URL et des rappels
• native a reçu la méthode appelée par js. Ensuite, le natif doit analyser les données selon le format de données défini et extraire method, 、datasuccessIderrorId
• Selon le nom de la méthode, la méthode correspondante est recherchée localement, les paramètres correspondants sont reçus et exécutés. Une fois l'exécution terminée, h5 est notifié et transporte les paramètres correspondants.
• Comment le natif appelle js (reportez-vous à la méthode d'exécution native de js ci-dessus)
• Notification passive après les appels h5 natifsJSBridge._handleMessageFromNative(messageJSON), format json :{responseId, reponseData}
• native appelle activement la méthode enregistrée h5, JSBridge._handleMessageFromNative(param), le format param
  est {methodName, data}, ce qui n'est pas pris en charge car il s'agit d'un appel par lots asynchrone

Qu’est-ce que le DOM ?

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document et définit un moyen d'accéder à la structure à partir d'un programme pour modifier la structure, le style et le contenu du document. Le DOM analyse un document en une collection structurée de nœuds et d'objets (objets contenant des propriétés et des méthodes). En termes simples, il connecte les pages Web à des scripts ou à des langages de programmation.

API commune du DOM

interface du nœud parent

Node.children // Renvoie tous les nœuds enfants Element du nœud spécifié
Node.firstElementChild // Renvoie le premier nœud enfant Element du nœud actuel
Node.lastElementChild // Renvoie le nœud actuel Le dernier nœud enfant de l'élément
Node.childElementCount // Renvoie le nombre de tous les nœuds enfants de l'élément du nœud actuel.

fonctionner

Node.appendChild(node) // Ajoute le dernier nœud enfant au nœud
Node.hasChildNodes() // Renvoie une valeur booléenne indiquant si le nœud actuel a des nœuds enfants
Node.cloneNode(true) // Par défaut est faux (nœud clone), vrai (nœud clone et ses attributs et descendants)
Node.insertBefore(newNode,oldNode) // Insérer un nouveau nœud enfant avant le nœud enfant spécifié
Node.removeChild(node) // Supprimer le nœud , opérer sur le nœud parent du nœud à supprimer
Node.replaceChild(newChild,oldChild) // Remplacer le nœud
Node.contains(node) // Renvoie une valeur booléenne indiquant si le nœud paramètre est un nœud descendant du nœud actuel. Node.compareDocumentPosition(node) // Renvoie une valeur binaire de 7 bits, indiquant la relation entre le nœud paramètre et le nœud actuel
Node.isEqualNode(noe) // Renvoie une valeur booléenne, utilisée pour vérifier deux les nœuds sont égaux. Les nœuds dits égaux font référence à deux nœuds qui ont le même type, les mêmes attributs et les mêmes nœuds enfants.
Node.normalize() // Utilisé pour nettoyer tous les nœuds Texte à l'intérieur du nœud actuel. Il supprime les nœuds de texte vides et fusionne les nœuds de texte adjacents en un seul.

Interface du nœud enfant

Node.remove()// Utilisé pour supprimer le nœud actuel
Node.before()
Node.after()
Node.replaceWith()

Méthodes du nœud de document

Méthode de lecture et d'écriture
document.open() // Utilisée pour créer et ouvrir un document
document.close() // Dangereux que le document créé par la méthode open< a i=3> // Utilisé pour écrire du contenu dans le document actuel // Utilisé pour écrire du contenu dans le document actuel, en ajoutant un caractère de nouvelle ligne à la fin. Rechercher un nœud // Accepte un sélecteur CSS comme paramètre et renvoie le premier nœud d'élément qui correspond au sélecteur. // Accepte un sélecteur CSS comme paramètre et renvoie tous les nœuds d'éléments correspondant au sélecteur. // Renvoie tous les éléments avec les balises HTML spécifiées // Renvoie tous les éléments dont les noms de classe répondent aux conditions spécifiées / / Utilisé pour sélectionner des éléments HTML avec des attributs de nom (tels que et , etc.) // Renvoie les éléments qui correspondent le nœud d'élément d'attribut id spécifié. // Renvoie le nœud enfant Element de niveau supérieur situé à la position spécifiée sur la page. Générer un nœud // Utilisé pour générer des nœuds d'éléments HTML. // Utilisé pour générer des nœuds de texte // Génère un nouveau nœud d'objet d'attribut et le renvoie. //Générer une méthode événementielle d'objet DocumentFragment //Générer un objet événement qui peut être utilisé par la méthode element.dispatchEvent() //Enregistrer l'événement //Déclencher l'événement
document.write()
document.writeIn()document.querySelector(selectors)
document.querySelectorAll(selectors)
document.getElementsByTagName(tagName)document.getElementsByClassName(className)
document.getElementsByName(name)<form>、<radio>、<img>、<frame>、<embed><object>
document.getElementById(id)
document.elementFromPoint(x,y)
document.createElement(tagName)
document.createTextNode(text)
document.createAttribute(name)
document.createDocumentFragment()
document.createEvent(type)document.addEventListener(type,listener,capture)
document.dispatchEvent(event)

autre

document.hasFocus() //Renvoie une valeur booléenne indiquant si un élément du document actuel est activé ou a le focus. document.adoptNode(externalNode) //Supprimez un nœud du document où il réside à l'origine, insérez-le dans le document actuel et renvoyez le nouveau nœud inséré.
document.importNode(externalNode, deep)

Qu'est-ce que la nomenclature

Le modèle d'objet de navigateur (BOM) fait référence au modèle de présentation composé de tous les objets exposés par un navigateur Web. BOM est différent de DOM dans le sens où il n'a ni implémentation standard ni définition stricte, de sorte que les fabricants de navigateurs peuvent librement implémenter BOM. En tant que fenêtre qui affiche le document, le programme de navigation le voit comme une collection hiérarchique d'objets. Lorsque le navigateur analyse un document, il crée une collection d'objets qui définissent le document et détaillent la manière dont il doit être affiché. Les objets créés par le navigateur sont appelés objets document. Il fait partie d'une plus grande collection d'objets utilisés par les navigateurs. Cette collection d'objets de navigateur est collectivement appelée modèle d'objet de navigateur, ou BOM. Le niveau supérieur de la hiérarchie de nomenclature est l'objet fenêtre, qui contient des informations sur la fenêtre dans laquelle le document est affiché. Certains objets fenêtre sont eux-mêmes des objets qui décrivent des documents et des informations associées. BOM fournit certaines méthodes pour accéder à l'objet fenêtre. Nous pouvons l'utiliser pour déplacer la position de la fenêtre, modifier la taille de la fenêtre, ouvrir de nouvelles fenêtres et fermer des fenêtres, ouvrir des boîtes de dialogue, naviguer et obtenir des informations client telles que : la version de la marque du navigateur, Résolution d'écran. Mais la fonction la plus puissante de BOM est qu'il fournit une entrée pour accéder aux pages HTML - l'objet document, afin que nous puissions utiliser les puissantes fonctions de DOM via cette entrée ! ! ! L'objet window est l'objet de niveau supérieur (noyau) de la nomenclature. Tous les objets sont étendus à travers lui et peuvent également être appelés objets enfants de window. Puisque window est un objet de niveau supérieur, vous pouvez spécifier l'objet window sans l'afficher lors de l'appel de son sous-objet