需求情景一：

<!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. 1.Python面向对象基础

    面向对象(OOP) 面向对象编程--object oriented programming 简写 OOP   面向过程和面向对象的区别: 面向过程: 1.把完成某一个需求的所有步骤从头到尾逐步实现 2 ...

  2. 解决ffmpeg的播放摄像头的延时优化问题(项目案例使用有效)

    在目前的项目中使用了flv的播放摄像头的方案,但是延时达到了7-8秒,所以客户颇有微词,没有办法,只能开始优化播放延时的问题,至于对接摄像头的方案有好几种,这种咱们以后在聊,今天只要聊聊聊优化参数的问 ...

  3. linux清理内存缓存cache

    Linux服务器有自己先进的内存管理机制,有时候会发现我们系统的buff/cache内存占用会越来越高,操作系统也有卡顿的情况,遇到这种情况,不妨试试下面的方法. 1步骤一:我们先查看物理内存占用情况 ...

  4. 开箱即用 yyg-cli（脚手架工具）：快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  5. 当前数据库表空间达到32G，需要扩容

    表空间名:cwy_init 操作:给cwy_init增加数据文件,分配5G的空间,达到瓶颈自动增长1G,如下: alter tablespace cwy_init add datafile '/u01 ...

  6. redis的缓存穿透、击穿、雪崩以及实用解决方案

    今天来聊聊redis的缓存穿透.击穿.雪崩以及解决方案,其中解决方案包括类似于布隆过滤器这种网上一搜一大片但是实际生产部署有一定复杂度的,也有基于spring注解通过一行代码就能解决的,其中各有优劣, ...

  7. 使用DOS命令运行JAVA项目

    使用DOS命令运行JAVA项目 找到生成项目的文件夹: 在地址前加上cmd+空格,进入命令窗口: 输入javac 类的名称.java,生成class文件: 输入java 类的名称: 运行成功:

  8. 第一百零七篇:基本数据类型(undefined,null,boolean类型)

    好家伙, 本篇内容为<JS高级程序设计>第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Numb ...

  9. AdsStream的使用

    本例子是测试ads通信的. 1.首先添加TwinCAT.Ads引用 using System; using System.Collections.Generic; using System.Compo ...

  10. 删除redis对应key的缓存

    [root@zhyly-pre-002 ~]# /usr/local/redis/bin/redis-cli -p 6379 #登录redis 127.0.0.1:6379> auth 'Red ...