<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的解构赋值</title>
<script src="../../../vendor/traceur.js"></script>
<script src="../../../vendor/bootstrap.js"></script>
<script type="text/traceur">
var { name, age } = { name: "Conan", age: 28 };
console.log(name); //Conan
console.log(age); //28
--------------------------------------------------
var { name, age, id } = { id: "007", name: "Conan", age: 28 };
console.log(name); //Conan
console.log(age); //28
console.log(id); //007
--------------------------------------------------
var { person_name, person_age, person_id } = { id: "007", name: "Conan", age: 28 };
console.log(person_name); //undefined
console.log(person_age); //undefined
console.log(person_id); //undefined
var { name: person_name, age: person_age, id: person_id } = { id: "007", name: "Conan", age: 28 };
console.log(person_name); //Conan
console.log(person_age); //28
console.log(person_id); //007
let object = { first: "Hello", last: "World" };
let { first: firstName, last: lastName} = object;
console.log(firstName); //Hello
console.log(lastName); //World
------------------------------------------------------
var { x = 3 } = {};
console.log(x); //3
var { x, y = 5 } = { x: 1 };
console.log(x); //1
console.log(y); //5
var { x, y } = { x: 1 };
console.log(x); //1
console.log(y); //undefined
var { x, y=5 } = { x: 1 ,y:9};
console.log(x); //1
console.log(y); //9
var { message: msg = "You Are A Person!" } = {};
console.log(msg); //You Are A Person!
var { x = 3 } = { x: undefined };
console.log(x); //3
var { y = 3 } = { y: null }; //null优先级最高
console.log(y); //null
----------------------------------------------------
var x;
{x} = { x: 1 }; //报错，需要加上小括号
console.log(x); //1
-------
var x;
({x} = { x: 1 });//已声明变量的解构赋值
console.log(x); //1
-----------------------------------------------------
let { sin, cos, tan, log } = Math;
console.log(sin(Math.PI/6)); //0.49999999999999994
console.log(Math.sin(Math.PI/6)); //0.49999999999999994
console.log(cos(Math.PI/6)); //0.8660254037844387
console.log(Math.cos(Math.PI/6)); //0.8660254037844387
console.log(tan(Math.PI/6)); //0.5773502691896257
console.log(Math.tan(Math.PI/6)); //0.5773502691896257
console.log(log(Math.PI/6)); //-0.6470295833786549
console.log(Math.log(Math.PI/6)); //-0.6470295833786549
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串的解构赋值</title>
<script src="../../../vendor/traceur.js"></script>
<script src="../../../vendor/bootstrap.js"></script>
<script type="text/traceur">
//字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
const [ a, b, c, d, e ] = "Hello";//转换成数组,根据下标
console.log(a); //H
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(e); //o
const { length: len } = "Hello";
console.log(len); //5
const { length } = "Hello World!";//转换成对象，寻找字符串对象的length属性
console.log(length);//12
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数参数的解构赋值</title>
<script src="../../../vendor/traceur.js"></script>
<script src="../../../vendor/bootstrap.js"></script>
<script type="text/traceur">
function sum([x, y]) {//传的是数组
return x + y;
};
console.log(sum([1, 2])); //3
-------------------------------------------
function fun ({x = 1, y = 2} = {}) {
return [x, y];//输出数组
};
console.log(fun({x: 100, y: 200})); //[100, 200]
console.log(fun({x: 100})); //[100, 2]
console.log(fun({})); //[1, 2]
console.log(fun()); //[1, 2]
--------------------------------------------
function fun ({x, y} = { x: 1, y: 2 }) {
return [x, y];
};
console.log(fun({x: 100, y: 200})); //[100, 200]，{x, y} = { x: 1, y: 2 }没有执行
console.log(fun({x: 100})); //[100, undefined]，{x, y} = { x: 1, y: 2 }没有执行
console.log(fun({})); //[undefined, undefined]，{x, y} = { x: 1, y: 2 }没有执行
console.log(fun()); //[1, 2]，{x, y} = { x: 1, y: 2 }执行了
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号