如何用Immutable.js正确执行List的unshift操作？修复嵌套List问题

一、先解决你遇到的嵌套结果问题 #

你得到List[List[new_element], element, element, element]这种嵌套结构，大概率是调用unshift时，错误地把要添加的元素包裹在了另一个Immutable.List实例里传入，而非直接传入元素本身。

举个错误用法的例子：

const Immutable = require('immutable');
const originalList = Immutable.List([1, 2, 3]);
// 错误：将新元素包装成List后传入
const wrongResult = originalList.unshift(Immutable.List([0]));
console.log(wrongResult.toJS()); // 输出 [[0], 1, 2, 3]，出现嵌套

修正方法很直接，直接传入你要添加的元素即可，不需要额外用List包裹：

const correctResult = originalList.unshift(0);
console.log(correctResult.toJS()); // 输出 [0, 1, 2, 3]，符合预期

如果需要一次性添加多个元素，你可以直接传入多个参数，或者用ES6扩展运算符展开元素数组：

// 直接传入多个元素参数
const multiAddResult = originalList.unshift(-2, -1, 0);
// 用扩展运算符展开元素数组
const elementsToAdd = [-2, -1, 0];
const multiAddWithSpread = originalList.unshift(...elementsToAdd);
console.log(multiAddWithSpread.toJS()); // 输出 [-2, -1, 0, 1, 2, 3]

二、如何对List中的每个元素执行unshift操作 #

如果你的需求是List中的每个元素本身是子List，要给每个子List的开头添加元素，那可以结合map方法实现：

const listOfLists = Immutable.List([
  Immutable.List([1, 2]),
  Immutable.List([3, 4]),
  Immutable.List([5, 6])
]);

// 给每个子List开头添加元素0
const updatedList = listOfLists.map(subList => subList.unshift(0));
console.log(updatedList.toJS()); // 输出 [[0,1,2], [0,3,4], [0,5,6]]

这里要注意：Immutable.js的所有操作都是不可变的，unshift和map都会返回新的实例，原List不会被修改，所以一定要接收返回的新List。

内容的提问来源于stack exchange，提问作者MingtyeP