Recently, go out and interviewed several companies, thus recording what impresses me the right questions:
Achieve const functions under ES5 (objects and arrays also asked whether the modification of the definition of const why)
var const_=function (varName,value){
window.varName=value;
Object.defineProperty(window,varName,{
enumerable:false,
configurable:false,
get:function(){
return value;
},
set:function(data){
if(data!==value){
throw new TypeError('不允许修改');
}else{
return value;
}
}
})
}
const_('a',20);
a=30;//报错vue is how to achieve two-way binding data (in fact, the above problem is a knowledge point)
The above method is the same, get and set objects on the monitor to achieve when modifying data in a timely manner to determine whether the update is needed. This is also why every console vue data is printed are getter and setter specific code is not written, about the same
Pure function and relates to react
Standard pure function definition can Baidu, my understanding is: what to eat what spit, or shine, React the pure components (or a functional component) is a pure function, show me what I view what data, steady thief . Another example Redux in reducer is a pure function, responsible for processing the data provided by action. React document said that once, react particularly obsessed with pure function.
Questions about data conversion (this type of question asked both companies, the feeling is more crucial point)
This is really did not expect that a year ago I did not interview when this type of problem, feel not very good answer. . . Mentality burst ah
Let me give an example of the second company it:
You return back to the data is: [{: 2000, month: 1, day: 11, birth: 200 year}], the number of month of birth, and the proportion of this format is calculated each year in the year, and can in the view show
假设初始数据是：
arr: [
{year:2000,month:1,day:11,birth:200},
{year:2000,month:1,day:11,birth:20},
{year:2010,month:2,day:22,birth:100},
{year:2000,month:1,day:11,birth:200},
{year:2012,month:3,day:11,birth:200},
{year:2004,month:4,day:11,birth:200},
{year:2013,month:10,day:11,birth:200},
{year:2017,month:7,day:11,birth:200},
{year:2019,month:7,day:11,birth:200},
{year:2018,month:8,day:11,birth:200},
{year:2005,month:12,day:11,birth:200},
{year:2005,month:11,day:11,birth:200},
{year:2004,month:1,day:11,birth:200},
{year:2000,month:10,day:11,birth:200},
{year:2016,month:11,day:11,birth:200},
];
// 不使用lodash
let years=arr.map(item=>item.year);
let yearsUnique=[...new Set(years)];
let yearMonths=yearsUnique.map(item=>{
var monthArr=[];
var yeartotal=0;
arr.map(citem=>{
if(citem.year==item){
yeartotal+=citem.birth;
if(monthArr.length<=0){
monthArr.push({month:citem.month,birth:citem.birth});
}else{
monthArr.forEach((mitem,index)=>{
if(mitem.month==citem.month){
monthArr[index].birth=citem.birth+mitem.birth;
}else{
monthArr.push({month:citem.month,birth:citem.birth});
}
})
}
}
})
monthArr.forEach(item=>{
item.precent=(Math.round((item.birth/yeartotal)*100))+'%'
})
return {year:item,month:monthArr,yearBirth:yeartotal};
})
// 最终结果
[
{
"year": 2000,
"month": [
{ "month": 1, "birth": 420, "precent": "68%" },
{ "month": 10, "birth": 200, "precent": "32%" }
],
"yearBirth": 620
},
{
"year": 2010,
"month": [
{ "month": 2, "birth": 100, "precent": "100%" }
],
"yearBirth": 100
},
.
.
.
]
// 使用lodash
const yearsMonths=arr.map(item=>{
return {year:item.year,month:item.month}
});
const yearsMonthsUnique=_.uniqWith(yearsMonths,_.isEqual);
let res=yearsMonthsUnique.map(item=>{
var yeartotal=0;
var monthTotal=0;
arr.map(citem=>{
if(item.year==citem.year){
yeartotal+=citem.birth;
if(item.month==citem.month){
monthTotal+=citem.birth;
}
}
})
return {year:item.year,month:item.month,yearBirth:yeartotal,monthBirth:monthTotal};
})
res.sort(function(prev,next){
if(prev.year===next.year){
return prev.month-next.month;
}else{
return prev.year-next.year;
}
})
// 最终结果(percent 再map一遍即可)
[
{ "year": 2000, "month": 1, "yearBirth": 620, "monthBirth": 420 }
{ "year": 2000, "month": 10, "yearBirth": 620, "monthBirth": 200 }
{ "year": 2004, "month": 1, "yearBirth": 400, "monthBirth": 200 }
{ "year": 2004, "month": 4, "yearBirth": 400, "monthBirth": 200 }
{ "year": 2005, "month": 11, "yearBirth": 400, "monthBirth": 200 }
{ "year": 2005, "month": 12, "yearBirth": 400, "monthBirth": 200 }
{ "year": 2010, "month": 2, "yearBirth": 100, "monthBirth": 100 }
{ "year": 2012, "month": 3, "yearBirth": 200, "monthBirth": 200 }
{ "year": 2013, "month": 10, "yearBirth": 200, "monthBirth": 200 }
{ "year": 2016, "month": 11, "yearBirth": 200, "monthBirth": 200 }
{ "year": 2017, "month": 7, "yearBirth": 200, "monthBirth": 200 }
{ "year": 2018, "month": 8, "yearBirth": 200, "monthBirth": 200 }
{ "year": 2019, "month": 7, "yearBirth": 200, "monthBirth": 200 }
]To be honest, these data conversion problem sometimes is really burning brain, feeling around thief
About closures
It is also a problem: f () = ''; f ( 'a') () = 'a'; f ( 'a') ( 'b') () = 'ab'; f ( 'a') ( ' b ') (' c ') () =' abc '····· implement a function similar to that of
function ff(s){
var str='';
function f(params){
if(params){
str+=params;
return arguments.callee;
}else{
return str;
}
}
return f(s);
}
ff('a')('b')('c')()//'abc'
// 这个主要是考察对闭包的理解2019-08-23
Browser caching
Browser cache that when you visit the page or send a get request, the browser will remember the contents of the current output, when again by the same URL time of the visit, the browser will decide whether to use a cached copy responds according caching mechanism. For example, when you visit a page, accessible through the same URL again, the output does not change if the contents of the page, the browser will use the cached copy.
Clear your browser cache of some of the ways:
1. Set meta tags so that each visit will reload the page when the content of the page, instead of using the cached copy
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">2. send get request, retrieve data in response to a request by setting up
$.ajax({
url:'请求路径',
dataType:'json',
type:'get',//默认值即为get
data:{},
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
}
});3. Each time a request is sent, followed by a different url query parameters, when url is not the same, not to use a cached copy. For example, after adding a random number request path, a timestamp or the like.
react higher-order component, seen those higher-order components
Receiving a high-order component is the component as a parameter, returns a final component, i.e. the existing components expand or otherwise modify. Implementation of high-order components are mainly two: 1 property broker, by modifying the props covering the receiving component of its re-rendering 2. Reverse inheritance, modify components through inheritance received by their props, method
redux of the method is to connect a high-level components, react-router is also used in the higher-order components
Difference react pure components and common components
Pure components to achieve a shouldUpdateComponent own method, relatively shallow props and state, if there is no change, then will not be render;
Ordinary components need to manually implement shouldUpdateComponent
react difference and the corresponding version of the life cycle of change
Recursive and non-recursive factorial were achieved
instanceof related usage
What happened from the browser to render the page url input
Why browser to block cross-domain requests
Without using the JSON.stringify () converts the complex object is achieved string
Two ordered arrays to implement a function that returns the number of digits after the merger of two arrays
‘use strict’;
function a(){
this.x=1;
console.log(this);
}
function b(fn){
fn();
}new a();
a();
b(a);
What is the difference output
console.log('one');
setTimeout(function(){
console.log('two');
},0);
Promise.resolve().then(function(){
console.log('three');
})
console.log('four');
What order is the output?
Continuous update. . . .
