首页 > Web开发 > 详细

日常JS数据各种操作方法总结~~欢迎大家留言板补充哦~~

时间:2020-05-05 11:36:51      阅读:68      评论:0      收藏:0      [点我收藏+]

需求情景一:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // 需求如下,我們需要使用result的屬性對應值,同時修改部分屬性的屬性名
    // 使用ObjA和resultult共有屬性+ObjB和result共有屬性
    // 去掉result中無用屬性
    const result = {
      need1: 這個屬性值是有用的1,
      need2: 這個屬性值是有用的2,
      need3: 這個屬性值是有用的3,
      need4: 這個屬性值是有用的4,
      need5: 這個屬性值是有用的5,
      need61: 這個屬性值是有用的6,屬性名需要修改成need6,
      need71: 這個屬性值是有用的7,屬性值需要修改成need7,
      need81: 這個屬性值是有用的8,屬性值需要修改成need8,
      need91: 這個屬性值是有用的9,屬性值需要修改成need9,
      other1: 這個屬性沒什麼用,
      other2: 這個屬性沒什麼用,
    }
    const ObjA = {
      need1: 這個屬性是有用的1,
      need2: 這個屬性是有用的2,
      need3: 這個屬性是有用的3,
      need4: 這個屬性是有用的4,
      need5: 這個屬性是有用的5,
      unwanted1: 不需要這個屬性1,
      unwanted2: 不需要這個屬性2,
      unwanted3: 不需要這個屬性3,
    }
    // 此函數用來對照修改Rresult對象的屬性
    const ObjB = {
      need61: need6,
      need71: need7,
      need81: need8,
      need91: need9,
    }
    // 現在有下面三種實現方法,我們來做一下對比~
    let resultArr1 = []
    let resultArr2 = []
    let resultArr3 = []
    Object.keys(result).forEach(_ => {
      if (ObjA[_] || ObjB.hasOwnProperty(_)) {
        resultArr1.push((ObjB[_] ? ObjB[_] : _) + : + (result[_] || ‘‘))
      }
    })
    resultArr2 = Object.keys(result).map(_ => {
      if (ObjA[_] || ObjB.hasOwnProperty(_)) {
        return (ObjB[_] ? ObjB[_] : _) + : + (result[_] || ‘‘)
      }
    }).filter(_ => _)
    Object.keys(result).reduce((init, _) => {
      if (ObjA[_] || ObjB.hasOwnProperty(_)) {
        init.push((ObjB[_] ? ObjB[_] : _) + : + (result[_] || ‘‘))
      }
      return init
    }, resultArr3)
    console.log(resultArr1, resultArr1)
    console.log(resultArr2, resultArr2)
    console.log(resultArr3, resultArr3)
    // 0: "need1:這個屬性是有用的1"
    // 1: "need2:這個屬性是有用的2"
    // 2: "need3:這個屬性是有用的3"
    // 3: "need4:這個屬性是有用的4"
    // 4: "need5:這個屬性是有用的5"
    // 5: "need6:這個屬性是有用的6,屬性名需要修改成need6"
    // 6: "need7:這個屬性是有用的7,屬性值需要修改成need7"
    // 7: "need8:這個屬性是有用的8,屬性值需要修改成need8"
    // 8: "need9:這個屬性是有用的9,屬性值需要修改成need9"
  </script>
</body>

</html>

 

日常JS数据各种操作方法总结~~欢迎大家留言板补充哦~~

原文:https://www.cnblogs.com/sugartang/p/12829972.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!