Envíe propuestas en las preguntas de la entrevista de front-end

1. El valor y el problema de referencia, vea el resultado de salida del siguiente código

	var a = [1,2,3];
	var b = a;
	b.push(4); // a,b数组指向同一个数组,改变b,a也变
	console.log(a); // [1,2,3,4]
	console.log(b); // [1,2,3,4]
		
	var a = [1,2,3];
	var b = a;
	b = [4,5,6];
	console.log(a); // [1,2,3]
	console.log(b); // [4,5,6] b重新指向了一个新的数组地址
    
    // concat 拼接数组
	var a = [1,2,3];
    var b = a.concat([]);
    a.push(4);
    console.log(a); // [1,2,3,4]
    console.log(b); // [1,2,3]

	function change(x) {
    
    
		x.push(4);
		x; // [1,2,3,4]
		// 继续
		x = [5,6,7];
		x.push(8);
		x; // [5,6,7,8]
	}
	var a = [1,2,3];
	change(a);
	a; // 值为[1,2,3,4],而不是[5,6,7,8]

	// 标量基本类型值不可更改
	function foo(x) {
    
    
		// 传进来的x参数是数字对象中拆分出来的
		x = x + 1;
		x;// 3
	}
	var a = 2;
	var b = new Number(a); // 如果一个数字对象的标量基本类型值是2,那么该值就不能修改,除非创建一个包含新值的数字对象
	foo(b);
	console.log(b); // 是2,而不是3
	
	Number.prototype.valueOf = function() {
    
    
		return 3;
	}
	new Number(2) == 3; // true,调用了valueOf方法,所以这里是相等的
	
	false == 0; // true
	false == ''; // true
	false == []; // true
	[] == []; // false
	null == undefined // true

	2+3+'7'; // "57"  加上一个字符串会拼接
	Math.max() < Math.min(); // true 在不传参数情况下Math.max()返回-infinity

	// 函数声明提前
	function test() {
    
    
        console.log(a); // undefined
        foo(); // foo
        var a = 0;
        function foo() {
    
    
            console.log('foo');
        }
    }
    test();

	var a = 1;
	var obj = {
    
    b: 20}
	function test(i) {
    
    
		i--;
		obj.b--;
	}
	console.log(a + '' + obj.b); // 1  19

2. Echemos un vistazo al problema de los cierres. ¿Qué es un cierre? Una función interna llama a una variable externa. La variable no se liberará después de que se ejecute la función, formando un cierre. Uso razonable de cierres, es probable que los cierres provoquen pérdidas de memoria.

	// 闭包问题,一秒后输出10个10
	for (var i = 0; i < 10; i++) {
    
    
	    setTimeout(() => {
    
    
	      console.log(i);
	    }, 1000);
	}
	// 立即执行函数,输出0到9
	for (var i = 0; i < 10; i++) {
    
    
	    (function(i) {
    
    
	      console.log(i);
	    })(i);
	}
	// let 块级作用域,可解决闭包问题 输出0到9
	for (let i = 0; i < 10; i++) {
    
    
	    setTimeout(() => {
    
    
	      console.log(i);
	    }, 1000);
	}

3. Describa brevemente el mecanismo de devolución de basura del navegador.
En los navegadores IE anteriores, el mecanismo de recolección de basura utilizaba el método de conteo de referencias, es decir, en la ejecución del programa, el número de declaraciones o referencias se incrementa en uno, y lo mismo ocurre con la re-declaración una vez, y el número de veces se reduce en uno, cuando es 0 En ese momento, el navegador lo borrará y lo reciclará. Este enfoque expone un problema, es decir, si la variable se refiere a sí misma o se hace referencia cíclicamente, no se marcará como 0 y no será reciclada por el navegador; por lo tanto, los navegadores convencionales actualmente usan el método de eliminación de marcas para hacer esto. Recolección de basura, es decir, la variable de la que actualmente depende el programa se marca como entrando al entorno, cuando se ejecuta el método se marca la variable como saliendo del entorno, por lo que las que salen del entorno se reciclan naturalmente.

4. ¿Cómo dibujar un triángulo en CSS? (La esencia de un píxel se compone de cuatro triángulos)

	.demo{
    
    
         width:0px;
         height:0px;
         border-top:5px solid transparent; // transparent透明属性,可随意调节三角形方向
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         border-bottom: 5px solid red;
     }

5. Función anti-vibración (muchas búsquedas e interfaces nuevas y modificadas en el proyecto deben realizar la función de procesamiento anti-vibración para evitar que los usuarios hagan clic en el botón y ajusten la interfaz todo el tiempo cuando se usa la tarjeta de red del usuario y la base de datos puede ingresar datos sucios)

data() {
    
    
	return {
    
    
		timer: null
	}
}
// 当你在间隔的时间内连续一直点击按钮执行这个方法,它每次进来都先清理定时器,所以逻辑代码并没有执行,等你停止点击,它会执行最后一次的定时器任务
function add() {
    
    
	this.timer = null; // 每次点击这个方法,就把定时器里的代码清理
	this.timer = setTimeout(() => {
    
    
		// 这里执行程序的逻辑代码以及调接口
	}, 300);
}

6. Una serie de problemas causados ​​por la clonación de objetos.

var obj = {
    
    
	name: 'jack',
	age: 12,
	tag: {
    
    
		fea: 'handsome',
		sys: 'tall'
	},
	normalArr: [1,2,3],
	time: new Date(),
	reg: '/abc/ig'
}
var obj1 = {
    
    
	age: 10
}

// 浅复制
var a = obj; // 赋值的方法
var b = Object.assign({
    
    },obj,obj1); // Object.assign方法,可复制多个对象,后面的对象属性覆盖前面的,所以b.age = 10;
var c = {
    
    ...obj}; // 拓展运算符,也是浅复制
// 如何判断是浅复制还是深复制了一个对象,复制来的对象b.name = 'changName';obj和b对象都修改了
b.name = 'changeName';//  b和obj都改了name属性

// 深复制
var d = JSON.parse(JSON.stringify(obj)); // 将对象转成JSON格式,再转回来,这种方法只能复制简单的JSON格式数据,如果有日期格式,正则,undefined等属性值复制出来的对象属性会缺失
// 递归克隆对象,遇到对象属性递归调用,继续clone,
function clone(obj) {
    
    
	if (typeof obj == null) return null;
	if (typeof obj != 'object') return obj;
	if (obj.constructor == Date) return new Date(obj);
	if (obj.constructor == RegExp) return new RegExp(obj);
	let result = obj.constructor(); // 继承obj的原型上的方法与属性
	for (let key in obj) {
    
    
		if (obj.hasOwnProperty(key)) {
    
     //过滤掉该对象原型链上属性
			result[key] = typeof obj[key] == 'object' ? arguments.callee(obj[key]) : obj[key];
		}
	}
	return result;
}
let e = clone(obj); // e和obj对象指向的地址不一样

// 同样的,数组扁平化处理,将多维数组展开成一维数组,如果需要去重或排序可以用[...new Set(arr)]和sort((a,b) => {return a - b;})
//数组去重和排序的方法很多建议都去了解掌握一下,常问的有冒泡,快速排序以及选择排序
let arr = [1,[2,3,[4,5,[6,7,[8]]]]];
// 方法一es6的flat方法,注意:js是由BOM,DOM,ECMAScript(简称es)三部分组成
let newArr = arr.flat(Infinity);
// 方法二 toSting实现,转成字符串,在截取成数组,这时每一项还是字符串,再把它转成数字
let newArr1 = arr.toString().split(',').map(Number);
// 方法三 递归实现,和克隆对象一样,判断该项是否为数组,为数组继续递归
......

7. console.log (['1', '2', '3']. Map (parseInt)) ;? ? ? ? ¿Conoces el resultado? A primera vista, puede responder [1,2,3] directamente. Felicitaciones. Obtuvo la respuesta incorrecta. La respuesta es [1, NaN, NaN]. Le sugiero que eche un vistazo al método parseInt (string, radix).

8. ¿Puedes hablar sobre el modelo de caja?
Hay dos tipos de modelos de caja, es decir, modelo de caja y modelo de caja estándar W3C. El modelo de caja ie también se llama modelo de caja extraño. Su ancho incluye borde, relleno y contenido. El ancho del modelo de caja W3C es solo el ancho del contenido. El cambio entre los dos es: tamaño de caja: caja de borde; tamaño de caja: caja de contenido; caja de contenido predeterminada del navegador (modelo de caja estándar W3C).

9. ¿Qué sucedió con la entrada de URL en la barra de direcciones?
a. resolución de nombre de dominio dns
b. establecer conexión tcp / ip
c. enviar solicitud http
d. devolver datos de respuesta, renderizado de front-end
e. cerrar conexión
10.
0.1 + 0.2 == 0.3? La respuesta es obvia, definitivamente no es igual, hay lugares decimales después de la suma flotante, y el resultado de 0.1 + 0.2 es 0.30000000000000004

Supongo que te gusta

Origin blog.csdn.net/qq_42671194/article/details/108715068
Recomendado
Clasificación