专栏首页张培跃面试官随手写了个解构赋值 ,然后问我这是什么语法?JavaScript中有这玩意?

面试官随手写了个解构赋值 ,然后问我这是什么语法?JavaScript中有这玩意?

解构赋值的语法,在现如今的项目当中已经是烂大街般的存在了。其语法也很简单:等号左边是解构目标,等号右边是解构源。从字面当中,我们也可以轻易推断出,其天生的作用便是为赋值,传参而存在的。

倘若在面试的过程当中遇到与解构赋值相关的问题时,大多数人都会认为是送分题。但越是简单的问题,经历过你细细的思考之后,其背后往往总不会是表面那样简单。

在你印象当中的解构赋值可能是下面这样的:

/***** 数组模型的解构(Array)*****/
/** 基本 **/
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

/** 嵌套 **/
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

/** 忽略 **/
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

/** 不完全解构 **/
let [a = 1, b] = []; // a = 1, b = undefined

/** 剩余运算符 **/
let [a, ...b] = [1, 2, 3];
// a = 1
// b = [2, 3]

/** 字符串 **/
let [a, b, c, d, e] = 'zhang';
// a = 'z'
// b = 'h'
// c = 'a'
// d = 'n'
// e = 'g'

/** 解构默认值 **/
let [a = 2] = [undefined]; // a = 2
let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

/***** 对象模型的解构(Object)*****/
/** 基本 **/
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb' 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

/** 嵌套、忽略 **/
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

/** 不完全解构  **/
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

/** 剩余运算符 **/
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

/** 解构默认值 **/
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

但,长下面这副德行的你见过吗?

const userStr = "zhangsan,lisi,wangwu,zhaoliu";
const { 1: a, 3: b } = userStr.split(',');
// a = "lisi"
// b = "zhaoliu"

没错!在JavaScript的世界中,到处都是意料之外,但又在情理之中的故事……

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-29

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 知识点归纳笔记:JavaScript编码规范你都了解多少?

    驼峰式命名法大家应该都比较熟悉了:驼峰式命名法又被称为骆驼命名法,它是由小(大)写字母开始,后续每个单词首字母都大写。其中首字母大写的命名称为大驼峰命名法(Pa...

    用户1272076
  • 2、你能读得懂的TypeScript教程之基础数据类型

    在正式开篇之前,小伙伴们应该先弄清楚两个概念:强类型与弱类型。没错,这两个词都是形容编程语言的,即强类型语言与弱类型语言。

    用户1272076
  • 深陷axios坑中,久久不得爬出,望君莫犯!

    本人一生与bug英勇奋战,可谓斩敌无数,双手沾满鲜血,对于bug早已见怪不怪了。怎奈对于一些始料未及,史无前例的另类bug,真是惊呆了我的小伙伴们!

    用户1272076
  • ES6

    ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。

    eadela
  • SpringBoot-13-插曲之Node文件重命名+自动生成json对象

    张风捷特烈
  • ES6语法基础之let用法

    简单讲解一些ES6语法基础!了解一些es6新特性!当然下一步需要学习的vue框架也是基于es6的,因此很有必要学习下es6语法,接下来几次简单讲解es6语法!

    十月梦想
  • Swift基础---Integers

    用户3004328
  • swift基础1

    用户2554571
  • swift体验1

    一门新语言传统的入门方式是在屏幕上打印“Hello,wrold”。在Swift中你可以用下面一行 代码:

    用户3004328
  • 通过欧拉计划学习Rust编程(第17~21题)

    最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识。学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快...

    申龙斌

扫码关注云+社区

领取腾讯云代金券