<!DOCTYPE html>
<html>
<head>
<title>es6解构</title>
<script type="text/javascript">
//解构数组
//传统写法
// let a=12;
// let b=5;
// let c=6;
// let arr=[12,5,6];
// console.log(arr[0],arr[1],arr[2]);//12 5 6
//ES6写法
// let [a,b,c]=[12,5,6];//左右结构要保持一致
// //let [a,[b,c]]=[12,[5,6]];//12 5 6
// console.log(a,b,c);//12 5 6
// let [a,b,c='默认值']=[12,5];
// console.log(a,b,c);//12 5 "默认值"
// var tem=false;
// let [a,b,c=tem?'默认值1':'默认值2']=[12,5,null];//不管前方是否有默认值,null会替换到原有的内容
// console.log(a,b,c);//12 5 null
//解构json
// let json={
// name:'jack',
// age:18,
// job:'码农'
// };
// let {name,age,job}=json;//变量名要与属性名保持一致
// console.log(name,age,job);//jack 18 码农
//解构json起别名
// let json={
// name:'jack',
// age:18,
// job:'码农'
// };
// //let {a,b,c}=json;//错误的写法
// let {name:a,age:b,job:c}=json;
// console.log(a,b,c);
//{}有解构的功能,同时也是块级作用域,所以使用的时候可能存在以下小问题：
//let a;
//{a}={a:'apple',b:'banana'};//报错 Uncaught SyntaxError: Unexpected token =
// ({a}={a:'apple',b:'banana'});//要用()包裹相当于把{}定义的a给提升了,此时可以不用要let a也可以输出的出来
// console.log(a);//apple
//ES6变量交换位置
// let a=5;
// let b=6;
// [a,b]=[b,a];
// console.log(a,b)//6,5;
//ES6变量函数返回值解构
//ES6中 json 对象 函数返回对象 解构一样
// function getPoint(){
// //TODO
// return {
// left:10,
// top:20
// }
// }
// let {left ,top}=getPoint();//此时会报错，因为window对象中有一个top对象 alert(top)可见
//此时有两种方法解决上边报错
// (1):var {left ,top}=getPoint();
// console.log(left,top);//10,20
// (2):let {left ,top:t}=getPoint();//起别名的方式解决
// console.log(left,t);//10,20
//由对象解构起别名总结： import {} from '' 时因该{}保持模块中的保持一致
</script>
</head>
<body>
</body>
</html>