对于数组对象还在用for循环后delete属性吗

178 阅读2分钟

对于这个问题,其实我们可以先了解下解构的用法

在JavaScript中,解构是一种从数组或对象中提取值的方法。它允许我们将数组或对象中的值分配给单独的变量。解构还支持剩余语法,它允许我们将未分配给变量的值存储在一个新的数组或对象中。

数组解构

// 基本用法
const arr = [1, 2, 3, 4];
const [a, b, c, d] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

// 忽略某些值
const [x, , y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 3

// 剩余语法
const [m, n, ...rest] = [1, 2, 3, 4, 5];
console.log(m);   // 1
console.log(n);   // 2
console.log(rest);// [3, 4, 5]

对象解构

// 基本用法
const obj = { name: 'Tom', age: 18 };
const { name, age } = obj;
console.log(name); // Tom
console.log(age);  // 18

// 重命名变量
const { name: newName } = obj;
console.log(newName); // Tom

// 默认值
const { gender = 'unknown' } = obj;
console.log(gender); // unknown

// 嵌套对象解构
const obj2 = { name: 'Jerry', age: 20, address: { city: 'Shanghai' } };
const { name: newName2, age: newAge2, address: { city } } = obj2;
console.log(newName2); // Jerry
console.log(newAge2);  // 20
console.log(city);     // Shanghai

// 剩余语法
const { name: name3, ...restProps } = obj2;
console.log(name3);      // Jerry
console.log(restProps);  // { age: 20, address: { city: 'Shanghai' } }

剩余语法

// 数组剩余语法
const [p, q, ...restArr] = [1, 2, 3, 4, 5];
console.log(p);        // 1
console.log(q);        // 2
console.log(restArr);  // [3, 4, 5]

// 对象剩余语法
const obj3 = { name: 'Lucy', age: 22, gender: 'female' };
const { name: newName4, ...restProps2 } = obj3;
console.log(newName4);     // Lucy
console.log(restProps2);   // { age: 22, gender: 'female' }

如果我们需要从JavaScript数组对象中删除某些属性,大部分人一般会用到的是

使用for循环和delete方法

// 初始化包含对象的数组
let myArray = [
   {name: "John", age: 25, city: "New York"},
   {name: "Jane", age: 22, city: "San Francisco"},
   {name: "Bob", age: 30, city: "Los Angeles"}
];

// 循环遍历数组,删除每个对象的city属性
for(let i=0; i<myArray.length; i++){
   delete myArray[i].city;
}

// 打印结果
console.log(myArray);

但我们其实也可以用解构中的剩余语法去实现

使用解构中的剩余语法

// 初始化包含对象的数组
let myArray = [
   {name: "John", age: 25, city: "New York"},
   {name: "Jane", age: 22, city: "San Francisco"},
   {name: "Bob", age: 30, city: "Los Angeles"}
];

// 使用解构中的剩余语法删除每个对象的city属性
let newArray = myArray.map(({city, ...rest}) => rest);

// 打印结果
console.log(newArray);

在上面的示例中,我们使用了map()方法来循环遍历数组并返回一个新数组。在回调函数中,我们使用解构中的剩余语法来删除每个对象的city属性,并返回其余的属性。最后,我们得到一个新数组,其中每个对象都没有city属性。