Javascript 解构赋值详情

 更新时间:2021年11月15日 08:28:40   作者:刘志军  
这篇文章主要介绍了Javascript 解构赋值详情,解构赋值是ES6中的特性,可以将对象或数组中的值同时赋值给多个变量。西阿棉一起来看看详细内容吧,需要的朋友可以参考下

1、数组解构

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


除了数组,任何可迭代的对象都支持被解构, 例如字符串

let [first, second] = "he"

console.log(first, second) // h e

2、对象解构

赋值右侧是对象,左侧是包含在花括号内逗号隔开的变量名

let {a, b, c} = {a:1, b:2, c:3}
console.log(a,b,c) // 1 2 3


左侧的变量名需要和对象中的属性名相同,如果对应不上的话,左侧的变量名将被赋值为undefined。例如:

let {a,b, d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 undefined


如果变量名与属性名不一样,可以用冒号分隔符将属性名赋值给变量名

例如:

let {a,b, c:d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 3


3、不完全解构

解构赋值左侧变量个数可以不等于右侧数组中元素的个数

(1)左侧多余的变量会被设置为undefined,

let [a, b, c] = [1, 2]

console.log(a, b, c) // 1 2 undefined

(2)右侧多余的值将被直接忽略

let [a, b, c] = [1, 2, 3, 4]

console.log(a, b, c)  // 1 2 3


(3)左侧可以用逗号跳过某些值

let [a, , c] = [1, 2, 3, 4]

console.log(a, c)  // 1 3


(4)右侧多余的值可以通过...收集到一个变量中

let [a, b, ...c] = [1, 2, 3, 4]

console.log(a, b, c)  // 1 2 [3, 4]


4、用解构赋值实现变量交换

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

到此这篇关于Javascript 解构赋值详情的文章就介绍到这了,更多相关Javascript 解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序 ecshop地址三级联动实现实例代码

    微信小程序 ecshop地址三级联动实现实例代码

    这篇文章主要介绍了微信小程序 ecshop地址3级联动实现实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • 详解 TypeScript 枚举类型

    详解 TypeScript 枚举类型

    这篇文章主要介绍了TypeScript 枚举类型,TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚举就是一个字典,文章内容围绕TypeScript 枚举类型展开内容,需要的朋友可以参考一下
    2021-10-10
  • 前端的状态管理(下)

    前端的状态管理(下)

    这篇文章主要介绍了前端的状态管理,续上篇文章内容,今天将从 Redux 入手逐渐拓展,需要的小伙伴可以参考一下哟
    2021-10-10
  • JavaScript事件委托原理

    JavaScript事件委托原理

    这篇文章主要介绍了JavaScript事件委托原理, 事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现,下面我们一起来学习文章的具体详细内容吧
    2021-12-12
  • JS中 querySelector 与 getElementById 方法区别

    JS中 querySelector 与 getElementById 方法区别

    这篇文章主要介绍了JavaScript中 querySelector 与 getElementById 方法与区别,围绕querySelector 与 getElementById 的相关资料展开文章内容,需要的朋友可以参考一下
    2021-10-10
  • JavaScript编程中实现对象封装特性的实例讲解

    JavaScript编程中实现对象封装特性的实例讲解

    JavaScript可以在一定程度上以面向对象方式进行编程,而封装是面向对象中的一个重要特性,本文就来分享阮一峰老师对JavaScript编程中实现对象封装特性的实例讲解
    2016-06-06
  • JavaScript实现优先级队列

    JavaScript实现优先级队列

    这篇文章主要介绍了JavaScript如何实现优先级队列,在计算机里,队列是一种先进先出的数据结构。就跟我们平时排队一样,先到的排在前面,前面的优先处理,下面我们就来看看在JavaScript里面的优先队列又当如何
    2021-12-12
  • Ant Design 的Bug修复示例详解

    Ant Design 的Bug修复示例详解

    这篇文章主要为大家介绍了Ant Design 的Bug修复示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Web应用开发TypeScript使用详解

    Web应用开发TypeScript使用详解

    这篇文章主要为大家介绍了Web应用开发TypeScript的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • JS代码优化的8点建议

    JS代码优化的8点建议

    本文将详细介绍JS编程风格的几个要点与JS代码优化的几点建议,需要的朋友可以参考下
    2020-02-02

最新评论