上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

分享一种对象赋值的写法

[复制链接]
  • TA的每日心情
    开心
    昨天 15:40
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2022-11-30 23:11:53 | 显示全部楼层 | 阅读模式

    从简单到复杂,可以看下输出的结果和大家想的一样不

    先看下为什么undefined报错 (为了防止该报错,我们再接收后台返回的数据的时候就会设置一个默认值(防止后端没有传字段,或者传的是null这种情况,前端报错))
    image.png

    接下来看下面的写法吧

    const name = '李四'
    const data = {
      name: "张三"
    }
    
    function caoZuo() {
      const {name} = data 
      let b = name
      console.log(b)   // 当name: "张三"  输出张三,  name: ""  输出为空
    }
    caoZuo()

    第二种

    const name = '李四'
    const data = {
    }
    
    function caoZuo() {
      const {name} = data  
      let b = name
      console.log(b)  // 输出undefined
    }
    caoZuo()
    
    // 为了防止出现undefined的情况我们这样写一下
    
    const name = '李四'
    const data = {
    }
    
    function caoZuo() {
      const {name=''} = data  
      let b = name
      console.log(b)  // 输出空
    }
    caoZuo()

    第三种

    const name = '李四'
    const data = {
      name: '张三'
    }
    
    function caoZuo() {
      const {name: returnName} = data   // 这样写是把data中的name值赋值为returnName
      let b = name
      console.log(b)  // 输出的是李四  returnName为张三
    }
    caoZuo()

    第四种

    const name = '李四'
    const data = {
    }
    
    function caoZuo() {
      const {name: returnName} = data   
      let b = name
      console.log(b,returnName)    // 这个时候b是李四,returnName为undefined
    }
    caoZuo()
    
    //为了防止returnName出现undefined
    const name = '李四'
    const data = {
    }
    
    function caoZuo() {
      const {name: returnName=''} = data   
      let b = name
      console.log(b,returnName)    // 这个时候b是李四,returnName为空
    }
    caoZuo()

    第五种(肯定有人好奇为什么要这样变量要赋值给另外一个变量)
    工作场景:前端全局状态管理中会有一个name变量,然后后端的接口也会返回一个name(如果后端返回name,我就取它返回的name,如果没有返回我就拿全局状态的name)

    
    const name = '李四'
    const data = {
    }
    
    function caoZuo() {
      const {name: returnName} = data   
      let b = returnName || name
      console.log(b)    // 这个时候b是李四
    }
    caoZuo()
    
    // 当data有值
    const name = '李四'
    const data = {
        name: "张三"
    }
    
    function caoZuo() {
      const {name: returnName} = data   
      let b = returnName || name
      console.log(b)    // 这个时候b是张三
    }
    caoZuo()
    
    接脚本定制
    I frequently record, because want to leave something.
  • TA的每日心情

    3 天前
  • 签到天数: 67 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    220

    积分

    高级工程师

    积分
    220

    油中2周年生态建设者

    发表于 2022-12-1 10:04:36 | 显示全部楼层
    1. const name = '李四'
    2. const data = {
    3.     name: "张三"
    4. }

    5. function caoZuo() {
    6.   const {name: returnName, b:c=123} = data   //returnName=data.name,caozuo里声明了一个c=123
    7.   let b = returnName || name
    8.   console.log(b)    // 这个时候b是张三
    9. }
    10. caoZuo()
    复制代码


    是这么理解吧?
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-5-17 00:00
  • 签到天数: 120 天

    [LV.7]常住居民III

    29

    主题

    602

    回帖

    539

    积分

    专家

    积分
    539

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-12-1 13:31:51 | 显示全部楼层
    本帖最后由 脚本体验师001 于 2022-12-1 13:56 编辑
    weishen极品小猫 发表于 2022-12-1 10:04
    是这么理解吧?

    这个真奇妙
      const {name: returnName} = data  
    似乎data就是一个变量池,你用哪种方式去取值,似乎不重要
    楼主只说了方法,可这深层原理是什么呢?
    似乎与习惯性写法不太一样

    为什么会出现一个returnName,这个更难理解了
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 23:59
  • 签到天数: 707 天

    [LV.9]以坛为家II

    30

    主题

    542

    回帖

    1469

    积分

    荣誉开发者

    积分
    1469

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

    发表于 2022-12-1 14:11:58 | 显示全部楼层

    脚本体验师001 发表于 2022-12-1 13:31

    这个真奇妙
    const {name: returnName} = data

    似乎data就是一个变量池,你用哪种方式去取值,似乎不重 ...

    这是ES6特性解构

    const data = {
        name: "张三"
    }

    data已经声明过了
    此时再进行解构
    const {name: returnName} = data
    等价于
    const returnName=data.name

    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-5-17 00:00
  • 签到天数: 120 天

    [LV.7]常住居民III

    29

    主题

    602

    回帖

    539

    积分

    专家

    积分
    539

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-12-1 14:44:10 | 显示全部楼层
    steven026 发表于 2022-12-1 14:11
    [md]这是ES6特性解构

    ```

    哦,明白了,这些东西都没系统学习过。多谢指点
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情

    2022-12-1 21:24
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    24

    回帖

    24

    积分

    助理工程师

    积分
    24
    发表于 2022-12-1 20:42:12 | 显示全部楼层
    虽然看不懂到我感觉很nb
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    873

    回帖

    1371

    积分

    荣誉开发者

    积分
    1371

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-12-1 21:18:38 | 显示全部楼层
    解构赋值吧,我还写过一个更奇葩的:https://scriptcat.org/script-show-page/532/code
    1.         const {onload, onerror, onabort, ontimeout, _mode, ...options} = {
    2.             method: 'get',
    3.             responseType: 'text',
    4.             _status: [200],
    5.             _detail: false,
    6.             _nocatch: false,
    7.             ...defaultOptions,
    8.             ...obj,
    9.             url: desc
    10.         };
    复制代码
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-5-17 00:00
  • 签到天数: 120 天

    [LV.7]常住居民III

    29

    主题

    602

    回帖

    539

    积分

    专家

    积分
    539

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-12-1 21:55:19 | 显示全部楼层
    cxxjackie 发表于 2022-12-1 21:18
    解构赋值吧,我还写过一个更奇葩的:https://scriptcat.org/script-show-page/532/code

    咿呀,这咿呀,上来一套点点点组合拳,这不要任何加密小白看了都迷糊
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情

    3 天前
  • 签到天数: 67 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    220

    积分

    高级工程师

    积分
    220

    油中2周年生态建设者

    发表于 2022-12-1 22:52:03 | 显示全部楼层

    steven026 发表于 2022-12-1 14:11

    [md]这是ES6特性解构

    
    
     const {name: returnName, b:c=123} = data
    我想不明白的是这个c变量可以读取,那这个对象里的b要怎么读取呢?
    data并没有获得这个对象里的b
    回复

    使用道具 举报

  • TA的每日心情

    3 天前
  • 签到天数: 67 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    220

    积分

    高级工程师

    积分
    220

    油中2周年生态建设者

    发表于 2022-12-1 22:53:58 | 显示全部楼层
    cxxjackie 发表于 2022-12-1 21:18
    解构赋值吧,我还写过一个更奇葩的:https://scriptcat.org/script-show-page/532/code

    太妙了,这样可以大大减少代码工程量
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表