2024年最全Javascript 里的奇葩知识，通用流行框架大全

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在实例化构造函数时，返回非对象类型将不生效

4

.call.call 到底在为谁疯狂打call？

function fn1() {

console.log(1);

}

function fn2() {

console.log(2);

}

fn1.call.call(fn2); // 2

所以 fn1.call.call(fn2) 等效于 fn2.call(undefined)。而且无论您加多少个 .call，效果也是一样的。

5

实例后的对象也能再次实例吗？

function People() {}

const lili = new People();            // People {}

const lucy = new lili.constructor();   // People {}

因为lili的原型链指向了People的原型，所以通过向上寻找特性，最终在 Peopel.prototype 上找到了构造器即 People自身

6

setTimeout 嵌套会发生什么奇怪的事情？

console.log(0, Date.now());

setTimeout(() => {

console.log(1, Date.now());

setTimeout(() => {

console.log(2, Date.now());

setTimeout(() => {

console.log(3, Date.now());

setTimeout(() => {

console.log(4, Date.now());

setTimeout(() => {

console.log(5, Date.now());

setTimeout(() => {

console.log(6, Date.now());

});

});

});

});

});

});

在0-4层，setTimeout的间隔是1ms，而到第5层时，间隔至少是4ms。

7

es6函数带默认参数时将生成声明作用域

var x = 10;

function fn(x = 2, y = function () { return x + 1 }) {

var x = 5;

return y();

}

fn();   // 3

8

函数表达式（非函数声明）中的函数名不可覆盖

const c = function CC() {

CC = 123;

return CC;

};

c(); // Function

当然，如果设置var CC = 123，加声明关键词是可以覆盖的。

9

严格模式下，函数的this是undefined而不是Window

// 非严格

function fn1() {

return this;

}

fn1(); // Window

// 严格

function fn2() {

‘use strict’;

return this;

}

fn2(); // undefined

对于模块化的经过webpack打包的代码，基本都是严格模式的代码。

10

–

取整操作也可以用按位操作

var x = 1.23 | 0; // 1

因为按位操作只支持32位的整型，所以小数点部分全部都被抛弃

11

–

indexOf() 不需要再比较数字

const arr = [1, 2, 3];

// 存在，等效于 > -1

if (～arr.indexOf(1)) {

}

// 不存在，等效于 === -1

!~arr.indexOf(1);

按位操作效率高点，代码也简洁一些。也可以使用es6的includes()。但写开源库需要考虑兼容性的道友还是用indexOf比较好

12

–

getter/setter 也可以动态设置吗？

class Hello {

_name = ‘lucy’;

getName() {

return this._name;

}

// 静态的getter

get id() {

return 1;

}

}

const hel = new Hello();

hel.name;       // undefined

hel.getName();  // lucy

// 动态的getter

Hello.prototype.defineGetter(‘name’, function() {

return this._name;

});

Hello.prototype.defineSetter(‘name’, function(value) {

this._name = value;

});

hel.name;       // lucy

hel.getName();  // lucy

hel.name = ‘jimi’;

hel.name;       // jimi

hel.getName();  // jimi

13

–

0.3 - 0.2 !== 0.1 // true

浮点操作不精确，老生常谈了，不过可以接受误差

0.3 - 0.2 - 0.1 <= Number.EPSILON // true

14

–

class语法糖到底是怎么继承的？

function Super() {

this.a = 1;

}

function Child() {

// 属性继承

Super.call(this);

this.b = 2;

}

// 原型继承

Child.prototype = new Super();

const child = new Child();

child.a;  // 1

正式代码的原型继承，不会直接实例父类，而是实例一个空函数，避免重复声明动态属性

const extends = (Child, Super) => {

const fn = function () {};

fn.prototype = Super.prototype;

Child.prototype = new fn();

Child.prototype.constructor = Child;

};

15

–

es6居然可以重复解构对象

const obj = {

a: {

b: 1

},

c: 2

};

const { a: { b }, a } = obj;

一行代码同时获取a和a.b。在a和b都要多次用到的情况下，普通人的逻辑就是先解构出a，再在下一行解构出b。

16

–

判断代码是否压缩居然也这么秀

function CustomFn() {}

const isCrashed = typeof CustomFn.name === ‘string’ && CustomFn.name === ‘CustomFn’;

17

–

对象===比较的是内存地址，而>=将比较转换后的值

{} === {} // false

// 隐式转换 toString()

{} >= {}  // true

18

–

intanceof 的判断方式是原型是否在当前对象的原型链上面

function People() {}

function Man() {}

Man.prototype = new People();

Man.prototype.constructor = Man;

const man = new Man();

man instanceof People;    // true

// 替换People的原型

People.prototype = {};

man instanceof People;    // false

如果您用es6的class的话，prototype原型是不允许被重新定义的，所以不会出现上述情况

19

–

Object.prototype.proto === null; // true

这是原型链向上查找的最顶层，一个null

20

–

parseInt太小的数字会产生bug

parseInt(0.00000000454);  // 4

parseInt(10.23);          // 10

21

–

1 + null          // 1

1 + undefined     // NaN

Number(null)      // 0

Number(undefined) // NaN

22

–

arguments和形参是别名关系

function test(a, b) {

console.log(a, b); // 2, 3

arguments[0] = 100;

arguments[1] = 200;

console.log(a, b); // 100, 200

}

test(2, 3);

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。