Array.fill 重复给出相同的对象.为什么? [英] Array.fill gives same object repeated. why?

问题描述

var arr = new Array(4).fill({});arr[2].status = true;控制台日志(arr[0].status);

为什么数组填充在所有索引中填充相同的对象?

解决方案

fill 重复您传递的 value.这种情况下的值是一个对象引用.该引用的每个副本都指向同一个对象，因此您得到的是:

<前>+−−−−−−−−−−−+arr--->|(数组) |+−−−−−−−−−−−+ +−−−−−−−−−−−−−−−−+|0 |−−+−+−+−>|(对象) ||1 |−///+−−−−−−−−−−−−−−−+|2 |--//|状态:真实 ||3 |−−−/+−−−−−−−−−−−−−−−++−−−−−−−−−−−+

如果您想要单独的对象，则需要创建多个对象.最简单的方法当然是:

var arr = [{}, {}, {}, {}];

示例:

var arr = [{}, {}, {}, {}];arr[2].status = true;console.log("arr[0].status", arr[0].status);console.log("arr[2].status", arr[2].status);

如果你想用可变长度来做:

由于您使用的是 Array.fill，因此我假设您使用的是 ES2015(又名ES6")功能(但请参阅下文了解不带 polyfill 的 ES5 兼容解决方案).你可以通过带有回调的 Array.from 做到这一点:

const arr = Array.from({length:4}, () => ({}));arr[2].status = true;console.log("arr[0].status", arr[0].status);console.log("arr[2].status", arr[2].status);

这给了你:

<前>+−−−−−−−−−−−+arr--->|(数组) |+−−−−−−−−−−−+ +−−−−−−−−−−−−−−−−+|0 |−−−−−−−−−>|(对象) ||1 |−−−−−+ +−−−−−−−−−−−−−−−+|2 |−−−+ ||3 |-+ ||+−−−−−−−−−−−−−−−−++−−−−−−−−−−+ ||+−−>|(对象) |||+−−−−−−−−−−−−−−−−+||||+−−−−−−−−−−−−−−−−+|+−−−−->|(对象) ||+−−−−−−−−−−−−−−−−+||状态:真实 ||+−−−−−−−−−−−−−−−−+||+−−−−−−−−−−−−−−−−++−−−−−−−>|(对象) |+−−−−−−−−−−−−−−−−+

(如果您愿意，您可以使用 ES5 上的 Array.from polyfill 来实现，只需使用 function() { return {}; } 而不是 () => ({}).)

<小时>

在 ES5 中，如果你需要一个可变长度，最简单的可能就是一个循环:

var arr = [];for (var i = 0; i <4; ++i) {arr[i] = {};}arr[2].status = true;console.log("arr[0].status", arr[0].status);console.log("arr[2].status", arr[2].status);

当然，你可以把它放在一个辅助函数中.

var arr = new Array(4).fill({});

arr[2].status = true;

console.log(arr[0].status); 

why is array fill filling same object in all indexes?

解决方案

fill repeats the value you pass it. The value in this case is an object reference. Every copy of that reference refers to the same object, so what you're getting is:

       +−−−−−−−−−+
arr−−−>| (array) |
       +−−−−−−−−−+         +−−−−−−−−−−−−−−+
       | 0       |−−+−+−+−>|   (object)   |
       | 1       |−/ / /   +−−−−−−−−−−−−−−+
       | 2       |−−/ /    | status: true |
       | 3       |−−−/     +−−−−−−−−−−−−−−+
       +−−−−−−−−−+       

If you want separate objects, you'll need to create multiple objects. The simplest way is, of course:

var arr = [{}, {}, {}, {}];

Example:

var arr = [{}, {}, {}, {}];
arr[2].status = true;
console.log("arr[0].status", arr[0].status);
console.log("arr[2].status", arr[2].status);

If you want to do it with a variable length:

Since you're using Array.fill, I'm assuming you're using ES2015 (aka "ES6") features (but see below for an ES5-compatible solution without polyfills). You can do that via Array.from with a callback:

const arr = Array.from({length:4}, () => ({})); 
arr[2].status = true;
console.log("arr[0].status", arr[0].status);
console.log("arr[2].status", arr[2].status);

That gives you:

                    
       +−−−−−−−−−+       
arr−−−>| (array) |       
       +−−−−−−−−−+         +−−−−−−−−−−−−−−+
       | 0       |−−−−−−−−>|   (object)   |
       | 1       |−−−−−+   +−−−−−−−−−−−−−−+
       | 2       |−−−+ |   
       | 3       |−+ | |   +−−−−−−−−−−−−−−+
       +−−−−−−−−−+ | | +−−>|   (object)   |
                   | |     +−−−−−−−−−−−−−−+
                   | |     
                   | |     +−−−−−−−−−−−−−−+
                   | +−−−−>|   (object)   |
                   |       +−−−−−−−−−−−−−−+
                   |       | status: true |
                   |       +−−−−−−−−−−−−−−+
                   |                      
                   |       +−−−−−−−−−−−−−−+
                   +−−−−−−>|   (object)   |
                            +−−−−−−−−−−−−−−+

(You can do that with an Array.from polyfill on ES5 if you like, just use function() { return {}; } instead of () => ({}).)

---

In ES5, if you need a variable length, the simplest thing is probably just a loop:

var arr = [];
for (var i = 0; i < 4; ++i) {
    arr[i] = {};
}
arr[2].status = true;
console.log("arr[0].status", arr[0].status);
console.log("arr[2].status", arr[2].status);

You could put that in a helper function, of course.

这篇关于Array.fill 重复给出相同的对象.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！