仅获取在JavaScript中实现特定属性的对象

具有此对象数组：

myArray = [
    {name: "aaa", type: "1"},
    {name: "bbb", type: "2"},
    {name: "aaa", type: "3"},
    {name: "ddd", type: "1"},
    {name: "xxx", type: "3"},
    {name: "bbbb", type: "1"},
];

所有这些数据都显示在一个表中。我正在实现一个下拉选择器，其中包含

类型的列表

我希望能够在表中仅显示与条件相关的对象

例如，如果从选择器中选择了

1

，则应在表中显示以下数据：

{name: "aaa", type: "1"},
{name: "ddd", type: "1"},
{name: "bbbb", type: "1"},

现在，我已经编写了函数，但它不起作用

updateTable(type) {
    const newArray = [];
    if (type === 1) {
        for (let i =0; i< myArray.length; i++) {
            if (myArray[i].type === 1) {
                newArray.push({myArray[i]});
            }
        }
    }
    if (type === 2) {
        for (let i =0; i< myArray.length; i++) {
            if (myArray[i].type === 2) {
                newArray.push({myArray[i]});
            }
        }
    }
    if (type === 3) {
        for (let i =0; i< myArray.length; i++) {
            if (myArray[i].type === 3) {
                newArray.push({myArray[i]});
            }
        }
    }
    return newArray;

}

updateTable（类型）{
常量newArray=[]；
如果（类型===1）{
for（设i=0；i

---

我试图通过创建一个新数组来实现这一点，但这不是最好的方法。有没有不创建新数组的解决方案？

首先，您的代码无法工作，因为

类型===1

。因为（==）检查值和类型。数组中的type是字符串，而函数参数中的type是数字。因此，它永远不等于真的

其次，将您的函数更新为以下内容

updateTable(type) {
   return myArray.filter(function(item){
      return item.type == type;
   });
}

你可以使用reduce

这将使用包含所有类型键的数组减少对象

const myArray=[
{
名称：“aaa”，
类型：“1”
},
{
名称：“bbb”，
类型：“2”
},
{
名称：“aaa”，
类型：“3”
},
{
名称：“ddd”，
类型：“1”
},
{
名称：“xxx”，
类型：“3”
},
{
名称：“bbbb”，
类型：“1”
},
];
函数过滤器类型（）{
返回myArray.reduce（（p，c）=>{
如果（！p[c.type]）{
p[c.type]=[]
}
p[c.type]=[…p[c.type]，c]
返回p；
}, {})
}
常量类型=过滤器类型（）
console.log（类型['1']）
console.log（类型['2']）
console.log（类型['3']）

筛选方法可用于此目的：

updateTable(type) {
    return myArray.filter(elem => elem.type == type);
}

有没有不创建新阵列的解决方案

是的，但通常创建一个新数组会更好，。数组中的对象只是引用，所以不像是内存/性能问题。顺便说一句，Array.map、Array.filter创建新数组

但如果仍要更新原始阵列，可以使用splice删除不需要的阵列。这里的技巧是随着长度的变化向后遍历数组，因为向前遍历可能会跳过所需的索引

var myArray=[
{名称：“aaa”，类型：“1”}，
{名称：“bbb”，类型：“2”}，
{名称：“aaa”，类型：“3”}，
{名称：“ddd”，类型：“1”}，
{名称：“xxx”，类型：“3”}，
{名称：“bbbb”，类型：“1”}
];
函数updateTable（类型）{
对于（var l=myArray.length-1；l>=0；l--）{
if（myArray[l].type！==type）{
myArray.剪接（l，1）；
}
}
}
可更新（“1”）；
log（myArray）ES6
有没有不创建新阵列的解决方案

是的，您可以使用此
返回根据传递的条件过滤的数据

演示


const myArray=[
{名称：“aaa”，类型：“1”}，
{名称：“bbb”，类型：“2”}，
{名称：“aaa”，类型：“3”}，
{名称：“ddd”，类型：“1”}，
{名称：“xxx”，类型：“3”}，
{名称：“bbbb”，类型：“1”}
];
函数updateTable（值）{
返回myArray.filter（（{type}）=>type==value）；
}
console.log（updateTable（“1”））
.as console wrapper{max height:100%！important；top:0；}
通过选中select元素的选项，可以折叠不需要的行


var数组=[{name:“aaa”，type:“1”}，{name:“bbb”，type:“2”}，{name:“aaa”，type:“3”}，{name:“ddd”，type:“1”}，{name:“xxx”，type:“3”}，{name:“bbbbb”，type:“1”}，
类型=新设置；
array.forEach（（o，i）=>{
var tr=document.createElement（'tr'）；
tr.id='行'+i；
['name'，'type'].forEach（k=>{
var td=document.createElement（'td'）；
td.innerHTML=o[k]；
tr.appendChild（td）；
});
document.getElementById（'tableData'）.appendChild（tr）；
类型。添加（o.type）；
});
数组.from（types）.sort（（a，b）=>a-b）.forEach（t=>{
var option=document.createElement（'option'）；
option.value=t；
option.innerHTML=t；
document.getElementById（'selectType'）.appendChild（选项）；
});
功能更新（元素）{
var option=element.options[element.selectedIndex].value；
array.forEach（（o，i）=>{
document.getElementById（'row'+i）.style.visibility=！option | | option==o.type
“可见”
：“崩溃”；
});
}

全部的
名称
类型
我试图通过创建一个不是最佳方式的新数组来实现这一点
为什么这不是最佳方式？，。请同时添加html部分。
有没有不创建新数组的解决方案？
>我试图通过创建一个不是最佳方式的新数组来实现这一点。因为他不知道创建一个新数组是更好、正确的方法，这是一个包含名称属性中所有类型的对象，而不是在每次更改属性时只触发过滤器