前端日记

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

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

面试官：你是怎么理解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()删除 ...