解构赋值的用途:
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>