• 请不要在回答技术问题时复制粘贴 AI 生成的内容
howell5
V2EX  ›  程序员

Object.assign 还能这么用吗?

  •  
  •   howell5 · Oct 29, 2019 · 2761 views
    This topic created in 2388 days ago, the information mentioned may be changed or developed.

    看到一篇文章: https://nbsaw.surge.sh/#/post/71

    作者想把

    var colors = {
      gray: {
         default: "#DDDDDD",
         light: "#EEEEEE",
         dark: "#CCCCCC"
      })
    }
    

    省去 default, 实现这样的效果:

    const Components =  styled.div`
      background: ${ colors.gray }; // background: #DDDDDD
    `
    const Components2 =  styled.div`
      background: ${ colors.gray.light }; // background: #EEEEEE
    `
    const Components3 =  styled.div`
      background: ${ colors.gray.dark }; // background: #CCCCCC
    `
    

    实现的方法是这样:

    const colors = {
      gray: Object.assign("#DDDDDD", {
         light: "#EEEEEE",
         dark: "#CCCCCC"
      })
    }
    

    一开始是感兴趣的,但是发现自己确实实现不了,返回的 colors.gray 是个 object, 查了下 MDN 上 Object.assign 的首个参数只能是 object, 就算不是 object 也会转成 object。

    所以问题是:

    • 1、我实现的方式是不是不对?( runtime 和标准的问题?)
    • 2、假设这种实现不行,若是想达到这种效果,靠原生怎么实现?(不自己定义函数)
    19 replies    2019-10-30 16:43:53 +08:00
    CoverL
        1
    CoverL  
       Oct 29, 2019   ❤️ 1
    String 为包装类型,String(colors.gray) === ‘#dddddd’; 看下相关知识吧
    codingBug
        2
    codingBug  
       Oct 29, 2019
    学到了
    AlphaTr
        3
    AlphaTr  
       Oct 29, 2019
    const a = Object.assign("#DDDDDD", {light: "#EEEEEE", dark: "#CCCCCC"}); console.log(`${a}, ${a.light}`); 原生就这么用就行吧
    xxx749
        4
    xxx749  
       Oct 29, 2019 via Android
    学到了
    cheeto
        5
    cheeto  
       Oct 29, 2019
    https://stackoverflow.com/questions/42560540/what-happens-when-i-object-assign-to-a-primitive-type-in-javascript

    colors.gray 是个 Object 没错,在使用${}模版字符串占位符时,应该就默认调用了它的 toString()方法吧,使其输出为#DDDDDD
    roscoecheung1993
        6
    roscoecheung1993  
       Oct 29, 2019
    ecma 定义 Object.assign 的第一步:第一个参数 toObject,

    Let to be ToObject(target)

    string ToObject 操作如下

    Return a new String object whose [[StringData]] internal slot is set to the value of argument

    所以原生这么写没毛病
    zzlit
        7
    zzlit  
       Oct 29, 2019
    学习一下
    shiny
        8
    shiny  
    PRO
       Oct 29, 2019   ❤️ 1
    js 正是一门可以活到老学到老的语言,寿与天齐,千秋万载,一统江湖
    howell5
        9
    howell5  
    OP
       Oct 29, 2019
    @roscoecheung1993 @CoverL @cheeto @AlphaTr
    ok, 我 get 到了。返回的是 object 没错。忽略了 toString()的隐形触发 -_-|| 。
    只有当实际使用到类似于${}自动触发或者自己手动触发 toString()去使用。感谢各位。
    zbinlin
        10
    zbinlin  
       Oct 29, 2019
    你可以这样定义:

    var colors = {
    gray: {
    toString: () => "#DDDDDD",
    light: "#EEEEEE",
    dark: "#CCCCCC",
    },
    };

    '#DDDDDD' === `${colors.gray}`
    '#EEEEEEE' === `${colors.gray.light}`
    '#CCCCCC' === `${colors.gray.dark}`
    chuxiaonan
        11
    chuxiaonan  
       Oct 29, 2019
    toString() 可以做到
    Proxy 应该也可以
    chuxiaonan
        12
    chuxiaonan  
       Oct 29, 2019
    试了一下 Proxy 似乎并不可以
    ssshooter
        13
    ssshooter  
       Oct 29, 2019 via Android
    有点意思
    autoxbc
        14
    autoxbc  
       Oct 30, 2019   ❤️ 1
    基本包装类型另一个玩法是把包装作为容器,挂载一些私有数据上去
    比如对一个基本类型数据做链式加工,原始值挂在包装上,可以在需要时提取出来
    ruandao
        15
    ruandao  
       Oct 30, 2019 via iPhone
    div ' 的是什么无法?
    ericgui
        16
    ericgui  
       Oct 30, 2019
    @ruandao

    这个用的是 styled components
    你查一下
    dfourc
        18
    dfourc  
       Oct 30, 2019
    @ericgui #16 怎么感觉跟 react 组件语法相似呢
    userdhf
        19
    userdhf  
       Oct 30, 2019
    相当于是在包装类型上挂载了几个{}吗?
    类似于 var arr=[]; a.my="asdasd";这样?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1399 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 78ms · UTC 17:05 · PVG 01:05 · LAX 10:05 · JFK 13:05
    ♥ Do have faith in what you're doing.