1. The value and reference problem, see the output result of the following code
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. Let's take a look at the problem of closures. What is a closure? An internal function calls an external variable. The variable will not be released after the function is executed, forming a closure. Reasonable use of closures, closures are likely to cause memory leaks.
// 闭包问题，一秒后输出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. Briefly describe the browser's garbage return mechanism?
In the previous IE browsers, the garbage collection mechanism used the reference counting method, that is, in the program execution, the number of declarations or references is increased by one, and the same is true for the re-declaration once, and the number of times is reduced by one, when it is 0 At that time, he will be cleared and recycled by the browser. This approach exposes a problem, that is, if the variable refers to itself or is cyclically referenced, it will not be marked as 0, and will not be recycled by the browser; therefore, mainstream browsers currently use the mark removal method to do this. Garbage collection, that is, the variable that the program currently depends on is marked as entering the environment. When the method is executed, the variable is marked as leaving the environment, so the ones that leave the environment are naturally recycled.
4. How to draw a triangle in css? (The essence of a pixel is composed of four triangles)
.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. Function anti-shake (many searches and new and changed interfaces in the project need to do function anti-shake processing to prevent users from clicking the button and adjusting the interface all the time when the user's network card is used, and the database may enter dirty data)
data() {
return {
timer: null
}
}
// 当你在间隔的时间内连续一直点击按钮执行这个方法，它每次进来都先清理定时器，所以逻辑代码并没有执行，等你停止点击，它会执行最后一次的定时器任务
function add() {
this.timer = null; // 每次点击这个方法，就把定时器里的代码清理
this.timer = setTimeout(() => {
// 这里执行程序的逻辑代码以及调接口
}, 300);
}
6. A series of problems caused by object cloning.
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));? ? ? ? Do you know the result? At first glance, you can answer [1,2,3] directly. Congratulations. You got the wrong answer. The answer is [1,NaN,NaN]. I suggest you take a look at the parseInt(string, radix) method.
8. Can you talk about the box model?
There are two types of box models, ie box model and W3C standard box model. The ie box model is also called weird box model. Its width includes border, padding, and content. The width of W3C box model is only the width of the content. The switch between the two is: box-sizing: border-box; box-sizing: content-box; the browser default content-box (W3C standard box model).
9. What happened to the URL input in the address bar?
a. dns domain name resolution
b. establish tcp/ip connection
c. send http request
d. return response data, front-end rendering
e. close connection
10.
0.1 + 0.2 == 0.3? The answer is obvious, definitely not equal, there are decimal places after float addition, and the result of 0.1 + 0.2 is 0.30000000000000004