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>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值