Object.assign 还能这么用吗? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
请不要在回答技术问题时复制粘贴 AI 生成的内容
howell5

Object.assign 还能这么用吗?

  •  
  •   howell5 Oct 29, 2019 2717 views
    This topic created in 2372 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 ` cons 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
      &bsp; 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     1109 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 64ms UTC 18:20 PVG 02:20 LAX 11:20 JFK 14:20
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86