广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6下javascript解构赋值常见用法总结
  • 778
分享到

ES6下javascript解构赋值常见用法总结

2024-04-02 19:04:59 778人浏览 独家记忆
摘要

javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a =

javascript解构赋值出现的契机:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let a = obj.a
    let b = obj.b

Javascript解构赋值问题核心:

每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,es6解构语法核心就基于这样的模式匹配思想

上面的问题解构方案:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

很明显看到,我们无需在右侧显式声明取值属性名,完全依据右边结构进行对应取值,非常优雅

Javascript解构赋值应用场景:

1.对象声明解构

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

2.对象赋值解构

    let a, b
    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    ({a, b} = obj)
    // 更常见的场景是变量c d被声明到全局,这种情况在Vue很常见,数据被提前声明到data选项,数据访问一般都是this.xxxdata,此时就很有用了
    ({a:c, b:d} = obj)

3.变量交换

    [x,y] = [y,x]

4.数组解构

   let  [first,] = arr//获取 
   let [first, ...rest] = arr//获取第一个,以及剩余参数

5.函数对象实参解构

    function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
    {...}

更多关于ES6下的Javascript使用小技巧请查看下面的相关链接

--结束END--

本文标题: ES6下javascript解构赋值常见用法总结

本文链接: https://www.lsjlt.com/news/138047.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ES6下javascript解构赋值常见用法总结
    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a =...
    99+
    2022-11-13
  • JavaScript解构赋值的常见场景有哪些
    这篇文章主要为大家展示了“JavaScript解构赋值的常见场景有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript解构赋值的常见场景有哪些”这篇文章吧。1. 提取数据先来看...
    99+
    2023-06-25
  • JavaScript解构赋值的5个常见场景与实例教程
    目录前言1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以...
    99+
    2022-11-12
  • 如何在Javascript中使用解构赋值语法
    本篇文章给大家分享的是有关如何在Javascript中使用解构赋值语法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。前言首先在 ES6中引入的“解构赋值语法”允许把数组和对象中...
    99+
    2023-06-14
  • 利用@Value注解为bean的属性赋值方法总结
    目录1.@Value注解2.@Value注解的用法2.1.不通过配置文件注入属性的情况2.2.通过配置文件注入属性的情况2.3.@Value中#{··&m...
    99+
    2023-05-19
    @Value注解为bean的属性赋值 @Value为bean属性赋值 @Value bean
  • C语言结构体数组常用的赋值方法有哪些
    这篇“C语言结构体数组常用的赋值方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“C语言结构体数组常用的赋值方法有哪些...
    99+
    2023-07-02
  • JavaScript数组常用方法实例讲解总结
    目录数组常用方法concat() 方法join() 方法pop() 方法push() 方法reverse() 方法shift() 方法slice() 方法sort...
    99+
    2022-11-12
  • C语言结构体数组常用的三种赋值方法(包含字符串)
    目录一、按照成员变量进行赋值(麻烦,好理解,字符串赋值需要strcpy)二、对数组整体进行赋值。(一次性需要把所有的都添加进去,不需要strcpy)     &n...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作