Introducción: He estado revisando las preguntas de la entrevista recientemente, entendiendo el alcance y la frecuencia de las preguntas, revisando algunos puntos propensos a errores y compartiéndolos al mismo tiempo. ¡Espero ayudarlo un poco!
1、点（.） = Precedencia del operador VS
let a = {n : 1};
let b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b.x);¿Cuál es la salida?
indefinido
{n: 2}
La prioridad de dot (.) Y = está involucrada aquí, porque dot (.) Tiene una prioridad más alta que =, este código también se puede escribir así:
let a = {n : 1};
let b = a;
//a.x = a = {n: 2};
a.x ={n: 2}
a = {n: 2};
console.log(a.x);
console.log(b.x);Resumen: Por cuestiones de prioridad, primero se debe asignar ax y luego a. En el desarrollo diario, este tipo de continuidad también es muy común. Generalmente, a = b = c = 0 se escribe así, por supuesto. No habrá ambigüedades ni fallas en la escritura, pero como en el caso del ejemplo anterior, habrá efectos inesperados (se estima que este efecto no es el que queremos), y el código debe ser lo más simple y claro posible. así que úsalo y espera. Ten cuidado cuando lo uses, es fácil de usar y no se abusa de él.
2. Alcance
var a = 0,b = 0;
function A(a) {
A = function (b) {
console.log(a + b++)
}
console.log(a++)
}
A(1)
A(2)Analizando
var a = 0,b = 0;
function A(a) {
//A(1)调用运行情况：
/*
1.A函数被重置为：
function (b) {
console.log(a + b++)
}
2.执行打印console.log(a++)，因为此时的a是形参，形参的值是传入的1，所以打印1，而且形参a执行了++，此时值为2
*/
A = function (b) {
//A(2)调用情况
/*
这个a是采用的闭包，所以是2，b是形参也是2，所以打印的是4
*/
console.log(a + b++)
}
console.log(a++)
}
A(1)//A(1)调用
A(2)//A(2)调用
3. Promoción variable
Tema 1:
var a = 10;
(function a(){
console.log(a)
a = 20;
console.log(window.a)
var a = 30
console.log(a)
})()Equivalente a
var a = 10;
(function a(){
//内部作用域
var a;//var a = 30 中的声明被提升
console.log(a)//undefined
a = 20;//内部作用域的a赋值20
console.log(window.a)//window中的a依然是10
a = 30//内部作用域的a赋值30
console.log(a)//打印内部作用域中的a 30
})()Tema 2:
var name = '张三';
function fn() {
if (typeof name === 'undefined') {
var name = '李四';
console.log('辛苦了： ' + name);
} else {
console.log('吃饭没： ' + name);
}
}
fn();Equivalente a
var name = '张三';
function fn() {
var name ;// var name = '李四'; 中的声明被提前到函数作用域里面
if (typeof name === 'undefined') {//此时成立
name = '李四';
console.log('辛苦了： ' + name);
} else {
console.log('吃饭没： ' + name);
}
}
fn();Pregunta 3:
var a=10,b=20,c=30;
function fn(a){
a=1;
var b=2;
c=3
}
fn(100)
console.log(a,b,c);Equivalente a
var a=10,b=20,c=30;
function fn(a){
//函数调用，形成局部作用域，形参a在内部局部作用域 a=100
var b;//b在内部变量提升
a=1;//内部局部作用域 a设置为1
b=2;//内部局部作用域 b设置为2
c=3;//全局作用与c被设置值3
}
fn(100)
//可以看到只有c被局部作用域修改了
console.log(a,b,c);//10 20 3Pregunta 4:
if(!("a" in window)){
var a = 10
}
console.log(a);Equivalente a
var a;//变量提升了
if(!("a" in window)){//"a" in window 成立了，所以这个条件不执行
a = 10
}
console.log(a);//'undefinedPregunta 5:
var fn = 'hello';
(function(fn){
console.log(fn);
var fn=fn||'world';
console.log(fn)
})(fn)
console.log(fn);Equivalente a
var fn = 'hello';
(function(fn){
//内部作用域
//形参先被定义 所以fn=hello
//var fn;//var fn=fn||'world';变量提升到这里，但是会被忽略，因为形参的fn先被定义
console.log(fn);//打印hello
fn=fn||'world';//这句fn还是等于hello
console.log(fn)//打印hello
})(fn)//hello作为实参传入
console.log(fn);//打印hello
//最终结果是：hello hello helloPregunta 6:
var n=10;
function fn(n){
console.log(n);
var n= 20;
console.log(n);
function n(){
}
console.log(n);
}
fn(n);
console.log(n);Equivalente a
var n=10;
function fn(n){
//局部作用域
//n根据形参首先定义 n=10
//函数会提升，覆盖了n，此时n为函数
function n(){
}
//var n;//var n =20中的var n 被提升到此处，但是会被忽略
console.log(n);//打印函数
n= 20;//n被赋值为20
console.log(n);//打印20
//函数已经提升
console.log(n);//打印20
}
fn(n);//实参n=10传入调用
console.log(n);//打印10Pregunta 7:
function fn(fn){
console.log(fn);
var fn = 20;
console.log(fn);
function fn(){
console.log(fn);
}
}
fn(30);
var fn = 10;
console.log(fn);Equivalente a
function fn(fn){
//局部作用域 fn被形参设置 fn为30
function fn(){//函数被提升到此次，并且fn设置为函数
console.log(fn);
}
var fn ;//var fn = 20;中的var变量提升到这里，但是会被忽略
console.log(fn);//打印函数
fn = 20;//赋值20
console.log(fn);//打印20
}
var fn;//var fn = 10;这句中的var变量提升到这里，但是会被忽略，因为已经存在函数 fn 了
fn(30);//执行函数
fn = 10;//赋值fn为10
console.log(fn);//打印10Eventualmente se imprimirá a su vez: función fn 20 10
4. Relacionado con el cierre
Tema 1: Valor de retorno (más utilizado)
function fn(){
var name="hello";
return function(){
return name;
}
}
var fnc = fn();
console.log(fnc())//hello
Esto es fácil de entender y es devolver el nombre en forma de cierre.
Tema 2: Asignación de funciones
var fn2;
function fn(){
var name="hello";
//将函数赋值给fn2
fn2 = function(){
return name;
}
}
fn()//要先执行进行赋值，
console.log(fn2())//执行输出fn2Establezca el valor de la función fn2 en el cierre. El atributo de nombre se memoriza en la forma del cierre, y la ejecución dará como resultado un saludo.
Tema 3: Parámetros de función
function fn(){
var name="hello";
return function callback(){
return name;
}
}
var fn1 = fn()//执行函数将返回值（callback函数）赋值给fn1，
function fn2(f){
//将函数作为参数传入
console.log(f());//执行函数，并输出
}
fn2(fn1)//执行输出fn2Use un cierre para devolver una función, use esta función como un parámetro de otra función, ejecute esta función en otra función y finalmente envíe un saludo
Tema 4: IIFE (función autoejecutable)
(function(){
var name="hello";
var fn1= function(){
return name;
}
//直接在自执行函数里面调用fn2，将fn1作为参数传入
fn2(fn1);
})()
function fn2(f){
//将函数作为参数传入
console.log(f());//执行函数，并输出
}Pase la función encapsulada fn1 a fn2 directamente en la función autoejecutable y llámela como parámetro para obtener el resultado hola
Tema 5: Asignación de bucles
//每秒执行1次，分别输出1-10
for(var i=1;i<=10;i++){
(function(j){
//j来接收
setTimeout(function(){
console.log(j);
},j*1000);
})(i)//i作为实参传入
}Tema 6: Getters y setters
function fn(){
var name='hello'
setName=function(n){
name = n;
}
getName=function(){
return name;
}
//将setName，getName作为对象的属性返回
return {
setName:setName,
getName:getName
}
}
var fn1 = fn();//返回对象，属性setName和getName是两个函数
console.log(fn1.getName());//getter
fn1.setName('world');//setter修改闭包里面的name
console.log(fn1.getName());//getter
Cuando envíe un saludo por primera vez, use setter para generar un mundo. Esto se puede encapsular en un método público para evitar que las propiedades y funciones no deseadas se expongan al exterior.
Tema 7: Iterador (ejecuta una función para reducir un valor)
var arr =['aa','bb','cc'];
function incre(arr){
var i=0;
return function(){
//这个函数每次被执行都返回数组arr中 i下标对应的元素
return arr[i++] || '数组值已经遍历完';
}
}
var next = incre(arr);
console.log(next());//aa
console.log(next());//bb
console.log(next());//cc
console.log(next());//数组值已经遍历完Tema 8: Distinguir por primera vez (el mismo parámetro, la función no se ejecutará repetidamente)
var fn = (function(){
var arr=[];//用来缓存的数组
return function(val){
if(arr.indexOf(val)==-1){//缓存中没有则表示需要执行
arr.push(val);//将参数push到缓存数组中
console.log('函数被执行了',arr);
//这里写想要执行的函数
}else{
console.log('此次函数不需要执行');
}
console.log('函数调用完打印一下，方便查看已缓存的数组：',arr);
}
})();
fn(10);
fn(10);
fn(1000);
fn(200);
fn(1000);Resultados de la
Se puede ver claramente que la primera ejecución se guardará y la ejecución se recuperará directamente de nuevo.
Tema 9: Almacenamiento en caché
//比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算
var fn=(function(){
var cache={};//缓存对象
var calc=function(arr){//计算函数
var sum=0;
//求和
for(var i=0;i<arr.length;i++){
sum+=arr[i];
}
return sum;
}
return function(){
var args = Array.prototype.slice.call(arguments,0);//arguments转换成数组
var key=args.join(",");//将args用逗号连接成字符串
var result , tSum = cache[key];
if(tSum){//如果缓存有
console.log('从缓存中取：',cache)//打印方便查看
result = tSum;
}else{
//重新计算，并存入缓存同时赋值给result
result = cache[key]=calc(args);
console.log('存入缓存：',cache)//打印方便查看
}
return result;
}
})();
fn(1,2,3,4,5);
fn(1,2,3,4,5);
fn(1,2,3,4,5,6);
fn(1,2,3,4,5,8);
fn(1,2,3,4,5,6);Resultado de salida:
Tema 10: Función de estrangulamiento
La función de la función de aceleración es ejecutar la función solo una vez dentro de un tiempo limitado, como:
1. Botón de envío (puede evitar el envío repetido, por supuesto, no solo este método, también es posible configurar el botón para que no esté disponible).
2. Cuando la frecuencia de activación de desplazamiento, mousehover, mousemove es alta.
El principio principal es establecer un indicador en el cierre. El indicador se establece en verdadero dentro de un tiempo limitado y la función no se ejecutará si se hace clic de nuevo. Después de que se ejecuta la función setTimeout, el indicador se establece en flase, y la ejecución puede continuar.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<div class="box" id="div_box" >
<button onclick="fn1()">test</button>
</div>
</body>
<script>
//节流函数
function throttle(fn,delay){
var flag=false;
var timer=null;
return function(){
var args=[].slice.call(arguments,0);//将参数转成数组
var context=this;
if(flag){//如果在限定的时间内 flag是true 则直接返回，不让执行
return;
}
flag=true; //函数正在控制中
//执行函数
fn.apply(context,args);
clearTimeout(timer);//清除定时器
timer =setTimeout(function(){
flag=false;//延时时间过了以后，放开函数控制
},delay)
}
}
function fn(){
console.log(123);
}
var fn1 = throttle(fn,2000);//绑定节流函数
</script>
</html>El tiempo de clic del botón está limitado aquí. Solo la primera vez se ejecutará en 2000 milisegundos y no será válido si se hace clic en él varias veces.
Resumen: Se puede decir que los cierres son ubicuos, por lo que aún vale la pena estudiar estos escenarios de cierres.
5. Prototipo y cadena de prototipos
Tema 1:
function F() {
this.a = 1;
}
var obj = new F();
console.log(obj.prototype);//打印undefined 对象只有 __proto__属性没有prototype属性，函数才有Tema 2:
Object.prototype.a = 1;
var obj = {
b: 2
};
for(var i in obj) {
console.log(i); //能迭代出原型链里面的属性，所以会打印出 b和a
}Pregunta 3:
Object.prototype.a = 1;
var obj = {
b: undefined
};
console.log(obj.a);//1
console.log('b' in obj);//true //能找到处于原型链里面的bar属性
console.log(obj.hasOwnProperty('a'));//false 不是自身的属性
console.log(obj.hasOwnProperty('b'));//true 是自身的属性Pregunta 4:
function A(){
}
function B(a){
this.a = a;
}
function C(a){
if(a){
this.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
//实例对象都能访问构造函数的原型对象，可以明确的是以上3个都是能拿到a的
console.log(new A().a);//1 拿到的是原型上的a=1
console.log(new B().a);//undefined this.a = a;将new B()这个实例对象的a属性这是为undefined，所以拿到的是undefined
console.log(new C(2).a);//2 将new C(2)这个实例对象的a属性这是为2，所以拿到的是2Pregunta 5:
function A () {
}
A.prototype.n = 1;
var b = new A();//b实例对象已经建立原型连接
//原型对象指向被改变，不会切断b实例对象的
A.prototype = {
n: 2,
m: 3
}
var c = new A();//c实例对象将根据新的原型建立连接
console.log(b.n, b.m); //1 undefined 这里拿到是改变prototype之前的
console.log(c.n, c.m); //2 3 这里拿到是改变prototype之后的Pregunta 6:
var F = function(){};
Object.prototype.a = function(){
console.log('a')
}
Function.prototype.b = function(){
console.log('b')
}
var f = new F();
F.a(); //打印a 对象都能访问Object.prototype中的属性和方法
F.b(); //打印b F是函数，原型链 F => F.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
f.a(); //打印a 对象都能访问Object.prototype中的属性和方法
f.b(); //报错f.b is not a function 因f是F实例对象，原型链 f=>f.__proto__=>F.prototype=>F.prototype.__proto__ => Object.prototypeResumen: En JavaScript, los objetos tienen atributos __proto__ (prototipos implícitos), que apuntan al prototipo de la función constructora que construye el objeto. La función es especial. Además de tener atributos __proto__ como otros objetos, también tiene los suyos propios El atributo único ---- el prototipo se denomina objeto prototipo y el objeto prototipo tiene un atributo de constructor, que apunta a la función.
6, la comprensión de este
Ejemplo 1 (nuevo):
function person(name){
this.name=name;
}
var p = new person("张三")
console.log(p);
var p1 = new person("李四")
console.log(p1);Para los objetos creados por new, mire esto y podrá ver en la figura siguiente que se han creado nuevos objetos.
Ejemplo 2 (llamada de enlace duro, aplicar)
var person = {
name:'person',
sayHi:function(){
console.log(this)
}
}
var o={name:'o1'};
person.sayHi.call(o);Mire esta impresión en la figura a continuación, esto está vinculado al objeto o
Ejemplo 3 (llamada de objeto de contexto)
var person = {
name:'person',
sayHi:function(){
console.log(this)
}
}
var o={name:'o1'};
person.sayHi(); esto se imprime como se muestra en la figura a continuación y está directamente vinculado al objeto persona
Ejemplo 4 (usando el enlace predeterminado)
var name='person';
function sayHi(){
console.log(this)
}
sayHi();El impreso esto es ventana
excepción
var person = {
name:'person',
sayHi:function(){
console.log(this)
}
}
var o={name:'o1'};
person.sayHi.call(null);Cuando se pasa nulo o indefinido como primer parámetro de llamar y aplicar, se utilizará la regla de enlace predeterminada, que apuntará a la ventana.
para resumir:
- ¿Se llama a la función con new? Si es así, esto enlaza el objeto recién creado. var p = nueva Persona ();
- ¿Se llama a la función mediante enlace duro mediante llamada y aplicación? Si es así, se vincula al objeto especificado. var p = sayHi.call (obj);
- ¿La función es llamada por un objeto de contexto? Si es así, está vinculado a este objeto de contexto. var p = obj.sayHi ();
- Si nada de lo anterior es cierto, se utiliza el enlace predeterminado. var p = sayHi ();
Esto de la función de flecha
La función de flecha se selecciona por separado por una razón, se determina de acuerdo con el alcance externo this y la vinculación de la función de flecha no se puede modificar.
var a = 2;
var foo = () => {
console.log(this.a)
}
var obj = {
a: 4,
foo: foo
}
obj.foo() // 2
La función de flecha del código anterior no se ve afectada por las reglas de vinculación implícitas, por lo que el resultado impreso en la consola es 2.
7. Desduplicación de matrices
Camino 1:
var arr=[1,2,3,4,5,3,6,1,0];
var arr2 = [];
for(let i = 0; i < arr.length; i++) {
if(arr2.indexOf(arr[i]) == -1) { //不包含某个值则返回-1
arr2.push(arr[i]);
}
}
console.log(arr2); Este método es probablemente el más fácil de imaginar para todos.
Camino 2:
var arr=[1,2,3,4,5,3,6,1,0];
var arrSort = arr.sort();
var arr2 = [];
for(let i = 0; i< arrSort.length; i++) {
if(arrSort[i] != arrSort[i+1]) {
arr2.push(arrSort[i]);
}
}
console.log(arr2); Este método hará que la matriz se ordene en lugar de mantener el orden original.
Utilice empalme:
var arr=[1,2,3,4,5,3,6,1,0];
var len = arr.length;
for(var i = 0; i < len; i++) {
for(var j = i + 1; j < len; j++) {
if(arr[i] === arr[j]) {
arr.splice(i,1);
len--;
j--;
}
}
}
console.log(arr); Conjunto ES6
var arr=[1,2,3,4,5,3,6,1,0];
let sortSet = new Set(arr);
console.log(Array.from(sortSet));
8. Agente de eventos
9. Promoción variable y promoción de funciones
Promoción variable
a=2;
var a;
console.log(a);¿Qué imprimirá la consola en este código? Puede que no esté definido, pero en realidad imprimirá 2. Porque este código realmente se procesará así:
var a;
a=2;
console.log(a);Entre ellos: var a; es compilar, y se ejecutan las siguientes dos oraciones.
Veamos otro párrafo:
console.log(a);
var a=2;Se procesará así:
var a;
console.log(a);
a=2;Se compila la misma var a; y se ejecutan las siguientes dos oraciones, porque la asignación de a = 2 es posterior a la impresión, por lo que este código se generará indefinido.
A partir de las dos piezas de código anteriores, podemos saber que una variable declarada como var se moverá a la parte superior del alcance actual en la fase de compilación donde sea que se coloque.
Promoción de funciones
Las declaraciones de funciones se promoverán de la misma manera que las declaraciones de variables. Veamos un ejemplo de una función:
hello();//执行
function hello(){//函数声明，这里可以看到声明在后，执行在前，能正常执行吗？
console.log('hello');
}Cuando ejecutamos este código, podemos ver que la salida es normal, es decir, se promueve la declaración de la función.
¿Qué pasa si usamos var para declarar una función?
hello();//执行
var hello = function (){
console.log('hello');
}La ejecución reportará un error:
¿Por qué? Como var hello = function () { console.log ('hello'); } de esta manera, var hello es una declaración de variable, y lo siguiente es una operación de asignación, la variable se promueve y la operación de asignación no se promueve. En De hecho, este párrafo es equivalente de esta manera:
var hello;
hello();//执行
hello = function(){
console.log('hello');
}Al ejecutar, solo se declara hello y su valor no está definido, por lo que TypeError aparecerá cuando se llame con (). Cámbielo a lo siguiente para que funcione normalmente. Si desea escribir de esta manera, debe ponerlo en la función frente de ejecución:
var hello= function(){
console.log('hello');
}
hello();//执行Función primero
hello();//执行
var hello;
function hello(){
console.log('log hello');
}
hello = function(){
console.log('log hello1');
}Este código se imprimirá: log hola
A partir de los resultados, podemos ver que el registro hola se imprime cuando se ejecuta la función. Después de que se ejecuta la función, la variable hola será reemplazada por una instrucción de asignación con una función que imprime el registro hola1. ¿Por qué? El código real se procesará así
function hello(){
console.log('log hello');
}
hello();//执行
//var hello这句被忽略了
hello = function(){
console.log('log hello1');
}
La función se promueve primero a la parte superior. En este momento, la declaración var hello se ignorará, porque hello ya existe en este momento, y es una función. Luego, por supuesto, la próxima ejecución de la función hello imprimirá el resultado anterior, y luego será reemplazado.
Cobertura de declaración de función
hello();//执行
function hello(){
console.log('log hello');
}
function hello(){
console.log('log hello2');
}
function hello(){
console.log('log hello3');
}Imprime log hello3, y las siguientes declaraciones de función sobrescriben las declaraciones de función anteriores.
para resumir:
- Tanto las declaraciones de función como las declaraciones de variable se promoverán a la parte superior del alcance actual, y la función primero, es decir, donde sea que coloquemos la declaración de declaración.
- Para que el código sea atractivo, fácil de mantener, para evitar declaraciones repetidas y para evitar riesgos innecesarios, es mejor poner las declaraciones primero.
10 、 tipo de vs instancia de
tipo de
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof 对于对象来说，除了函数都会显示 object
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'en vez de
instanceof es para detectar si la cadena prototipo del objeto apunta al objeto prototipo del constructor
var arr = [1,2,3];
console.log(arr instanceof Array); // true
function B(){}
function A(){}
A.prototype = new B(); // 原型继承
var a = new A();
console.log(a instanceof A) //true
console.log(a instanceof B) //true
console.log(a instanceof Object)//true
Todas las comprobaciones con instanceof en la cadena de prototipos devuelven verdadero
11. Función de devolución de llamada (devolución de llamada)
Como el ajax de jquery
$ .ajax (url, función (datos) {
// Lógica de procesamiento
})
La función de devolución de llamada tiene una debilidad fatal, es decir, es fácil escribir el infierno de devolución de llamada, de la siguiente manera:
$.ajax(url, function(data) {
// 处理逻辑
$.ajax(url_1, function(data) {
// 处理逻辑
$.ajax(url_2, function(data) {
// 处理逻辑
$.ajax(url_3, function(data) {
// 处理逻辑
})
})
})
})Aunque la función de devolución de llamada es fácil de usar, también tiene este problema, se recomienda usar Promise para manejarlo.
12 、 Promesa
Promise tiene tres estados, a saber:
1. Esperando (pendiente)
2. Completado (resuelto)
3. Rechazado
Una vez que cambie del estado de espera a otro estado, nunca podrá cambiar el estado
new Promise((resolve,reject) => {
resolve('success')
// 无效
reject('reject')
})Promise también resuelve el problema del infierno de devolución de llamada. El siguiente código:
let p = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'success');
});
p.then(
res => {
console.log(res);
return `${res} again`;
}
)
.then(
res => console.log(res)
);
// success
// success again
13, llamar, aplicar y vincular funciones
Similitudes:
Cambie el punto de esto en el cuerpo de la función.
la diferencia:
La diferencia entre llamar y aplicar: la forma de aceptar parámetros es diferente.
enlazar: no ejecutar inmediatamente. Mientras que aplicar y llamar se ejecutan inmediatamente.
function Person(name){
this.name = name;
}
Person.prototype.getName=function(){
console.log(this.name);
}
var p = new Person('张三');
p.getName();//直接执行
var p1={name:'李四'};
p.getName.call(p1);//this被改变，获取的是p1中的name
p.getName.apply(p1);//this被改变，获取的是p1中的name
p.getName.bind(p1)();//this被改变，获取的是p1中的name，不会立即执行，需要()来执行Producción:
14. La diferencia entre == y ===
En pocas palabras: == significa lo mismo, === significa estrictamente lo mismo;
Al hacer la comparación ==: primero verifique los tipos de datos de los dos operandos, si son iguales, luego realice la comparación ===, si son diferentes, luego realice la conversión de tipo y luego realice la comparación después de la conversión al mismo tipo, y === comparación, si los tipos son diferentes, es directamente falso y no habrá conversión.
Los he incluido por el momento, espero que sea de ayuda para todos, ¡y me den tres empresas para apoyarme, hermanos! !