Question

例如，这是原始数组：

＆＃13;

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"
  },
]

＆＃13;

我想形成一个只包含唯一数据的新数组。只包含名称和图像

所以新数组应该看起来像

＆＃13;

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

＆＃13;

如何使用较少量的代码来构建此newArray，特别是使用ES6 JS或使用lodash

Answer 1

使用_.uniqBy()获取不同的值，Array#map使用_.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实例转换为数组

＆＃13;

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

＆＃13;

Answer 3

您可以使用reduce和findIndex来获取唯一值：

＆＃13;

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

＆＃13;

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

如何使用ES6 JS / Lodash选择数组中的特定项并形成新数组

5 个答案: