【译】Immutable.js : List 2

一个不可变的列表类似于一个JavaScript数组，但是如果使用不同的方法创建List，就会有不同的结果。下面是创建列表的各种不同方法

Create an empty List

// Empty List:
const list = Immutable.List();

// Output:
list;

Create a populated List of data (创建填充数据的列表)

List() vs List.of()

您可以使用List()构造函数或List.of()方法创建一个数据列表，这取决于您使用的数据类型来创建列表:

• List.Of() — 从非可迭代数据（例如一组函数参数，JavaScript对象或要解释为整个字符串的字符串）创建列表时使用;
• List() — 从可迭代数据（例如数组或一个不可变的可更新对象（List，Map，Set等），或想要解释为一系列字符的字符串）创建List时使用。

注意： JavaScript字符串是一个可迭代对象，因此，如果您使用List(“string”)创建字符串列表，您将得到一个字符列表(''t'、'r'、'i'、'n'、'g')。为了使不可变的将字符串解释为不可迭代的值，可以使用list.string(“string”)代替。请参见下面的示例。

Create a new List from…

…a JavaScript Array

// Create a new List from a JavaScript array
const avengersArray = ['ironMan', 'captainAmerica'];
const avengersList = Immutable.List(avengersArray);

// Output:
avengersList;

…a nested JavaScript Array (一个嵌套的数组)

不可变的列表构造函数只从数组的顶层创建一个列表。这意味着嵌套数组将被转换为一个不可变的数组列表，而您可能更喜欢列表的列表

要确保所有嵌套数组都被转换为不可变列表，请使用 Immutable.fromJS()函数：

// Create a deeply nested List from a deeply nested Array
// Get a value from a deeply nested List
const avengers = [
  'ironMan', // index [0]
  ['captainAmerica', // index [1][0]
   ['blackWidow', // index [1][1][0]
    ['theHulk'] // index [1][1][1][0]
   ]
  ]
];

const avengersList = Immutable.fromJS(avengers);

// get the array containing 'theHulk' and test if it's a List
Immutable.List.isList(avengersList.getIn([1, 1, 1]));

为了显示Immutable.fromJS(avengers)和Immutable.List(avengers)，试着在上面的例子中修改fromJS到List，你会看到返回的结果是错误的。这是因为包含“theHulk”的深层嵌套数组仍然是一个数组，而不是一个不可变的列表。

黄金法则 如果你想要一切都被转换为不可变，使用fromJS（）。如果你想你的嵌套数组保持数组，使用List（）或List.of（）。

---

…a JavaScript Object

从JavaScript对象创建List时，请记住，List的作用类似于JavaScript数组，因此将整个对象视为单个项目。因此，你的新列表将只有一个项目 - JavaScript对象。

您将需要使用List.of（）函数来创建列表，因为没有它，Immutable将期望得到一个迭代，而一个对象不是一个可迭代的：

// New List from existing JavaScript object
const avengers = {
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers'
};

const avengersList = Immutable.List.of(avengers);
avengersList;

---

…a set of function arguments

要创建一个以函数参数列表形式传入的值的不可变列表，请使用List.of（）。

// Create a new List using function arguments

const avengersList = Immutable.List.of(
  'ironMan', 'captainAmerica', 'blackWidow'
);

// Output:
avengersList;

…a JavaScript iterator

ES6迭代器是定义可迭代行为的对象 - 也就是说，它们实现了ES6@@ iterator方法，并定义了在for..of循环中循环的值（等等）。

ES6中目前有五个内置的迭代器：

• String
• Array
• TypedArray
• Map
• Set

如果您愿意，您也可以创建自己的迭代器（有关更多详细信息，请参 MDN的Iterable页面）

任何ES6可迭代对象，无论是内置的还是用户定义的，都可以用来创建一个新的不可变列表。例如：

// New List from existing JavaScript iterator (Array.map example)
const avengersArray = ['ironMan', 'captainAmerica'];
const avengersList = Immutable.List(
  avengersArray.map(item => 'We love ' + item)
);

// Output:
avengersList;

…an Immutable List

以下是如何从现有列表创建新列表：

// New List from existing List
const avengersList = Immutable.List(['ironMan', 'captainAmerica']);
const newAvengersList = Immutable.List(avengersList);

// Output:
newAvengersList;

…an Immutable Map

一个不可变映射派生自不可变的Iterable类，所以可以使用List()构造函数创建一个List

// New List from Immutable Map
const avengers = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers'
});

const avengersList = Immutable.List(avengers);
avengersList;

…other Immutable types

您可以使用任何不可变对象创建一个新的List，其中包括：

• List
• Map
• OrderedMap
• Set
• OrderedSet
• Stack
• Record

由于这些都是从Immutable的Iterable类派生的，因此可以使用List构造函数（List()）从每个类型创建List，而不是使用List.of()方法。

Getting and Setting List Data

现在您已经创建了一个列表，您如何从它获取项目，并在其中添加新项目?这是否可能与一个不可变的列表一起?这是本系列的下一篇文章的重点，它给出了您需要的所有示例， get, set and update data in an Immutable.js List.