一天轻松搞定ECMAScript 6.0（简称 ES6）入门
序 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂
admin
序
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
由于es6越来越重要，已经成为了web前端开发者必备知识。为了能够快速的入门，这里总结了一些基本方法作为参考学习，希望有所帮助。如果想了解更多，还要靠慢慢的积累。
弄明白以下10点，入门完全够了，至于深层次的东西就看个人造化了。
1. let , const 和 块级作用域
let
最简单粗暴的做法就是：以前用“var”声明的变量，现在用“let”替代就是了。
例一：
var a = 123; //es2015写法
let a = 123; //es6写法
例二：
//es2015
var fn = function () {
//handle
};
//es6写法
let fn = function () {
//handle
};
//或者
let fn = () => {
//handle
}
const
这是常量的声明，比如PI=3.1415这类不希望被人更改的东西用const。
例如：
const PI = 3.141592563
块级作用域 == “{}”
最简单粗暴的区分es6块级作用域的方法就是：“每一个{}就是一个块级作用域，包括for循环后面的大括号也是块级作用域”。
例如：
{
let a = 'apple';
console.log(a); //apple
{
let a = 'aaa';
console.log(a); //aaa
}
{
console.log(a); //apple
}
{
let a = 'AAA'
console.log(a); //AAA
}
console.log(a); //apple
}
2. 变量解构赋值
解构赋值本质上属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
数组解构赋值
例一：
let [a, b, o] = ['apple', 'banana', 'orange'];
console.log(a, b, o); //apple banana orange
例二：
let [a, [b, c], d] = ['aa', ['bb', 'cc']];
console.log(a, b, c, d); //aa bb cc undefined
例三：
let [a, b, ...other] = [1, 2, 3, 4, 5, 6, 7];
console.log(a, b, other); //1 2 [3, 4, 5, 6, 7]
有人就想这个”...“是什么东西，不要着急，先往下看。
对象解构赋值
例一：
let { a, b } = { a: 'apple', b: 'banana' };
console.log(a,b); //apple banana
例二：
let { a, b } = { a: 'apple', c:'hehehehehe', xx: 'xxxxxx', b: 'banana' };
console.log(a,b); //apple banana
例三：
let { a, xx:{ b } } = { a: 'apple', xx: { b: 'boy'}, b: 'banana' };
console.log(a,b); //apple boy
混合解构赋值（这个概念是我自己编的）
从上面的“栗子”我们可以知道，es6的解构赋值其实讲究的就是“匹配模式”，即等号两面模式一致，就会赋予相应的值，未匹配的则为undefined。那么，下面的例子就顺理成章了。 例一：
let [a, b, {x: {c}, d}, e] = ['aa', 'bb', {o: 'oo', x: {v: 'vv', c: 'cc'}, d: 'dd'}];
console.log(a, b, c, d, e); //aa bb cc dd undefined
例二：
let [arr, [obj]] = [[1, 2, 3], [{ a:'aa', b:'bb' }]];
console.log(arr, obj); //[1, 2, 3] {a: "aa", b: "bb"}
函数参数解构赋值
函数参数的解构赋值其实也是一样的，本质都是“匹配模式”，只不过这里是形参与实参之间的匹配。 例如：
{
//es6环境下的es5+es6写法
function fun([a, b]) {
return a + b;
}
console.log(fun([100, 150])); //250
}
{
//es6写法
let fun = ([a, b]) => a + b;
console.log(fun([150, 100])); //250
}
再例如：
let fun = ([a, b], { o }) => [a, b, o];
let fruits = fun(['apple', 'banana'], {g: 'grap', o: 'orange'});
console.log(fruits); //["apple", "banana", "orange"]
作为入门，学会以上解构赋值就够用了，需要深入了解请自行百科。
3.字符串扩展
es6对字符串进行了大量API的扩展，不过对于菜鸟的我而言，最喜欢的莫过于模板字符串功能
模板字符串
例如：
es5写法
var name = 'loushengyue',
age = 30,
sex = 'man';
var tpl =
'
'name: ' + name + '' +
'age: ' + age + '' +
'sex: ' + sex + '' +
'
console.log(tpl); //
es6写法
let name = 'loushengyue',
age = 30,
sex = 'man';
let tpl = `
console.log(tpl); //
其他扩展
codePointAt()String.fromCodePoint()normalize()includes(), startsWith(), endsWith()repeat()padStart()，padEnd()matchAll()…
其中，我对includes(), startsWith(), endsWith() 方法还是蛮感兴趣的，下面是他们的简单说明：
includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
4.正则扩展
es6加强了RegExp构造函数的功能，拓展了u 、y修饰符，新增sticky，flags 属性等。 对于菜鸟的我呢，我还是建议先用好这几个方法再去研究es6的新增功能吧。
test() 返回booleanexec() 返回类似数组的集合match() 返回类似数组的集合replace() 返回替换后的字符串search() 返回下标，未匹配上返回-1split() 返回数组
es6正则学习参考网站：http://es6.ruanyifeng.com/#docs/regex
5.数值的扩展
数值的二进制，八进制，十六进制表示法
0b 开头后面接0-1 的数值构成二进制0o开头后面接0-7 的数值构成八进制0x开头后面接0-9的数值或者abcdef 字符构成八进制
例如：
console.log(0b1001); //9
console.log(0o17); //15
console.log(0x2f); //47
指数运算符
ES2016 新增了一个指数运算符（**）。 例如：
console.log(2 ** 3); //8
console.log(2 ** 4); //16
//还可以**=
let num = 2;
num **= 3;
console.log(num); //8
其他扩展
Number.isFinite() 判断数值是否为有限的（finite），返回booleanNumber.isNaN() 判断是否为NaNNumber.parseInt() 转为整型Number.parseFloat() 转为浮点型Number.isInteger() 判断一个数值是否为整数，返回booleanNumber.EPSILON 极小常量，即js的最小精度Number.isSafeInteger() 判断一个整数是否在-2^53到2^53之间Math.trunc() 除一个数的小数部分，返回整数部分…
6.函数扩展
这一节的内容是重点，需要完全掌握！！！
箭头函数
例一：
let fn = item => item * 2;
console.log(fn(8)); //8
//等价于es5的
var fn = function(item){
return item * 2;
}
例二：
let fn = item => { console.log(item * 2); }
fn(4); //8
//等价于es5的
var fn = function(item) {
console.log(item * 2);
}
例三：
let fn = () => 10;
//等价于es5的
var fn = function() { return 10; }
例四：
let fn = (a, b) => a + b;
//等价于es5的
var fn = function(a, b) { return a + b; }
函数参数默认值
例如：
let fn = (a, b, c =5, d = 'abcd') => [a, b, c, d];
console.log(fn(1, 3)); //[1, 3, 5, 'abcd']
console.log(fn(2, 4, 6)); //[2, 4, 6, 'abcd']
rest参数
ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
例如：
let sum = (...items) => {
let total = 0;
for (let index in items) {
total += items[index];
}
return total;
};
console.log(sum(1, 3, 5)); //9
console.log(sum(1, 3, 5, 4, 6)); //19
当然函数的扩展还有不少，但是就我看来上面这几个比较重要。
未完待续