前端日记

面试官：你是怎么理解ES6中Module的？使用场景？ 一、介绍模块，（Module），是能够单独命名并独立地完成一定功能的程序语句的集合（即程序代码和数据结构的集合体）。 两个基本的特征：外部特征和内部特征 外部特征是指模块跟外部环境联系的接口（即其他模块或程序调用该模块的方式，包括有输入输出参数、引用的全局变量）和模块的功能 内部特征是指模块的内部环境具有的特点（即该模块的局部数据和程序代码） 为什么需要模块化 代码抽象 代码封装 代码复用 依赖管理 如果没有模块化，我们代码会怎样？ 变量和方法不容易维护，容易污染全局作用域 加载资源的方式通过script标签从上到下。 依赖的环境主观逻辑偏重，代码较多就会比较复杂。 大型项目资源难以维护，特别是多人合作的情况下，资源的引入会让人奔溃 因此，需要一种将JavaScript程序模块化的机制，如 CommonJs (典型代表：node.js早期) AMD (典型代表：require.js) CMD (典型代表：sea.js) AMDAsynchronous ModuleDefinition（AMD），异步模块定义，采 ...

面试官：对象新增了哪些扩展？ 一、属性的简写ES6中，当对象键名与对应值名相等的时候，可以进行简写 1234const baz = {foo:foo}// 等同于const baz = {foo} 方法也能够进行简写 12345678910111213const o = { method() { return "Hello!"; }};// 等同于const o = { method: function() { return "Hello!"; }} 在函数内作为返回值，也会变得方便很多 12345678function getPoint() { const x = 1; const y = 10; return {x, y};}getPoint()// {x:1, y:10} 注意：简写的对象方法不能用作构造函数，否则会报错 12345 ...

面试官：你是怎么理解ES6中 Promise的？使用场景？ 一、介绍Promise ，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大 在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码 1234567doSomething(function(result) { doSomethingElse(result, function(newResult) { doThirdThing(newResult, function(finalResult) { console.log('得到最终结果: ' + finalResult); }, failureCallback); }, failureCallback);}, failureCallback); 阅读上面代码，是不是很难受，上述形成了经典的回调地狱 现在通过Promise的改写上面的代码 12345678910doSomething().then(function(result) ...

面试官：你是怎么理解ES6中Proxy的？使用场景? 一、介绍定义： 用于定义基本操作的自定义行为 本质： 修改的是程序默认形为，就形同于在编程语言层面上做修改，属于元编程(meta programming) 元编程（Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的数据，或者在运行时完成部分本应在编译时完成的工作 一段代码来理解 1234567#!/bin/bash# metaprogramecho '#!/bin/bash' >programfor ((I=1; I<=1024; I++)) do echo "echo $I" >>programdonechmod +x program 这段程序每执行一次能帮我们生成一个名为program的文件，文件内容为1024行echo，如果我们手动来写1024行代码，效率显然低效 元编程优点：与手工编写全部代码相比，程序员可以获得更高的工作效率，或者给与程序更大的灵活度去处理新的情形而无需重新编 ...

面试官：你是怎么理解ES6新增Set、Map两种数据结构的？ 如果要用一句来描述，我们可以说 Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构 什么是集合？什么又是字典？ 集合是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合 字典是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同 区别？ 共同点：集合、字典都可以存储不重复的值 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储 一、Set Set是es6新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合 Set本身是一个构造函数，用来生成 Set 数据结构 1const s = new Set(); 增删改查Set的实例关于增删改查的方法： add() delete() has() clear() add()添加某个值，返回 Set 结构本身 当添加实例中已经存在的元素，set不会进行处理添加 1s.add(1).add(2).add(2); // 2只被添加了一次 delete()删除 ...

面试官：说说var、let、const之间的区别 一、var在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量 注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象 12var a = 10;console.log(window.a) // 10 使用var声明的变量存在变量提升的情况 12console.log(a) // undefinedvar a = 20 在编译阶段，编译器会将其变成以下执行 123var aconsole.log(a)a = 20 使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明 123var a = 20 var a = 30console.log(a) // 30 在函数中使用使用var声明变量时候，该变量是局部的 123456var a = 20function change(){ var a = 30}change()console.log(a) // 20 而如果在函数内不使用var，该变量是全局的 123 ...

面试官：说说你对工厂模式的理解？应用场景？ 一、是什么工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂 其就像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品 举个例子： 编程中，在一个 A 类中通过 new 的方式实例化了类 B，那么 A 类和 B 类之间就存在关联（耦合） 后期因为需要修改了 B 类的代码和使用方式，比如构造函数中传入参数，那么 A 类也要跟着修改，一个类的依赖可能影响不大，但若有多个类依赖了 B 类，那么这个工作量将会相当的大，容易出现修改错误，也会产生很多的重复代码，这无疑是件非常痛苦的事； 这种情况下，就需要将创建实例的工作从调用方（A类）中分离，与调用方解耦，也就是使用工厂方法创建实例的工作封装起来（减少代码重复），由工厂管理对象的创建逻辑，调用方不需要知道具体的创建过程，只管使用，而降低调用者因为创建逻辑导致的错误； 二、实现工厂模式根据抽象程度的不同可以分为： 简单工厂模式（Simple Factory） 工厂方法模式（Fact ...

面试官：说说你对发布订阅、观察者模式的理解？区别？ 一、观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯 例如生活中，我们可以用报纸期刊的订阅来形象的说明，当你订阅了一份报纸，每天都会有一份最新的报纸送到你手上，有多少人订阅报纸，报社就会发多少份报纸 报社和订报纸的客户就形成了一对多的依赖关系 实现代码如下： 被观察者模式 123456789101112131415161718192021class Subject { constructor() { this.observerList = []; } addObserver(observer) { this.observerList.push(observer); } removeObserver(observer) { const index = this.obs ...

面试官：说说你对代理模式的理解？应用场景？ 一、是什么代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的访问 代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要时，提供一个替身对象来控制这个对象的访问，客户实际上访问的是替身对象 在生活中，代理模式的场景是十分常见的，例如我们现在如果有租房、买房的需求，更多的是去找链家等房屋中介机构，而不是直接寻找想卖房或出租房的人谈。此时，链家起到的作用就是代理的作用 二、使用在ES6中，存在proxy构建函数能够让我们轻松使用代理模式： 1const proxy = new Proxy(target, handler); 关于Proxy的使用可以翻看以前的文章 而按照功能来划分，javascript代理模式常用的有： 缓存代理 虚拟代理 缓存代理缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果 如实现一个求积乘的函数，如下： 12345678var muti = function () { con ...

面试官：说说你对单例模式的理解？如何实现？ 一、是什么 单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建 在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，如下图所示： 从定义上来看，全局变量好像就是单例模式，但是一般情况我们不认为全局变量是一个单例模式，原因是： 全局命名污染 不易维护，容易被重写覆盖 二、实现在javascript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可，如下： 1234567891011121314151617181920212223// 定义一个类function Singleton(name) { this.name = name; this.instance = null;}// 原型扩展类的一个方法getName()Singleton.prototyp ...