首页 > 代码库 > 解构赋值
解构赋值
// var node = {
// loc: {
// start: {
// line: 1,
// column: 5
// }
// }
// };
// var { loc: { start: { line,column }} } = node;//console.log(column)//5
// var { loc: { start: { line }} } = node;
// console.log(line) // 1
//loc // error: loc is undefined
//start // error: start is undefined
// 对象的解构也可以指定默认值。默认值生效的条件是,对象的属性值严格等于undefined。
// var {x = 3} = {};
// x // 3
// var {x, y = 5} = {x: 1};
// x // 1
// y // 5
// x:y x是模式,y是变量被赋值
//var {x:y = 3} = {};
//console.log(y) // 3
//console.log(x)//x is not defined
// x:y x是模式,y是变量默认值不是严格等于undefined所以被赋值5
// var {x:y = 3} = {x: 5};
// y // 5
// var { message: msg = ‘Something went wrong‘ } = {};
// msg // "Something went wrong"
// 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法
// var x;
// {x} = {x: 1};
// SyntaxError: syntax error
// 因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
// 正确的写法
// var x;
// ({x} = {x: 1});
// console.log(x)
// let {length : len} = ‘hello‘;
// len // 5
// 函数的参数也可以使用解构赋值。
// function add([x, y]){
// return x + y;
// }
// //add([1, 2]); // 3
// console.log(add([1, 2],[3,4]))//3 一样的解构复制 x=1,y=2 没有第二个参数
// console.log([[1, 2], [3, 4]].map(([a, b]) => a + b))// [ 3, 7 ]
// 只要有可能,就不要在模式中放置圆括号。
// (1)变量声明语句中,不能带有圆括号。========var let const
// 全部报错
//var [(a)] = [1];
//var {x: (c)} = {};
// var ({x: c}) = {};
// var {(x: c)} = {};
// var {(x): c} = {};
// var { o: ({ p: p }) } = { o: { p: 2 } };
// (2)函数参数中,模式不能带有圆括号。
// 函数参数也属于变量声明,因此不能带有圆括号。
// // 报错
// function f([(z)]) { return z; }
// (3)赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中。
// 全部报错
// ({ p: a }) = { p: 42 };
// ([a]) = [5];
// 可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。
// 因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。
// [(b)] = [3]; // 正确
// console.log(b)
// ({ p: (d) } = {}); // 正确
// console.log(d)//undefined
// [(parseInt.prop)] = [3]; // 正确
// (1)交换变量的值
// var x=1,y=2;
// [x, y] = [y, x];
// console.log(x)//2
// (2)从函数返回多个值
// 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组
// function example() {
// return [1, 2, 3];
// }
// var [a, b, c] = example();
// console.log([a, b, c])//[ 1, 2, 3 ]
// console.log(a)//1
// // 返回一个对象
// function example() {
// return {
// foo: 1,
// bar: 2
// };
// }
// var { foo, bar } = example();
// console.log(foo)//1
// console.log({ foo, bar })//{ foo: 1, bar: 2 }
// 解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
// function f([x, y, z]) { ... }
// f([1, 2, 3]);
// // 参数是一组无次序的值
// function f({x, y, z}) { ... }
// f({z: 3, y: 2, x: 1});
// 解构赋值对提取JSON对象中的数据,尤其有用。
// var jsonData = http://www.mamicode.com/{
// id: 42,
// status: "OK",
// data: [867, 5309]
// };
// let { id, status, data: number } = jsonData;
// console.log(id, status, number);
// 42, "OK", [867, 5309]
// (5)函数参数的默认值
// 指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || ‘default foo‘;这样的语句。
// jQuery.ajax = function (url, {
// async = true,
// beforeSend = function () {},
// cache = true,
// complete = function () {},
// crossDomain = false,
// global = true,
// // ... more config
// }) {
// // ... do stuff
// };
// (6)遍历Map结构
// 任何部署了Iterator接口的对象,都可以用for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
// var map = new Map();
// map.set(‘first‘, ‘hello‘);
// map.set(‘second‘, ‘world‘);
// for (let [key, value] of map) {
// console.log(key + " is " + value);
// }
// // first is hello
// // second is world
// 如果只想获取键名,或者只想获取键值,可以写成下面这样。
// 获取键名
// for (let [key] of map) {
// // ...
// }
// // 获取键值
// for (let [,value] of map) {
// // ...
// }
// (7)输入模块的指定方法
// 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
// const { SourceMapConsumer, SourceNode } = require("source-map");
解构赋值