JavaScript 面试知识点

• 用正则表达式验证字符串长度时，一定要带上 ^ 与 $。 如果我们把 ^ 与 $ 去了，则凡是含有八位数字的字符串都会验证通过。

• js中 target 与 currentTarget 的区别:
  1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）
  2、只有当事件流处于目标阶段的时候才相同
  3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。

• js里面的异步，计时器、xhr等才会产生。

• js的继承
  6种：
  Objct.create方法；（推荐）
  call,apply；
  原型继承（子原型指向父实例，子原型利用空对象间接指向父原型）；
  构造函数+原型；
  对象拷贝；
  es6中的继承。

• 如何避免全局变量污染
  只创建一个全局命名空间
  使用闭包
  使用立即执行函数

• 什么是立即执行函数，几种写法？

( function(){…} )()

( function (){…} () )

在js中将函数声明转换为函数表达式,只需要在函数声明前面加上 +,-,=,~ 或 ! 等运算符或者()包起来，写法都可以，还有apply、call、void，比如：
+function(a){
    console.log(a);   //firebug输出123456,使用+运算符
}(123456);

(function(){    
     alert("run!")    
}).call();    

(function(){    
     alert("run!")    
}).apply();    

void (function(){    
     alert("run!")    
})();

• es6 let和var的区别
  let必须先定义再使用
  let不能重复定义
  let是块级作用域，var是函数作用域

• 函数作用域链是针对函数的
  原型链是针对对象的构造函数的

• gulp如何创建一个命令
  gulp.task()

• 深拷贝、浅拷贝
  浅拷贝：不会产生新的对象，产生一个指针指向原来的对象的地址，也叫地址拷贝或者指针拷贝
  深拷贝：产生新的对象，有自己的内存地址，复制的是内容，对副本进行修改不会影响原来的对象

• css盒模型
  content，padding，border，margin
  box-sizing

• gulp在打包中的作用
  文件合并，文件压缩
  打版本号
  编译处理css、js
  监控资源，自动刷新

• js闭包
  函数内部的函数，能访问函数的变量

• 异步编程：
  回调函数
  事件驱动模式（观察者模式）
  generator yield
  promise
  async await

• 原型链继承
  proto

• 数组的操作：
  push、pull、unshift、shift
  slice、splice
  join，concat
  reverse、sort
  every、some
  forEach、map、filter

• 跨域请求
  jsonp
  CORS
  h5的window.postMessage
  Access-Control-Allow-Origin
  document.domain跨子域
  window.name
  flash方法
  在服务器上设置代理页面

• js 数据类型和判断方法

数据类型	种类
数据类型8种(7+1)	number、string、boolean、undefined、null、object、　　　　　 symbol(ES6)、bigint(es2020新增)
typeof 返回数据类型(8种)	number、string、boolean、undefined、　　　object、function、symbol(ES6)、bigint(es2020新增)
判断方法	typeof、instanceOf、constructor、Object.prototype.toString.call()（推荐）

• html5本地存储
  localStorage：没有时间限制的数据存储，除非被强制清理（1. ui界面点击删除；2.程序删除）
  sessionStorage：针对一个 session 的数据存储

• CSS优化
  压缩、合并；
  使用复合语法；
  提取共用css；
  避免 !important；
  使用字体图标；
  减少低效代码
  css精灵；

• 双向绑定知识：
  Angular 使用双向绑定，Vue 也支持双向绑定，不过默认为单向绑定
  Vue的数据双向绑定，和angular 相似
  Vue的组件化、数据流，和React相似
  Vue2.0 也有虚拟dom和服务端渲染
  MVVM流的Angular和Vue，都是通过类似模板的语法，描述界面状态与数据的绑定关系，然后通过内部转换，把这个结构建立起来，当界面发生变化的时候，按照配置规则去更新相应的数据，然后，再根据配置好的规则去，从数据更新界面状态。

• 双向绑定的实现，主要分为三个流派
  Angular使用的是，在指定的事件触发时，进行脏值检查
  Vue使用的是Object.defineProperty的Getter/Setter
  React 则是在脏刷新的的基础上，增加了虚拟dom树与实际dom树改变的刷新机制。

• 实现数据绑定的做法有大致如下几种：
  发布者-订阅者模式（backbone.js）
  在指定的事件触发时，进行脏值检查（angular.js）
  数据劫持（vue.js）

• vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

• Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。

• js数组去重
  将数组的每一个元素存成对象的key，可去掉重复

• flexbox布局
  display:flex;
  flex:1;
  justify-content:center;
  align-items:center;

• jquery addclass原理
  给元素添加一个或多个类，如果添加多个类名时，需要在类名之间用空格隔开。

• 事件流
  捕获、目标阶段、冒泡

• z-index的相关的东西

• css 清除浮动方式
  结尾处加空div标签clear:both;
  结尾处加br标签clear:both
  父级div设置高度；
  父级div定义:after伪元素；（推荐使用）
  父级div定义overflow:hidden；
  父级div定义overflow:auto；
  父级div也一起浮动；
  父级div定义display:table；

• 清除浮动一般有两种思路：
  一、利用clear属性，清除浮动
  二、使父容器形成BFC

• BFC(Block Formatting Context)有三个特性：
  阻止垂直外边距（margin-top、margin-bottom）折叠
  不会重叠浮动元素
  可以包含浮动
  如何形成BFC：
  （1）float值不为none，可以是left，right或both
  （2）overflow为hidden或auto或scroll
  （3）display为inline-block或table-cell或table-caption
  （4）position为absolute或fixed

• 计算各种宽度和高度：
  client 包含padding，不包含border
  offset 包含padding和border
  scoll 包含padding，再加上任何溢出内容的尺寸

• 各种宽度和高度：

1. clientWidth和clientHeight 包括padding，不包括border。
2. offsetWidth 和 offsetHeight 是用来得到对象的大小，由自身宽高、padding、border构成。
   offsetLeft 和 offsetTop 用来得到对象的位置，到距离自身最近的（带有定位的）父元素的左侧/顶部 的距离，如果所有父级都没有定位则以body 为准
3. scrollHeight和scrollWidth 对象内部实际内容的高度/宽度，包括padding，不包括border；
   scrollTop和scrollLeft 被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离

• css样式优先级计算规则：
  4个等级的定义如下：
  第一等：内联样式，如: style=””，权值为1000。
  第二等：ID选择器，如：#content，权值为100。
  第三等：类，伪类和属性选择器，如.content，权值为10。
  第四等：元素选择器和伪元素选择器，如div p，权值为1。

• 各种样式选择：
  行内样式： style=""
  ID选择器：id=""
  类选择器：class=""
  伪类：:active :focus :hover :link :visited :first-child :lang
  属性选择器：[title='xx']
  标签选择器：p 或 div 等元素标签
  伪元素：:first-letter :first-line :before :after
  后代选择器：h1 em
  子元素选择器：p > a
  相邻兄弟选择器: li + p

• 问：display:table 和 display:table-cell 必须一起用吗？
  答：可以不一起用。

• 如果你不给display: table-cell的父亲或祖先节点设置display: table，浏览器会创建匿名的table-row框和table块框/table内联框出来
  应用css table布局的时候也分情况。
  如果你需要对display: table-cell设置百分比高度（或）宽度时，就需要组合使用display:table。
  设置px宽度时，可以不使用display:table。

• 问：react为什么要在componentDidMount里做ajax等操作？
  答：

1. 跟服务器端渲染（同构）有关系，如果在 componentWillMount 里面获取数据，fetch data 会执行两次，一次在服务器端一次在客户端。在 componentDidMount 中可以解决这个问题；
2. 在 componentWillMount 中 fetch data，数据一定在 render 后才能到达，如果你忘记了设置初始状态，用户体验不好；
3. react16.0 以后，componentWillMount 可能会被执行多次；
4. 在 componentWillMount 中捕捉请求错误无法用dom元素提示。

• 创建对象的方法，3种：

1. 使用对象直接量

var people = {  
  name:'kobe',  
  age:'34'  
};  

2.通过new创建对象

var arr = new Array(); 

3.通过Object.create()来创建对象

var obj = Object.create({x:1}); 

• 浅拷贝：不会产生新的对象，产生一个指针指向原来的对象的地址，也叫地址拷贝或者指针拷贝
  深拷贝：产生新的对象，有自己的内存地址，复制的是内容，对副本进行修改不会影响原来的对象

• instanceof的左值一般是一个对象，右值一般是一个构造函数，用来判断左值是否是右值的实例。它的内部实现原理是这样的：
  //设 L instanceof R
  //通过判断
  L.proto.proto ..... === R.prototype ？
  //最终返回true or false
  也就是沿着L的__proto__一直寻找到原型链末端，直到等于R.prototype为止。知道了这个也就知道为什么以下这些奇怪的表达式为什么会得到相应的值了

 Function instanceof Object // true 
 Object instanceof Function // true 
 Function instanceof Function //true
 Object instanceof Object // true
 Number instanceof Number //false

• React组件间传值：
  1.父组件传递给子组件：props
  2.子组件传递给父组件：回调函数（推荐），自定义事件机制
  3.父组件跨级传递给子组件：1）context （推荐）；2）props层层传递
  4.没有关系的组件传递：自定义事件机制

• perspective：none |
  perspective属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值接受一个长度单位大于0的值。而且其单位不能为百分比值。值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。
  比如你站在10英尺和1000英尺的地方看一个10英尺的立方体。在10英尺的地方，你距离立方体是一样的尺寸。因此视角转变远远大于站在1000英尺处的，立体尺寸是你距离立方体距离的百分之一。同样的思维适用于perspective的值。

• css3开启GPU加速：
  为动画DOM元素添加CSS3样式 -webkit-transform:transition3d(0,0,0) 或 -webkit-transform:translateZ(0) ，这两个属性都会开启GPU硬件加速模式。
  TIPS:通过 -webkit-transform:transition3d/translateZ 开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

• js判断是对象还是数组：
  1.对象的constructor属性

 obj.constructor === Object
 arr.constructor === Array

2.对象的Object.prototype.toString()方法（推荐）

Object.prototype.toString.call(obj) === '[object Object]'
Object.prototype.toString.call(arr) === '[object Array]'

3.使用typeof加length属性
数组有length属性，object没有

if(typeof o == 'object'){
        if( typeof o.length == 'number' ){
            return 'Array'; 
        }else{
            return 'Object';    
        }
}

4.使用instanceof
instanceof判断后，数组既是数组类型，也是对象类型；对象只是对象类型。
利用instanceof判断数据类型时，应该先判断array，再判断object。

if(o instanceof Array){
        return 'Array'
    }else if( o instanceof Object ){
        return 'Object';
}

• js判断是对象:
  （声明一个对象：var obj = {};，下面引用）
  1.typeof方法

typeof obj === 'object'

2.instanceof方法

obj instanceof Object

3.对象的constructor属性

obj.constructor === Object

4.对象的Object.prototype.toString()方法（推荐）

Object.prototype.toString.call(obj) === '[object Object]'

• js判断是数组：
  （声明一个数组：var arr = [];，下面引用）
  1.instanceof方法

arr instanceof Object && arr instanceof Array

2.对象的constructor属性

arr.constructor === Array

3.对象的Object.prototype.toString()方法 （推荐）

Object.prototype.toString.call(arr) === '[object Array]'

4.es6的Array.isArray()方法

Array.isArray(arr)

• 继承的6种方法：

1. call，apply=
2. 原型继承，分为2种：子原型指向父实例，子原型通过空对象做中介间接指向父原型
3. 构造函数+原型
4. 对象拷贝
5. Object.create方法（推荐）相关例子：http://runjs.cn/detail/t3mdmyp8
6. ES6里的继承

• 模块化、组件化 的理解：
  组件化和模块化的价值都在于分治；
  模块化，按照其功能做拆分；
  组件化，组件化就是基于可重用的目的，将一个大的软件系统按照分离关注点的形式，拆分成多个独立的组件，以减少耦合。

• css3新特性：
  边框：border-radius、box-shadow、border-image
  背景：background-size、background-origin、background-clip
  文本效果：text-overflow、text-shadow、word-wrap、text-emphasis等
  字体：@font-face

• transform 的 2d转换（5种）：
  translate() 移动
  rotate() 旋转
  scale() 缩放
  skew() 倾斜
  matrix() 以上转换都是应用matrix()方法实现的

• transform 的 3d转换（4种）：
  translate3d() 移动
  rotate3d() 旋转
  scale3d() 缩放
  matrix3d() 以上转换都是应用matrix()方法实现的

• 过渡transtion:
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;

• 一块内容，多列 显示：
  column-count
  column-gap
  column-rule

• 用户界面
  resize
  box-sizing
  outline-offset

• 一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

• 函数式编程 ======　　
  "函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。
  它属于"结构化编程"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。
  函数式编程具有五个鲜明的特点。

1. 函数是"第一等公民"
   指的是函数与其他数据类型一样，处于平等地位，可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为别的函数的返回值。
2. 只用"表达式"，不用"语句"
   "表达式"（expression）是一个单纯的运算过程，总是有返回值；"语句"（statement）是执行某种操作，没有返回值。函数式编程要求，只使用表达式，不使用语句。也就是说，每一步都是单纯的运算，而且都有返回值。
3. 没有"副作用"
   函数式编程强调没有"副作用"，意味着函数要保持独立，所有功能就是返回一个新的值，没有其他行为，尤其是不得修改外部变量的值。
4. 不修改状态
   函数式编程只是返回新的值，不修改系统变量。
5. 引用透明
   引用透明（Referential transparency），指的是函数的运行不依赖于外部变量或"状态"，只依赖于输入的参数，任何时候只要参数相同，引用函数所得到的返回值总是相同的。

• 函数式编程好处====

1. 代码简洁，开发快速
2. 接近自然语言，易于理解
3. 更方便的代码管理
4. 易于"并发编程"
5. 代码的热升级

• Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。
  这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。
  isPrototypeOf()方法用来判断，某个proptotype对象和某个实例之间的关系。
  每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。
  in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。
  in运算符还可以用来遍历某个对象的所有属性。
  任何一个prototype对象都有一个constructor属性，指向它的构造函数。每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。

• html5新特性：

1. 标签：
   新增：header,footer,nav,article,audio,video
   删除：pre,frame,iframe
2. canvas,svg,webGL
3. WEB 存储：localStorage，sessionStorage
4. 地理定位：location
5. 应用缓存：manifest
6. web workers,web socket
7. 服务器发送事件

• js代码是一段一段执行的（以<script>标签来分割），执行每一段前，都有“预编译”和“执行”两个阶段；
  预编译阶段：
  声明所有var变量（初始为undefined），解析定义式函数语句。

• css3 animation动画几种方式？

• log表示对数。
  如果a^n = b（a>0,且a≠1）,那么数n叫做以a为底b的对数,记做n=log(a)b,【a是下标】。
  其中,a叫做“底数”,b叫做“真数”。 可理解为：底数^对数 = 真数。
  举例：2^3=8，则3=log(2)8。

• map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身。
  语句：["1", "2", "3"].map(parseInt);
  依次执行：parseInt(1,0,[1,2,3])、parseInt(2,1,[1,2,3])、parseInt(3,2,[1,2,3])。parseInt需要2个参数，实际执行：parseInt(1,0)、parseInt(2,1)、parseInt(3,2)，依次返回：1，NaN，NaN。
  parseInt("3", 2) 的第二个参数是界于 2-36 之间的，之所以返回 NaN 是因为 字符串 "3" 里面没有合法的二进制数，所以 NaN。
  如果函数只需要一个参数，就是将数组的每个值传给函数。

• parseInt语法

parseInt(string, radix)

参数	描述
string	必需；要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

• JS严格模式：

1. 全局变量必须显式声明。
2. 静态绑定 （1）禁止使用with语句 （2）创设eval作用域
3. 增加的安全措施 （1）禁止this关键字指向全局对象 （2）禁止在函数内部遍历调用栈
4. 禁止删除变量 只有configurable设置为true的对象属性，才能被删除。
5. 显示报错
6. 重名错误 1）对象不能有重名的属性 （2）函数不能有重名的参数
7. 禁止八进制表示法
8. arguments对象的限制 （1）不允许对arguments赋值 （2）arguments不再追踪参数的变化 （3）禁止使用arguments.callee
9. 函数必须声明在顶层
10. 不能使用保留字：implements, interface, let, package, private, protected, public, static, yield。

• 浏览器缓存原理：
  一篇比较好的介绍文章：http://www.cnblogs.com/vajoy/p/5341664.html
  一. If-None-Match (Etag) 和 If-Modified-Since (Last-Modified) ：
  对应如下所示：

返回头(Response Headers)	对应	请求头(Request Headers)
etag	对应	if-none-match
last-modified	对应	if-modified-since

　　304，代表 NOT MODIFIED，他发生在这样的一种状态下：服务器正确接收到了一个带条件(Conditional Validation)的 GET，如果这个条件是真的就会返回 304、否则就会返回 200。
　　换个角度来说，如果浏览器接收到的 response 的状态码是 304，就代表这个资源在客户端中的缓存依然是有效的，即在上次拿到资源到当前这段时间之内服务器端并没有对这个资源做修改。
　　etag 与 last-modified是服务器在接收到带条件的GET 请求之后塞到 response 的 header 里面。
　　如果本地有相关资源的缓存，并且在缓存的时候响应头里面有 etag 或者 last-modified 的情况，这个时候去请求服务器的时候就会是带有条件的 GET 请求(Conditional Validation)。
　　在请求头里面可能会有两个字段： if-none-match、 if-modified-since，其中 if-none-match 的值是服务器上次返回该资源时响应头里面 etag 的值，if-modified-since 的值是服务器上次返回该资源时响应头里面 last-modified 里的值。
　　紧接着服务器端就会接收到这个带有条件的 request，然后会根据这两个值去判断缓存的资源是否是最新的。
　　如果没问题，即资源是最新的情况下就会返回 304，body 为空；不是的话就会返回 200，即目前浏览器端的资源不是最新的，body 里面就是资源体，然后客户端就会用最新返回的资源覆盖掉之前的资源。
　　发送这种带条件的请求的必要条件是 资源在浏览器端有缓存，并且在缓存的时候服务器端的reponse 里面有 etag 或者 last-modified。如果这个条件不满足，发送的请求就是没有条件的(unconditionally)。　　
如果 Last-Modified 和 ETag 同时被使用，则要求它们的验证都必须通过才会返回304，若其中某个验证没通过，则服务器会按常规返回资源实体及200状态码。
　　如果同时有 etag 和 last-modified 存在，在发送请求的时候会一次性的发送给服务器，没有优先级，服务器会比较这两个信息（在具体实现上，大多数做法针对这种情况只会比对 etag）。
　　服务器在输出上，如果输出了 etag 就没有必要再输出 last-modified（实际上大多数情况都会输出）。
二. Cache-Control 和 Expires ：
　　在 response 里面 Cache-Control 和 Expires，都用来指定过期时间；如果同时存在，Cache-Control 优先级大于 Expires 。
　　在这段时间内，不去请求服务器。
　　例子如下：

cache-control:max-age=96247433
expires:Thu, 03 Jan 2019 04:24:16 GMT

实际上浏览器输入 url 之后敲下回车就是先看本地 cache-control、expires 的情况，刷新(F5)就是忽略本地 cache-control、expires 的情况，带上条件 If-None-Match、If-Modified-Since，强制刷新(Ctrl + F5)就是不带条件的访问。

• 在 Windows 系统中，浏览器的刷新快捷键都是 F5，强制刷新是 Ctrl+F5，而在 Mac 系统下浏览器的刷新快捷键变成了 command+R，Chrome 中的强制刷新快捷键为 command+shift+R。

• 闭包========

1. 在函数外部自然无法读取函数内的局部变量。
2. "链式作用域"结构（chain scope）：子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的。
3. 闭包就是能够读取其他函数内部变量的函数，可以把闭包简单理解成“定义在一个函数内部的函数”。f2函数，就是闭包。

function f1(){
    var n=999;
    function f2(){
        alert(n); // 999
    }
}    

4. 闭包的最大用处有两个：一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
5. 使用闭包的注意点：闭包会在父函数外部，改变父函数内部变量的值；不要滥用闭包，消耗内存；
6. 清空闭包保存在内存中的变量，方法是：在退出函数之前，将不使用的局部变量全部删除。

• 作用域========1.function划分；2.预解析；3.同名覆盖。

1. Javascript的变量的scope是根据方法块来划分的（也就是说以function的一对大括号｛ ｝来划分）。切记，是function块，而for、while、if块并不是作用域的划分标准。
2. Javascript在执行前会对整个脚本文件的声明部分做完整解析(包括局部变量)，从而确定好变量的作用域。
3. 当全局变量跟局部变量重名时，局部变量的scope会覆盖掉全局变量的scope；当离开局部变量的scope后，又重回到全局变量的scope；而当全局变量遇上局部变量时，怎样使用全局变量呢？用window.[globalVariableName]。

• 伪数组 定义：

1. 具有length属性
2. 按索引方式存储数据
3. 不具有数组的push,pop等方法

• 伪数组转换为数组：
  [].slice.call(obj,0); 或 Array.prototype.slice.call(obj,0);

• jQuery为开发插件提拱了两个方法，分别是：

1. $.extend(object); 用来扩展jQuery对象本身。
2. $.fn.extend(object); 用来开发jQuery插件，扩展jQuery实例； jQuery.fn = jQuery.prototype；是对jQuery.prototype的扩展，会对每一个jQuery实例有效。
   区别：
   jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init();
   而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。

• 一般情况下有哪些地方会有缓存处理？
  dns缓存，cdn缓存，浏览器缓存，服务器缓存

• 常用函数：
  split：将字符串分割成数组
  join：将数组合成字符串
  slice：返回子数组
  splice：数组中添加、删除元素

• 会改变数组的方法是：添加和删除4个，reverse，sort，splice
  其他方法都不会改变数组。

• 什么时候使用 jQuery.attr() ，什么时候使用 jQuery.prop() ？

1. 添加属性名称该属性就会生效应该使用prop(); 比如：checked，selected
2. 是有true,false两个属性使用prop();
3. 其他则使用attr();

• 阻止浏览器的默认行为:
  window.event ? window.event.returnValue = false : e.preventDefault();
  停止事件冒泡:
  window.event ? window.event.cancelBubble = true : e.stopPropagation();
  原生JavaScript中，return false;只阻止默认行为，不阻止冒泡；jQuery中的return false;既阻止默认行为，又阻止冒泡。

• 隐式转换为false的情况（6种）：
  undefined、null、false、''、NaN、0

• Dom tree，css tree，render tree，layout，painting，[reflow重排，repaint重绘]

• 正则表达式 构造函数：var reg=new RegExp(“xxx”);
  正则表达式 字面量：var reg=//

• js的运行主要分两个阶段：js的预解析和运行，预解析阶段所有的变量声明和函数定义都会提前，但是变量的赋值不会提前。

• 页面性能优化======
  压缩
  合并
  减少http请求数
  减少dom数量
  减少dom操作
  使用缓存

• 浏览器内核：
  Blink：新版chrome
  Webkit：Safari、旧版chrome
  Gecko：Firefox
  Trident：旧版IE
  EdgeHTML：IE10及以后使用
  Presto：旧版opera

• 浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。

• sass与less：
  他们是动态的样式语言，是CSS预处理器，CSS上的一种抽象层。
  区别：

1. 变量符不一样，Sass是$，而less是@;
2. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
3. Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

• jsonp原理：创建script标签，src是一个脚本，脚本的内容是一个函数调用。事先在页面定义好回调函数。

• ajax====
  优点：异步调用，局部刷新；
  缺点：1.对搜索引擎支持不友好；2.不安全，暴露了交互参数；3.不支持浏览器back按钮；

• 立即执行函数，匿名函数============

• this指向：
  全局的this → 指向的是Window
  函数中的this → 指向函数所在的对象
  对象中的this → 指向本身

• 函数与对象==========

function f1(){
    console.log(this);     
}
var obj = new f1();  // 此时，this是函数f1; f1已经是一个对象  
f1();  // 此时，this是window对象

• 保存变量========
  保存基本类型的变量，变量是按值访问的，因为我们操作的是变量实际保存的值。
  保存引用类型的变量，变量是按引用访问的，我们操作的是变量值所引用（指向）的对象。
  在函数内部修改了引用类型值的参数，该参数值的原始引用保持不变。

• 变量声明提前，作用域链====

    var str = 'hello';
    function test() {
        console.log(str); // 输出:undefined. 下一行声明了变量,预解析时声明提前;只声明,没赋值,所以是undefined
        var str = 'world'; //  变量同名,函数内,局部变量覆盖全局变量;为什么会覆盖全局变量,因为js的链式作用域
        console.log(str); // 输出:world
    }
    test();
    console.log(str); // 输出:hello. 不在函数内,是访问全局变量.

• js中的数字都是用IEEE 754 标准的双精度浮点数表示。

• 单竖杠“|”运算就是转换为2进制之后相加得到的结果。

• new操作符具体干了什么?
  1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
  2、属性和方法被加入到 this 引用的对象中。
  3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

• 原型，原型链=======

1. 原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也可能有自己的原型;
   如果一个原型对象的原型不为 null 的话，就能组成原型链。
2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

• 事件的3个阶段：
  捕获阶段、目标阶段、冒泡阶段
  捕获：window -> document -> html -> body -> div
  冒泡：div -> body -> html -> document -> window
  ele.addEventListener('click',function(){},false);
  第三个参数，默认false。true是捕获，false是冒泡。

• 阻止冒泡：
  在W3c中，使用stopPropagation()方法
  在IE下设置cancelBubble = true；

• 阻止事件的默认行为:
  在W3C中，使用preventDefault（）方法；
  在IE下设置window.event.returnValue = false;

• es6新特性========
  关键字：let与const
  箭头操作符
  模块
  类
  模板字符串
  默认参数、剩余参数
  Map，Set 和 WeakMap，WeakSet
  Math，Number，String，Object 的新方法
  promise、generator

• h5新特性========

• 移动端 做的项目、功能======

• 开发、上线流程=====
  js发布到发布服务器上，用户访问cdn来拉取，默认缓存5分钟；

• 架构=========
  实现前后端分离。
  用户终端=》cdn=》负载均衡=》web服务层=》业务层=》后端接口

• cdn=====
  js代码推到发布机上，用户访问的时候拉取；缓存5分钟。

• 通过对象的key来获得value，要使用 obj['key'] 的形式。

var obj = { 1:'111', aaa:'aaabbb' }

比如：obj['1'], obj['aaa']