V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Cursive
V2EX  ›  JavaScript

在学习 JavaScript 的解构赋值语法时,遇到了一个想不明白的语法

  •  
  •   Cursive · 2018-12-25 22:13:14 +08:00 · 3373 次点击
    这是一个创建于 2158 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码如下

    var metadata = {
        title: "Scratchpad",
        translations: [
           {
            locale: "de",
            localization_tags: [ ],
            last_edit: "2014-04-14T08:43:37",
            url: "/de/docs/Tools/Scratchpad",
            title: "JavaScript-Umgebung"
           },
           {
            locale: "fg",
            localization_tags: [ ],
            last_edit: "2015-04-14T08:43:37",
            url: "/de/docs/Tools/Scratch",
            title: "JavaScript"
           }
        ],
        url: "/en-US/docs/Tools/Scratchpad"
    };
    
    var {title: englishTitle, translations: [{title: localeTitle}]} = metadata;
    console.log(englishTitle); // "Scratchpad"
    console.log(localeTitle); // "JavaScript-Umgebung"
    

    title: englishTitle 取 metadata 对象中的 title 的值并赋值给变量 englishTitle 这个能看懂

    translations: [{title: localeTitle}] 这里 title: localeTitle 这个能理解 translations: [{}] 这个语法想不通是啥意思了

    7 条回复    2018-12-26 09:15:53 +08:00
    aristotll
        1
    aristotll  
       2018-12-25 22:18:43 +08:00   ❤️ 1
    取的是数组第一个元素
    1OF7G
        2
    1OF7G  
       2018-12-25 22:46:06 +08:00
    只是数组解构和对象解构的组合
    let [a, b] = [1, 2, 3] // a=1, b=2
    FInt1620
        3
    FInt1620  
       2018-12-25 22:48:35 +08:00   ❤️ 1
    translations: [{locale: "de"}]
    Sparetire
        4
    Sparetire  
       2018-12-26 01:21:33 +08:00 via Android   ❤️ 1
    你就这么理解,解构左边所有出现在 key 的位置的标识符都是表示结构中的查找路径的,即查找你想要的那个值,出现在 value 位置的标识符就是实际被赋值的变量
    这里只有 englishTitle 和 localeTitle 出现在 value 位置,所以它们是最终声明赋值得到的变量,它们的值就是等号右边对象根据查找路径找到的值
    Cursive
        5
    Cursive  
    OP
       2018-12-26 08:35:24 +08:00
    @Sparetire 谢谢。有点理解了
    Cursive
        6
    Cursive  
    OP
       2018-12-26 08:38:49 +08:00
    @FInt1620 主要是不理解 translations 后面的这个冒号的语义
    因为之前学习的访问数组元素的语法是:translations[]
    UnderTaker666
        7
    UnderTaker666  
       2018-12-26 09:15:53 +08:00
    解构的时候冒号可以理解为重命名
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2875 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:14 · PVG 19:14 · LAX 03:14 · JFK 06:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.