关于前端:javaScript-获取对象中非空的属性

50次阅读

共计 3570 个字符，预计需要花费 9 分钟才能阅读完成。

## 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 对象中具备值的属性，并将其从新组成一个新的对象，您能够应用 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 中，能够通过以下几种形式获取对象：

对象字面量：
能够应用花括号 {} 来定义一个对象，并间接获取其中的属性。例如：

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 中，拷贝对象有多种办法，包含浅拷贝和深拷贝。

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()的办法简略且实用于大多数状况，但不能解决非凡类型的属性。

依据你的需要抉择适宜的拷贝办法，浅拷贝实用于简略对象的复制，而深拷贝实用于须要齐全独立的对象的复制。

正文完