定制商品的网站建设,全国最好装修公司排行榜,株洲做网站哪家好,wordpress时间中文版解构赋值
1.1 什么是解构赋值 允许按照一定模式#xff0c;从数组和对象中提取值#xff0c;对变量进行赋值#xff0c;这被称为解构 只要某种数据结构具有 Iterator 接口#xff0c;都可以采用数组形式的解构赋值 1.2 数组解构赋值和对象解构赋值的区别 数组的元素是按次…解构赋值
1.1 什么是解构赋值 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构 只要某种数据结构具有 Iterator 接口都可以采用数组形式的解构赋值 1.2 数组解构赋值和对象解构赋值的区别 数组的元素是按次序排列的变量的取值由它的位置决定 而对象的属性没有次序变量必须与属性同名才能取到正确的值。 2.1 数组的解构赋值
// 报错
let [foo] 1;
let [foo] false;
let [foo] NaN;
let [foo] undefined;
let [foo] null;
let [foo] {};//解构数组
let [a,b,c] [1,2,3]
console.log(a,b,c) //1,2,3
//解构Set
let [x, y, z] new Set([a, b, c]);
console.log(x,y,z)//a,b,c
//解构 Generator 函数
function* fibs() {let a 0;let b 1;while (true) {yield a;[a, b] [b, a b];}
}let [first, second, third, fourth, fifth, sixth] fibs();
sixth // 52.2 默认值 解构赋值允许指定默认值 只有当一个数组成员严格等于undefined默认值才会生效。 let [x 1] [undefined];
x // 1let [x 1] [null];
x // null如果默认值是一个表达式那么这个表达式是惰性求值的即只有在用到的时候才会求值。 function f() {console.log(aaa);
}let [x f()] [1];默认值可以引用解构赋值的其他变量但该变量必须已经声明。 let [x 1, y x] []; // x1; y1
let [x 1, y x] [2]; // x2; y2
let [x 1, y x] [1, 2]; // x1; y2
let [x y, y 1] []; // ReferenceError: y is not defined2.3 数组的嵌套结构
let [a,[b,[c]]][1,[2,[3]]]
console.log(a,b,c)//1,2,33.1 对象的解构赋值
let { foo, bar } { foo: aaa, bar: bbb };
foo // aaa
bar // bbb3.2 对象的嵌套解构
let obj {p: [Hello,{ y: World }]
};let { p: [x, { y }] } obj;
x // Hello
y // World注意这时p是模式不是变量因此不会被赋值。如果p也要作为变量赋值可以写成下面这样。 let obj {p: [Hello,{ y: World }]
};let { p, p: [x, { y }] } obj;
x // Hello
y // World
p // [Hello, {y: World}]下面是另一个例子。
const node {loc: {start: {line: 1,column: 5}}
};let { loc, loc: { start }, loc: { start: { line }} } node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}上面代码有三次解构赋值分别是对loc、start、line三个属性的解构赋值。 注意最后一次对line属性的解构赋值之中只有line是变量loc和start都是模式不是变量。 下面是嵌套赋值的例子
let obj {};
let arr [];({ foo: obj.prop, bar: arr[0] } { foo: 123, bar: true });obj // {prop:123}
arr // [true]对象的解构赋值可以取到继承的属性
const obj1 {};
const obj2 { foo: bar };
Object.setPrototypeOf(obj1, obj2);const { foo } obj1;
foo // bar3.3 对象解构的默认值 默认值生效的条件是对象的属性值严格等于undefined var {x 3} {x: undefined};
x // 3var {x 3} {x: null};
x // null3.4 注意点
如果要将一个已经声明的变量用于解构赋值必须非常小心。
// 错误的写法
let x;
{x} {x: 1};
// SyntaxError: syntax error上面代码的写法会报错因为 JavaScript 引擎会将{x}理解成一个代码块 从而发生语法错误。只有不将大括号写在行首避免 JavaScript 将其解释 为代码块才能解决这个问题。
// 正确的写法
let x;
({x} {x: 1});上面代码的写法会报错因为 JavaScript 引擎会将{x}理解成一个代码块 从而发生语法错误。只有不将大括号写在行首避免 JavaScript 将其解释为 代码块才能解决这个问题。
4、字符串的解构赋值
const [a,b,c,d,e] hello;
console.log(a,b,c,d,e) // h,e,l,l,o类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值 let {length:len} hello;
console.log(len) //55、数组和布尔值的解构赋值 解构时如果等号的右边是数组和字符串则会先转换为对象 let {toString:s} 123;
s Number.prototype.toString //truelet {toString:s} true;
s Boolean.prototype.toString //true
