2020大厂JS底层原理~最热乎~面试题及答案(画图解析),你被问到了吗?不多,但是能帮你...(一)

750 阅读5分钟

喜欢的宝宝请点击关注,关注作者不迷路哦~

备注:个别难理解的我画图解析,简单的、好理解的我文字阐述哦~

**面试题1:**
console.log([]==false)
console.log(![]==false)
复制代码
复制代码
复制代码

解析:

1.如果两遍类型不一样,他有一套自己的标准:对象跟字符串比较是对象转化为字符串,对象==布尔,都转化为数字。
对象转化为数字(隐式转换):先toString转换为字符串(应该是先基于valueOf获得原始值,没有原始值再去toString),再转化为数字的。
数组转换为数字:[]->' '->0 (空数组转化为字符串是空字符串,空字符串转化为数字就是0)
具体步骤:[].valueOf()获得原始值,原始值要不是基本类型值,就说明他没有原始值,没有原始值就[].toString(),变成"",Number("")结果就是0
false转化为数字是0,true转化为数字:1
2.js中==等号的优先级比!优先级低
![] 是把数组转换为布尔类型然后取反,因为只有 ‘0、NaN、null、undefined、空字符串’ 五个值会变为布尔的FALSE,其余都是TRUE,[]不是这5个值,所以,转换成true,!true就是false

2.面试题:

let res = parseFloat('left:200px');
if(res===200){
   alert(200);
}else if(res===NaN){
   alert(NaN);
}else if(typeof res==='number'){
   alert('number');
}else{}
复制代码
复制代码
复制代码

解析:

parseInt机制:从字符串左侧第一个字符开始查找有效数字字符(遇到非有效数字字符停止查找,不论后面是否还有数字字符,都不再找了,把找到的有效数字字符转换为数字,如果一个都没找到,结果就是NaN(parseFloat比他多识别一个小数点))
所以res是NaN,因为NaN!==NaN(原理在内存住的地址不同);

又因为NaN是非数字,但是他是Number类型,所以结果是'number'不是number

为什么是字符串呢?因为alert 、document输出的都是字符串

![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/545bcea5cd7747f48dba573e9311034f~tplv-k3u1fbpfcp-zoom-1.image)

面试题3.

var a={}, b='0', c=0;  
a[b]='123';
a[c]='568';  
console.log(a[b]);
复制代码
复制代码
复制代码

答案:568

面试题4:

var a={}, b=Symbol('1'), c=Symbol('1');  
a[b]='1';
a[c]='2';  
console.log(a[b]);
复制代码
复制代码
复制代码

答案:1

解析:Symbol是创建唯一值

面试题5:

var a={}, b={n:'1'}, c={m:'2'};  
a[b]='11';
a[c]='2';
console.log(a[b]);
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b);
复制代码
复制代码
复制代码

答案:

2

undefined

{n: 1, x: {…}}

解析:

a[b]='11';=>a[object Object]='11'

a[c]='2';=>a[object Object]='2'

后者覆盖前者,所以console.log(a[b]);是2

面试题6:

let a=12;
let b=13;
function func(){
    let a=1;
    let b=2;
}
console.log(a,b)
复制代码
复制代码
复制代码

答案:报错:Uncaught SyntaxError: Identifier 'a' has already been declared

面试题7:

function Func(x, y) {
    let total = x + y;
    this.result = total;
    this.say = function () {};
}
let f1 = new Func(10, 20);
console.log(f1);
console.log(f1.total); 
console.log(f1.result); 
let f2 = new Func();
console.log(f2);
console.log('say' in f1)
复制代码
复制代码
复制代码

答案:

Func {result: 30, say: ƒ}

undefined

Func {result: NaN, say: ƒ}

true

画图帮你理解原理:

面试题8:(百度二面)实现函数fn,让其具有如下功能

let res = fn(1,2)(3);

console.log(res); //=>6  1+2+3
复制代码
复制代码
复制代码

答案解析:

function compose(...funcs) {  // FUNCS:存储按照顺序执行的函数(数组) =>[fn1, fn3, fn2, fn4]  return function anonymous(...args) {    // ARGS:存储第一个函数执行需要传递的实参信息(数组)  =>[20]    if (funcs.length === 0) return args;    if (funcs.length === 1) return funcs[0](...args);    return funcs.reduce((N, func) => {      // 第一次N的值:第一个函数执行的实参  func是第一个函数      // 第二次N的值:上一次func执行的返回值,作为实参传递给下一个函数执行      return Array.isArray(N) ? func(...N) : func(N);    }, args);  };}let res = compose(fn1, fn3, fn2, fn4)(20, 30); //compose(fn1, fn3, fn2, fn4)函数执行,他的返回值紧接着再执行(20,30)console.log(res);
复制代码
复制代码
复制代码

面试题9:实现函数fn,让其具有如下功能(百度二面)

在函数式编程当中有一个很重要的概念就是函数组合, 实际上就是把处理数据的函数像管道一样连接起来, 然后让数据穿过管道得到最终的结果。 例如:
    const add1 = (x) => x + 1;
    const mul3 = (x) => x * 3;
    const div2 = (x) => x / 2;
    div2(mul3(add1(add1(0)))); //=>3
    而这样的写法可读性明显太差了,我们可以构建一个compose函数,它接受任意多个函数作为参数(这些函数都只接受一个参数),然后compose返回的也是一个函数,达到以下的效果:
    const operate = compose(div2, mul3, add1, add1)
    operate(0) //=>相当于div2(mul3(add1(add1(0)))) 
    operate(2) //=>相当于div2(mul3(add1(add1(2))))
    简而言之:compose可以把类似于f(g(h(x)))这种写法简化成compose(f, g, h)(x),请你完成 compose函数的编写 
复制代码
复制代码
复制代码

答案详解:

/*
 * compose:组合函数,把多层函数嵌套调用扁平化
 */
const fn1 = (x, y) => x + y + 10;
const fn2 = (x) => x - 10;
const fn3 = (x) => x * 10;
const fn4 = (x) => x / 10;

// let res = fn4(fn2(fn3(fn1(20))));
// console.log(res);

function compose(...funcs) {
  // FUNCS:存储按照顺序执行的函数(数组) =>[fn1, fn3, fn2, fn4]
  return function anonymous(...args) {
    // ARGS:存储第一个函数执行需要传递的实参信息(数组)  =>[20]
    if (funcs.length === 0) return args;
    if (funcs.length === 1) return funcs[0](...args);
    return funcs.reduce((N, func) => {
      // 第一次N的值:第一个函数执行的实参  func是第一个函数
      // 第二次N的值:上一次func执行的返回值,作为实参传递给下一个函数执行
      return Array.isArray(N) ? func(...N) : func(N);
    }, args);
  };
}
let res = compose(fn1, fn3, fn2, fn4)(20, 30); //compose(fn1, fn3, fn2, fn4)函数执行,他的返回值紧接着再执行(20,30)
console.log(res);
复制代码
复制代码
复制代码
这是我的朋友、同事、以及同学去大厂的面试题,我总结了一下,还有很多没有总结完,后面有空继续总结哦~

敬请期待(二)~

喜欢的宝宝请点击关注,关注作者不迷路哦~