V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
rizon
V2EX  ›  程序员

js 的这个语法是个什么东西?

  •  
  •   rizon ·
    othorizon · 2018-12-13 16:21:54 +08:00 · 3932 次点击
    这是一个创建于 2172 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天偶然发现这种写法,还是挺有意思的。

    function fun({
                     detail: {
                         value
                     }
                 }) {
        console.log(value)
    }
    fun({detail: {value: "12"}})
    

    不是专门搞 js 的,所以不是很懂,请问这个东西叫什么名字?是个什么概念的什么存在啊?

    25 条回复    2018-12-14 22:52:01 +08:00
    ByZHkc3
        1
    ByZHkc3  
       2018-12-13 16:25:48 +08:00
    es6 解构
    yokyj
        2
    yokyj  
       2018-12-13 16:26:42 +08:00
    解构
    crs0910
        3
    crs0910  
       2018-12-13 16:42:44 +08:00
    还可以改名字,语法比较恶心
    ```
    list = ({ dbs: { master: client, slave: server } }) => console.table({client, server})
    list({ dbs: { master: 'A', slave: 'B' } })
    ```
    TomVista
        4
    TomVista  
       2018-12-13 16:47:00 +08:00
    等于 function(value){console.log(value)}
    zealot0630
        5
    zealot0630  
       2018-12-13 16:52:49 +08:00
    学 erlang,scala 的语法,

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

    const [A,B,...C] = [1,2,3] // A=1 B=2 C=[3]

    import {A,B,C} from 'library'

    const {A,B,...C} = {A:1, B:2, C:3, D:4} // A=1,B=2,C={C:3,D:4}

    ...的用法还在 proposal
    chanchan
        6
    chanchan  
       2018-12-13 16:57:49 +08:00
    十天设计出来的语言 了解一下
    learnshare
        7
    learnshare  
       2018-12-13 16:58:49 +08:00
    这部分有些奇怪,读起来也不直观,然后每个人都有自己的写法
    TomVista
        8
    TomVista  
       2018-12-13 16:59:48 +08:00
    @ByZHkc3 @crs0910 @rizon @yokyj @zealot0630 话说我感觉 js 中很多奇奇怪怪的语法,完全是给程序员添乱啊...这个解构肯定算一个.

    你们认为 es2016 es2017 中的这些东西是否违背了代码的可读性?
    mytry
        9
    mytry  
       2018-12-13 17:01:47 +08:00
    现在还可以 console.log(1,2,) 了。。。
    crs0910
        10
    crs0910  
       2018-12-13 17:06:50 +08:00
    数组除了自己的解构方式,还可以用 Object 的解构。据说速度快一点。
    crs0910
        11
    crs0910  
       2018-12-13 17:08:22 +08:00
    @TomVista #8 我觉得很好用啊。唯一不好的是深层次的解构和重命名一起用的时候有点难读。
    crs0910
        12
    crs0910  
       2018-12-13 17:09:45 +08:00
    @crs0910 #11 我有时候会写错写成 as
    tangym
        13
    tangym  
       2018-12-13 17:12:08 +08:00
    一切皆对象,es 解构
    tangym
        14
    tangym  
       2018-12-13 17:13:44 +08:00
    推荐看这个: http://es6.ruanyifeng.com/
    wu67
        15
    wu67  
       2018-12-13 17:26:43 +08:00
    很多东西只是符合语法, 但是实际上你这么写, 会被同事打死的
    mooncakejs
        16
    mooncakejs  
       2018-12-13 17:28:31 +08:00
    在用 typescript 前,解构基本用来当命名参数用,怎么会被打死。
    geying
        17
    geying  
       2018-12-13 21:44:22 +08:00 via iPhone
    还是没看懂,手机上这个缩进……
    是不是和 swift 一个参数量有两个名字
    royzxq
        18
    royzxq  
       2018-12-13 21:50:13 +08:00
    es6 解构,挺好用的。
    plqws
        19
    plqws  
       2018-12-13 21:54:47 +08:00
    解构其实有很大的作用就是可以给函数定义具名参数,滥用的话才容易出问题
    azh7138m
        20
    azh7138m  
       2018-12-13 23:49:24 +08:00
    @TomVista 显然不会,这些语法都是来自于其他语言的(
    codehz
        21
    codehz  
       2018-12-14 00:07:49 +08:00   ❤️ 1
    @crs0910 #10
    没错,js 的解构最坑的一点是,数组的解构是把数组当作 generator 来使用,得先构造一个迭代器,然后获取前几位的值,再干掉迭代器,因此效率上可能会有坑({0: a, 1: b} = x; 和 [a, b] = x;相比 可能 前者更慢,当然实际情况可能会随着预热而变化,另外各种运行环境也在更新,以后 [a,b]=[b,a] 这种写法应该不会有性能坑)
    maggielol
        22
    maggielol  
       2018-12-14 09:10:19 +08:00
    挺好用的,解构还可以设置默认值,这样函数内部就不用判断 argument,少了很多 if-else...
    linZ
        23
    linZ  
       2018-12-14 10:11:30 +08:00
    解构,说白了就是快速从一个对象里面拿东西
    1010543618
        24
    1010543618  
       2018-12-14 11:52:20 +08:00
    Redux 里全是这个写法
    greatbody
        25
    greatbody  
       2018-12-14 22:52:01 +08:00
    function fun({
    detail: {
    value
    }
    }) {
    console.log(value)
    }
    fun({ detail: { value: "12" } })
    给楼主格式化下代码
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   910 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:52 · PVG 05:52 · LAX 13:52 · JFK 16:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.