专栏首页Super 前端深入理解ES6--解构

深入理解ES6--解构

解构时一种打破数据结构,将其拆分为更小部分的过程。解构在实际开发中经常会应用到对象和数组中。关于解构的基本用法,请参考:ES6–变量的声明及解构赋值

解构:使数据访问更便捷

对象解构

  • 解构赋值 一定要用一对小括号包裹解构赋值语句,javascript引擎将一对开放的花括号视为一个代码块,而语法规定,代码块语句不允许出现在赋值语句左侧,添加小括号后可以将块语句转化为一个表达式,从而实现整个解构赋值的过程。
const node = {a: 1, b: 2};
let {a, b} = node;

// 对已经声明的变量赋值
const node = {a: 1, b: 2};
let a, b;
({a, b} = node)
  • 深层解构
const obj = {a: {b: 1}};
let {a: {b}} = obj;
console.log(a)  // a is not defined
console.log(b)  // 1
  • 默认值 如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined。
const node = {a: 1, b: 2};
let {a, b, c} = node;
// 可以使用默认值
let {a, b, c = 3} = node;

注意: 如果值为null,不会执行默认值,只有为undefined才会走默认值

const node = {a:1, b: 2, c: null, d: undefined};
let {a, b, c = 3, d = 4} = node;
console.log(c, d); // null 4
  • 为非同名局部变量赋值
const node = {a:1, b: 2};
let {a: A, b: B} = node;
console.log(A, B); // 1 2

所有冒号前的标识符都代表在对象中的检索位置,其右侧为被赋值的变量名。

示例:将一个对象的部分属性赋值给另外一个对象

let obj1 = {a: 1, b: 1}
let obj2 = {a: 2, b: 2}
({a: obj2.a} = obj1) // Invalid destructuring assignment target
  • 不定元素解构
let obj = {a: 1, b: 2}
let {a, ...obj2} = obj
console.log(a, obj2) // 1 {b: 2}

特别说明: ES6中展开运算符只针对iterable才起作用,默认有数组、set、map和字符串。并不包含对象!ES6规范中也并未将展开运算符支持对象,但是目前的主流浏览器Chrome和firefox均已实现该特性。这意味着如果想在低版本浏览器中使用需要特别的Babel插件进行转换!object-rest-spread

数组解构

通过在数组中的位置进行选取,且可以将其存储在任意变量中,未“显式声明”的元素都会被直接被忽略。

let colors = ['red', 'blue', 'green'];
let [, , thirdColor] = colors;
console.log(thirdColor)

// 对已声明的变量进行赋值
let colors = ['red', 'blue', 'green'];
let thirdColor;
[, , thirdColor] = colors;

注意:不需要小括号包裹表达式,这一点与对象解构的约定不同

不定元素

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

...语法将数组中的其余元素赋值给一个待定的变量。

示例:克隆数组

let colors = ['red', 'blue', 'green'];
// es5方式
colors.concat()
// es6方式
[...colors]

注意:在被解构的数组中,不定元素必须为最后一个条目!

解构参数

function test(a, {b, c}) {
  console.log(a, b, c)
}
test(1, {b: 2, c: 3})   // 1 2 3
test(4) // Uncaught TypeError: Cannot destructure property `b` of 'undefined' or 'null'.

注意:解构参数,调用函数不提供被解构的参数会导致程序抛出错误。let {b, c} = undefined;

处理方式,让上述参数可选!

function test(a, {b, c} = {}) {
  console.log(a, b, c)
}
test(1, {b: 2, c: 3})   // 1 2 3
test(4) // 4 undefined undefined

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 带你玩转ECMAScript 6,助力你写出高效漂亮的代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • 「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    当我们谈及网页动画时,自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计...

    前端达人
  • 一道火车票排序的面试题

    面试题是这样描述的,一个人从北京出发,坐火车去旅行,途经N个城市,目的地是上海,拿到这些火车票如何对其进行排序。

    挥刀北上
  • [译] 我见过最好最详细的 JavaScript 关系的解释

    我无意在Reddit上找到了这个JavaScript meme,它是我见过最好的抽象。

    嘉明
  • 如何从JavaScript跨越到TypeScript [基础进阶知识点]

    一致,都会导致报错。 建议使用npm 全局安装typeScript 然后使用 tsc *.ts 进行编译TS文件

    Peter谭金杰
  • 谈谈ES6语法(汇总下篇)

    ES2017标准引入了async函数,使得异步操作更加方便。async函数是Generator函数的语法糖。不打算写Generator函数,感兴趣的话可以看文档...

    嘉明
  • JavaScrip概述

    JavaScript 是一种运行在 客户端 的 解释性语言 网页三部分 HTML:控制网页的 结构 CSS:控制网页的 样式 JavaScript:控...

    羊羽shine
  • 谈谈ES6前后的异步编程

    Javascript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。

    张炳
  • 谈谈ES6语法(汇总上篇)

    ES6可以说是一个泛指,指5.1版本以后的JavaScript的下一代标准,涵盖了ES2015,ES2016,ES2017等;亦指下一代JavaScript语言...

    嘉明
  • 谈谈ES6语法(汇总中篇)

    数组扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用空格分隔的参数序列。

    嘉明

扫码关注云+社区

领取腾讯云代金券