ES6+ 中对象解构小技巧

日期:2020-05-07编辑作者:Web前端

3.解构中的 rest(变量由多变少) 与spread(变量由少变多)

对象解构不仅可以用于变量声明,还可以用于变量赋值

let target = { name: 'Tony',age: 32 }let { name,age, birth=1993 } = targetconsole.log(name, age, birth)// Tony 32 1993
  1. 解构使得在 JS 中操作对象与数组变得更容易。使用熟悉的对象字面量与数组字面量语法,可以将数据结构分离并只获取你感兴趣的信息。对象解构模式允许你从对象中进行提取,而数组模式则能用于数组。

  2. 对象与数组解构都能在属性或项未定义时为其提供默认值;在赋值表达式右侧的值为 null或 undefined 时,两种模式都会抛出错误。你也可以在深层嵌套的数据结构中使用对象与数组解构,下行到该结构的任意深度。

  3. 使用 var 、 let 或 const 的解构声明来创建变量,就必须提供初始化器。解构赋值能替代其他赋值,并且允许你把值解构到对象属性或已存在的变量上。

  4. 参数解构使用解构语法作为函数的参数,让“选项” 对象更加透明。你实际感兴趣的数据可以与具名参数一并列出。解构的参数可以是对象模式、数组模式或混合模式,并且你能使用它们的所有特性。

let target = { name: 'Tony',age: 32 }let let { name: firstName, name: lastName, age, birth=1993 } = targetconsole.log(firstName, lastName, age, birth)// Tony Tony 32 1993
let arr = [1,2,3];let [first,second]=arr;console.log;//1console.log;//2 

1.解构的同时赋予初始值

与对象解构赋值一样,数组解构赋值同样可以使用默认值,当指定位置的项不存在或者其值为undefined,那么该默认值就会被使用:

2.使用的变量名与解构目标的key不一致或要使用多个变量

对象解构语法在赋值语句的左侧使用了对象字面量,例如:

/* rest 例子 */let arr = [ 'zhenganlin', 1, 2, 3 ]function rest (...arg) { console.log(arg)}rest ( arr )// log: [ 'zhenganlin', 1, 2, 3 ]function spread (a,b,c,d) { console.log(a,b,c,d)}spread ( ...arr )// log: 'zhenganlin', 1, 2, 3

使用数组解构,可以十分方便的完成变量值交换:

图片 1

let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } };let{loc:{start}}=node;console.log(start.line); // 1console.log(start.column);//1

为了不让变量值为undefined,可以为变量设置默认值。设置变量默认值使用等号“=”,等号右侧为需要设置的默认值,如:

数组解构的语法

function setCookie(name, value, { secure = false, path = "/", domain = "example.com", expires = new Date(Date.now() + 360000000) } = {} ) { // ...}

此代码中参数解构给每个属性都提供了默认值,所以你可以避免检查指定属性是否已被传入(以便在未传入时使用正确的值) 。而整个解构的参数同样有一个默认值,即一个空对象,令该参数成为可选参数。这么做使得函数声明看起来比平时要复杂一些,但却是为了确保每个参数都有可用的值而付出的微小代价。

嵌套的对象解构

let arr = [1,2,3];let first = 5,second = 6;[first,second] = arr;console.log;//1console.log;//2

数组解构中有一个类似于剩余参数的概念,可以使用...语法来将剩余项目给一个指定的变量,这种语法称之为剩余项:

let person ={ name:'hello', age:18}let {name,age}=person;console.log; //helloconsole.log; //18

混合解构

与嵌套对象解构一样,嵌套的数组也可以解构:

可以在赋值表达式中使用数组解构:

对象解构不仅可以处理属性值为基本类型值的对象的解构,还可以被用于嵌套的对象解构:

let person ={ name:'hello', age:18}name = 'world';age= 20;({name,age}=person);console.log; //helloconsole.log; //18
let arr = [1,2,3];let [,,third]=arr;console.log;//3

嵌套的解构

对象解构不仅可以用于变量赋值,任何期望赋值的地方都可以使用对象解构方式赋值,如传递给函数:

let person ={ name:'hello', age:18}name = 'world';age= 20;({name:localName,age:localAge,value=true}=person);console.log(localName); //helloconsole.log; //18console.log; //true
//剩余项let array = [1,2,3,4,5];let [first,...subArr]=array;console.log;//1console.log(subArr.length);//4console.log(subArr[0]);2

将数组array中除了第一项外的其他项都赋给了变量subArr,剩余项subArr的长度为4,并且第一个元素为2;

如果在使用对象解构赋值的时候,没有在对象中找到同名属性的话,那么本地变量就会赋值为undefined

默认值

将数组arr中第一个元素和第二个元素分别赋值给first和second。如果只想要数组中第三个元素值:

使用解构赋值,也可以为不同名的变量赋值:

本文由www.129028.com金沙发布于Web前端,转载请注明出处:ES6+ 中对象解构小技巧

关键词:

JS如何提高扩展运算符的性能?

时间: 2019-08-04阅读: 175标签: 性能 在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。...

详细>>

useEffect Hook 是如何工作的?【www.129028.com金沙】

我们把reactjs的初值传递给第一个状态,这是有意义的,这个值永远不会改变。 而现在我们的hook,一方面它是直接用...

详细>>

node中的内置模块fswww.129028.com金沙

获取文件或文件夹的信息异步 fs.stat(路径,(err,data)={})同步 let res =fs.statSync(路径)流式读取1、创建可读流2、创建一个可...

详细>>

Vue中在新窗口打开页面及Vue-router的使用_vue.js_脚本之家

时间: 2019-09-07阅读: 110标签: 跳转 背景 route-link是在html中静态定义的,也可以在代码中动态跳转: 在开发提分加项目...

详细>>