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:

0. 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

1. 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/Operators/Destructuring_assignment#rest_property

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

2. 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];
      }
    }
  }
}

3. 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, 禁止转载 🈲️，侵权必究⚠️！

---