需求情景一：

<!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. 四、Django中使用celery

    项目跟目录创建celery包,目录结构如下: mycelery/ ├── config.py ├── __init__.py ├── main.py └── sms/ ├── __init__.py ...

  2. 创建外部表步骤及解决ORA-29913:执行ODCIETTABLEOPEN调出时出错

    创建外部表步骤 建立目录对象(用sys用户创建.授权) 外部表所在路径一定要写对!!! create directory ext_data as 'D:\ORACLE'; grant read,wri ...

  3. 云小课｜MRS基础原理之MapReduce介绍

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:MapReduce ...

  4. Pyhton基础部分：6、与用户交互、基础运算符

    目录 一.python数据类型 1.布尔值bool 2.元组tuple 3.集合set 二.与用户交互 1.获取用户输入 2.输出内部信息 3.语言环境差异 三.格式化输入 1.代码实现 2.注意事项 ...

  5. 再来一次，新技术搞定老业务「GitHub 热点速览 v.22.44」

    上上周 Next.js 新版本火了一把,这不本周热点趋势就有了一个 Next.js 13 新特性构建的网站,虽然它只是个实验性项目.同样可以搞定一些业务的还有 lama-cleaner,不过它并不是个 ...

  6. 2022icpc新疆省赛

    菜鸡第一次打icpc 记录一下历程 习惯#define int long long 以下皆是按照我认为的难易顺序排序 K. 看题意大概就是说求从L加到R 1 ios::sync_with_stdio( ...

  7. Windows操作系统搭建Lsky Pro

    写在前面 本文主要介绍在Windows下部署兰空图床,以及安装过程, 非Windows系统可以参考本文章的安装流程,结合自己系统版本进行部署 图床用处 图床在日常的用处非常广泛,尤其对于经常写博客的人 ...

  8. BigDecimal精度详解

    [BigDecimal精确度的计数保留法及精度丢失的解决办法] 目录 BigDecimal精确度的计数保留法 1.ROUND_UP 2.ROUND_DOWN 3.ROUND_HALF_UP 4.ROU ...

  9. 嵌入式-C语言基础：数组得初始化

    #include<stdio.h> int main() { int a[10]; int size=sizeof(a)/sizeof(a[0]);//计算数组得大小 for(int i= ...

  10. linux如何删除多余网卡

    ifconfig tunl0 down ip link delete tunl0