- 在写vue项目时，很多地方用了ES6语法，让代码变得更简洁，所以在此将ES6语法总结一下
ES6的开发环境搭建
- 现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法。我们知道Webpack是有自动编译转换能力的，除了Webpack自动编译，我们还可以用Babel来完成，接下来我们使用babel把ES6编译成ES5.
建立工程目录：
- 先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist
- src：书写ES6代码的文件夹，写的js程序都放在这里。
- dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。
编写index.html：
- 文件夹建立好后，我们新建一个index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./dist/index.js"></script>
</head>
<body>
Hello ECMA Script 6
</body>
</html>
- 需要注意的是在引入js文件时，引入的是dist目录下的文件。
<script src="./dist/index.js"></script>
编写index.js
- 在src目录下，新建index.js文件。这个文件很简单，我们只作一个a变量的声明，并用console.log()打印出来。
let a=1;
console.log(a);
- 我们用了let声明，这里let是ES6的一种声明方式，接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件
初始化项目
- 在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：
npm init -y - -y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 可以根据自己的需要进行修改，比如我们修改name的值。
全局安装Babel-cli
- 在终端中输入以下命令,如果你安装很慢的话，可以使用淘宝镜像的cnpm来进行安装
本地安装babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli
- 安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
新建.babelrc
- 在根目录下新建.babelrc文件，并打开录入下面的代码
{
"presets":[
"es2015"
],
"plugins":[]
}
- 这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。
babel src/index.js -o dist/index.js
简化转化命令：
- 在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
- 修改好后，以后我们就可以使用 npm run build 来进行转换了。
新的声明方式
- var:在ES6中，var是用来声明全局变量
- let :声明局部变量，可以防止数据的污染
- const:声明常量，注意这个声明后，之后都不要改变它
变量的解构赋值
- ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。也许你还是不太明白，那先来一个最简单的数组解构赋值来进行赋值。
数组的解构赋值：
简单的数组解构：
以前，为变量赋值，我们只能直接指定值。比如下面的代码：
let a=0;
let b=1;
let c=2;
- 而现在我们可以用数组解构的方式来进行赋值。
let [a,b,c]=[1,2,3]; - 上面的代码表示，可以从数组中提取值，按照位置的对象关系对变量赋值。
数组模式和赋值模式统一：
- 可以简单的理解为等号左边和等号右边的形式要统一，如果不统一解构将失败。
let [a,[b,c],d]=[1,[2,3],4]; - 如果等号两边形式不一样，很可能获得undefined或者直接报错。
解构的默认值：
- 解构赋值是允许你使用默认值的，先看一个最简单的默认是的例子。
let [foo = true] =[];
console.log(foo); //控制台打印出true
- 上边的例子数组中只有一个值，可能你会多少有些疑惑，我们就来个多个值的数组，并给他一些默认值。
let [a,b="JSPang"]=['技术胖']
console.log(a+b); //控制台显示“技术胖JSPang”
- 现在我们对默认值有所了解，需要注意的是undefined和null的区别。
let [a,b="JSPang"]=['技术胖',undefined];
console.log(a+b); //控制台显示“技术胖JSPang”
- undefined相当于什么都没有，b是默认值。
let [a,b="JSPang"]=['技术胖',null];
console.log(a+b); //控制台显示“技术胖null”
- null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。
对象的解构赋值
- 解构不仅可以用于数组，还可以用于对象。
let {foo,bar} = {foo:'JSPang',bar:'技术胖'};
console.log(foo+bar); //控制台打印出了“JSPang技术胖”
- 注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性名同名，才能取到正确的值。
圆括号的使用
- 如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错。
let foo;
{foo} ={foo:'JSPang'};
console.log(foo);
- 要解决报错，使程序正常，我们这时候只要在解构的语句外边加一个圆括号就可以了。
let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制台输出jspang
字符串解构
- 字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e,f]="JSPang";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
扩展运算符和rest参数
- ( 扩展运算符和rest参数)[http://www.jb51.net/article/118958.htm]
rest参数
- rest参数形式为:
...变量名 - rest参数搭配的变量是一个数组，该变量会将函数的参数放入一个数组中，所以可以用rest参数代替argouments对象,请看下面一个例子:
function sortNumbers1 () {
return Array.prototype.slice.call(arguments).sort();
}
const sortNumbers2 = (...values) =>{
return values.sort();
}
console.log(sortNumbers1(9,2,5,1));
console.log(sortNumbers2(9,2,5,1));
rest参数和arguments对象的区别
- arguments 对象不是一个真实的数组；上文的``` Array.prototype.slice.call(arguments)```就是将 arguments 对象转化成一个真数组，而rest参数是真实的 Array 实例，也就是说你能够在它上面直接使用所有的数组方法
- rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
function f(a, ...b, c) { ... } // 报错
字符串模版
- ES6新增了字符串的操作，就是字符串模板，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作
字符串模版
- 我们先看看ES5的字符串拼接:
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
document.write(blog);
- 这种方式很麻烦，也很容易出错
- 再看看ES6的字符串拼接:
let jspang='技术胖';
let blog = `非常高兴你能看到这篇文章，我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
document.write(blog);
- 可以从浏览器上看到跟上面的结果一样
对运算的支持：
let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);
字符串查找
- ES6直接用includes就可以判断，存在就返回true，不存在返回false,不再返回索引值
复制字符串
- 我们有时候是需要字符串重复的，比如分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单。
document.write('jspang|'.repeat(3));
ES6数字操作
数字判断和转换
数字验证Number.isFinite( xx )
- 可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。
let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
NaN验证
- NaN是特殊的非数字，可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true
console.log(Number.isNaN(NaN));
判断是否为整数Number.isInteger(xx)
let a=123.1;
console.log(Number.isInteger(a)); //false
整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
let a='9.18';
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));