这个函数里的... 是什么东西，这么神奇，还有函数声明后面的{}。

[vonnyfly]

export function create(styles: Object): {[name: string]: number} {
  const platformStyles = {};
  Object.keys(styles).forEach((name) => {
    let {ios, android, ...style} = {...styles[name]};
    if (ios && Platform.OS === 'ios') {
      style = {...style, ...ios};
    }
    if (android && Platform.OS === 'android') {
      style = {...style, ...android};
    }
    platformStyles[name] = style;
  });
  return StyleSheet.create(platformStyles);
}

[ayaseangle]

annotation ？

[koi]

这是 react native 里面的代码吧？ react native 貌似用的不是原生的 js 而是 flow.js? 类似 typescript 之类的

[plantain]

第一个是 es6 的 rest parameter ，第二个是一个类型，函数返回值的类型。

[plantain]

那个类型里定义了一个 es6 的 computed property

[rogerchen]

...是 destructuring
函数声明后边那个{}是返回值类型声明
这段代码就是 typescript

[iugo]

@plantain 这段代码中的用法应被称作 spread 而不是 rest. 是展开而不是集合.

而且这是还未定型的 ES7 的特性.

[broadliyn]

醉了，越来越搞不懂 js 要干嘛了。。。。

[adspe]

@rogerchen 看到有类型指定就是 TS 了呀。 ES6 的 destructuring 和 spread 一起很好用

[visonme]

@broadliyn 不是 js 要干嘛，是那些公司，团体，个人相对 js 干点啥～ 呵呵～

[am241]

js 算不算常见语言里语法最奇怪的？感觉已经远超 perl 了

[learnshare]

TypeScript 吧，不过语法还是 ES6/2015/***

[secondwtq]

@am241 JS 语法感觉还行，但是有一些奇怪的机制。

[vonnyfly]

@ayaseangle
@koi
@plantain
@rogerchen
@iugo
@adspe
的确是 TypeScript,刚刚看了下语法，发现 JS 的写法越来越逆天了。
这里有 RN javascript 的特殊语法，大概能看懂，自己写有点难： https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers

[vonnyfly]

三个点叫做 object spread syntax 。

[haozhang]

@iugo spread 是 ES6 的吧，怎么会是 ES7 的呢

[fds]

其实就是为了写起来方便，简化字典操作。

[Phariel]

js 有赶超 ruby 的趋势

[vonnyfly]

@haozhang object spread 是 ES7 ， Array/call spread 是 ES6 ，应该是这样的。

[vonnyfly]

@Phariel 在语法上跟 Ruby 元编程技巧有的一拼了。

[xjp]

typeScript js 的一个超集 现在非常流行

上面这些语法什么的 js 暂时还不支持 之后会支持的

[frogcjn]

@vonnyfly 这个代码是哪里的？ TypeScript 还没支持这个 ES8 object property spread and rest 的特性吧？ TypeScript 2.1 才有。 https://github.com/Microsoft/TypeScript/wiki/Roadmap

[frogcjn]

@vonnyfly 这个应该是 babel+typeflow,
babel-cli 再加上 babel-preset-es2015 ，和 babel-plugin-transform-object-rest-spread 这个插件。
http://babeljs.io/docs/plugins/transform-object-rest-spread/

TypeScript 还不支持 object property spread and rest.

[keyanzhang]

https://gist.github.com/keyanzhang/72f4d929b1cccfab91756920956aa062

[keyanzhang]

不知道现在回复是否支持 Markdown 了，如果不支持的话请看上面的 gist 。

这段代码应该来自 https://github.com/fbsamples/f8app/blob/master/js/common/F8StyleSheet.js

`...` 是通过 [babel]( http://babeljs.io/) 转译的 Rest/Spread 。具体请看 https://github.com/sebmarkbage/ecmascript-rest-spread
- `let {ios, android, ...style} = obj` 可以理解成 `let ios = obj.ios; let android = obj.android; let style = "obj 中除去 ios 和 android 之外的所有 property";`
- `let` 右侧的 `{...styles[name]}` 可以理解成 `Object.assign({}, styles[name]);`
- 同理，`style = {...style, ...android};` 会被 babel 转译成 `style = Object.assign({}, style, android);`

函数签名中的 `: Object` 以及 `: {[name: string]: number}` 是 [flow]( https://flowtype.org/) 的类型标注（并不是 TypeScript ）。换句话说，`create` 这个函数接受一个类型为 `Object` 的参数 `styles`，并返回一个类型为 `{[name: string]: number}` 的值。
- 除去 `number`、`string`、`boolean`、`null` 以及 `undefined` 之外的任何类型均可被标注为 `Object`
- https://flowtype.org/docs/objects.html#the-object-type
- `{[name: string]: number}` 代表这是一个从 `string` 到 `number` 的映射。举个例子的话，这个函数返回 `{ a: 12, b: 13 }` 是没有问题的，但如果返回 `{ a: 12, b: 'foo' }` 则会报错，因为 `'foo'` 是一个 `string` 而不是 `number`
- https://flowtype.org/docs/objects.html#objects-as-maps

[vonnyfly]

@keyanzhang 写的很好。
其实已多年看代码的经验就明白，只是觉得写的很神奇。
赞你的解释。让我更清楚了语法相关的内容。