代码之家 › 专栏 › 技术社区 › d-_-b

Javascript Array.map复制而不更改原始

javascript

d-_-b · 技术社区 · 6 年前

我注意到在使用 Array.map() 影响原始数组,我假设因为每个迭代的项仍在引用原始数组:

var objects = [{name: 'a', password: 'x'}, {name: 'b', password: 'x'}];

var clean = objects.map(user => {delete user.password; return user;});

console.log(JSON.stringify(objects));
> [{"name":"a"},{"name":"b"}]

有没有办法 map 或 filter 不修改原稿?我可以考虑遍历每一个项目并创建一个克隆,但我很好奇是否有更简单的方法。

4 回复 | 直到 6 年前

Olian04 6 年前

这不是问题 map 或 filter ,这些方法总是返回一个新数组。在Javascript中,对象总是通过引用传递,这是一个问题。

请考虑以下几点:

const a = { foo: 1 }
const b = { foo: 2 }

const arr1 = [ a, b ];

const arr2 = arr1.map(v => {
  v.foo = 0;
  return v;
});

console.log(arr1);
console.log(arr2);
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) // true

如果要在执行映射时创建数组中每个对象的副本,可以使用spread运算符:

const a = { foo: 1 }
const b = { foo: 2 }

const arr1 = [ a, b ];

const arr2 = arr1.map(v => {
  return {...v, foo: 0};
});

console.log(arr1);
console.log(arr2);
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) // false

值得注意的是,spread操作符是一个浅层克隆,这意味着对象中的对象仍将通过引用传递。

const c = { foo: 3 }
const a = { foo: 1, biz: c }
const b = { foo: 2, biz: c }

const arr1 = [ a, b, c ];

const arr2 = arr1.map(v => {
  return {...v, foo: 0};
});

console.log(arr1);
console.log(arr2);
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) // false

Mark 6 年前

除了 password 与解引用。然后使用map构建一个包含其他内容的新对象。如果对象上有其他属性而不是 name 想要包括所有的东西除了 密码 .

var objects = [{name: 'a', password: 'x'}, {name: 'b', password: 'x'}];

var clean = objects.map(({password, ...user}) => user);

console.log(objects);  // untouched

console.log(clean);    // no password

Dan 6 年前

您可以映射所有项并仅返回名称。

const objectsWithNames = objects.map(({name}) => ({name}));

clabe45 6 年前

原始数组没有被修改,而是数组中的项(对象)被修改。由于javascript对象是通过引用传递的,因此当您修改新数组中的对象时,旧数组中的引用将显示相同的修改。

所以,正如您所说,您可以循环遍历每个项并创建一个克隆。当然,您也可以执行整个数组的深度复制。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前