Babel
1、确保我们安转了Nodejs和npm(Nodejs本身包含npm)
创建一个package.json文件
npm init(回车,直到下一步就可以)
2、安装babel
npm install babel-cli —save-dev
3、安装ECMAScript6/2015
npm install babel-preset-latest —save-dev
4、在项目根目录创建.babelrc配置文件
{
“presets”:[“es2015”]// 或者“presets”:[“latest”]
}
5、配置完成后就可以吧es6的语法转化成es5
新建一个main.js文件
写一个es6的代码
var fn = (a, b) => a + b;
6、在终端执行 ?:需要看某个文件下的.XX隐藏文件需要执行的命令是 ls -la XXX
./node_modules/.bin/babel main.js(需要编译的文件)
执行完毕就会在终端看到转化后的样子
下面是将使用浏览器来显示我们的es6的代码效果
从Babel6.0开始,不再直接提供浏览器版本,而是需要构建工具构建出来,如果你没有或者不想使用构建工具,可以通过安装5.x版本的babel-core模块获取
1、安装
npm install babel-core@5 ?:@后面是想要安装的版本号
2、编写测试文件
在根目录下创建一个html文件,比如index.html
引入browser.js和browser-polyfill.js两个文件,这两个是必须引入的文件
3、另外引入我们编写的es6代码的js文件
?:browser.js是Babel提供的转化器脚本,在引入我们编写的es6文件时,script标签的type需要”text/babel”
<script type =“text/babel” src=“main.js”></script>
4、开启一个浏览器服务,子啊浏览器端显示效果
browser-sync start —server ?:需要使用browser-sync 模块,首先安装并使用管理员权限安装成全局的npm install browser-sync -g
如果要是有es6的export功能需要全局安装jspm,然后进行初始化 init jspm
let 和const的异同
都是在一个块内不能被重复声明的,什么是重复声明,就是let a = 12; let a = 13;const b = 12; const b = 13;就像这种
不同点: let可以被重新赋值,const不能被重新赋值,所以在初始化时必须设定一个值。
let 和const声明的变量也不能和var 在同一个块作用域内 声明的变量重名(这里的块作用域就是指的是let的,就是let和const所在的块级作用域,不能有和也在这个块级作用域的var声明一样的变量)
解构赋值
如果是json的时候跟顺序无关 如:var {a,b,c} = {b:5,a:12,c:9};console.log(a);// 12 因为json本来就是无序的。
模式匹配:
就是左侧的样式跟右侧的样子是一样的。
复制数组
a) for
b) Array.from(arr) //es6
c) var arr2 = […arr1]; //es6 ...是真正的数组,可以进行数组的操作如arr1.push(20);
循环
图通for
for in //不能循环Map对象的
for of // es6 可以循环数组,不能循环json格式数据,他是遍历Map对象,而且出来的是键值对一对值
var map = new Map();
map.set('a','1111'); // 设置
map.set('b','2222');
map.set('c','3333');
map.set('d','4444’);
map.delete('b');
for(var name of map){
console.log(name);// ["a", "1111"] ["c", "3333"] ["d", "4444"]
}
还可以这样写,第一个是键值,第二个是值值
for(var [key,value] of map){
console.log(key + value); // a1111 b2222 c3333 d4444
}
for(var [key,value] of map.entries()){ //整体
console.log(key + value); // a1111 b2222 c3333 d4444
}
for(var [key,value] of map.keys()){ //只循环key值
console.log(key + value); // a b c d
}
for(var [key,value] of map.values()){ //只循环value值
console.log(key + value); // 1111 2222 3333 4444
}
如果for of 循环数组,默认的就是循环value值
var arr1 =[‘1111’,’222’,’3333’];
for(var value of arr1){ //默认
console.log(value); // 1111 222 3333
}
for(var value of arr1.entries()){ // 循环整体 索引+值
console.log(value); // [0, "1111”] [1, "222”] [2, "3333"]
}
for(var value of arr1.values()){ // 循环 索引
console.log(value); //1111 222 3333
}
Map对象
var map = new Map();
map.set('a','1111'); // 设置
map.set('b','2222’);
map.set('c','3333');
console.log(map.get('c')); // 获取
console.log(map);
map.delete('b'); // 删除
console.log(map);
箭头函数的问题
a)this的指向问题,this指向了window
b)arguments不能使用了
Promise: 就是一个对象,用来传递一步操作的数据(消息)
3种状态:pending(等待,处理中)—>Resolve(完成、fullFilled)
—>Rejected(拒绝,失败)