ES6——Day3（解构赋值的用途）

（1）交换变量的值

案例1-1：ES5

<script type="text/traceur">
//ES5
console.log("ES5:");
var a =100;
var b= 200;
console.log("交换前：");
console.log("a="+a);
console.log("b="+b);
var temp;
temp=a;
a=b;
b=temp;
console.log("交换后：");
console.log("a="+a);
console.log("b="+b);
</script>

解析： 交换前：a=100   b=200

               交换后：a=200   b=100

案例1-2：ES6

<script type="text/traceur">
//ES6
console.log("ES6:");
var x=100;
var y=200;
console.log("交换前：");
console.log(x);
console.log(y);

//采用解构赋值
[x,y] = [y,x];

console.log("交换后：");
console.log(x);
console.log(y);
</script>

解析：  交换前：a=100   b=200

               交换后：a=200   b=100

（2）从函数返回多个值

2-1：返回数组.html

function fun(){
return [1,2,3];
};

var [x,y,z] = fun();
console.log(x);    //1
console.log(y);    //2
console.log(z);    //3

2-2：返回一个对象.html

function fun(){
return {
id:"007",
name:"Zhangsan",
age:12
};
};

var {id,name,age} = fun();
console.log(id);     //007    
console.log(name);   //Zhangsan
console.log(age);    //12

var {id:person_id,name:person_name,age:person_age} =fun();
console.log(person_id);    //007
console.log(person_name);  //Zhangsan
console.log(person_age);   //12

（3）函数参数的定义

//参数是一组有次序的值
function fun([x,y,z]){
//x=100;
//y=200;
//z=300;
}
fun([100,200,300]);

//参数是一组无次序的值
function fun(){
//id="007",
//name="Zhangsan",
//age=12;
};
fun({id:"007",name:"Zhangsan",age:12});

（4）提取json数据

<script type="text/traceur">
var jsonData={
	id:"007",
	name:"Zhangsan",
	age:12,
	score:{
		Chinese:101,
		Math:120,
		English:130
	}
};
console.log(jsonData);

console.log("ES5:");
console.log("Person's name is:" + jsonData.name);
console.log("Person's Chiese score is:" + jsonData.score.Chinese);

console.log("ES6:");
let {id:number, name, age, score:score} = jsonData;
console.log("Person's id is:" + number);    	//007
console.log("Person's age is:" +age);       	//12
console.log("Person's Chinese score is:" +score.Chinese);     //101
</script>

（5）函数参数的默认值

<script type="text/traceur">
jQuery.ajax({
url:'add.php',
type:'POST',
dataType:'xml/html/script/json/jsonp',
data:{param1:'value'},
complete:function(xhr,textStatus){
//
},
success:function(data,textStatus,xhr){
//
},
error:function(xhr,testStatus,errorThrown){
//
}
});

jQuery.ajax = function(url,{
		async = true;
		beforeSend=function(){},
		cache=true,
		complete=funtion(){},
		crossDomain=false,
		global=true,
	}){

};
</script>

解析：上述方法中，避免了函数体内部再写var foo = config.foo || 'default foo';这样的语句。

第一种：为直接函数进行方法使用；第二种：更接近于对象的概念进行函数赋值。

（6）遍历Map[地图]结构

<script type="text/traceur">
var  map=new Map();
map.set("id","007");
map.set("name","Zhangsan");

console.log(map);
//Map{"id"=> "007","name"=> "Zhangsan"}

//获取键名和键值
for(let [key,value] of map){
console.log(key+"is" + value);
};   
//id is 007
//name is Zhangsan

//获取键值
for(let [key] of map){
console.log(key);
}
//id
//name

</script>

（7）输入模块的指定方法

<script type="text.traceur">
const {SourceMapConsumer,SourceNode} = require("source-map");

</script>