introduction
Gold, three silver and four specially arrange a face questions, are presented herein Features:
1, suitable for front-end, it is necessary to find a job interview
2, graduating faced internship, gain experience
3, from a pragmatic basis to thoroughly understand
4, explore the framework source code, Research essential front-end algorithm
5, Watch Ali, Tencent, the US group, today headlines and other manufacturers of the original title, the gradual introduction of
6, completion of the resume that is ready to vote
How BAT / TMD is such a big company interview
Note wailing, where TMD is not a curse, then, oh, maybe you know BAT, TMD but you know what? (Do not rush to Baidu know!)
New Internet giant country after the T (Today's headlines) M (US group) D (drops) became the BAT
Face questions introduced
1.BAT pen questions in a few questions about the stack memory and closures scope
Readers can have a good experience at the following three examples, you can try to run it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试</title>
</head>
<body>
<script>
//ex1
let a={},b='0',c=0;
a[b]='超逸';
a[c]='博客';
console.log(a[b]);
//ex2
/*let a={},b=Symbol('1'),c=Symbol('1');
a[b]='超逸';
a[c]='博客';
console.log(a[b]);*/
//ex3
/*let a={},b={n:'1'},c={m:'2'};
a[b]='超逸';
a[c]='博客';
console.log(a[b]);*/
</script>
</body>
</html>
ex1: Digital attribute name == string attribute name in the heap was covered
ex2: Symbol is used to create unique value of
the object is not necessarily the attribute name string, such as the following, there may be a Symbol
ex3: All objects, toString () The results are as follows
So, and as ex1, were covered
From the above three examples, but also to expand:
ex1: the difference between arrays and objects
ex2: Handwritten Symbol
ex3：Object.prototype.toString()应用 / valueof
Next, the next question (note that there are pit):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
var test=(function(i){
return function(){
alert(i*=2);
}
})(2);
test(5);
</script>
</body>
</html>
Function is executed immediately above custom function
Answer: string 4 (A4 loose !!!)
next question
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
var a=0,b=0;
function A(a){
A = function (b){
alert(a + b++);
};
alert(a++);
}
A(1);
A(2);
</script>
</body>
</html>
Answer: string 1 and 4 (1 and 4 A loose !!!)
In fact, the above three questions is "appetizer" is to elicit the following questions
2. objects (array) deep and shallow copy copy (headlines)
- Shallow copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
let obj = {
a: 100,
b: [10,20,30],
c: {
x: 10
},
d: /^\d+$/
};
//浅拷贝 ES6以前做法
let obj2 = {};
for(key in obj){
//确定私有，不克隆原型上的
if(!obj.hasOwnProperty(key)) continue;
obj2[key]=obj[key];
}
console.log(obj,obj2);
/*ES6中的浅拷贝*/
let obj3={
...obj
};
console.log(obj3);
</script>
</body>
</html>
Only a shallow copy clone-dimensional object that is key, but if there is an object inside the object, problems arise:
Shallow copy problem brought out a copy of a modifies the value of the original address
- Deep copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
let obj = {
a: 100,
b: [10,20,30],
c: {
x: 10
},
d: /^\d+$/
};
//缺点：函数，正则等会出现问题
let obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2);
</script>
</body>
</html>
Problems caused by, give chestnut:
the above conversion process, only for Number, String, Boolean, null these four basic types
Another approach: similar shallow copy, but if it is multidimensional recursive operation (here only exemplary, and similar function)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
let obj = {
a: 100,
b: [10,20,30],
c: {
x: 10
},
d: /^\d+$/
};
function deepClone(obj){
//过滤特殊情况
if(obj === null) return null;
if(typeof obj !== 'object') return obj;
if(obj instanceof RegExp){
return new RegExp(obj);
}
if(obj instanceof Date){
return Date(obj);
}
//不直接创建空对象目的：因为克隆的结果和之前保持相同的所属类
let newObj = new obj.constructor;
for(key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = deepClone(obj[key]);
}
}
return newObj;
}
let obj2=deepClone(obj);
console.log(obj,obj2);
console.log(obj === obj2);
console.log(obj.c === obj2.c)
</script>
</body>
</html>
3. a face questions about object-oriented bloodshed triggered (Ali)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
function Foo(){
getName=function(){
console.log(1);
};
return this;
}
Foo.getName = function (){
console.log(2);
};
Foo.prototype.getName = function (){
console.log(3);
};
var getName = function(){
console.log(4);
};
function getName(){
console.log(5);
}
Foo.getName();
getName();
Foo().getName();
getName();;
new Foo.getName();
new Foo().getName();
new new Foo().getName();
</script>
</body>
</html>
This problem is particularly valuable, relevant variables upgrade, js operator precedence, etc.
The so-called variable lift, is var and function of this era, in the current execution context, before any code is executed, brings us var, in advance of the declaration function keys (creation) and definitions (assignments), can declare with var advance, + statement with function can be directly defined.
Foo (). GetName () wherein two steps, Foo () represents a normal function performed
new Foo.getName (); // no parameter represents new
new Foo () getName ();. // new parameters expressed
Combined with the above table, new Foo.getName (); access to members of the Executive Foo.getName () and then new
new Foo () getName ();. XXX to give new first performed (at this time to give an example, instance to see if on the prototype), then xxx.getName ()
new new Foo().getName();
First implementation of new Foo () to get an instance of xxx, this time new xxx.getName () at this time is no parameter list, then the first operator member access xxx.getName () (that is, to find the prototype) and then get 3 new results do not change
Output:
4. a face questions allow you to completely grasp the JS in the Event Loop (headlines)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挑战js面试题</title>
</head>
<body>
<script>
async function async1(){
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2(){
console.log('async2');
}
console.log('script start');
setTimeout(function(){
console.log('setTimeout');
},0)
async1();
new Promise(function (resolve){
console.log('promise1');
resolve();
}).then(function(){
console.log('promise2');
});
console.log('script end');
</script>
</body>
</html>
Browser is multi-threaded, single-threaded and js
In order to solve the problem of synchronous and asynchronous browser provides an event queue Event Queue, depending on the features, divided into micro and macro task queue task
Order of execution: main thread Code> micro Tasks> macrotask
output:
Macro Task:
For example timer setTimeout (asynchronous), the event binding
Micro tasks:
await (asynchronous, performing a function of x and wait for its return, the outcome then execute the code below)resolve () / reject (), when executed by the then / catch code executionpromise、async
new Promise (synchronous) will be executed immediately
学如逆水行舟，不进则退
