400-616-5551

您所在位置: 首页> 学习课程> Web前端培训 | 2020年前端面试必考点,你必须看看!

Web前端培训 | 2020年前端面试必考点,你必须看看!

发布百知教育 来源:学习课程 2019-11-19

距2019年底还有不到50天,马上又到了要为跳槽面试做准备的时候。


最近收到好多读者朋友们的反馈,说前阵子去面试了几次发现,不管大公司还是小公司,都特别喜欢问跟ES6有关的问题,比如:



  • 使用箭头函数应该注意什么?
  • 介绍下set、map的区别?
  • promise构造函数是同步执行还是异步执行,那么then方法呢?


等等。
确实,ES6的相关问题是大厂技术leader比较喜欢问的,因为能通过回答来摸清你知识技能的广度和深度。可以说不懂ES6,折在技术面试上的概率很大!


ECMAScript 6(以下简称ES6)是 JS 语言的下一代标准,已经在20156月正式发布了。它的目标,是使得 JS 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。接下来咱们来看看 20 道棘手的面试题,通过做题,顺带提升一下咱们的 JS 的技能。


问题1:可以解释一下 ES5 和ES6的区别吗?


主题: JavaScript 难度: ⭐⭐⭐



以下是ES5和ES6之间的一些主要区别:


箭头函数和字符串插值


const greetings = (name) => {  return `hello ${name}`;}


constconst 表示无法修改变量的原始值。需要注意的是,const表示对值的常量引用,咱们可以改变被引用的对象的属性值,但不能改变引用本身。


const names = []

names.push("jin")

console.log(names.length === 1) //true

names = ["steve", "jion"] // error


块作用域:ES6 中 letconst 会创建块级作用域,不会像 var 声明变量一样会被提升。


默认参数:默认参数使咱们可以使用默认值初始化函数。当参数省略或 undefined 时使用默认参数值。


function multipty (a, b = 2 ){    return a + b}
multipty(5// 7


类定义与继承

ES6 引入了对类(class关键字)、构造函数(constructor关键字)和 extend 关键字(用于继承)的语言支持。

for-of 运算符

for...of 语句创建一个遍历可迭代对象的循环。

展开操作符


const obj1 = { a: 1, b: 2 }

const obj2 = { a: 2, c: 3, d: 4}

const obj3 = {...obj1, ...obj2}


Promises: Promises 提供了一种机制来处理异步操作的结果和错误。可以使用回调来完成相同的事情,但是Promises 通过方法链接和简洁的错误处理来提高可读性。



const isGreater = (a, b) => {    return new Promise((resolve, reject) =>{        if(a > b){            resolve(true)        }else{            reject(false)        }    })}
isGreater(1,2).then( res =>{    console.log("greater")}).catch(err =>{    console.log(error)})


模块导出


const myModule = { x: 1, y: () => { console.log('This is ES5') }}

export default myModule;


和导入


import myModule from './myModule';


问题 2:什么是 IIFE (立即调用的函数表达式)


主题: JavaScript 难度: ⭐⭐⭐


IIFE是一个立即调用的函数表达式,它在创建后立即执行



(function iife(){    
  console.log("hello")
  
})();

// 输出 hello



常常在使用此模式避免全局变量污染的问题,应为在立即执行函数里,其作用域之外是不可见的。

问题 3:何时在 ES6 中使用箭头函数?


主题: JavaScript 难度: ⭐⭐⭐



  • 在全局作用域内和Object.prototype属性中使用 function 。

  • 为对象构造函数使用 class

  • 其它情况使用箭头函数。

使用箭头函数的好处


  • 作用域安全性:当箭头函数被一致使用时,所有东西都保证使用与根对象相同的this。如果一个标准函数回调与一堆箭头函数混合在一起,那么作用域就有可能变得混乱。


  • 紧凑性:箭头函数更容易读写。


  • 清晰度:使用箭头函数可明确知道当前 this 指向。

问题 4:将 Symbol 引入ES6 的目的是什么?


主题: JavaScript 难度: ⭐⭐⭐


Symbol 是一种新的、特殊的对象,可以用作对象中惟一的属性名。使用 Symbol 替换string 可以避免不同的模块属性的冲突。还可以将Symbol设置为私有,以便尚无直接访问Symbol权限的任何人都不能访问它们的属性

Symbol 是JS新的基本数据类型。与numberstringboolean 原始类型一样,Symbol也有一个用于创建它们的函数。与其他原始类型不同,Symbol没有字面量语法。创建它们的唯一方法是使用以下方法中的Symbol构造函数


let symbol = Symbol();


问题 5: 在 ES6 中使用展开(spread)语法有什么好处? 它与剩余(rest)语法有什么不同?


主题: JavaScript 难度: ⭐⭐⭐


ES6 的展开语法在以函数形式进行编码时非常有用,因为咱们可以轻松地创建数组或对象的副本,而无需求助于Object.create,slice或库函数。Redux 和rx.js项目中经常使用此特性。

function putDookieInAnyArray(arr) {  return [...arr, 'dookie'];}
const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
const person = {  name: 'Todd',  age: 29,};
const copyOfTodd = { ...person };  


ES6 的 rest 语法提供了一种捷径,其中包括要传递给函数的任意数量的参数。

就像展开语法的逆过程一样,它将数据放入并填充到数组中而不是展开数组,并且它在函数变量以及数组和对象解构分中也经常用到。


 function addFiveToABunchOfNumbers(...numbers) {  return numbers.map(x => x + 5);}
const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
const { e, f, ...others } = {  e: 1,  f: 2,  g: 3,  h: 4,}; // e: 1, f: 2, others: { g: 3, h: 4 }


问题 6: ES6 类和 ES5 函数构造函数有什么区别?


主题: JavaScript 难度: ⭐⭐⭐


// ES5 Function Constructorfunction Person(name) {  this.name = name;}
// ES6 Classclass Person {  constructor(name) {    this.name = name;  }


对于简单的构造函数,它们看起来非常相似。

构造函数的主要区别在于使用继承。如果咱们创建一个继承Person类的Student子类并添加一个studentId字段,以下是两种方式的使用:


// ES5 Function Constructorfunction Student(name, studentID) {  // 调用你类的构造函数以初始化你类派生的成员。  Person.call(this. name)  // 初始化子类的成员。  this.studentId = studentId}
Student.prototype = Object.create(Person.prototype)Student.prototype.constructor = Student
// ES6 Classclass Student extends Person {  constructor(name, studentId) {    super(name)    this.studentId = studentId  }}



在 ES5 中使用继承要复杂得多,而且 ES6 版本更容易理解和记住。

问题 7: .call 和 .apply 区别是啥?


主题: JavaScript 难度: ⭐⭐⭐


.call.apply均用于调用函数,并且第一个参数将用作函数中this的值。但是,.call将逗号分隔的参数作为下一个参数,而.apply将参数数组作为下一个参数。简单记忆法:C用于call和逗号分隔,A用于apply和参数数组。

 function add(a, b) {  return a + b;}
console.log(add.call(null, 1, 2)); // 3console.log(add.apply(null, [1, 2])); // 3


web前端培训:http://www.baizhiedu.com/web2019



上一篇:java培训班 | java编程基础:关键字与转义字符

下一篇:应届生去公司找个Java程序员的职位需要什么技能?

相关推荐

www.baizhiedu.com

有位老师想和您聊一聊

关闭

立即申请