某D的面试准备知识点

js基础&es6

1. 原生方法

   Array.prototype

   join() 方法将数组（或一个类数组对象）的所有元素连接到一个字符串中。
   concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
   forEach() 方法对数组的每个元素执行一次提供的函数。
   indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
   map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
   pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
   push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。
   shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
   unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。
   slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，元素组不修改
   splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

   String.prototype

   charAt() 方法从一个字符串中返回指定的字符。
   concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。
   indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引，开始在fromIndex进行搜索。如果未找到该值，则返回-1。
   lastIndexOf() 方法返回指定值在调用该方法的字符串中最后出现的位置，如果没找到则返回 -1。从该字符串的后面向前查找，从 fromIndex 处开始。
   match() 当一个字符串与一个正则表达式匹配时， match()方法检索匹配项。
   replace() 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数。
   slice() 方法提取一个字符串的一部分，并返回一新的字符串。新字符串包括beginSlice但不包括 endSlice。
   substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。
   substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。
   split() 方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串,以确定每个拆分的位置。
   trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）。

2. bind方法的实现

   可以通过（call, apply）封装函数实现

   call,apply唯一区别在于call的参数 要平铺，apply的参数放到一个数组里放到第二次参数的位置
   bind方法与call,apply的区别在于，生成一个新的函数 不执行。

3. 闭包 和 原型链

   (闭包)是使用被作用域封闭的变量，函数，闭包等执行的一个函数的作用域

   • 性能考量
     如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗.

   原型链: 每个对象都有一个私有属性（称之为 [[Prototype]]），它持有一个连接到另一个称为其 prototype 对象（原型对象）的链接。该 prototype 对象又具有一个自己的原型，层层向上直到一个对象的原型为 null。

4. 快速排序算法

    function quickSort(arr) {
        if(arr.length<=1) {
            return arr;
        }
   
        let leftArr = [];
        let rightArr = [];
        let q = arr[0];
        for(let i = 1,l=arr.length; iq) {
                rightArr.push(arr[i]);
            }else{
                leftArr.push(arr[i]);
            }
        }
   
        return [].concat(quickSort(leftArr),[q],quickSort(rightArr));
    }
   

5. 浏览器回退

   history.pushState && window.onpopstate && window.hashchange

6. 箭头函数的特点

   this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

7. 跨域与同源

具体的思路：由于浏览器有同源策略限制 ，所以想要跨域访问其他域下的资源，需要绕开浏览器的这个限制，可以在服务器端设置一个代理，由服务器端向跨域下的网站发出请求，再将请求结果返回给前端，成功避免同源策略的限制。

8. 事件机制

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。事件代理就是利用事件冒泡原理.

html5新增的属性

• 根据其功能分为几个组:

  语义：能够让你更恰当地描述你的内容是什么。
  连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
  离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
  多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
  2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
  性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
  设备访问 Device Access：能够处理各种输入和输出设备。
  样式设计: 让作者们来创作更加复杂的主题吧！

• 关于 Cookie、localStoragee和sessionStorage

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

项目构建webpack, gulp, grunt

• Gulp与Grunt

1. 任务运行器(task runner)，例如 Gulp，可以处理许多不同的预处理器(preprocesser)和转换器(transpiler)，但是在所有的情景下，它都需要一个输入源并将其压缩到一个编译好的输出文件中。然而，它是在每个部分的基础上这样做的，而没有考虑到整个系统。这就造成了开发者的负担：找到任务运行器所不能处理的地方，并找到适当的方式将所有这些模块在生产环境中联合在一起。
2. Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
3. Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

• Gulp相比Grunt

• 易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
• 高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
• 高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
• 易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。gulp.task
  gulp.run
  gulp.watch
  gulp.src
  gulp.dest

• Webpack

• Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
• Webpack 试图通过提出一个大胆的想法来减轻开发者的负担：如果有一部分开发过程可以自动处理依赖关系会怎样？如果我们可以简单地写代码，让构建过程最终只根据需求管理自己会怎样？
• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

框架React,Vue,Angular

• Vue 的一些语法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因为 AngularJS 是 Vue 早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。

• Angular2 它具有优秀的组件系统，并且许多实现已经完全重写，API 也完全改变了。Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的

    TypeScript: function (person : Person) {}

react相比Vue

• 在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。PureComponent 和 shouldComponentUpdate需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。

• 在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。

react生命周期函数

• 初始化阶段：

constructor(props, context) 构造函数，在创建组件的时候调用一次。
getDefaultProps: 获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)
getInitialState:获取每个实例的初始化状态（每个实例自己维护）
componentWillMount：组件即将被装载、渲染到页面上（render之前最好一次修改状态的机会）
render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state；只有一个顶层组件，也就是 说render返回值值职能是一个组件；不允许修改状态和DOM输出）
componentDidMount:组件真正在被装载之后，可以修改DOM

• 运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用（赶在父组件修改真正发生之前,可以修改属性和状态）
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止re nder调用，后面的函数不会被继续执行了）
componentWillUpdate: 不能修改属性和状态
render: 只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值只能是一个组件；不 允许修改状态和DOM输出
componentDidUpdate:可以修改DOM

• 销毁阶段：

componentWillUnmount:开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）

为什么要用Redux

props意味着父级分发下来的属性，state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化。
为了有更好的state管理，就需要一个库来作为更专业的顶层state分发给所有React应用，这就是Redux

前端模块化规范（ES6模块化以及CommonJs,AMD和CMD）(RequireJS 和 SeaJS)

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。
AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。
CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。不过，依赖SPM 打包，模块的加载逻辑偏重
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的

AMD(异步模块定义)出现，它就主要为前端JS的表现制定规范。

RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

库jquery,Bootstrap,Lodash,swiper

nodejs