ES6学习笔记

2023-11-24 03:12| 来源: 网络整理| 查看: 265

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。例如：

let {bar}={brr:'1000'}console.log(bar);//undefined

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

// 例一 let { log, sin, cos } = Math; sin(90)//0.89 // 例二 const { log } = console; log('hello') // hello

对象的解构其实是下面代码的简写（找到右边对应，直接赋值输出）

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' }; console.log(foo)//aaa console.log(bar)//bbb let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" foo // error: foo is not defined let {a =10,b=1} = {a=1,b=3} //a =10;可以看成a:10 a = 1 b = 3

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。（直接看值）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7IreVL96-1635732965572)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210928153614434.png)]

上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量

如果结构模式是嵌套对象。而且子对象的父属性不存在，则会报错

let {foo :{bar}} = {bar:"bar"}//报错解构赋值可以取到被继承的对象 // 解构赋值可以取到继承的值 let obj1 = {}; let obj2 = { foo: 'bar' }; Object.setPrototypeOf(obj1, obj2); const { foo } = obj1; console.log(foo);//"bar" obj1的原型对象是obj2，而obj1自身是没有foo属性的，因为继承，所以拿到来自obj2的属性和值

对象解构的默认值，和数组解构一样，严格等于undefined时才生效

注意点如果要将已经声明的变量解构赋值必须注意

let x; {x} ={x:1}//报错 let y; ({y} ={y:3}) console.log(y);//3

前面报错是因为，js引擎将{x}当成了代码块。

不能使用圆括号的情况

变量的声明,函数参数

let [(a)] =[1]; let{x:(c)}={}; //函数参数 function f([(a)]){return a} 可以使用圆括号的情况 [(b)] = [3]; // 正确 ({ p: (d) } = {}); // 正确都是赋值语句，第一行模式是取数组的第一个成员；第二行语句中，模式是p，而不是d 字符串的解构 let [a,b,c,d]='nice'; a//n b//i c//c d//e 数值和布尔值的解构赋值 let {toString:s} =123; console.log(s);//12 用途 //1 变量的交换 let x =20; let y =30; [x,y] =[y,x] //2 函数返回多个值，然后取值 function example() { return [1, 2, 3]; } let [a, b, c] = example(); //3 函数定义参数（能够匹配任意位置对应的参数值） function fn（{x,y,r}）{....} fn({x:10,y:2,r:30}) //4 提取JSON字符串 let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]

【本文地址】

ES6学习笔记

ES6学习笔记

今日新闻

推荐新闻