无法更改函数内部传递的数组

Question

Let's say we have an array a = [1,2,3,4,5] and I want to zero it [0,0,0,0,0] by using function. This works:

function clear (arr) {
  arr.forEach((element, index) => {arr[index] = 0});
}

But this don't:

function clear2 (arr) {
  arr = [...arr].fill(0);
}

Just arr.fill(0) inside clear2() works, but it's running inside Vue.js so I can't assign array elements by index, I need to reassign array var completely to remain reactivity.

Why clear2() doesn't work? Arrays as a case of Objects should be passed by reference, so what am I doing wrong?

Update: I use it as a on-click method in Vue so I can't return from it and want to pass different arrays as a parameter.

Answer 1

With

  arr = [...arr].fill(0);

you're creating a copy of the original array then chaning that copy's values and then setting the parameter's reference value to the new array (you're not updating the parameter's inner state)

with

arr.forEach((element, index) => {arr[index] = 0}); 

you're actually updating the array parameter inner state

Answer 2

You could use fill directly, because

The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.

 function clear(array) { array.fill(0); } var array = [1, 2, 3, 4]; clear(array); console.log(array);