对于这个问题,其实我们可以先了解下解构的用法
在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属性。