Javascript 不变性和本地数组

Question

更新:我现在明白在下面的代码中我正在改变 aggregateData当我遍历 pagedData 时的数组.

我想知道如何在没有突变的情况下做到这一点？

一般来说，当试图在代码库中尽可能地尊重不变性时，在改变本地定义的数组(就像我在我的例子中所做的那样)时可能会有多少关注？由于数组是在本地定义的，我想知道如何改变数组真的会产生任何负面影响？

const pagedData = [
  {data: ["val1", "val2"], nextPage: 2},
  {data: ["val3", "val4"], nextPage: 3},
  {data: ["val5", "val6"]}
];

const aggregator = () => {
  let aggregateData = [];
  let hasNextPage;
  let page = 1;

  do {
    const { data, nextPage } = pagedData[page - 1];
    aggregateData = [...aggregateData, ...data];
    page = nextPage;
    hasNextPage = nextPage;
  } while (hasNextPage);

  return aggregateData;
}

console.log(aggregator());

/* output: ["val1", "val2", "val3", "val4", "val5", "val6"] */

Answer 1

不变性有时有助于减少难以捕获的错误，但这可能并不总是必需的或不是理想的情况。
什么是不变性？
不改变值是指不变性。在 JavaScript 中，array and objects are mutable .
不变性的例子:

let arr = ['John', 'Alice'];

// Adding element is mutating
arr.push('Oliver');

// Updating data is mutating
arr[1] = 'Lily'

许多其他函数可以改变这个数组。更多 here

复制内

填写

流行音乐

推

反向

换类

排序

拼接

unshift

另外，请注意将数组或对象定义为 const不保证不变性。
例如:

const obj = {
  name: 'foo'
}
// update name
obj.name = 'bar';

console.log(obj);

const arr = ['foo'];

// push new item
arr.push('bar');

console.log(arr);

现在回答你的问题。什么时候可以传播运算符变异，什么时候不能？
如果我们有这个数组，只要这个数组中的任何数据发生变化，它就会失去不变性。

let arr = ['Obito', 'Sasuke'];
let sameReferenceArray = arr;

console.log(arr === sameReferenceArray);

// here the original array did not mutate 
let newArray = [...arr, 'Madara'];
console.log(arr === sameReferenceArray);

// but here it did mutate as the new array is assigned back to arr
arr = [...arr, 'Madara'];
console.log(arr === sameReferenceArray);

还有更多关于哪些方法会发生变化以及哪些不会发生变化的示例，随着时间的推移，您将学习它们。
编辑
突变如何产生负面影响？

// simple example demostrating negative impact of mutataion
const obj = { name: "foo" };
const arr = [obj, obj]

console.log(arr);

// Mutating first element
arr[0].name = "bar";

console.log("Contents after mutation", arr);

如您所见，即使我们更新了索引 0 处的对象，我们最终还是更新了两个对象。
现在我将传播和变异:

const obj = { name: "foo" };
const arr = [{...obj}, {...obj}]

console.log(arr);

// Mutating first element
arr[0].name = "bar";

console.log("Contents after mutation", arr);

现在只有预期的元素发生了变异。

这还有很多。一般来说，如果您已经开始学习，不变性不应该是一个非常大的问题。但知道它肯定有帮助。
例如在 React状态不应该被改变 ( reason )
最后，关于如何更新“aggregatedData”。

const aggregator = () => {
  let aggregateData = [];
  let hasNextPage;
  let page = 1;

  do {
    const { data, nextPage } = pagedData[page - 1];
    aggregateData = [...aggregateData, ...data];
    page = nextPage;
    hasNextPage = nextPage;
  } while (hasNextPage);

  return aggregateData;
}

由于您将数据添加到数组中，因此无论如何最终都会对其进行变异。你可以做 spread或 push管他呢。这一切都很好，因为数组是在函数内部本地创建并返回的。
例如，这可能是一个问题:

const aggregator = (aggregateData) => {
  for (const i = 0; i < 5; i++)
    aggregateData = [...aggregateData, i];

  return aggregateData;
}

const example = () => {
  let arr = [];
  let data = aggregator(arr);
  // if this array is passed to couple other functions too and mutated then it will get hard to track. This is where the issue can occur

}

example();