将对象值作为单独的项目推入数组

Question

我想将下面对象的所有粉红色值作为项目添加到粉红色数组中。

const mainObj = [
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
}
];

我到目前为止所拥有的：

for(let i = 0; i < mainObj.length; i++) {
    if(mainObj[i].colour == "pink") {
        const pink = [];
        pink.push(mainObj[i].colour);   
    }
}

我遇到的问题是，目前它并没有将所有粉红色值推入一个粉红色数组中，而是单独创建一个粉红色数组并为每个粉红色数组添加一个。

Answer 1

基本

您可以使用filter方法执行此操作，该方法将自动创建具有所需值的数组。

let pinkArray = ;
console.log(pinkArray);

https://jsfiddle.net/1pjh56a3/2/

特定值/列

您还可以创建一个仅在对象中包含特定字段的数组：

 let pinkArray = mainObj.filter( e =>  e.colour == 'pink');
console.log(pinkArray);

var pinkArrayCopy = [];
for(i in pinkArray){
        let item = pinkArray[i];
    pinkArrayCopy.push({"colour": item.colour, "text": item.text});
 }

console.log(pinkArrayCopy);

https://jsfiddle.net/1pjh56a3/6/

功能更强大的（新对象）

 let pinkArray = mainObj.filter( e =>  e.colour == 'pink').map( 
 j =>  {
                    return {"a": j.colour, "b": j.text}; 
            }
 );

console.log(pinkArray);

https://jsfiddle.net/1pjh56a3/16/

Answer 2

您几乎可以理解。只需将const pink = [];放在for循环外部即可，就像这样（我也将push更改为对象，而不仅仅是颜色）

let pink = [];
for(let i = 0; i < mainObj.length; i++) {
    if(mainObj[i].colour == "pink") {
        pink.push(mainObj[i]);   
    }
}

这是一个有效的示例：

const mainObj = [
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
}
];

let pink = [];
for(let i = 0; i < mainObj.length; i++) {
    if(mainObj[i].colour == "pink") {
        pink.push(mainObj[i]);   
    }
}

console.log(pink)

这样做会确保它不会在for循环的每次迭代中创建一个pink数组

Answer 3

您可以简单地创建一个传递主数组和颜色的回调，并简单地过滤给定颜色的主数组。

const mainArr = [{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
  }
],
filterByColor = (arr, colour) =>arr.filter(a=>a.colour===colour);

var pink = filterByColor(mainArr, 'pink'),
    green = filterByColor(mainArr, 'green');

console.log('Pink: ', pink);
console.log('Green: ', green);

Answer 4

您可以这样使用

const mainObj = [
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
}
];

let pink = mainObj.filter(item => {
if (item.colour === 'pink') {
	return item.colour;
  }
}).map(item => item.colour);

console.log(pink)

Answer 5

尝试一下。

mainObj.filter(item => item.colour=='pink').map(i =>i.colour))