前端日记

面试官：说说你对策略模式的理解？应用场景？ 一、是什么策略模式（Strategy Pattern）指的是定义一系列的算法，把它们一个个封装起来，目的就是将算法的使用与算法的实现分离开来 一个基于策略模式的程序至少由两部分组成： 策略类，策略类封装了具体的算法，并负责具体的计算过程 环境类Context，Context 接受客户的请求，随后 把请求委托给某一个策略类 二、使用举个例子，公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍 若使用if来实现，代码则如下： 1234567891011121314var calculateBouns = function(salary,level) { if(level === 'A') { return salary * 4; } if(level === 'B') { return salary * 3;  ...

面试官：说说对设计模式的理解？常见的设计模式有哪些？ 一、是什么在软件工程中，设计模式是对软件设计中普遍存在的各种问题所提出的解决方案 设计模式并不直接用来完成代码的编写，而是描述在各种不同情况下，要怎么解决问题的一种方案 设计模式能使不稳定依赖于相对稳定、具体依赖于相对抽象，避免会引起麻烦的紧耦合，以增强软件设计面对并适应变化的能力 因此，当我们遇到合适的场景时，我们可能会条件反射一样自然而然想到符合这种场景的设计模式 比如，当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖于这个接口，改动接口会牵扯到太多文件 因此应对这种场景，我们可以很快地想到可以用适配器模式来解决这个问题 二、有哪些常见的设计模式有： 单例模式 工厂模式 策略模式 代理模式 中介者模式 装饰者模式 …… 单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象 如下图的车，只有一辆，一旦借出去则不能再借给别人： 工厂模式工厂模式通常 ...

面试官：ES6中数组新增了哪些扩展？ 一、扩展运算符的应用ES6通过扩展元素符...，好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列 12345678console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>] 主要用于函数调用的时候，将一个数组变为参数序列 12345678910function push(array, ...items) { array.push(...items);}function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers) // 42 可以将某些数据结构转为数组 1[...document.querySelectorAll('div ...

面试官：你是怎么理解ES6中 Decorator 的？使用场景？ 一、介绍Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式 简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。 ES6中Decorator功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法 这里定义一个士兵，这时候他什么装备都没有 12class soldier{ } 定义一个得到 AK 装备的函数，即装饰器 123function strong(target){ target.AK = true} 使用该装饰器对士兵进行增强 123@strongclass soldier{} 这时候士兵就有武器了 1soldier.AK // true 上述代码虽然简单，但也能够清晰看到了使用Decorator两大优点： 代码可读性变强了，装饰器命名相当于一个注释 在不改变原有代码情况下，对原来功能进行扩展 二、用法Docorator修饰对象为下面两种： 类的装饰 ...

面试官：对象新增了哪些扩展？ 一、参数ES6允许为函数的参数设置默认值 1234567function log(x, y = 'World') { console.log(x, y);}console.log('Hello') // Hello Worldconsole.log('Hello', 'China') // Hello Chinaconsole.log('Hello', '') // Hello 函数的形参是默认声明的，不能使用let或const再次声明 1234function foo(x = 5) { let x = 1; // error const x = 2; // error} 参数默认值可以与解构赋值的默认值结合起来使用 12345678function foo({x, y = 5}) { console.log(x, y);}foo( ...

面试官：你是怎么理解ES6中 Generator的？使用场景？ 一、介绍Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 回顾下上文提到的解决异步的手段： 回调函数 promise 那么，上文我们提到promsie已经是一种比较流行的解决异步方案，那么为什么还出现Generator？甚至async/await呢？ 该问题我们留在后面再进行分析，下面先认识下Generator Generator函数执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态 形式上，Generator 函数是一个普通函数，但是有两个特征： function关键字与函数名之间有一个星号 函数体内部使用yield表达式，定义不同的内部状态 12345function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';} 二、使用G ...

面试官：你是怎么理解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行代码，效率显然低效 元编程优点：与手工编写全部代码相比，程序员可以获得更高的工作效率，或者给与程序更大的灵活度去处理新的情形而无需重新编 ...