解構賦值的用途：
1、交換變量的值
2、從函數返回多個值
3、函數參數的定義
4、提取json數據
5、函數參數的默認值
6、遍歷Map解構
7、輸入模塊的指定方法
------------------------------------------------------1、交換變量的值-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交換變量的值</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
//ES5
console.log("ES5");
var a=100;
var b=200;
console.log("交換前：");
console.log("a="+a); //100
console.log("b="+b); //200
var temp=a;
a=b;
b=temp;
console.log("交換後：");
console.log("a="+a); //200
console.log("b="+b); //100
//ES6
console.log("ES6:");
var x=100;
var y=200;
console.log("交換前：");
console.log("x="+x); //100
console.log("y="+y); //200
[x,y]=[y,x];
console.log("交換後：");
console.log("x="+x); //200
console.log("y="+y); //100
//好處：1更直觀的代碼；2、方便，而且不用聲明多一箇中間變量temp去佔用內存，因爲後面我們並沒有釋放temp的內存，即提升了性能
</script>
</head>
<body>
</body>
</html>
-----------------------------------------2、從函數返回多個值:返回一個數組---------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>從函數返回多個值:返回一個數組</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
function fun(){
return [1,2,3]; //函數內一般只能返回一個值，如果要返回多個值我們一般使用數組或者對象
};
console.log(fun()); //[1, 2, 3]
//如果要取數組下標爲2的一個值就比較麻煩了
//可採用如下方法
var [x,y,z]=fun();
console.log(x); //1
console.log(y); //2
console.log(z); //3
var [x]=fun();
console.log(x); //1
//用數組解構，用哪個取哪個非常的方便
//使用的條件是：函數裏面返回的是一個數組，所以我們用數組來接收
</script>
</head>
<body>
</body>
</html>
------------------------------------------2、從函數返回多個值:返回一個對象--------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>從函數返回多個值:返回一個對象</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
function fun(){
return {
id:"007",
name:"lyf",
age:22
};
};
var {id,name,age}=fun(); //也可定義爲其它的名字如var {id:personid,name:personname,age:personage}然後調用的時候用該名字調用即可
console.log(id); //007
console.log(name); //lyf
console.log(age); //22
</script>
</head>
<body>
</body>
</html>
------------------------------------------3、函數參數的定義-----------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數參數的定義</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
//參數是一組有次序的值
function fun([x,y,z]){
//x=100,
//y=200,
//z=300
};
fun([100,200,300]);
//參數是一組無次序的值
function fun({id,name,age}){
//id="13",
//name="lyf",
//age=22
};
fun({id:"13",age:22,name:"lyf"});
</script>
</head>
<body>
</body>
</html>
------------------------------------4、提取json數據----------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提取json數據</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var jsonData={
id:"13",
name:"lyf",
age:22,
score:[98,148,107]
};
console.log(jsonData);
console.log("ES5:");
console.log("my name is:"+jsonData.name); //my name is:lyf
console.log("my age is:"+jsonData.age); //my age is:22
console.log("my chinese score is:"+jsonData.score[0]); //my chinese score is:98
console.log("my math score is:"+jsonData.score[1]); //my math score is:148
console.log("my english score is:"+jsonData.score[2]); //my english score is:107
console.log("ES6:");
let {id:number,name,age,score}=jsonData;
console.log(number); //13
console.log(name); //lyf
console.log(score[0]); //98
</script>
</head>
<body>
</body>
</html>
-------------------------------------------5、函數參數的默認值-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數參數的默認值</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
jQuery.ajax({ //需引入jquery.js纔有效
url: '/path/to/file',
type: 'POST',
dataType: 'xml/html/script/json/jsonp',
data: {param1: 'value1'},
complete: function(xhr, textStatus) {
//called when complete
},
success: function(data, textStatus, xhr) {
//called when successful
},
error: function(xhr, textStatus, errorThrown) {
//called when there is an error
}
});
jQuery.ajax=function (url,{
async=true,
beforeSend=function(){
cache=true,
complete=function(){
crossDomain=false,
global=true,
//...more config
}
}
});
//避免了在函數體內部再寫var foo=config.foo ||'default foo';這樣的語句
</script>
</head>
<body>
</body>
</html>
---------------------------------------6、遍歷Map解構----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍歷Map解構</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var map=new Map();
map.set("id","007");
map.set("name","lyf");
console.log(map);
console.log(typeof map);
//獲取鍵名和鍵值
for(let [key,value] of map){
console.log(key + " is " +value);
//id is 007
//name is lyf
}
//獲取鍵名
for(let [key] of map){
console.log(key);
//id
//name
}
//獲取鍵值
for(let [,value] of map){
console.log(value);
//007
//lyf
}
</script>
</head>
<body>
</body>
</html>
------------------------------------------------------------7、輸入模塊的指定方法----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輸入模塊的指定方法</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
const {SourceMapConsumer,SourceNode}=require("source-map"); //需引入require.js,纔會正常運行
</script>
</head>
<body>
</body>
</html>