ES6-解构

import. 发布于2019-08-22 17:03 / 1446人阅读

摘要：对象和数组是中常用的数据解构，由于的普及，二者已经成为语言中特别重要的一个部分。解构是一种打破数据结构，将其拆分成更小部分的过程。数组解构数组解构和对象解构非常相似，只是将对象替换成数组。例这种解构对从配置中抽取数据来说尤为有用。

对象和数组是js中常用的数据解构，由于JSON的普及，二者已经成为语言中特别重要的一个部分。ES6中添加了可以简化解析这种解构的新特性：解构。解构是一种打破数据结构，将其拆分成更小部分的过程。

在早期版本中，开发者为了从对象和数组中获取特定数据并赋值给变量，就像这样：

var  = {
    name: "tom",
    type: "1"
}
var name = node.name,    //tom
    type = node.type;    //1

对象解构

对象解构的语法是在赋值的左边放置一个对象，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type} = node;

console.log(name, type)    //tom, 1

默认值

使用解构表达式时，如果指定的局部变量在对象中不存在，那么这个局部变量会被赋值为undefined，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type， value} = node;

console.log(name, type, value)    //tom, 1, undefined

这段代码额外定义了一个局部变量value，然后尝试为它赋值，然而在node对象上，并没有对应名称的属性值，所以像预期中那样赋值为undefined.

当指定的属性不存在时，可以定义一个默认值，在属性名称后面添加默认值即可，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type， value="true"} = node;

console.log(name, type, value)    //tom, 1, true

为变量value设置了默认值true，只有当node上没有该属性或者该属性当值为undefined时才会生效。

为非同名变量赋值

若你想使用不同的变量赋值，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type:nameType， value="true"} = node;

console.log(name, nameType, value)    //tom, 1, true

在上面的代码中，名称被放置在右边，需要进行值读取的位置被放在左边。

嵌套对象的解构

对于深层次的解构，可以深入到嵌套对象的结构中去提取你想要的数据，例：

let node = {
    name:"tom",
    type: "1",
    meat:{
        start:{
            date: "1980-01-23",
            time: "10:00"
        },
        end:{
            date: "1980-01-23",
            time: "11:00"
        }
    }
}

let {meat:{start}} = node;

console.log(start.time, start.date)    //11:00, 1980-01-23

还能更近一步，在对象的嵌套解构中为本地变量使用不同的名称，和为非同名变量赋值语法相同。

数组解构

数组解构和对象解构非常相似，只是将对象替换成数组。数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具体的属性名称上，例：

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor, secondColor)    //red, green

其他的基本一样不在一一列出。

混合解构

对象和数组解构能被用在一起，以创建更复杂的解构表达式。在对象和数组混合解构中这么做能更准确的提取出你想要的数据片段。例：

let node = {
    name:"tom",
    type: "1",
    meat:{
        start:{
            date: "1980-01-23",
            time: "10:00"
        },
        end:{
            date: "1980-01-23",
            time: "11:00"
        }
    },
    colors: ["red", "green", "blue"]
}

let {
    meat:{start},
    colors: [firstColor]
    } = node;

console.log(start.date, firstColor)    //1980-01-23, red

这种解构对从JOSN配置中抽取数据来说尤为有用。因为它不需要在探索整个结构。

参数解构

解构还有一个特别有用的场景，即在传递函数参数时。当一个js函数接收大量可选参数时，常用的模式是创建一个options对象，其中包含了附加的参数，就像这样：

function foo(options) {
   var options = options || {}
   var name = options.name,
       tiem = options.time;
   
   //...其他代码
}

foo({
    name: "tom",
    tiem: "10:00"
})

参数的解构提供了更清楚的地标标明了函数期望输入的方案。它使用对象或数组解构的模式替代了具体的参数名称。下面重写了foo()函数：

function foo({name, time} = {}) {
   //...其他代码
}

foo({
    name: "tom",
    tiem: "10:00"
})

参数解构拥有以上其它解构方式的所有能力。你可以在其中使用默认参数、混合解构、或使用与属性不同的其他变量名。

云服务器服务器托管对象解构解构函数解构赋值 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94808.html

ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
es6 - 解构赋值

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。解构赋值解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。在es6之前，赋值操作需要=...

DirtyMind 2019-08-26 11:45 评论0 收藏0
es6之解构赋值

摘要：的语法已经出了很长的时间了，在使用上也可以通过这类的编译工具转译为浏览器可以识别的的语法，但是依旧有很多开发在写代码的时候，依旧没有用的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比语法的优势，让大家 es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，...

yeooo 2019-08-23 13:57 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637