解构小结

denson 发布于2019-08-22 13:53 / 2546人阅读

摘要：基本概念作用解构是有组织的从对象或数组中提取信息片段条件明确从哪提取信息片段，即信息来源于哪个对象或数组明确提取什么信息片段，即对象的哪个属性或数组的第几个元素其他解构除了提取信息片段之外，还有一些辅助的功能为可能提取不到的信息设置默认值为

基本概念 作用

解构是有组织的从对象或数组中提取信息片段

条件

明确从哪提取信息片段，即信息来源于哪个对象或数组

明确提取什么信息片段，即对象的哪个属性或数组的第几个元素

其他

解构除了提取信息片段之外，还有一些辅助的功能

为可能提取不到的信息设置默认值

为提取到的信息重新命名

场景

解构的使用场景不仅在声明变量赋值阶段，也可以单纯地给以有的变量重新赋值

在函数参数中使用解构

举例

let node = {
    type: "Identify",
    name: "foo",
    subNode: {
        name: "subFoo"
    }
}

let {
    type, // 获得node的type信息
    name: myname, // 获得node的name信息，并重命名为myname
    text, // 获得node的text信息，若不存在且不设置默认值，则为undefined
    value: myvalue = "gaga", // 获得node的value信息，并重命名为myvalue，若不存在，则为"gaga"
    subNode: { // 获得node的subNode中的name信息，并重命名为subName，嵌套解构
        name: subName
    }
} = node // 从node中获得信息来源

type // "Identify"
text // undefined
value // ReferenceError
myvalue // "gaga"
subName // "subFoo"

上面的代码与下面的代码输出相同

let node = {
    type: "Identify",
    name: "foo",
    subNode: {
        name: "subFoo"
    }
}

let type,
    myname,
    text,
    myvalue = "hehe",
    subName

({
    type,
    name: myname,
    text,
    value: myvalue = "gaga",
    subNode: {
        name: subName
    }
} = node)

数组解构 与对象解构的不同之处

对象通过属性名来标示信息片段，数组通过位置来标示信息

对象解构默认将提取到的信息赋给与属性名相同的变量中，数组需要给提取出的信息命名

可用于交换变量

举例

let colors = ["red", "green", "blue"]
let [,,thirdColor] = colors // 从colors数组中提取下标为2的元素
let [firstColor] = colors // 从colors数组中提取下标为0的元素
let [,secondColor,,fourthColor] = colors 
// 从colors数组中提取下标为1和3的元素，若元素不存在则为undefined
let [,secondColor,,fourthColor = "yellow"] = colors // 设置默认值
// 嵌套解构
let colors = ["red", ["green", "lightgreen"], "blue"]
let [, [,subColor],] = colors
// 不定元素
let colors = ["red", "green", "lightgreen", "blue"]
let [first, ...others] = colors
others // ["green", "lightgreen", "blue"]
// 交换变量
let a = 1,
    b = 2;
[a, b] = [b, a]

云服务器 GPU云服务器对象解构解构函数解构赋值设计小结

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

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

ES6: 解构赋值（Destructuring）

摘要：一概念对象是属性的集合，从对象里取值，只能逐个取，而解构赋值表达式可以实现批量取值，赋值。赋值操作符等号两边的解构要一致才能正确赋值解构赋值表达式是赋值表达式的语法糖。三数组解构赋值数组的属性名称叫索引，表示的是位置。一、概念对象是属性的集合，从对象里取值，ES3/5只能逐个取，而解构赋值表达式可以实现批量取值，赋值。 // 数据对象person var person = { ...

CODING 2019-08-21 17:58 评论0 收藏0
面试小结（一）

摘要：面试问到的问题继承的几种方法，，原形继承面向对象的几种方法五种方式对象字面量创建实例对象构造函数工厂模式用一个函数，通过传递参数返回对象。打包原理打包原理把所有依赖打包成一个文件，通过代码分割成单元片段并按需加载。面试问到的问题：1、继承的几种方法； Call，apply，原形继承； 2、面向对象的几种方法；五种方式： 1）对象字面量：var obj={}; 2）创建实例对象：va...

xiaodao 2019-08-29 15:35 评论0 收藏0
面试小结（一）

摘要：面试问到的问题继承的几种方法，，原形继承面向对象的几种方法五种方式对象字面量创建实例对象构造函数工厂模式用一个函数，通过传递参数返回对象。打包原理打包原理把所有依赖打包成一个文件，通过代码分割成单元片段并按需加载。面试问到的问题：1、继承的几种方法； Call，apply，原形继承； 2、面向对象的几种方法；五种方式： 1）对象字面量：var obj={}; 2）创建实例对象：va...

SnaiLiu 2019-08-26 11:57 评论0 收藏0
面试小结（一）

摘要：面试问到的问题继承的几种方法，，原形继承面向对象的几种方法五种方式对象字面量创建实例对象构造函数工厂模式用一个函数，通过传递参数返回对象。打包原理打包原理把所有依赖打包成一个文件，通过代码分割成单元片段并按需加载。面试问到的问题：1、继承的几种方法； Call，apply，原形继承； 2、面向对象的几种方法；五种方式： 1）对象字面量：var obj={}; 2）创建实例对象：va...

shmily 2019-08-02 10:36 评论0 收藏0
indexedDB入门

摘要：概述是一个事务型数据库系统，类似于基于的。然而不同的是它使用固定列表，是一个基于的面向对象的数据库。参考文档浏览器数据库入门教程概述 IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而不同的是它使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象的数据库。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小...

awesome23 2019-08-23 15:10 评论0 收藏0