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

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

  •  
  •   rizon ·
    othorizon · Dec 13, 2018 · 4834 views
    This topic created in 2886 days ago, the information mentioned may be changed or developed.

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

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

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

    25 replies  •  2018-12-14 22:52:01 +08:00
    ByZHkc3
    ByZHkc3
    Dec 13, 2018
    1
    es6 解构
    yokyj
    yokyj
    Dec 13, 2018
    2
    解构
    catoncat
    catoncat
    Dec 13, 2018
    3
    还可以改名字,语法比较恶心
    ```
    list = ({ dbs: { master: client, slave: server } }) => console.table({client, server})
    list({ dbs: { master: 'A', slave: 'B' } })
    ```
    TomVista
    TomVista
    Dec 13, 2018
    4
    等于 function(value){console.log(value)}
    zealot0630
    zealot0630
    Dec 13, 2018
    5
    学 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
    chanchan
    Dec 13, 2018
    6
    十天设计出来的语言 了解一下
    learnshare
    learnshare
    Dec 13, 2018
    7
    这部分有些奇怪,读起来也不直观,然后每个人都有自己的写法
    TomVista
    TomVista
    Dec 13, 2018
    8
    @ByZHkc3 @crs0910 @rizon @yokyj @zealot0630 话说我感觉 js 中很多奇奇怪怪的语法,完全是给程序员添乱啊...这个解构肯定算一个.

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