通过 20 个棘手的ES6面试问题来提高咱们的 JS 技能

2019-11-11 admin

作者:Alex 译者:前端小智 来源:dev.to


今天最后一天了,上个月自己花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架,在 11 号之前它们有做活动,1300 的配置现在一年只要 86 元,三年只要229元,真心觉得很划算了,可以点击本条内容进行参与


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

问题1:可以解释一下 ES5ES6的区别吗?

主题: JavaScript 难度: ⭐⭐⭐

ECMAScript 5 (ES5):ECMAScript 的第五版,于2009年标准化,该标准已在所有现代浏览器中完全支持。

ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015):ECMAscript 第 6 版,2015 年标准化。这个标准已经在大多数现代浏览器中部分实现。

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

箭头函数和字符串插值

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

也可以这样写:

const greetings = name => `hello ${name}`;    

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

const NAMES = [];
NAMES.push("Jim");
console.log(NAMES.length === 1); // true
NAMES = ["Steve", "John"]; // error    

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

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


function multiply (a, b = 2) {
   return a * b;
}
multiply(5); // 10    

类定义与继承

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(result => {
    console.log('greater')
  })
 .catch(result => {
    console.log('smaller')
 })    

模块导出


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!"

常常使用此模式来避免污染全局命名空间,因为在IIFE中使用的所有变量(与任何其他普通函数一样)在其作用域之外都是不可见的。

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

主题: JavaScript 难度: ⭐⭐⭐

以下是一些经验分享:

  • 在全局作用域内和Object.prototype属性中使用 function
  • 为对象构造函数使用 class
  • 其它情况使用箭头函数。

为啥大多数情况都使用箭头函数

  • 作用域安全性:当箭头函数被一致使用时,所有东西都保证使用与根对象相同的thisObject。如果一个标准函数回调与一堆箭头函数混合在一起,那么作用域就有可能变得混乱。
  • 紧凑性:箭头函数更容易读写。
  • 清晰度:使用箭头函数可明确知道当前 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或库函数。Reduxrx.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 Constructor
function Person(name) {
  this.name = name;
}

// ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}  

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

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

// ES5 Function Constructor
function Student(name, studentID) {
  // 调用你类的构造函数以初始化你类派生的成员。
  Person.call(this. name)
  // 初始化子类的成员。
  this.studentId = studentId
}

Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student

// ES6 Class
class 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)); // 3
console.log(add.apply(null, [1, 2])); // 3   

问题 8: 为什么要使用 ES6 类?

主题: JavaScript 难度: ⭐⭐⭐

选择使用类的一些原因:

  • 语法更简单,更不容易出错。
  • 使用新语法比使用旧语法更容易(而且更不易出错)地设置继承层次结构。
  • class可以避免构造函数中使用new的常见错误(如果构造函数不是有效的对象,则使构造函数抛出异常)。
  • 用新语法调用父原型方法的版本比旧语法要简单得多,用super.method()代替ParentConstructor.prototype.method.call(this)Object.getPrototypeOf(Object.getPrototypeOf(this)).method.call(this)

考虑下面代码:

图片描述

使用 ES6 实现上述功能:

图片描述

问题 9: 在 JS 中定义枚举的首选语法是什么

主题: JavaScript 难度: ⭐⭐⭐

可以 Object.freeze 来实现枚举

var DaysEnum = Object.freeze({
    "monday": 1,
    "tuesday": 2,
    "wednesday": 3,
    ...
})

或者

var DaysEnum = {
    "monday": 1,
    "tuesday": 2,
    "wednesday": 3,
    ...
}
Object.freeze(DaysEnum)

但是,这阻止咱们把值分配给变量:

let day = DaysEnum.tuesday
day = 298832342 // 不会报错

问题 10: 解释一下 Object.freeze()const 的区别

主题: JavaScript 难度: ⭐⭐⭐

constObject.freeze是两个完全不同的概念。

const 声明一个只读的变量,一旦声明,常量的值就不可改变:


const person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
person = animal; // ERROR "person" is read-only    

Object.freeze适用于值,更具体地说,适用于对象值,它使对象不可变,即不能更改其属性。


let person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
Object.freeze(person);
person.name = "Lima"; //TypeError: Cannot assign to read only property 'name' of object
console.log(person); 

问题 11: JS 的提升是什么

主题: JavaScript 难度: ⭐⭐⭐⭐

提升是指 JS 解释器将所有变量和函数声明移动到当前作用域顶部的操作,提升有两种类型

只要一个var(或函数声明)出现在一个作用域内,这个声明就被认为属于整个作用域,并且可以在任何地方访问。

var a = 2
foo() // 正常运行, foo 已被提升

function foo() {
  a = 3
  console.log(a)   // 3
  var a                        
}

console.log( a )   // 2

问题 12: 解释一下原型设计模式(Prototype Pattern)

主题: JavaScript 难度: ⭐⭐⭐⭐

原型模式会创建新的对象,而不是创建未初始化的对象,它会返回使用从原型或样本对象复制的值进行初始化的对象。原型模式也称为属性模式。

原型模式有用的一个例子是使用与数据库中的默认值匹配的值初始化业务对象。原型对象保留默认值,这些默认值将被复制到新创建的业务对象中。

传统语言很少使用原型模式,但是JavaScript作为一种原型语言,在构建新对象及其原型时使用这种模式。

问题 13: ES6 中的临时死区是什么

主题: JavaScript 难度: ⭐⭐⭐⭐

在 ES6 中,letconstvarclassfunction一样也会被提升,只是在进入作用域和被声明之间有一段时间不能访问它们,这段时间是临时死区(TDZ)

//console.log(aLet)  // would throw ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

问题 14: 什么时候不使用箭头函数? 说出三个或更多的例子

主题: JavaScript 难度: ⭐⭐⭐⭐

不应该使用箭头函数一些情况:

  • 当想要函数被提升时(箭头函数是匿名的)
  • 要在函数中使用this/arguments时,由于箭头函数本身不具有this/arguments,因此它们取决于外部上下文
  • 使用命名函数(箭头函数是匿名的)
  • 使用函数作为构造函数时(箭头函数没有构造函数)
  • 当想在对象字面是以将函数作为属性添加并在其中使用对象时,因为咱们无法访问 this 即对象本身。

问题 15: ES6 中的 WeakMa p的实际用途是什么?

主题: JavaScript 难度: ⭐⭐⭐⭐

WeakMaps 提供了一种从外部扩展对象而不影响垃圾收集的方法。当咱们想要扩展一个对象,但是因为它是封闭的或者来自外部源而不能扩展时,可以应用WeakMap

WeakMap只适用于 ES6 或以上版本。WeakMap是键和值对的集合,其中键必须是对象

var map = new WeakMap();
var pavloHero = {
    first: "Pavlo",
    last: "Hero"
};
var gabrielFranco = {
    first: "Gabriel",
    last: "Franco"
};
map.set(pavloHero, "This is Hero");
map.set(gabrielFranco, "This is Franco");
console.log(map.get(pavloHero)); //This is Hero

WeakMaps的有趣之处在于,它包含了对map内部键的弱引用。弱引用意味着如果对象被销毁,垃圾收集器将从WeakMap中删除整个条目,从而释放内存。

问题 16: 说明下列方法为何不能用作 IIFE,要使其成为 IIFE,需要进行哪些更改?

主题: JavaScript 难度: ⭐⭐⭐⭐

function foo(){ }();

IIFE 代表立即调用的函数表达式。JS解析器读取函数foo(){}();作为函数foo(){}();,前者是一个函数声明,后者(一对括号)是尝试调用一个函数,但没有指定名称,因此它抛出Uncaught SyntaxError: Unexpected token 异常。

咱们可以使用void操作符:void function foo(){ }();。不幸的是,这种方法有一个问题。给定表达式的求值总是undefined的,所以如果IIFE 函数有返回值,则不能使用它,如下所示:

const foo = void
function bar() {
    console.log('前端小智')
    return 'foo';
}();

console.log(foo); // undefined

问题 17: 能否比较模块模式与构造函数/原型模式的用法?

主题: JavaScript 难度: ⭐⭐⭐⭐

模块模式通常用于命名空间,在该模式中,使用单个实例作为存储来对相关函数和对象进行分组。这是一个不同于原型设计的用例,它们并不是相互排斥,咱们可以同时使用它们(例如,将一个构造函数放在一个模块中,并使用new MyNamespace.MyModule.MyClass(arguments) )。

构造函数和原型是实现类和实例的合理方法之一。它们与模型并不完全对应,因此通常需要选择一个特定的scheme或辅助方法来实现原型中的类。

问题 18: ES6 Map 和 WeakMap 有什么区别?

主题: JavaScript 难度: ⭐⭐⭐⭐⭐

当它们的键/值引用的对象被删除时,它们的行为都不同,以下面的代码为例:

var map = new Map()
var weakmap = new WeakMap()

(function() {
    var a = {
        x: 12
    };
    var b = {
        y: 12
    };

    map.set(a, 1);
    weakmap.set(b, 2);
})()

执行上面的 IIFE,就无法再引用{x:12}{y:12}。垃圾收集器继续运行,并从 WeakMa中删除键b指针,还从内存中删除了{y:12}

但在使用 Map的情况下,垃圾收集器不会从Map中删除指针,也不会从内存中删除{x:12}

WeakMap 允许垃圾收集器执行其回收任务,但Map不允许。对于手动编写的 Map,数组将保留对键对象的引用,以防止被垃圾回收。但在WeakMap中,对键对象的引用被“弱”保留,这意味着在没有其他对象引用的情况下,它们不会阻止垃圾回收。

问题 19: 举一个柯里化函数的例子,并说明柯里化的好处?

主题: JavaScript 难度: ⭐⭐⭐⭐⭐

柯里化是一种模式,其中一个具有多个参数的函数被分解成多个函数,当被串联调用时,这些函数将一次累加一个所需的所有参数。这种技术有助于使用函数式编写的代码更容易阅读和编写。需要注意的是,要实现一个函数,它需要从一个函数开始,然后分解成一系列函数,每个函数接受一个参数。

function curry(fn) {
  if (fn.length === 0) {
    return fn;
  }

  function _curried(depth, args) {
    return function(newArgument) {
      if (depth - 1 === 0) {
        return fn(...args, newArgument);
      }
      return _curried(depth - 1, [...args, newArgument]);
    };
  }

  return _curried(fn.length, []);
}

function add(a, b) {
  return a + b;
}

var curriedAdd = curry(add);
var addFive = curriedAdd(5);

var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]

问题 20: 如何在 JS 中“深冻结”对象

主题: JavaScript 难度: ⭐⭐⭐⭐⭐

如果咱们想要确保对象被深冻结,就必须创建一个递归函数来冻结对象类型的每个属性:

没有深冻结

let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
Object.freeze(person); 
person.profession.name = "doctor";
console.log(person); //output { name: 'Leonardo', profession: { name: 'doctor' } }

深冻结

function deepFreeze(object) {
    let propNames = Object.getOwnPropertyNames(object);
    for (let name of propNames) {
        let value = object[name];
        object[name] = value && typeof value === "object" ?
            deepFreeze(value) : value;
    }
    return Object.freeze(object);
}
let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
deepFreeze(person);
person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://dev.to/fullstackcafe/…

交流(欢迎加入群,群工作日都会发红包,互动讨论技术)

阿里云最近在做活动,低至2折,有兴趣可以看看:https://promotion.aliyun.com/…

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq449245884/xiaozhi

因为篇幅的限制,今天的分享只到这里。如果大家想了解更多的内容的话,可以去扫一扫每篇文章最下面的二维码,然后关注咱们的微信公众号,了解更多的资讯和有价值的内容。

clipboard.png

每次整理文章,一般都到2点才睡觉,一周4次左右,挺苦的,还望支持,给点鼓励

[转载]原文链接:https://segmentfault.com/a/1190000020927871

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78947.html

文章标题:通过 20 个棘手的ES6面试问题来提高咱们的 JS 技能

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
回到顶部