30-seconds-code——Object

lbool 發(fā)布于2019-08-21 18:30 / 3132人閱讀

摘要：英文文章來(lái)源于刪除對(duì)象中除指定鍵值的屬性用遞歸的方法用方法遍歷對(duì)象然后刪除不是在給定數(shù)組中的屬性如果你傳入，它將對(duì)該鍵所對(duì)應(yīng)的對(duì)象進(jìn)行深度遍歷的變形非原著作對(duì)所有的鍵對(duì)應(yīng)的對(duì)象進(jìn)行深度遍歷用方法遍歷對(duì)象然后刪除不是在給定數(shù)組中的屬性如

英文文章來(lái)源于：https://github.com/Chalarangelo/30-seconds-of-code/blob/master/README.md

Object cleanObj

刪除JSON對(duì)象中除指定鍵值的屬性.

用遞歸的方法
用 Object.keys() 方法遍歷JSON對(duì)象然后刪除不是include在給定數(shù)組中的屬性.
如果你傳入 childIndicator ，它將對(duì)該鍵所對(duì)應(yīng)的JSON對(duì)象進(jìn)行深度遍歷.

const cleanObj = (obj, keysToKeep = [], childIndicator) => {
  Object.keys(obj).forEach(key => {
    if (key === childIndicator) {
      cleanObj(obj[key], keysToKeep, childIndicator);
    } else if (!keysToKeep.includes(key)) {
      delete obj[key];
    }
  })
}
/*
  const testObj = {a: 1, b: 2, children: {a: 1, b: 2}}
  cleanObj(testObj, ["a"],"children")
  console.log(testObj)// { a: 1, children : { a: 1}}
*/

cleanObj的變形（非原著作）

對(duì)所有的鍵對(duì)應(yīng)的JSON對(duì)象進(jìn)行深度遍歷

用 Object.keys() 方法遍歷JSON對(duì)象然后刪除不是 include 在給定數(shù)組中的屬性.
如果給定的屬性值為object，則看傳入的 dep 是否為false，或者沒(méi)有第三個(gè)參數(shù)，則直接刪除.
如果傳入 dep 為true，則進(jìn)行深度遍歷.

const cleanObj = (obj, keysToKeep = [], dep=false) => {
  Object.keys(obj).forEach(key => {
    if(dep) {
      if (obj[key].constructor.name === "Object") {
        cleanObj(obj[key], keysToKeep, dep)
      } else {
        if (!keysToKeep.includes(key)) {
          delete obj[key];
        }
      }
    } else {
      if (!keysToKeep.includes(key)) {
        delete obj[key];
      }
    }
  })
  return obj
}
/*
  const testObj = {a:1, b:{a:1, b:2, c:3}, c:{a:1, b:2}, d: {a:1, b:2, c:3}}
  cleanObj(testObj, ["a"],"children")  // {a: 1, b: {a: 1}, c: {a: 1}, d: {a: 1, c: 3}}
*/

objectFromPairs

將一個(gè)鍵值對(duì)形式的數(shù)組轉(zhuǎn)化為對(duì)象
用 Array.reduce() 去創(chuàng)建對(duì)象并合并鍵值對(duì).

const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
// objectFromPairs([["a",1],["b",2]]) -> {a: 1, b: 2}

objectToPairs

將一個(gè)對(duì)象轉(zhuǎn)化為鍵值對(duì)形式的數(shù)組.

用 Object.keys() 將對(duì)象轉(zhuǎn)化為對(duì)象的鍵數(shù)組，然后 Array.map() 生成一個(gè)鍵值對(duì)的數(shù)組.

const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
// objectToPairs({a: 1, b: 2}) -> [["a",1],["b",2]])

orderBy

按對(duì)象屬性和排序規(guī)則排序?qū)ο髷?shù)組.

使用 Array.sort() 的自定義排序規(guī)則排序,根據(jù)傳入的 order排序方式，用解構(gòu)來(lái)實(shí)現(xiàn)指定的屬性的位置交換.
如果沒(méi)有傳入?yún)?shù) order 默認(rèn)值為asc.

const orderBy = (arr, props, orders) =>
  arr.sort((a, b) =>
    props.reduce((acc, prop, i) => {
      if (acc === 0) {
        const [p1, p2] = orders && orders[i] === "desc" ? [b[prop], a[prop]] : [a[prop], b[prop]];
        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
      }
      return acc;
    }, 0)
  );
/*
const users = [{ "name": "fred",   "age": 48 },{ "name": "barney", "age": 36 },
  { "name": "fred",   "age": 40 },{ "name": "barney", "age": 34 }];
orderby(users, ["name", "age"], ["asc", "desc"]) -> [{name: "barney", age: 36}, {name: "barney", age: 34}, {name: "fred", age: 48}, {name: "fred", age: 40}]
orderby(users, ["name", "age"]) -> [{name: "barney", age: 34}, {name: "barney", age: 36}, {name: "fred", age: 40}, {name: "fred", age: 48}]
*/

select

從一個(gè)對(duì)象中檢索出選擇其所代表的屬性.

如果屬性不存在返回 undefined.

const select = (from, selector) =>
  selector.split(".").reduce((prev, cur) => prev && prev[cur], from);

// const obj = {selector: {to: {val: "val to select"}}};
// select(obj, "selector.to.val"); -> "val to select"

shallowClone

對(duì)象的淺拷貝.

用 Object.assign() 和一個(gè) ({}) 來(lái)實(shí)現(xiàn)對(duì)源對(duì)象的淺拷貝.

const shallowClone = obj => Object.assign({}, obj);
/*
const a = { x: true, y: 1 };
const b = shallowClone(a);
a === b -> false
*/

truthCheckCollection

判斷第一個(gè)參數(shù)所代表的集合中的每一個(gè)對(duì)象中是否包含第二個(gè)參數(shù)所代表的屬性.

用 Array.every() 去檢查結(jié)合中每一個(gè)對(duì)象是否包含pre屬性.

const truthCheckCollection = (collection, pre) => (collection.every(obj => obj[pre]));
// truthCheckCollection([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}], "sex") -> true

更多關(guān)于30-seconds-code中文翻譯https://github.com/lvzhenbang/article/blob/master/js/30-seconds-code/index.md

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90528.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lbool

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

全棧是概念，興趣亦為追求（全棧開(kāi)發(fā)者）

閱讀 3704·2021-11-12 10:36
怎么測(cè)試云主機(jī)帶寬-阿里云帶寬峰值怎么選擇？

閱讀 3842·2021-09-22 15:48
詳解CSS的Flex布局

閱讀 3551·2019-08-30 15:54
深入理解CSS中em, rem, ex區(qū)別，及使用技巧

閱讀 2606·2019-08-29 16:44
前端每日實(shí)戰(zhàn)：88# 視頻演示如何用 CSS 和 D3 創(chuàng)作火焰動(dòng)畫(huà)

閱讀 2374·2019-08-29 16:08
視口相關(guān)單位的應(yīng)用 —— 別說(shuō)你懂CSS相對(duì)單位

閱讀 2420·2019-08-29 16:06
前端每日實(shí)戰(zhàn)：20# 視頻演示如何用純 CSS 為母親節(jié)創(chuàng)作一顆像素畫(huà)風(fēng)格的愛(ài)心

閱讀 1294·2019-08-29 15:21
BFC與IFC概念理解+布局規(guī)則+形成方法+用處

閱讀 3179·2019-08-29 12:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

30-seconds-code——Object

相關(guān)文章

**30-seconds-code——adapter**

**30-seconds-code——string**

**30-seconds-code ——utility集合**

**30-seconds-code——browser**

**30-seconds-code——array**

發(fā)表評(píng)論

0條評(píng)論

lbool

男|高級(jí)講師

TA的文章

全棧是概念，興趣亦為追求（全棧開(kāi)發(fā)者）

怎么測(cè)試云主機(jī)帶寬-阿里云帶寬峰值怎么選擇？

詳解CSS的Flex布局

深入理解CSS中em, rem, ex區(qū)別，及使用技巧

前端每日實(shí)戰(zhàn)：88# 視頻演示如何用 CSS 和 D3 創(chuàng)作火焰動(dòng)畫(huà)

視口相關(guān)單位的應(yīng)用 —— 別說(shuō)你懂CSS相對(duì)單位

前端每日實(shí)戰(zhàn)：20# 視頻演示如何用純 CSS 為母親節(jié)創(chuàng)作一顆像素畫(huà)風(fēng)格的愛(ài)心

BFC與IFC概念理解+布局規(guī)則+形成方法+用處

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

30-seconds-code——Object

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！