js filter object keys All In One
js filter object keys All In One
Q: 这段 js 代码如何优化
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
delete this.searchData.interviewStatus;
if(this.form.status === "1") {
delete this.searchData.status;
} else {
delete this.searchData.isChoooseAllDelivery;
}
}
// 💩 shit code, 不需要过滤就可以了,为什么要直接从对象上删除属性呢?
// 如果是使用了类似 vue 的响应式框架,会出现数据不更新潜在 bug 的?
https://segmentfault.com/q/1010000043098198
A:
- object
deep clone
/deep copy
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
// lodash 深拷贝 ✅
const params = _.colneDeep(this.searchData)
delete params.interviewStatus;
if(this.form.status === "1") {
delete params.status;
} else {
delete params.isChoooseAllDelivery;
}
}
lodash
_.cloneDeep
https://lodash.com/docs/4.17.15#cloneDeep
https://www.npmjs.com/package/lodash
https://www.npmjs.com/package/lodash.clonedeep
https://www.cnblogs.com/xgqfrms/p/16470746.html
https://www.cnblogs.com/xgqfrms/p/14655538.html
- ES6
destructuring assignment
&...rest
property
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
const params = {};
const {interviewStatus: ignore, status, isChoooseAllDelivery, ...rest} = dataObj;
if(this.form.status === "1") {
params = {
...rest,
isChoooseAllDelivery,
};
} else {
params = {
...rest,
status,
};
}
}
const dataObj = {a: 1, b: 2, c: 3, d: 4, e:5}
// {a: 1, b: 2, c: 3, d: 4, e: 5}
const {a, c, ...rest} = dataObj;
typeof rest;
// 'object'
rest;
// {b: 2, d: 4, e: 5}
a;
// 1
c;
// 3
for...of
&for...in
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
const params = {};
for (let [key, value] of Object.entries(this.searchData)) {
// console.log(`key, value =`, key, value);
if(key !== "interviewStatus") {
if(key === "status" && this.form.status === "1") {
// ignore
} else if(key === "isChoooseAllDelivery" && this.form.status !== "1") {
// ignore
} else {
params[key] = value;
}
}
}
}
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
const params = {};
for (let key in this.searchData) {
// console.log(`key =`, key);
if(key !== "interviewStatus") {
if(key === "status" && this.form.status === "1" || key === "isChoooseAllDelivery" && this.form.status !== "1") {
// ignore
} else {
params[key] = this.searchData[key];
}
}
}
}
- Object.keys & Object.assign & Array.filter & Array.reduce
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
const params = {};
let keys = Object.keys(this.searchData).filter(key => key !== "interviewStatus");
if(this.form.status === "1") {
keys = keys.filter(key => key !== "status");
} else {
keys = keys.filter(key => key !== "isChoooseAllDelivery");
}
for (let key in keys) {
params[key] = this.searchData[key];
}
}
// this.form = {status: "1", ...}
// this.searchData = {status: "2", interviewStatus: "1", isChoooseAllDelivery: false, ...}
async search() {
let keys = Object.keys(this.searchData).filter(key => key !== "interviewStatus");
if(this.form.status === "1") {
keys = keys.filter(key => key !== "status");
} else {
keys = keys.filter(key => key !== "isChoooseAllDelivery");
}
// const params = keys.reduce((obj, key) => {
// obj[key] = this.searchData[key];
// return obj;
// }, {});
// const params = keys.reduce((obj, key) => {
// return Object.assign(obj, {
// [key]: this.searchData[key],
// });
// }, {});
const params = keys.reduce((obj, key) => {
return {
...obj,
[key]: this.searchData[key],
};
}, {});
}
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
const names = Object.keys(user)
.filter((key) => key.includes("Name"))
.reduce((obj, key) => {
return Object.assign(obj, {
[key]: user[key]
});
}, {});
console.log(names);
https://masteringjs.io/tutorials/fundamentals/filter-key
https://stackabuse.com/how-to-filter-an-object-by-key-in-javascript/
https://www.stechies.com/filter-object-key-javascript/
https://stackoverflow.com/questions/38750705/filter-object-properties-by-key-in-es6
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/17040874.html
未经授权禁止转载,违者必究!