js 知识点

时间 2019-11-10

原文原文链接

用正则表达式验证字符串长度时，必定要带上 ^ 与 $。若是咱们把 ^ 与 $ 去了，则凡是含有八位数字的字符串都会验证经过。javascript
js中 target 与 currentTarget 的区别:
一、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）
二、只有当事件流处于目标阶段的时候才相同
三、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，一般是事件的祖元素。css
js里面的异步，计时器、xhr等才会产生。html
js的继承
6种：
Objct.create方法；（推荐）
call,apply；
原型继承（子原型指向父实例，子原型利用空对象间接指向父原型）；
构造函数+原型；
对象拷贝；
es6中的继承。vue
如何避免全局变量污染
只建立一个全局命名空间
使用闭包
使用当即执行函数html5
什么是当即执行函数，几种写法？

( 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是函数做用域java
函数做用域链是针对函数的
原型链是针对对象的构造函数的react
gulp如何建立一个命令
gulp.task()jquery
深拷贝、浅拷贝
浅拷贝：不会产生新的对象，产生一个指针指向原来的对象的地址，也叫地址拷贝或者指针拷贝
深拷贝：产生新的对象，有本身的内存地址，复制的是内容，对副本进行修改不会影响原来的对象css3
css盒模型
content，padding，border，margin
box-sizinges6
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 数据类型和判断方法

数据类型	种类
数据类型7种(5+1+1)	number、string、boolean、undefined、null、object、　　　　　symbol(ES6)
typeof 返回数据类型(7种)	number、string、boolean、undefined、　　　object、function、symbol(ES6)
判断方法	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；
清除浮动通常有两种思路：
1、利用clear属性，清除浮动
2、使父容器造成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，再加上任何溢出内容的尺寸
各类宽度和高度：

clientWidth和clientHeight 包括padding，不包括border。
offsetWidth 和 offsetHeight 是用来获得对象的大小，由自身宽高、padding、border构成。
offsetLeft 和 offsetTop 用来获得对象的位置，到距离自身最近的（带有定位的）父元素的左侧/顶部的距离，若是全部父级都没有定位则以body 为准
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等操做？
答：

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

建立对象的方法，3种：

使用对象直接量

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种方法：

call，apply=
原型继承，分为2种：子原型指向父实例，子原型经过空对象作中介间接指向父原型
构造函数+原型
对象拷贝
Object.create方法（推荐）相关例子：http://runjs.cn/detail/t3mdmyp8
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），也就是如何编写程序的方法论。
它属于"结构化编程"的一种，主要思想是把运算过程尽可能写成一系列嵌套的函数调用。
函数式编程具备五个鲜明的特色。

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

函数式编程好处====

代码简洁，开发快速
接近天然语言，易于理解
更方便的代码管理
易于"并发编程"
代码的热升级

Javascript规定，每个构造函数都有一个prototype属性，指向另外一个对象。这个对象的全部属性和方法，都会被构造函数的实例继承。
这意味着，咱们能够把那些不变的属性和方法，直接定义在prototype对象上。
isPrototypeOf()方法用来判断，某个proptotype对象和某个实例之间的关系。
每一个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性究竟是本地属性，仍是继承自prototype对象的属性。
in运算符能够用来判断，某个实例是否含有某个属性，无论是否是本地属性。
in运算符还能够用来遍历某个对象的全部属性。
任何一个prototype对象都有一个constructor属性，指向它的构造函数。每个实例也有一个constructor属性，默认调用prototype对象的constructor属性。
html5新特性：

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

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）禁止使用with语句（2）创设eval做用域
增长的安全措施（1）禁止this关键字指向全局对象（2）禁止在函数内部遍历调用栈
禁止删除变量只有configurable设置为true的对象属性，才能被删除。
显示报错
重名错误 1）对象不能有重名的属性（2）函数不能有重名的参数
禁止八进制表示法
arguments对象的限制（1）不容许对arguments赋值（2）arguments再也不追踪参数的变化（3）禁止使用arguments.callee
函数必须声明在顶层
不能使用保留字：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，若是这个条件是真的就会返回 30四、不然就会返回 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。
闭包========

在函数外部天然没法读取函数内的局部变量。
"链式做用域"结构（chain scope）：子对象会一级一级地向上寻找全部父对象的变量。因此，父对象的全部变量，对子对象都是可见的。
闭包就是可以读取其余函数内部变量的函数，能够把闭包简单理解成“定义在一个函数内部的函数”。f2函数，就是闭包。

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

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

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

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

伪数组定义：

具备length属性
按索引方式存储数据
不具备数组的push,pop等方法

伪数组转换为数组：
[].slice.call(obj,0); 或 Array.prototype.slice.call(obj,0);
jQuery为开发插件提拱了两个方法，分别是：

$.extend(object); 用来扩展jQuery对象自己。
$.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() ？

添加属性名称该属性就会生效应该使用prop(); 好比：checked，selected
是有true,false两个属性使用prop();
其余则使用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上的一种抽象层。
区别：

变量符不同，Sass是$，而less是@;
Sass支持条件语句，可使用if{}else{},for{}循环等等。而Less不支持;
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操做符具体干了什么?
一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。
二、属性和方法被加入到 this 引用的对象中。
三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。
原型，原型链=======

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

事件的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']