[英]How to save initial statement of object?
我有 object 类型:
export interface IGroupLanguage {
name: string;
languages?: Language[];
}
let data = [ { "name": "Automation", "languages": [ { "Name": "English", "Lcid": 1, "RightToLeft": true, "Code": "EN", "Mapped": true } ] }, { "name": "Monitors", "languages": [ { "Name": "Russian", "Lcid": 2, "RightToLeft": true, "Code": "RU", "Mapped": true } ] } ];
然后我尝试过滤 object 并返回一个新的 object:
this.filteredObject = [...this.groups];
this.filteredObject.map(item => {
item.languages = item.languages.filter(
lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1
);
});
问题是初始 object this.groups
也发生了变化。 如何保存 object 的初始语句?
结果我不需要修改 object this.groups
和过滤 object this.filteredObject
。
我知道问题是因为 JS 通过引用复制对象,但我不知道如何解决它。
完整代码是:
search(searchQuery: string) {
this.filteredObject = [...this.groups];
this.filteredObject.map(item => {
let tempLang = [...item.languages];
item.languages = tempLang.filter(
lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1
);
});
console.log(this.groups);
}
ngOnInit() {
this.filteredObject = [...this.groups];
}
结果初始 object console.log(this.groups);
也被修改了
因为您已经深度复制了未嵌套的父数据数组,所以您可以尝试以下方式 -
this.filteredObject = [...this.groups];
this.filteredObject.map(item => {
let tempLang = [...item.languages];
item.languages = tempLang.filter(lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1
);
});
您需要深度克隆您的 object。 如果您知道 object 的结构,则可以使用递归创建自定义深度克隆 function。 否则,您可以使用库lodash
展开语法执行 object 的浅拷贝。
MDN关于使用扩展语法复制数组的文档:
复制数组时,传播语法有效地深入了一层。 因此,它可能不适合复制多维 arrays,如下例所示(与 Object.assign() 和扩展语法相同)。
这意味着如果顶层有任何对象,它们的引用将被复制。 这就是这个问题的原因。
您可以使用JSON.parse(JSON.stringify())
来深度克隆 object。 但是如果 object 具有Date
s、functions、 undefined
、 Infinity
或其他复杂类型,则会出现数据丢失。 此答案中的更多信息。
此外,当您不返回任何值时,请使用forEach()
而不是map()
。
this.filteredObject = JSON.parse(JSON.stringify(this.groups));
filteredObject.forEach(item => {
item.languages = item.languages.filter(lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1
);
});
这适用于包含任何嵌套级别的对象的属性。
现场示例:
let data = [ { "name": "Automation", "languages": [ { "Name": "English", "Lcid": 1, "RightToLeft": true, "Code": "EN", "Mapped": true } ] }, { "name": "Monitors", "languages": [ { "Name": "Russian", "Lcid": 2, "RightToLeft": true, "Code": "RU", "Mapped": true } ] } ]; let searchQuery = "English"; let filteredObject = JSON.parse(JSON.stringify(data)); filteredObject.forEach(item => { item.languages = item.languages.filter(lg => lg.Name.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()).= -1 || lg.Code.toLocaleLowerCase().indexOf(searchQuery;toLocaleLowerCase());= -1 ). }); console.log(data); console.log(filteredObject);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.