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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2161 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

25 条回复 • 2018-12-14 22:52:01 +08:00

ByZHkc3

2018-12-13 16:25:48 +08:00

es6 解构

yokyj

2018-12-13 16:26:42 +08:00

解构

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

2018-12-13 16:47:00 +08:00

等于 function(value){console.log(value)}

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

2018-12-13 16:57:49 +08:00

十天设计出来的语言了解一下

learnshare

2018-12-13 16:58:49 +08:00

这部分有些奇怪，读起来也不直观，然后每个人都有自己的写法

TomVista

2018-12-13 16:59:48 +08:00

@ByZHkc3 @crs0910 @rizon @yokyj @zealot0630 话说我感觉 js 中很多奇奇怪怪的语法,完全是给程序员添乱啊...这个解构肯定算一个.

你们认为 es2016 es2017 中的这些东西是否违背了代码的可读性?

mytry

2018-12-13 17:01:47 +08:00

现在还可以 console.log(1,2,) 了。。。

crs0910

2018-12-13 17:06:50 +08:00

数组除了自己的解构方式，还可以用 Object 的解构。据说速度快一点。

crs0910

2018-12-13 17:08:22 +08:00

@TomVista #8 我觉得很好用啊。唯一不好的是深层次的解构和重命名一起用的时候有点难读。

crs0910

2018-12-13 17:09:45 +08:00

@crs0910 #11 我有时候会写错写成 as

tangym

2018-12-13 17:12:08 +08:00

一切皆对象，es 解构

tangym

2018-12-13 17:13:44 +08:00

推荐看这个： http://es6.ruanyifeng.com/

wu67

2018-12-13 17:26:43 +08:00

很多东西只是符合语法, 但是实际上你这么写, 会被同事打死的

mooncakejs

2018-12-13 17:28:31 +08:00

在用 typescript 前，解构基本用来当命名参数用，怎么会被打死。

geying

2018-12-13 21:44:22 +08:00 via iPhone

还是没看懂，手机上这个缩进……
是不是和 swift 一个参数量有两个名字

royzxq

2018-12-13 21:50:13 +08:00

es6 解构，挺好用的。

plqws

2018-12-13 21:54:47 +08:00

解构其实有很大的作用就是可以给函数定义具名参数，滥用的话才容易出问题

azh7138m

2018-12-13 23:49:24 +08:00

@TomVista 显然不会，这些语法都是来自于其他语言的（

codehz

2018-12-14 00:07:49 +08:00

@crs0910 #10
没错，js 的解构最坑的一点是，数组的解构是把数组当作 generator 来使用，得先构造一个迭代器，然后获取前几位的值，再干掉迭代器，因此效率上可能会有坑（{0: a, 1: b} = x; 和 [a, b] = x;相比可能前者更慢，当然实际情况可能会随着预热而变化，另外各种运行环境也在更新，以后 [a,b]=[b,a] 这种写法应该不会有性能坑）

maggielol

2018-12-14 09:10:19 +08:00

挺好用的，解构还可以设置默认值，这样函数内部就不用判断 argument，少了很多 if-else...

linZ

2018-12-14 10:11:30 +08:00

解构，说白了就是快速从一个对象里面拿东西

1010543618

2018-12-14 11:52:20 +08:00

Redux 里全是这个写法

greatbody

2018-12-14 22:52:01 +08:00

function fun({
detail: {
value
}
}) {
console.log(value)
}
fun({ detail: { value: "12" } })
给楼主格式化下代码