需求情景一：

<!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. 亚马逊云 RDB数据故障转移(多可用区)

    RDB关系数据库(Relational Database,RDB) 创建名为VPC for RDS的vpc 两个可用区,两组公内网 创建安全组 创建RDS数据库实例用的数据库子网组 创建RDS数据库实 ...

  2. N32G4系列——复用功能重映射（USART为例）

    开发测试环境:SDK,N32G455x系列芯片 在国民MCU中G系列IO口有第二复用功能,这时需要用到重映射功能. 一.系列芯片手册定义 1.1.芯片IO口默认功能查看 如图,在该系列芯片的数据手册中 ...

  3. 手记系列之二 ----- 关于IDEA的一些使用方法经验

    前言 本篇文章主要介绍的关于本人在使用IDEA的一些使用方法,一些常用设置,一些插件推荐和使用.请注意,本文特长,2w多字加上几十张图片,建议收藏观看~ 前提准备 idea官网: https://ww ...

  4. EasyPoi大数据导入导出百万级实例

    EasyPoi介绍: 利用注解的方式简化了Excel.Word.PDF等格式的导入导出,而且是百万级数据的导入导出.EasyPoi官方网址:EasyPoi教程_V1.0 (mydoc.io).下面我写 ...

  5. JavaWeb3

    1. 会话技术 会话:一次会话中包含多次请求和响应 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 功能:在一次会话的范围内的多次请求间共享数据 方式: 客户端会话技术:Co ...

  6. 陪你去看 Lodash.js 起步

    lodash 起步(数组) Lodash 是一个较为流行的 JavaScript 的实用工具库. 在开发过程中如果能熟练使用一些工具库提供的方法,有利于提高开发效率. 笔者从 API 上入手,不分析其 ...

  7. ARM MMU架构 -- CPU如何访问MMU及DRAM

    <ARM Architecture Reference Manual ARMv8-A>里面有Memory层级框架图,从中可以看出L1.L2.DRAM.Disk.MMU之间的关系,以及他们在 ...

  8. 解决Linux使用deepin-wine跑qq,tim打不开文件所在文件夹

    前言 使用deepin-wine 跑qq,发现一个小bug 这里点击打开文件夹是没有效果的,包括在 tim 上也是这样 问题原因 出现这个问题是因为 deepin-wine 跑的 QQ,Tim 打开文 ...

  9. Linux 基础-文件权限与属性

    一,文件类型 1.1,概述 1.2,正规文件(regular file) 1.3,目录(directory) 1.4,链接文件(link) 1.5,设备与装置文件(device) 1.6,资料接口文件 ...

  10. nginx压力测试及限速

    测试工具:Apache ab windows安装教程:https://www.cnblogs.com/laijinquan/p/14694655.html 64位下载地址:https://www.ap ...