如何使用ES6 JS / Lodash選擇數組中的特定項並形成新數組

Question

例如，這是原始數組：

 const animals = [{ name: "Lion", image: "a url", gender: "male", age: "2" }, { name: "Lion", image: "a url", gender: "male", age: "3" }, { name: "Lion", image: "a url", gender: "male", age: "4" }, { name: "Lion", image: "a url", gender: "male", age: "6" }, { name: "Tiger", image: "a url", gender: "male", age: "6" }, ] 

我想形成一個新的數組，它只包含唯一的數據並且只包含名稱和圖像

所以新數組看起來應該是這樣的

 const newArray = [{ name: "Lion", image: "a url" }, { name: "Tiger", image: "a url" } ] 

如何使用更少量的代碼來構建這個newArray，特別是使用ES6 JS或使用lodash

Answer 1

使用_.uniqBy()來獲得不同的值，和陣列＃地圖與_.pick()來獲得你想要的道具：

 const animals = [{"name":"Lion","image":"a url","gender":"male","age":"2"},{"name":"Lion","image":"a url","gender":"male","age":"3"},{"name":"Lion","image":"a url","gender":"male","age":"4"},{"name":"Lion","image":"a url","gender":"male","age":"6"},{"name":"Tiger","image":"a url","gender":"male","age":"6"}]; const result = _.uniqBy(animals, 'name').map((o) => _.pick(o, ['name', 'image'])); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 

Answer 2

您可以使用對象解構和Map來獲取唯一值，並使用spread元素將Map實例轉換為數組

 const animals = [{"name":"Lion","image":"a url","gender":"male","age":"2"},{"name":"Lion","image":"a url","gender":"male","age":"3"},{"name":"Lion","image":"a url","gender":"male","age":"4"},{"name":"Lion","image":"a url","gender":"male","age":"6"},{"name":"Tiger","image":"a url","gender":"male","age":"6"}]; let map = new Map; animals.forEach(({name, image}) => { !map.has(name) && map.set(name, {name, image}) }); let res = [...map.values()]; console.log(res); 

Answer 3

您可以使用reduce和findIndex來獲取唯一值：

 const animals = [ { name: "Lion", image: "a url", gender: "male", age: "2" }, { name: "Lion", image: "a url", gender: "male", age: "3" }, { name: "Lion", image: "a url", gender: "male", age: "4" }, { name: "Lion", image: "a url", gender: "male", age: "6" }, { name: "Tiger", image: "a url", gender: "male", age: "6" }, ]; console.log(animals.reduce((p,c)=>{ if(p.findIndex(e=>e.name === c.name) === -1){ p.push({ name: c.name, image: c.image, }); } return p; },[])); 

Answer 4

你甚至可以這樣做：

 const data = _.uniqBy(animals, 'name').map((K) => { return { name: K.name, image: K.image }; }); 

Answer 5

const animals = [
{
name: "Lion",
image: "a url",
gender: "male",
age: "2"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "3"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "4"
},
{
name: "Lion",
image: "a url",
gender: "male",
age: "6"
},
{
name: "Tiger",
image: "a url",
gender: "male",
age: "6"
},
]

// ES6 Style

const newAnimals = new Set()

animals.forEach(e=>{
  const { name, image } = e

  const animal = { name, image }
  if(newAnimals.size == 0){
    newAnimals.add(animal)
  }

  for(let a of newAnimals){
    console.log(a.name)
    if(a.name == name){
      console.log("animal already added.")
    } else {
      newAnimals.add(animal)
    }
  }
})
console.log([...newAnimals])

http://jsbin.com/yavodovawe/1/edit?console