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"]
,表示name
、age
和country
这几个属性在对象中都具有值。
您可以根据需要修改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 中,可以通过以下几种方式获取对象:
-
对象字面量:
可以使用花括号{}
来定义一个对象,并直接获取其中的属性。例如:const obj = { name: 'Alice', age: 20 }; console.log(obj.name); // 输出:Alice console.log(obj.age); // 输出:20
-
点表示法:
可以使用点.
符号来获取对象的属性。例如:const obj = { name: 'Bob', age: 25 }; console.log(obj.name); // 输出:Bob console.log(obj.age); // 输出:25
-
方括号表示法:
可以使用方括号[]
来获取对象的属性,属性名作为字符串传入。这种方式适用于属性名包含特殊字符或动态生成的情况。例如: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
-
使用 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()
的方法简单且适用于大多数情况,但不能处理特殊类型的属性。
根据你的需求选择适合的拷贝方法,浅拷贝适用于简单对象的复制,而深拷贝适用于需要完全独立的对象的复制。