JavaScript - Объект из двух массивов (родительский и дочерний элементы)

Question

JavaScript - Объект из двух массивов (родительский и дочерний элементы)

1

У меня есть 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 (ссылка как ключ с массивом subLinks):

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))
}))

Adee 25 окт. 2017, в 14:02

Источник

2

map вернет массив. Подумайте об reduce .
evolutionxbox 25 окт. 2017, в 11:17

Теги:

javascript

6 ответов

Ещё вопросы

map вернет массив. Подумайте об reduce .

Sten Muchow · Answer 1 · 2017-10-25T09-21-00.000Z

Я очень люблю преобразования массива с использованием функциональных JS...

const menu = {};

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

Используя уменьшить...

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

И то, и другое довольно мило, но сокращение необходимости создавать переменную для изменения внутри циклов может быть немного слаще.

Обратите внимание, что это полностью subLinks точно links.length .
Там не было никаких спецификаций нотации;)
Это не была критика, просто дружеское замечание;) Мне все еще нравится ваш код! : D
Не воспринимается как критика! :) Я считаю, что наиболее читаемый код, как правило, самый лучший - разбирайся с любыми вещами O, как они есть. Иногда массивы просто малы, и не имеет значения, что мы делаем больше итераций, чем требуется на самом деле.

poke · Answer 2 · 2017-10-25T10-00-00.000Z

Вы можете сделать это за два прохода: во-первых, вы перебираете свои 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. Вы также можете построить родительскую ссылку по требованию всякий раз, когда вы сталкиваетесь с дополнительной связью с родителем, который еще не существует.

Но если это отдельно, вы можете расширить свою структуру и включить другую информацию.

Thowk · Answer 3 · 2017-10-25T09-13-00.000Z

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; 
}, {});

Stéphane Ammar · Answer 4 · 2017-10-25T08-32-00.000Z

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)

Обратите внимание, что это полностью subLinks точно links.length .

Werner · Answer 5 · 2017-10-25T10-04-00.000Z

Другое решение:

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);

Документации:

PhilMaGeo · Answer 6 · 2017-10-25T09-27-00.000Z

Двойной цикл:

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);