<!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>