javaScript 如何获取对象中非空的属性

要获取JavaScript对象中所有具有值的属性,您可以使用 Object.entries()方法结合Array.prototype.filter()方法。以下是一个示例代码:

const obj = {name: 'John',age: 30,city: '',country: 'USA'
};const propertiesWithValues = Object.entries(obj).filter(([key, value]) => value !== '');const propertyNames = propertiesWithValues.map(([key, value]) => key);console.log(propertyNames);

在上述示例中,我们定义了一个带有多个属性的对象obj。其中,city属性的值为空字符串。

使用Object.entries(obj)可以将一个对象转换为包含 键值对 的数组。每个键值对都是由键和值组成的数组,如[key, value]

接下来,我们使用.filter()方法对键值对数组进行过滤。我们检查每个键值对中的值value是否为空字符串(value !== ''),从而筛选出具有值的属性。

最后,我们使用.map()方法将筛选后的键值对数组转换为只包含属性名的数组。

最终,我们将具有值的属性名数组打印到控制台,以展示对象中具有值的属性。

输出结果将是:["name", "age", "country"],表示nameagecountry这几个属性在对象中都具有值。

您可以根据需要修改obj对象的属性及其值,并使用类似的方法获取具有值的属性列表。

javaScript获取对象中有值的属性,重新组成一个对象

要获取JavaScript对象中具有值的属性,并将其重新组成一个新的对象,您可以使用Object.entries()方法结合Array.prototype.reduce()方法。

以下是一个示例代码:

const obj = {name: 'John',age: 30,city: '',country: 'USA'
};const newObj = Object.entries(obj).reduce((acc, [key, value]) => {if (value !== '') {acc[key] = value;}return acc;
}, {});console.log(newObj);

在上述示例中,我们定义了一个带有多个属性的对象obj。其中,city属性的值为空字符串。

使用Object.entries(obj)将对象转换为键值对数组。

然后,我们使用.reduce()方法对键值对数组进行归约。我们遍历每个键值对,如果值value不为空字符串(value !== ''),则将这个键值对添加到初始为空对象的acc累加器中。

最后,我们将得到的新对象newObj打印到控制台,展示了只包含具有值的属性的新对象。

输出结果将是:{ name: "John", age: 30, country: "USA" },表示新对象只包含具有值的属性。

您可以根据需要修改obj对象的属性及其值,并使用类似的方法获取具有值的属性,并将其重新组成一个新的对象。

javaScript 获取对象

在 JavaScript 中,可以通过以下几种方式获取对象:

  1. 对象字面量: 可以使用花括号 {} 来定义一个对象,并直接获取其中的属性。例如:

    const obj = { name: 'Alice', age: 20 };
    console.log(obj.name); // 输出:Alice
    console.log(obj.age); // 输出:20
  2. 点表示法: 可以使用点 . 符号来获取对象的属性。例如:

    const obj = { name: 'Bob', age: 25 };
    console.log(obj.name); // 输出:Bob
    console.log(obj.age); // 输出:25
  3. 方括号表示法: 可以使用方括号 [] 来获取对象的属性,属性名作为字符串传入。这种方式适用于属性名包含特殊字符或动态生成的情况。例如:

    const obj = { 'user-name': 'Charlie', age: 30 };
    console.log(obj['user-name']); // 输出:Charlie
    console.log(obj['age']); // 输出:30

    或者也可以使用变量来表示属性名:

    const propName = 'name';
    const obj = { name: 'Dave', age: 35 };
    console.log(obj[propName]); // 输出:Dave
  4. 使用 Object 的方法: JavaScript 提供了一些 Object 的方法来操作对象,例如 Object.keys()Object.values()Object.entries() 等。这些方法可以用来获取对象的键、值或键值对数组。例如:

    const obj = { name: 'Eve', age: 40 };
    const keys = Object.keys(obj);
    console.log(keys); // 输出:['name', 'age']const values = Object.values(obj);
    console.log(values); // 输出:['Eve', 40]const entries = Object.entries(obj);
    console.log(entries); // 输出:[['name', 'Eve'], ['age', 40]]

以上是常用的获取对象的方式,根据具体的需求选择适合的方法。

javaScript 复制对象

在 JavaScript 中,拷贝对象有多种方法,包括浅拷贝和深拷贝。

1. 浅拷贝(Shallow Copy): 浅拷贝创建一个新对象,并复制原始对象的属性到新对象中。新对象的属性值是原始对象属性值的引用。实现浅拷贝的方法有:

  • 使用扩展运算符(Spread Operator):使用{...}将原始对象的属性展开到新对象中。

  • 使用Object.assign()方法:将原始对象复制到一个空对象中。

  • 使用数组的slice()方法:仅适用于数组对象。

// 使用扩展运算符
const originalObj = { name: 'Alice', age: 20 };
const newObj = { ...originalObj };// 使用 Object.assign()
const originalObj = { name: 'Alice', age: 20 };
const newObj = Object.assign({}, originalObj);// 使用 slice() 方法(仅适用于数组)
const originalArr = [1, 2, 3];
const newArr = originalArr.slice();

这些方法都是浅拷贝,意味着只有第一层的属性会被复制,对于嵌套对象或数组,仍然是引用。

2. 深拷贝(Deep Copy): 深拷贝创建一个新对象,并递归地复制原始对象及其所有嵌套对象的属性。深拷贝生成的对象完全独立于原始对象,修改一个对象不会影响另一个对象。实现深拷贝的方法有:

  • 使用递归:遍历原始对象的所有属性,如果是对象则递归调用深拷贝函数。

  • 使用JSON.parse()JSON.stringify():将对象序列化为 JSON 字符串,然后再解析为新的对象。这种方法对于大多数情况都有效,但不适用于不能被 JSON 序列化的部分(如函数、循环引用)。

// 使用递归
function deepCopy(obj) {if (typeof obj !== 'object' || obj === null) {return obj;}const copy = Array.isArray(obj) ? [] : {};for (let key in obj) {copy[key] = deepCopy(obj[key]);}return copy;
}const originalObj = { name: 'Alice', age: 20 };
const newObj = deepCopy(originalObj);// 使用 JSON.parse() 和 JSON.stringify()
const originalObj = { name: 'Alice', age: 20 };
const newObj = JSON.parse(JSON.stringify(originalObj));

使用递归方法可以处理循环引用的情况,但要注意它可能导致性能问题。而使用JSON.parse()JSON.stringify()的方法简单且适用于大多数情况,但不能处理特殊类型的属性。

根据你的需求选择适合的拷贝方法,浅拷贝适用于简单对象的复制,而深拷贝适用于需要完全独立的对象的复制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lightdb23.3 ecpg支持多种注释方式

ecpg 支持多种注释方式 原版的pg只支持在 ecpg 的 EXEC SQL 中使用 ‘/**/’ 形式的注释,因为ecpg 会转换SQL, 把SQL 转换为一行,去掉了换行符,导致 ‘–’ 和 ‘//’ 这种行注释的使用会有问题。在oracle 的pro*c 中这两种注释都…

Jetson Nano之ROS入门 -- YOLO目标检测与定位

文章目录 前言一、yolo板端部署推理二、目标深度测距三、目标方位解算与导航点设定1、相机成像原理2、Python实现目标定位 总结 前言 Darknet_ros是一个基于ROS(机器人操作系统)的开源深度学习框架,它使用YOLO算法进行目标检测和识别。YOLO算…

2023光电赛小车题视觉代码开源(附详细方案说明)

github网址:HPC2H2/2023-China-National-University-Students-Opt-Sci-Tech-Competition-machine-vision-part: 2023光电赛小车题树莓派无畸变摄像头(备用小畸变摄像头)视觉方案 (github.com) gitee网址: 2023-China-National-U…

代理模式:控制访问的设计模式

代理模式:控制访问的设计模式 什么是代理模式? 代理模式是一种常见的设计模式,它允许通过代理对象来控制对真实对象的访问。代理模式的主要目的是在不改变原始对象的情况下,提供额外的功能或控制访问。 为什么要使用代理模式&a…

MFC使用png做背景图片

在MFC中使用png图片作为背景&#xff0c;你需要使用GDI库。以下是一个简单的示例&#xff1a; 首先&#xff0c;你需要在你的项目中包含GDI头文件和库。在你的stdafx.h&#xff08;或者你的项目预编译头文件&#xff09;中添加以下代码&#xff1a; #include <GdiPlus.h&g…

2023年Q2京东环境电器市场数据分析(京东数据产品)

今年Q2&#xff0c;环境电器市场中不少类目表现亮眼&#xff0c;尤其是以净水器、空气净化器、除湿机等为代表的环境健康电器。此外&#xff0c;像冷风扇这类具有强季节性特征的电器也呈现出比较好的增长态势。 接下来&#xff0c;结合具体数据我们一起来分析Q2环境电器市场中…

【LeetCode】198.打家劫舍

题目 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个房屋存放…

所有流的知识都有,IO流原理及流的分类

1、Java IO流原理 I/O是Input/Output的缩写&#xff0c; I/O技术是非常实用的技术&#xff0c;用于处理设备之间的数据传输。如读/写文件&#xff0c;网络通讯等。 Java程序中&#xff0c;对于数据的输入/输出操作以”流(stream)” 的方式进行。java.io包下提供了各种“流”类…

微信小程序监测版本更新

在index.js里面 不放到app.js里面是因为有登录页面&#xff0c;在登录页面显示更新不太友好 onShow() {const updateManager wx.getUpdateManager()// 请求完新版本信息的回调updateManager.onCheckForUpdate(res > {if (res.hasUpdate) {// 新版本下载成功updateManage…

【OnnxRuntime】在linux下编译并安装C++版本的onnx-runtime

目录 安装C接口的onnx-runtime安装依赖项&#xff1a;下载源文件构建ONNX Runtime安装ONNX Runtime 安装C接口的onnx-runtime 安装依赖项&#xff1a; 安装CMake&#xff1a;可以通过包管理器&#xff08;如apt、yum等&#xff09;安装CMake。 安装C编译器&#xff1a;确保系…

WPF实战学习笔记25-首页汇总

注意&#xff1a;本实现与视频不一致。本实现中单独做了汇总接口&#xff0c;而视频中则合并到国todo接口当中了。 添加汇总webapi接口添加汇总数据客户端接口总数据客户端接口对接3首页数据模型 添加数据汇总字段类 新建文件MyToDo.Share.Models.SummaryDto using System;…

【JavaEE初阶】Servlet (二) Servlet中常用的API

文章目录 HttpServlet核心方法 HttpServletRequest核心方法 HttpServletResponse核心方法 Servlet中常用的API有以下三个: HttpServletHttpServletRequestHttpServletResponse HttpServlet 我们写 Servlet 代码的时候, 首先第一步就是先创建类, 继承自 HttpServlet, 并重写其…

以科技创新引领短交通行业发展,九号公司重磅新品亮相巴塞罗那MWC

2月27日&#xff0c;以“时不我待(VELOCITY) - 明日科技&#xff0c;将至已至”为主题的2023世界移动通信大会&#xff08;Mobile World Congress&#xff0c;以下简称MWC&#xff09;在西班牙巴塞罗那举办&#xff0c;全球创新短交通领军企业九号公司参加了大会。现场&#xf…

Pytorch(三)

一、经典网络架构图像分类模型 数据预处理部分: 数据增强数据预处理DataLoader模块直接读取batch数据 网络模块设置: 加载预训练模型&#xff0c;torchvision中有很多经典网络架构&#xff0c;可以直接调用注意别人训练好的任务跟咱们的并不完全一样&#xff0c;需要把最后…

2023年FPGA好就业吗?

FPGA岗位有哪些&#xff1f; 从芯片设计流程来看&#xff0c;FPGA岗位可以分四类 产品开发期&#xff1a;FPGA系统架构师 芯片设计期&#xff1a;数字IC设计工程师、FPGA开发工程师 芯片流片期&#xff1a;FPGA验证工程师 产品维护期&#xff1a;FAE工程师 从行业上来说&#x…

6、Kubernetes核心技术 - Pod

目录 一、概述 二、Pod机制 2.1、共享网络 2.2、共享存储 三、Pod资源清单 四、 Pod 的分类 五、Pod阶段 六、Pod 镜像拉取策略 ImagePullBackOff 七、Pod 资源限制 八、容器重启策略 一、概述 Pod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元。P…

时序预测 | Python实现NARX-DNN空气质量预测

时序预测 | Python实现NARX-DNN空气质量预测 目录 时序预测 | Python实现NARX-DNN空气质量预测效果一览基本介绍研究内容程序设计参考资料效果一览 基本介绍 时序预测 | Python实现NARX-DNN空气质量预测 研究内容 Python实现NARX-DNN空气质量预测,使用深度神经网络对比利时空气…

有道OCR图文识别整合SpringBoot

背景需求, 官方SDK,在SpringBoot项目中过于臃肿,需要引入的Jar包过多, 在SpringBoot中, 本文使用SpringBoot中的RestTemplate对象进行请求接口 案例代码如下 package com.example.demo2.Test;import com.example.demo2.Test.Ocr.OcrResponse; import org.springframework.h…

基于51单片机和proteus的加热洗手器系统设计

此系统是基于51单片机和proteus的仿真设计&#xff0c;功能如下&#xff1a; 1. 检测到人手后开启出水及加热。 2. LED指示加热出水及系统运行状态。 功能框图如下&#xff1a; Proteus仿真界面如下&#xff1a; 下面就各个模块逐一介绍&#xff0c; 模拟人手检测模块 通过…

mysql 非definer用户如何查看存储过程定义

当我们创建存储过程时&#xff0c;如果没有显示指定definer&#xff0c;则会默认当前用户为该sp的definer&#xff0c;如果没有相关授权&#xff0c;则其他用户是看不了这个sp的。 比如用户zhenxi1拥有如下权限&#xff1a; 它拥有对dev_nacos库的查询权限&#xff0c;这个时候…