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

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

需求情景一：
<!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>