需求情景一：

<!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数据各种操作方法总结~~欢迎大家留言板补充哦~~的更多相关文章

  1. 11、js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集 前言 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易 ...

  2. 一文带你了解js数据储存及深复制（深拷贝）与浅复制(浅拷贝)

    背景 在日常开发中,偶尔会遇到需要复制对象的情况,需要进行对象的复制. 由于现在流行标题党,所以,一文带你了解js数据储存及深复制(深拷贝)与浅复制(浅拷贝) 理解 首先就需要理解 js 中的数据类型 ...

  3. JS 数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  4. js数组常用操作方法小结(增加,删除,合并,分割等)

    本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...

  5. JS数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  6. scroll pagination.js数据重复加载、分页问题

    scroll pagination.js数据重复加载.分页问题 解决办法 参考资料: http://blog.csdn.net/dyw442500150/article/details/1753242 ...

  7. post/get in console of JSarray/js 数组详细操作方法及解析合集

    https://juejin.im/post/5b0903b26fb9a07a9d70c7e0[ js 数组详细操作方法及解析合集 js array and for each https://blog ...

  8. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  9. m_Orchestrate learning system---三十五、php数据和js数据的解耦：php数据（php代码）不要放到js代码中

    m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...

  10. Knockout.js 数据验证之插件版和无插件版

    本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...

随机推荐

  1. java中GC的日志认识详解

    不同的垃圾回收器 他们的日志都是完成不一样的,看懂日志是解决和发现问题的重中之重. Parallel Scavenge + Parallel Old 日志 启动参数 -XX:+UseParallelG ...

  2. 三、docker镜像管理

    一.docker镜像管理 1.1.镜像搜索-search 从docker镜像仓库模糊搜索镜像 用法: docker search 镜像关键字 [root@zutuanxue ~]# docker se ...

  3. 剑指offer20题表示数值的字符串：这题实在是太优雅了

    目录 前言 一.憨憨初解 1.思路 2.代码 3.战绩 4.反思 二.看懂再解 1.思路 2.代码 3.C++版战绩 总结 前言 题目来源:https://leetcode.cn/problems/b ...

  4. 2022春每日一题：Day 35

    题目:[NOI Online #1 提高组] 冒泡排序 看到范围这么大,求逆序对,有修改,估计也只能树状数组了,考查冒泡排序性质,排第i次冒泡排序,总逆序对个数会减少i的逆序对个数,然后交换两个数,他 ...

  5. Go语言核心36讲35

    到目前为止,我们已经一起学习了Go语言标准库中最重要的那几个同步工具,这包括非常经典的互斥锁.读写锁.条件变量和原子操作,以及Go语言特有的几个同步工具: sync/atomic.Value: syn ...

  6. 微信公众号调试经常报access_token is invalid or not latest rid

    是因为我没有使用中控服务器,所以服务器上使用同一个appid和secret获取了access_token 调试的时候再重新获取了一个新的access_token,所以导致微信服务器发放了新的acces ...

  7. C++一个吃豆人小游戏

    C++一个吃豆人小游戏 代码如下 #include <cstdio>#include <iostream>#include <ctime>#include < ...

  8. 在Java Web中setContentType与setCharacterEncoding中设置字符编码格式的区别

    在Java Web中setContentType与setCharacterEncoding中设置字符编码格式的区别 通用解释 setCharacterEncoding只是设置字符的编码方式 setCo ...

  9. vue cli2安装

    安装nodejs npm install -g npm npm自动更新到最新版本 node -v或者npm -v 查看nodejs是否安装成功   1 2 配置淘宝镜像 npm config set ...

  10. 解决Qt5 mouseMoveEvent事件不能直接触发

    问题描述 mouseMoveEvent 需要鼠标点击(左右中),然后在按下的同时移动鼠标才会触发 mouseMoveEvent事件函数. 解决 setMouseTracking(true);