需求情景一：

<!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. 4.httprunner-参数化和数据驱动

    前言 参数化在config中使用parameters关键字 httprunner2.x 是在testsuite中实现参数化 httprunner3.x 是在testcase中的config实现参数化 ...

  2. SQL中的Convert()函数方法(转换数据格式)

    Convert函数的使用方法 格式: convert(data_type(length),data_to_be_converted,style) data_type(length)转换的目标数据类型, ...

  3. 浅谈API和SDK的区别

    首先了解一下他们的定义 API:application program interface 应用程序接口 通常表示一些事先定义好的函数,为了向外部提供一组功能的实现,实现和其他软件的交互 SDK:so ...

  4. Kafka 架构和原理机制 (图文全面详解)

    目录 一:Kafka 简介 二:Kafka 基本架构 三:Kafka 基本原理 四:Zookeeper 在 kafka 的作用 五:Kafka 的特性 六:Kafka 的应用场景 一:Kafka 简介 ...

  5. for in 和 for of 的区别和v-for指令的三种使用方法

    for...in 循环:只能获得对象的键名,不能获得键值 for...of 循环:允许遍历获得键值 var arr = ['red', 'green', 'blue'] for(let item in ...

  6. 2022春每日一题：Day 19

    题目:吃奶酪 状压dp实现,dp[i][j]表示走过状态i,停到了j的位置的最小价值.枚举状态,起点终点,转移dp[i][j]=min{dp[i-(1<<s)][k]+dis(s,k)} ...

  7. hwlog--utils.go

    // Copyright(C) 2021. Huawei Technologies Co.,Ltd. All rights reserved.// Package hwlog provides the ...

  8. HDLBits答案——Verilog Language

    Verilog Language 1 Basics 1.1 Wire module top_module( input in, output out ); assign out = in; endmo ...

  9. 第三方模块的下载与使用、requests模块、爬取链家二手房数据、openpyxl模块、hashlib加密模块

    目录 第三方模块的下载与使用 下载第三方模块可能会出现的问题 网络爬虫模块之requests模块 网络爬虫实战之爬取链家二手房数据 自动化办公领域之openpyxl模块 第三方模块的下载与使用 第三方 ...

  10. Typora基本使用

    Typora主要功能介绍 1.语言环境 文件>>>偏好设置>>>系统语言 2.创建另一个编辑页面 ctrl+N 几乎所有软件的新建页面的快捷键都是它 3.保存文件 ...