JavaScript - 来自两个数组的对象(父元素和子元素)

时间:2017-10-25 11:15:28

标签: javascript

我有2个阵列:

var links = [
  {
    code: 'home'
  },
  {
    code: 'contact'
  },
];

var subLinks = [
  {
    code: 'some subLink',
    parent: {
      code: 'home'
    }
  },
  {
    code: 'some subLink 2',
    parent: {
      code: 'home'
    }
  },
  {
    code: 'some subLink 3',
    parent: {
      code: 'contact'
    }
  }
];

我需要Object (链接作为子链接数组的键):

var menu = {
  home: ["some subLink", "some subLink 2"],
  contact: ["some subLink 3"]
};

此刻我有这个......

links.map(link => ({
    [link.code]: subLinks.map(subLink => (subLink.parent.code === link.code && subLink.code))
}))

6 个答案:

答案 0 :(得分:3)

我绝对喜欢使用功能JS的数组转换...

const menu = {};

links.map(link => menu[link.code] = subLinks
    .filter(sl => sl.parent.code === link.code)
    .map(sl => sl.code)
);

使用reduce ...

const menu = links.reduce((memo, menu) => {
    memo[menu.code] = subLinks
        .filter(sl => sl.parent.code === menu.code)
        .map(sl => sl.code);
    return memo;
},{});

两者都非常甜蜜,但减少不必创建变量来在循环内变异可能只是更甜一点。

答案 1 :(得分:1)



var links = [
  { code: 'home' },
  { code: 'contact' },
];
var subLinks = [
  { code: 'some subLink', parent: { code: 'home' } },
  { code: 'some subLink 2', parent: { code: 'home' } },
  { code: 'some subLink 3', parent: { code: 'contact' } }
];
var menu={};

for(var i=0;i<links.length;i++){
    var code = links[i].code;
    menu[code]=[];
    for(var j=0;j<subLinks.length;j++){
        var subLink = subLinks[j];
        if(subLink.parent && subLink.parent.code == code){
             menu[code].push(subLink.code);
        }
    }
}
console.log(menu)
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您可以通过两次传递执行此操作:首先,您迭代links以使用父链接创建基础对象。然后,您迭代subLinks以将它们添加到您在第一轮中添加的相应链接。

这样做的好处是它只显式地迭代每个原始数组一次

var links = [
  { code: 'home' },
  { code: 'contact' },
];
var subLinks = [
  { code: 'some subLink', parent: { code: 'home' } },
  { code: 'some subLink 2', parent: { code: 'home' } },
  { code: 'some subLink 3', parent: { code: 'contact' } }
];

// pass 1
var result = {};
for (var i = 0; i < links.length; i++) {
  result[links[i].code] = [];
}

// pass 2
for (var i = 0; i < subLinks.length; i++) {
  var subLink = subLinks[i];
  result[subLink.parent.code].push(subLink.code);
}

console.log(result);

请注意,在您的示例中,您没有明确需要links。每当遇到与尚不存在的父链接的子链接时,您还可以构建父链接 on demand

但是单独使用此功能可以扩展您的结构以包含其他信息。

答案 3 :(得分:1)

var x = subLinks.reduce((c, v) => {
    if(c.hasOwnProperty(v.parent.code)) c[v.parent.code].push(v.code);
    else c[v.parent.code] = [v.code];
    return c; 
}, {});

答案 4 :(得分:0)

双循环可以:

var links = [
  {
	code: 'home'
  },
  {
	code: 'contact'
  },
];

var subLinks = [
  {
	code: 'some subLink',
	parent: {
	  code: 'home'
	}
  },
  {
	code: 'some subLink 2',
	parent: {
	  code: 'home'
	}
  },
  {
	code: 'some subLink 3',
	parent: {
	  code: 'contact'
	}
  }
];
var menu = {};

for(var i=0;i<links.length;i++){
var prop = links[i].code;
var child;
	menu[prop]=[];
	for(var j=0;j<subLinks.length;j++){
		var parent = subLinks[j].parent.code;
		if(parent==prop){
			child = subLinks[j].code;
			menu[prop].push(child);
		}	
	}
}


console.log(menu);

答案 5 :(得分:0)

另一种解决方案:

&#13;
&#13;
var links = [{
  code: 'home'
}, {
  code: 'contact'
}];

var subLinks = [{
  code: 'some subLink',
  parent: {
    code: 'home'
  }
}, {
  code: 'some subLink 2',
  parent: {
    code: 'home'
  }
}, {
  code: 'some subLink 3',
  parent: {
    code: 'contact'
  }
}];

const result = links.reduce((o, x) => {
  o[x.code] = subLinks.filter(f => f.parent.code == x.code).map(m => m.code);
  return o;
}, {});

console.log(result);
&#13;
&#13;
&#13;

之证件: