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

这篇具有很好参考价值的文章主要介绍了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()的方法简单且适用于大多数情况,但不能处理特殊类型的属性。

根据你的需求选择适合的拷贝方法,浅拷贝适用于简单对象的复制,而深拷贝适用于需要完全独立的对象的复制。文章来源地址https://www.toymoban.com/news/detail-618441.html

到了这里,关于javaScript 如何获取对象中非空的属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript对象数组根据某个属性值筛选分类

    🤵 作者 : coderYYY 🧑 个人简介 :前端程序媛,目前主攻 web前端 ,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!) 👉 个人专栏推荐 :《前端项目教程以及代码》 在开发中,这种需求还是挺常见的,常用于处理后端返回的数据

    2024年02月06日
    浏览(39)
  • JavaScript Array对象(属性、方法) 留言板案例

    一、创建数组对象的方式 var arrOb=new Array(值,........) var arrOb=Array(值,.......) var arrOb= [ 值,.........] var arrOb=new Array(n); arrOb [ 0]=值1; arrOb [ 1]=值2; 二、数组的属性 length      //数组中元素的数目 三、数组的方法 1、转为字符串 2、 join(\\\'连接符\\\')         将数组元素连接成字符串   

    2024年02月06日
    浏览(32)
  • 04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作

    其一、代码为: // 想将 obj 中的 flag 值,根据不同的值来变化(即:修改对象中原有的属性值); 其二、页面展示为: 其三、 js 中 for-in 的用法: // for-in 是一种特殊的 for 循环 专门用来循环对象; 注意:普通的 for 循环 可以单独循环、可以循环数组、可以伪数组、但无法循环

    2024年02月09日
    浏览(29)
  • JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制

    在 JavaScript 中,对象和数组是引用类型,当将一个对象或数组赋值给另一个变量时,它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。 为了创建一个独立的副本,可以使用深克隆。 JSON.stringify() 方法将 JavaScript 对象转换为一个

    2024年02月02日
    浏览(34)
  • JavaScript获取数组对象里面的键(key)和值(value)

    知识专栏 专栏链接 JavaScript知识专栏 https://blog.csdn.net/xsl_hr/category_12024214.html?spm=1001.2014.3001.5482 有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习!! 在后台管理系统的项目开发中,对于 后端接口返回的数据进行处理 是一件很重要的事情。有时候返回的值是 json格式

    2023年04月15日
    浏览(28)
  • 【JavaScript】函数 ⑥ ( 使用 arguments 获取所有实参 | arguments 内置对象 | 伪数组概念 )

    在 定义 JavaScript 函数 时 , 有时 不确定 形参的个数 , 形参写少了不够用 , 写多了又很浪费 , 这里 推荐使用 arguments 内置参数对象 ; 在 JavaScript 的 每个函数 的 内部都可以访问 内置的 arguments 对象 , 该对象中 包含了 调用者 传递给函数的所有 实参 , 即使 在 函数 形参 中没有明

    2024年04月22日
    浏览(36)
  • 如何在 JavaScript 中将数组转为对象

    首先,我们需要明白对象具有键和值。 如果我们想把某个东西转换成一个 对象 ,我们需要传递具有这两个要求的东西:键和值。 满足这些要求的参数有两种类型: 具有嵌套键值对的数组 Map 对象 这是一个带有键值对的嵌套数组 当我们应用它时,我们可以使用 Object.fromEnt

    2024年02月01日
    浏览(41)
  • javaScript中对象使用遍历渲染键值对取值,Vue的{{}}中写方法获取值。

     类似于这样的数据有若干条,我们希望展示的方式为 我的朋友:         陪我同眠的床伴【熊猫:花花,狗熊:阿壮】 此时在代码中的应该如果来写? {{ item[Object.keys(item)[0]] }} 会显示数组元素的值,而 (Object.keys(item)[0]) 会显示数组元素的键。 i tem[Object.keys(item)[0]]会根

    2024年01月17日
    浏览(28)
  • 【华为OD统一考试B卷 | 200分】返回矩阵中非1的元素个数( C++ Java JavaScript python)

    华为OD在线OJ: 已购买本专栏用户,请私信博主开通账号,在线刷题!!! 在线OJ:立即刷题 题库专栏:2023华为OD机试(A卷+B卷)(C++JavaJSPy) 题目描述 存在一个m*n的二维数组,其成员取值范围为0,1,2。 其中值为1的元素具备同化特性,每经过1S,将上下左右值为0的元素同化为

    2024年02月07日
    浏览(35)
  • JavaScript代理模式:如何实现对象的动态代理

    在JavaScript中,代理模式是一种常见的设计模式,它允许我们在不改变对象本身的情况下,通过代理对象来控制对象的访问。代理模式可以用于实现缓存、权限控制、远程调用等功能。 代理模式是指在访问对象时引入一定程度的间接性,因为这种间接性可以附加多种用途,所

    2024年02月11日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包