H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】js使用concat拼接的对象数组在遍历赋值时为什么会赋予同一值?

如下代码,使用concat拼接的对象数组在遍历赋值时会赋予同一值

let a = [
    {},
]
b = a.concat(a).concat(a).concat(a).concat(a)
for (let i = 0, j = b.length; i < j; i++) {
    b[i].id = i
}
console.log(b)

控制台输出如下(和闭包问题很像,但写了立即执行函数也是同样的结果)

(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 4}
1:{id: 4}
2:{id: 4}
3:{id: 4}
4:{id: 4}

但不是非对象数组是赋值便没问题

let a = [
    0,
]
b = a.concat(a).concat(a).concat(a).concat(a)
for (let i = 0, j = b.length; i < j; i++) {
    b[i] = i
}
console.log(b)

控制台输出如下

[0, 1, 2, 3, 4]

请问为什么会发生这种情况
对于concat拼接的对象数组又应该如何循环赋值

回答:

拷贝的原因,
[].concat(arr),arr.slice(),Object.assign([],arr),[…arr]都只针对第一层深拷贝,多层则是浅拷贝

var a = [{"id":2}];
var b = [].concat(a);
b[0].id = 1;
var c = [1];
var d = [].concat(c);
d[0]=2;
console.log(a,b,c,d);

涉及多层拷贝建议用JSON.parse(JSON.stringify(arr))

b = JSON.parse(JSON.stringify(a.concat(a).concat(a).concat(a).concat(a)))

回答:

又是引用问题

var a = {};
var b = a;
b.id = 1;
console.log(a)//{ id: 1 }

回答:

let a = [
    {},
]
b = a.concat([{}]).concat([{}]).concat([{}]).concat([{}])
for (let i = 0, j = b.length; i < j; i++) {
    b[i].id = i
}
console.log(b)

本文地址:H5W3 » 【Web前端问题】js使用concat拼接的对象数组在遍历赋值时为什么会赋予同一值?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址