直通互联网大厂前端面试系列（二）——JS / ES6+

最新推荐文章于 2024-05-11 12:21:17 发布

冲向超级个体

最新推荐文章于 2024-05-11 12:21:17 发布

阅读量1.6k

点赞数 6

文章标签：前端面试 JS es6 前端基础

本文链接：https://blog.csdn.net/zhaolandelong/article/details/88564665

版权

传送门

写在前面

JavaScript = ECMAScript + DOM（文档对象类型） + BOM（浏览器对象类型）。我们的重头戏来了，因为JS的内容实在太多了，所以我把算法、框架、网络部分的内容都放到了后面的分类里，这样也有利于我们的聚焦。
ES的变化可谓相当之快，2015年后每年一个版本（BOM和DOM相对变化不大）。多亏了babel，我们可以很愉快的使用ES的最新特性，而不用考虑兼容性的问题，相应的，我们每年都要学习一些新的语法。既然选择了前端，那持续学习是跑不了的了，同学们做好心理准备，心里默念，我们是最~~pang~~棒的！

长期如何学习

如果你之前有过编码经验，那么你一定知道我下面说的有多重要

深入底层原理，JS也是一门编程语言，只要是编程语言其本质一定是相通的，这一点无论学习任何一种语言都是必然的。虽然是老生常谈，但是真理往往都是经得住岁月考验的。你理解的深度，决定了你以后的高度，出来混迟早要还的，缺的课早晚要补回来的。
注意编码规范，建议越早使用eslint越好，推荐最严格的airbnb的标准，它可以非常有效地规范你的代码风格。良好的代码风格能够让你少写bug，快速修复bug，让别人替你修完bug少骂几句娘。就冲这几点！够不够？！够不够？！
多看经典的书，看书绝对是提升自己思维高度的最佳途径。私以为经过了一段时间的实战，再去看书，才是最有效果的。因为这时候是带着问题去看书的，每当看到与问题相呼应的地方，一定会有一种茅塞顿开的感觉，记忆尤其深刻。对于新手来说，多加练习反而才是重要的，要在实战中多积累问题，多思考，这也算是一种厚积薄发。不过呢，有些书即使是新手也是必须看的，“前端圣经”系列要是没看过的话，实在是有点说不过去了。另外，针对老鸟，我推荐两本让我记忆深刻的书《鸟哥的linux私房菜》、《码农翻身》。

短期如何突击

短期能突击的，就是几个最容易考的难点，无论你是老鸟还是菜鸟，面试前最好都突击一下，这些必考：

js数据类型及判断
闭包与作用域
this与执行上下文
原型链与继承（原型、构造函数、实例）
异步任务
ES6+常用特性

别看知识点就这么几个，围绕着它们出的题可谓变化无穷，想当年我随便见到它们其中一个，都会腿发抖。那么让我们来看一下它们能变化到什么程度

临阵如何磨枪

JS的题一定是占了面试绝大部分内容的，毕竟平时80%以上的开发时间都是用的它，最后强调一遍，下面的题，一定要保证每个知识点都弄明白了，这些题值得反复地做。不怕做的慢，一定不要自欺欺人。哪怕一天能啃下来一道题，也是可以接受的。

请说出以下代码打印的结果

if (1 == true) {console.log(1);};

if (1 === true ) {console.log(2);};

if ([]) {console.log(3);};

if ([] == []) {console.log(4);};

if ([] === []) {console.log(5);};

if (undefined == null) {console.log(6);};

if ('' == null) {console.log(7);};

if (NaN == NaN) {console.log(8);};

追问：

JS的数据类型有哪些？哪些是引用类型？它们有什么特点？
什么是浅拷贝?什么是深拷贝？请用JS实现一个深拷贝
如何判断数组类型？方法越多越好
typeof 和 instanceof 有什么区别？
== 和 === 有什么区别？==时发生了什么？
函数中的 arguments 是数组吗？若不是，如何将它转化为真正的数组
请说下Array的forEach、map、every、some、filter、reduce各有什么功能
如何遍历一个对象？方法越多越好

以下代码的结果是什么？请解释你的答案。

var fullname = 'John Doe';
var obj = {
  fullname: 'Colin Ihrig',
  prop: {
    fullname: 'Aurelio De Rosa',
    getFullname: function () {
      return this.fullname;
    }
  }
};
 
console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

实现Function.prototype.bind方法，使得以下程序最后能输出’success’

function Animal(name, color) {
  this.name = name;
  this.color = color;
}
Animal.prototype.say = function () {
  return `I'm a ${this.color} ${this.name}`;
};
const Cat = Animal.bind(null, 'cat');
 
const cat = new Cat('white');
 
if (cat.say() === 'I\'m a white cat' && cat instanceof Cat && cat instanceof Animal) {
  console.log('success');
}

追问：

bind、call和apply有什么区别？
什么是闭包？请实现一个“有缓存功能”的加法
请用JS实现throttle（函数节流）函数。函数节流解释: 对函数执行增加一个控制层，保证一段时间内（可配置）内只执行一次。此函数的作用是对函数执行进行频率控制，常用于用户频繁触发但可以以更低频率响应的场景
debounce和throttle的区别？请用JS实现debounce
es6中的箭头函数与普通函数有什么区别？

请用至少2种方法，实现Cat继承Animal的属性，并比较各方法的优缺点

function Animal() {　　　　
    this.species = "动物";　　
}

function Cat(name, color) {　　　　
    this.name = name;　　　　
    this.color = color;　　
}

追问：

什么是原型链？什么是原型对象？
JS的最顶层对象是什么？它的原型对象是什么？
什么是构造函数？什么是实例？
如何通过一个实例访问它的构造函数及原型对象？
new一个实例，经历了什么过程？
es6中的static的作用是什么？用es5如何实现？

以最小的改动解决以下代码的错误（可以使用es6）

const obj = {
  name: " jsCoder",
  skill: ["es6", "react", "angular"],
  say: function () {
    for (var i = 0, len = this.skill.length; i < len; i++) {
      setTimeout({
        console.log('No.' + i + this.name);
        console.log(this.skill[i]);
        console.log('--------------------------');
      }, 0);
      console.log(i);
    }
  }
};
obj.say();
 
/*
期望得到下面的结果:
1
2
3
No.1 jsCoder
es6
--------------------------
No.2 jsCoder
react
--------------------------
No.3 jsCoder
angular
--------------------------
*/

追问：

如果不修改，会打印出什么结果？
let、const、var有什么区别？
什么是函数作用域？还有什么其他作用域？如何工作的？

请说出以下代码打印的结果

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');