专栏首页寻找石头鱼深入理解ES6之—数据解构

深入理解ES6之—数据解构

一 对象解构

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

let node = {
    type: true,
    name: false
}

//既声明又赋值
let {
    type,
    name
} = node;

//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type与name标识符既声明了本地变量,也读取了对象的相应属性值。

解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。

默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined

let node = {
    type: true,
    name: false
},
    type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。

let node = {
        type: true,
        name: false
    },
    type, name, value;
({
    type,
    value = true,
    name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

赋值给不同的本地变量名

let node = {
    type: true,
    name: false,
    value: "dd"
}
let {
    type: localType,
    name: localName,
    value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType这种语法表示要读取名为type的属性,并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反

嵌套的对象结构

let node = {
type: "Identifier",
name: "foo",
loc: {
    start: {
        line: 1,
        column: 1
    },
    end: {
        line: 1,
        column: 4
    }
}
}

let {
loc: localL,
loc: {
    start: localS,
    end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: localS,end: localE})

二 数据解构

数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量。

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名。

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称。

解构赋值

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

数组解构有一个非常独特的用例,能轻易的互换两个变量的值。

let a =1,b =2;
[a,b] = [b,a];
console.log(a);//2
console.log(b);//1

嵌套的解构

 let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

剩余项

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

使用剩余项可以进行数组克隆

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

三 混合解构

let node = {
type: "Identifier",
name: 'foo',
loc: {
    start: {
        line: 1,
        column: 1
    },
    end: {
        line: 1,
        column: 4
    }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
    start: {
        line: ll
    },
    end: {
        column: col
    }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js数组方法详解(最新最全)

    数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响。本文所有的栗子都是在es...

    寻找石头鱼
  • 深入理解ES6之—对象

    在js中比较两个值时,你可能会用相等运算符==或者严格相等运算符 ===。为了避免在比较时发生强制类型转换,许多开发者更倾向于使用后者。

    寻找石头鱼
  • 深入理解ES6之——迭代器与生成器

    迭代器是被设计专用于迭代的对象,带有特定接口。所有的迭代器对象都有next方法,会返回一个结果对象。该结果对象有两个属性:对应下一个值的value,以及一个布尔...

    寻找石头鱼
  • ES6

    在cmd命令窗口初始化项目-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。

    楠楠
  • 带你入门 JavaScript ES6 (一)

    ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版,正式名为 ECMAScript 2015,通常被成为 ES...

    柳公子
  • 二、ES6新语法

    图中可对比看出,如果用var声明,在循环外部还是可以使用i变量;但用let声明变量,循环外部不可以使用n变量

    Dreamy.TZK
  • ES6(三):变量的解构赋值

    解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中,文中主要讲数组的解构赋值、对象的解构赋值、字符串的解构赋值、数...

    从入门到进错门
  • ES6/ES2015

    Promise.all([p1,p2,p3]):把promise批量处理,必须确保所有的promise对象,都是resolve状态,都是成功的

    羊羽shine
  • 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的...

    胡哥有话说
  • JavaScript学习笔记004-if判断0for循环

    Mr. 柳上原

扫码关注云+社区

领取腾讯云代金券