30分钟学会ES6 (一)

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); //10
  

  • let关键字定义的变量，只在对应块内生效，不会到块外面，也不会影响子块。

  {
      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 = `
    姓名:${user.name}
    

    年龄:${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);