ES6学习系列重点针对ES6中新增特性进行学习，分为两个章节：
- 30分钟学会ES6 (一)
本章节主要学习let，const，template string，变量解构赋值，函数，Set，Map - 30分钟学会ES6 (二)
本章节主要学习类和模块化。
30分钟学会ES6 (一)
let，const
let和const都是用于定义变量/常量，与以前的var类似，但是在特性上有区别，解决了var之前的一些问题。
let
-
通过
let修饰的变量只能在所在块区域中生效，而var在块外也可生效。var关键字定义的变量
{ var a = 10; } console.log(a); //10let关键字定义的变量，只在对应块内生效，不会到块外面，也不会影响子块。
{ let b = "hello"; console.log(b);//hello } console.log(b);//undefined -
通过
let定义的变量可以防止循环变量延申到外部。-
var关键词定义的循环变量
for(var i = 0;i<2;i++){
console.log(i);
};
console.log(“i=”+i); //i=2- `let`关键词定义的循环变量 从下面也可以看出，**通过`let`修饰的循环变量与块结构内的let定义的变量作用域不同** 。 ```javascript for(let i = 0;i<2;i++){ let i = "hello"; console.log(i); //abc } console.log(i);//Uncaught ReferenceError: i is not defined -
-
同一个块结构中不能出现两次同名的let定义的变量
var关键词定义的同名变量
{ var i = 10; var i = 11; console.log("i="+i); //i=11 }let关键词定义的同名变量
{ let i = 10; let i = 11; console.log("i="+i); //Identifier 'i' has already been declared }
const
const用于定义常量，作用域和let相同，也只会在所在块结构内部生效。
const定义的变量是指向内存地址，所以不可变的是内存地址，而不是值。也就是说变量不能重新定义新的对象，但是可以修改对应的值。
const常量作用域在块内。
{
const a = 10;
console.log(a); //10
}
console.log(a); //a is not defined
const常量不可新建对象，但是可以修改值。
const a = [];
a = [10];//Assignment to constant variable.
a.push(10);
console.log(a);//[10]
变量解构赋值
可以同时定义多个变量，例如函数同时返回多个值（类似于java的tuple）。这种情况下只要左右参数和值对应即可，通过数组方式定义。
- 解构数组
- 设置默认值
let [a,b=10]=[20];
console.log("a="+a); //20
console.log("b="+b); //10
-
解构对象
解构数组是通过
[]存放对应的变量和值，解构对象则是通过{}存放对应的变量和JSON格式变量。let {a,b} = {a:"hello",b:"world"}; console.log(a+" "+b); //hello world let {first:f,last:l} = {first:"hello",last:"world"}; console.log(f+" "+l); // hello world function a(x,y){ return {x,y}; //这里内部是将x,y通过{}包裹转换成对象{x:x,y:y} } let {x,y} = a(1,2); //let {x,y}={x:1,y:2} console.log("x="+x+",y="+y); //x=1,y=2 -
解析json
let user={name:"zhangsan",age:20}; let {name,age} = user; console.log("name="+name+",age="+age); -
遍历map
let map = new Map(); map.set("name","zhangsan"); map.set("age",20); for(let[key,value] of map){ console.log(key+"="+value); }
template string
基于模板方式输出字符串，类似于artTemplate模板引擎。使用${}引入变量，使用``包裹内容部分。
let user = {name:"zhangsan",age:18};
const html = `
<label>姓名</label>:${user.name}
<p></p>
<label>年龄</label>:${user.age}
`
console.log(html);
函数相关
箭头函数
类似于java的lambda表达式，只是箭头是==>，而Java是->。
function handle(func,a,b){
if(typeof func == "function"){
func.call(this,a,b);
}
}
//原来的
handle(function(a,b){
console.log(a+b);
},10,20);
//箭头函数
handle((a,b)=>(console.log(a+b)),10,20);
默认参数
支持在定义函数时，设置参数的默认值，这样就不用在函数体内判断a=a||''了。
function test(a=10){
console.log(a);
}
test(); //10
function fetch(url,option={method:"GET"}){
console.log(option.method);
}
fetch("http://www.baidu.com"); //GET
fetch("http://www.baidu.com",{method:"POST"}); //POST
rest参数
类似于java的不定长数组类型String... params，在js中也可以这么表示...params。
rest参数不能使用默认值
//错误!!!
function test(...a=10){ //Rest parameter may not have a default initializer
console.log(a);
}
//正确
function test(...a){
console.log(a); //[10, 20, 30]
}
test(10,20,30);
Set,Map
Set
类似于java的set，里面的值保证唯一。
可以通过for...of...进行遍历。
//通过新增的方式加入元素
let set = new Set();
[1,2,3,2,3,1].forEach((value,index)=>(set.add(value)));
for(let i of set){
console.log(i);
}
//通过构造函数加入元素，接受数组的参数
let set1 = new Set([1,2,3,3,2,1]);
console.log(set1);//1,2,3
//获取长度
console.log(set1.size);//3
//删除元素
set1.delete(2);
console.log(set1);//1,3
//判断元素是否存在
let exist = set1.has(1);
console.log(exist);//true
//清空元素
set1.clear();
console.log(set1);//{}
Map
//新建空对象
let map1 = new Map();
map1.set("name","hello");
map1.set("age",20).set("sex","boy");
console.log(map1);
//通过构造函数入参
let map2 = new Map([["name","hello"],["age",20]]);
console.log(map2);
//判断是否存在key
console.log("exist key:"+map2.has("name"));
//获取值
console.log("get value:"+map2.get("name"));
//遍历
map2.forEach((value,key)=>(console.log(`${key}=${value}`)));
//遍历key
for(let k of map2.keys()){
console.log("遍历key:"+k);
}
//遍历value
for(let v of map2.values()){
console.log("遍历value:"+v);