ES6教程 2-基本语法
2.基本语法
let, const, forEach,for of class, extends, super arrow functions, template string, destructuring, default, rest arguments
以上是我们需要掌握的常用的ES新特性，一个一个的玩，不要怕,下面这段代码是模板，写完ES6可以直接跑在最新版Chrom浏览器上的，其他浏览器估计跑不起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
"use strict"
//es6代码写这里，直接在浏览器运行，P5和P6为自定义的方法函数，用于打印log输出
let count = 0;
/**
* 打印
* @param {[type]} name [description]
* @return {[type]} [description]
*/
function p5(name = "") {
console.log(count++ + "、ES5 console:" , arguments);
}
function p6(name = "") {
console.log(count++ + "、ES6 console:" , arguments);
}
</script>
</body>
</html>
2.1 变量
玩一门新技术，最先玩的是哪里，对，跟我读，是变量 js 最大的坑是变量作用域，如果一个人够吊，他可以写出一堆变量作用域炸弹，让人不知不觉之间就看不懂代码了，恩对，这样的程序员就是不可替代的程序员，替换了，代码就爆炸了，那么言归正传。
2.1.1 let
我们来看一个老生常谈的话题，ES5里面js变量作用域的坑：
function funA(){
for(var i = 0; i < 5; i++){
}
console.log(i);//不好意思，我从for循环里面出来了，我木有被干掉
}
我们再来看一下ES6的玩法
function funB(){
for(let i = 0; i < 5; i++){
}
console.log(i);//undefined;我被限制在了作用域里面，无法动弹
}
以后大家写代码，尽量用let代替var就可以了，你会看到github或者你同事的电脑上面，一堆的let，不要惊讶，这是正确的，一个替代var的优雅的关键词let，你要记住它，俗话说有好处就有坏处，这是矛盾论，那么我们使用了let之后，需要注意哪些坑呢。
坑1：重复定义，var 两个一样的变量没事，后面的会覆盖前面的，而let同一个变量名字就挂了
function funC(){
//坑1：重复定义
let a = 1000;
let a = 200;//Uncaught SyntaxError: Identifier 'a' has already been declared
for(let i = 0; i < 5; i++){
}
console.log(i);//undefined;我被限制在了作用域里面，无法动弹
}
坑2：不要使用关键词做变量 let let = 2；
function funD(){
let a = 1000;
let let = 200;//Uncaught SyntaxError: let is disallowed as a lexically bound name
}
2.1.2 const
玩过java的都知道，一般的静态变量，static final 的变量后续是不能被修改的，比如static final PI=3.14，后面再胆敢对PI进行任何的加减乘除，都是报错的，编译器都通不过，同样的，js缺少一个这种强制不让改变的关键词，这次const出来了,好处就是防止程序员手一抖嗦把不该改变的变量给改变了。
举个栗子先
const A = 0;
A = 2; //Uncaught TypeError: Assignment to constant variable.
当然和let一样，它也不能两次定义同一个变量
const A = 0;
const A; //Uncaught TypeError: Assignment to constant variable.
哈哈，此刻的我忽然脑洞大开，如果让let和const都声明一个变量，会怎么样尼。
let A;
A = 2;
const A = 3;//Identifier 'A' has already been declare
const A ; //Missing initializer in const declaration
const A = 2 ; //Uncaught TypeError: Assignment to constant variable.
自己感受下哈
2.2 for循环
var words = "this is a world";
var arr = words.split(" ");
//es5: for each
for(var i=0; i<arr.length; i++){
console.log(arr[i]);//缺点是遍历下标，优点是好歹还有个下标
}
//es6: for of
for(var i of words){
console.log(arr[i]);//缺点是木有下标，优点是省去遍历下标
}
//es6: forEach
arr.forEach(n => console.log(n));
也有人说，用for in也可以循环，无论是老的es5还是新的es6，for in不建议用来遍历数组，因为遍历出来的结果可能会异常，比如遍历一个你认为是数组但是却不是数组的元素，就可能大批量的undefined，以后用for of即可。
2.3 解构
解构是个非常好玩的东西，你有个对象，有不同的key和value，那么就可以是用解构，快速的对应相应的结果，同样，解构也常用于数组。
[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
{a, b} = {a:1, b:2}
{a, b, ...rest} = {a:1, b:2, c:3, d:4} //ES7
{a, b} = {a:1, b:2}作为独立语法是非法的，左侧的{a, b}会被当成块结构而不是一个对象。
然而({a, b} = {a:1, b:2})的形式是允许的，其等价于var {a, b} = {a:1, b:2} 。
也许你还看不懂上面写的是个啥，没问题，我也看不懂，那么我们来一起看看这玩意是咩
2.3.1 解构数组
var arr = ["one", "two", "three"];
// 没有解构赋值
var one = arr[0];
var two = arr[1];
var three = arr[2];
// 解构赋值
var [one, two, three] = foo;
如上可以清晰的感觉到，一行代码就完成了以前三行代码的赋值，并且，我可以清晰的在自己的大脑以及别人的大脑中留下印象：原来one就是arr[0],...,但是这又有何用呢，我难道有一百个数组元素，我就弄一百个解构体来接吗？
你说的很对，没有必要，这个例子只是告诉你，神马是解构，下面我们来玩点ES5玩不了的，而ES6又特别特别方便的。
2.3.1.1 交换数组变量
var a = 1;
var b = 3;
console.log([a,b]);//[1, 3]
[a, b] = [b, a];
console.log([a,b]);//[3, 1]
[a, b] = [b, a+b];
console.log([a,b]);//[1, 4]
/*
//交换
a = a^b ;
b = a^b ;
a = a^b ;
console.log(a,b);
*/
就这样，数组内的元素，悄无声息的，发生了互换/计算，比你冒泡、置换快多了，也比a = a^b ; b = a ^ b ; a = b ;这种交换方便阅读。
2.3.1.2 返回多个值
以前想返回多个值，我们得制作一个对象，然后返回出去，或者制造一个数组，返回上去。来看下新玩法
function fun() {
return [1, 2, 3];
}
//ES5我们还得用变量来接，然后再循环处理
var arr = fun();
p5(arr);//1，2，3
a = arr[0];
b = arr[1];
p5(a,b);
//ES6我们可以直接接住，并且兑到指定的单个变量中
var [c,d,e] = fun();
p6(c,d,e);
var [f,,g,h] = fun();//解构可以空着~
p6(f,g,h);//1,3,undefined
var arr2 = fun();//es5的语法依然没问题
p6(arr2);//1，2，3
var [,,] = fun();//神马也不解构，也没问题的
当然，这些只是最最基础的部分，下面我们来搞点复杂的嵌套，这才有意思。
//解构全部
var [a1,[a2,a3],a4] = [1,[2,3],4];
p6([a1,[a2,a3],a4]);//[1,[2,3],4];
//故意不解构全部 [a2]
var [a1,[a2],a4] = [1,[2,3],4];
p6([a1,[a2],a4]);//[1,[2],4];
//弄个数组来接收数组
var [a1,a2,a4] = [1,[2,3],4];
p6([a1,a2,a4]);//[1,[2,3],4]; a2 = [2,3]
//不定参数 ...
var [a1,,a4] = [1,[2,3],4];
p6([a1,,a4]);//[1, undefined × 1, 4]
var [a1,...a4] = [1,[2,3],4];
p6([a1,a4]);//[1, [[2,3],4]
结论：当解构时，访问空数组或越界访问数组时，对其解构与对其索引的行为一致，最终得到的结果都是：undefined。
2.3.1.3 应用于迭代器
function* fibs() {
var a = 0;
var b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
var [first, second, third, fourth, fifth, sixth] = fibs();
console.log(sixth);
2.3.2 解构对象
哈哈，这个更有意思，如果说你对刚才的数组解构不过瘾，那么我们来瞅瞅对象的解构 对象的解构，和数组不同，因为数组是有解构的前后顺序的，而对象就是一堆kv而已，木有啥顺序，解构更舒服
var obj = {k:'key',v:'value'};
var {k,v} = obj;
var {k:k1} = obj; //这种的k1直接就是obj[k]
p6(k); // key
p6(v); //value
p6(k1); // key
同样的，也可以解构嵌套的对象，只不过嵌套的时候，如果key与obj的key变量想通，是不会被赋值的，这点需要注意
var obj = {
data: {
a: 1,
b: 2
}
};
var {
data: {
a,b
}
} = obj;
// p6(data); undefined
p6(a);//1
p6(b);//2
2.3.3 解构Map
var map = new Map();
map.set('a','hello');
map.set('b','world');
for(let[k,v] of map){
p6(k,v);//0、ES6 console: ["a", "hello"],["b", "world"]
}
for(let[k] of map ){
//只获取k
}
2.3.4 解构字符串
const [a,b] = 'hello';
//a:h
//b:e
2.3.5 解构模块
const {Slider,SliderCode } = require('slider');//接收加载模块的指定方法
2.3 Map
2.4 Set
2.5 箭头
2.6 对象
@落雨 http://ae6623.cn 2016-04-04 2016-04-11 更新解构对象