ES6 简要知识点

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(拒绝，失败)

 

转载于:https://my.oschina.net/u/3284240/blog/874372