将子对象的属性名称转换为字符串数组的智能方法？

Question

我有一个与此相似的对象：

"dependencies": {
    "react": "16.5.0",
    "react-native": "^0.57.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  },

我想要一个包含以下内容的数组：

{
    "name":"sdfsd",
    "id":1,
    "groups":[
        {
            "name":"name1",
            "id":1,
            "subGroups":[..]
        },
        {
            "name":"name2",
            "id":21,
            "subGroups":[..]
        }
    ]
}

我可以做一个循环，然后创建我的数组，但是ES6中肯定有更漂亮的方法吗？

Answer 1

您可以写：

const groups = this.obj.groups.map( ({name, id}) => ({name, id}) );

或将映射器封装成这样的单独函数：

const getNameId = ({name, id}) => ({name, id});
const groups = this.obj.groups.map(getNameId);

因此，您在此处使用了许多ES6功能：

• map（）函数-在ES6之前引入，但它是一种非常实用的方法，用于在现有数组上进行映射并以不变的方式创建新数组（深拷贝，不引用原始数组）
• 将对象分解为函数参数-> ({name, id}) =>了解到了-很棒。
• 对象速记符号-> => ({name, id})
无点符号-功能编程爱好者偏爱的另一个功能-您可以将其与unary函数一起使用-仅具有一个参数的函数，也称为arity为1。 groups.map(g => ({id: g.id, name: g.name}))将映射器函数提取到单独的函数中，然后像这样map(getNameId)一样传递给它。

Answer 2

使用.map()数组方法：

const groups = myObject.groups.map(g => ({ name : g.name, id : g.id }) );

Answer 3

一种干净的ES6方法：

let groups = this.obj['groups'].map( ({id, name}) => ({ id, name }) );

或者您可以使用spread使它更加干净：

let groups = this.obj['groups'].map( ({subGroups, ...groups}) => (groups) );