一、兼容性
ES6(ES2015)——IE10+、Chrome、FireFox、移动端、NodeJS
编译、转换
1.在线转换
引入js, browser.js==bable
<script src="browser.js"></script>
<script type="text/babel">
//执行代码
</script>
2.提前编译
（推荐，不需用户每次打开编译）
二、ES6
1.变量
| 名称 | 类型 | 块级作用域 | 重复声明 | 修改次数 |
|---|---|---|---|---|
| var | 变量 | 无 | 可以 | 无限 |
| let | 变量 | 块级 | 不能 | 可以 |
| const | 常量 | 块级 | 不能 | 不能 |
<div class="btn">button1</div>
<div class="btn">button2</div>
<div class="btn">button3</div>
window.onload=(function(){
var btn=document.getElementsByClassName('btn');
for(var i=0;i<btn.length;i++){
(function(i){
btn[i].onclick=function(){
alert(i)
}
})(i)
}
<!--等价于-->
for(let i=0;i<btn.length;i++){
btn[i].onclick=function(){
alert(i)
}
}
})
2.函数
2.1 箭头函数
- 如果只有一个参数,()可以省
- 如果只有一个return,{}可以省
()——只有一个参数
{}——只有一个return
2.2 函数的参数
1. 参数扩展/数组展开：
- 收集参数
function show(a,b,...args){
<!--...args接收剩余参数-->
<!--args必须是最后一个-->
}
- 展开数组
- 展开后的效果，跟直接把数组的内容写在这一样
let arr1 = [1,2,3];
let arr2 = [5,6,7];
let arr=[...arr1,...arr2];
let arr[1,2,3,5,6,7];
2. 默认参数
show(age)
2.3 解构赋值
- 左右两边结构必须一样
- 右边必须是个东西
- 声明和赋值不能分开（必须在一句话里完成）
let [a,b,c]=[1,2,3];
let {a,b,c}={1,2,3};//报错
let [a,b];[a,b]=[1,2];//声明和赋值不能分开
let [arr,{a,b},num,str]=[[1,2,3],{a:12,b:3},12,'string'];
3.数组
| 方法 | 名称 | 含义 | 参数 | 返回值 |
|---|---|---|---|---|
| map | 映射 | 一个对一个 | arr.map(item) | 变换后的数组 |
| reduce | 汇总 | 一堆出来一个 | arr.reduce(tmp,item,index) tmp-上一次计算的结果 |
一个数值 |
| filter | 过滤器 | 保留一部分 | arr.filter(item) | 不/符号条件的return false/true 返回满足条件的数 |
| forEach | 循环（迭代） | 数组的循环 | arr.forEach(item,index) | 无 |
4.字符串
- 多了两个新方法
- startsWidth//以xx开头
- endsWidth//以xx结尾 判断后缀名
-
字符串模板 ``反单引号
字符串连接：单引号、双引号
let str=`<div>
<h1>${title}</h1>
<p>${content}</P>
</div>`;
- 直接把东西塞到字符串里面 ${东西}
- 可以折行
5.面向对象
class关键字、构造器和类分开;
class里直接加方法；
继承： super 父类/超类
json: 1.JSON对象 JSON.stringify JSON.parse 2.简写 名字跟值（key和value）一样的 留一个就行 方法 ：function一块删 show:function(){...} show(){...}
json的标准写法： 1.只能用双引号 2.所有的名字都必须用引号包起来
6.Promise
| 类型 | 执行 | 代码复杂度 |
|---|---|---|
| 异步 | 操作之间没啥关系，同时进行多个操作 | 复杂 |
| 同步 | 同时只能做一件事 | 简单 |
Promise——消除异步操作 用同步一样的方式，来写异步代码
let p = new Promise(function(resolve,reject){
//异步代码
//resolve 成功执行的方法
//reject 失败执行方法
});
p.then(function(){
//resolve 成功执行的方法
},function(){
//reject 失败执行方法
})
Promise.all([$.ajax(),$.ajax()]).then(results=>{
//成功
}，err=>{
//失败
})
Promise.all Promise.race 竞赛，用法同all,只有一个成功即可
7.generator
generator-生成器 函数 普通函数——一路到底 generator函数——中间能停 踹一脚走一步
function *函数() √
function* 函数 √
funciton*函数() x
yield即可传参，也可返回
//yield传参
function *show(){
alert('a');
let a = yield;
alert('b');
alert(a);//a=5
}
let gen = show();//若想给yeild之前传参，可按照正常的形参传递
gen.next(12);//没发给yeild传参
gen.next(5);
yield返回
function *show(){
alert('a');
yield 12;
alert('b');
return 55;//返回最终值
}
let gen = show();
let res1=gen.next();
console.log(res1);//{value:12,done:false}
let res2=gen.next();
//console.log(res2);//{value:undefined,done:true}
console.log(res2);//{value:55,done:true}
yield类似于Promise,解决异步
| 方法 | 本质 |
|---|---|
| Promise | 等待异步操作结束 |
| generator | 无感处理异步操作 |
| async | 官方runnder，等同于generator |
runner(function *(){
xxx
let 结果1 = yield 异步操作1;
xxx
let 结果2 = yield 异步操作2;
});
//async/await 等同于generator
(async(()=>{
xxx
let 结果1 = await 异步操作1;
xxx
let 结果2 = await 异步操作2;
})();
8.模块化
模块=>元件=>组件
1. 民间的——sea.js、require.js
CMD、AMD的区别
安装：bower i seajs
sea——按需引用、解决依赖
2. nodejs模块化
2.1 CMD模式
- 没有define
- exports、require、module
- 引用自定义模块
放到node_modules里；
前面加./
2.2 自己创建npm包
- 一般命名为n开头(nmath)
- cd进入对应文件目录，创建包信息
- npm login 输入用户名密码，验证邮箱
- npm publish 发布
3.ES6模块化
import 引入文件
export 导出
webPack编译ES6模块
babel编译ES6函数
| 模块 | 引入 | 输出 |
|---|---|---|
| node | let mod = require('./aaa.js') | exports.xx module.exports = { xxx } |
| ES6 | import mod from "./xxx.js" | export { x，x，x } |
3.1 babel
1.安装babel-cli
cli 命令行工具
npm i babel-cli -g
