循环遍历不可变的 JS 记录

Posted 2023-02-19

【中文标题】循环遍历不可变的 JS 记录

【英文标题】：Loop Through Immutable JS Record

【发布时间】：2018-05-23 00:12:38

【问题描述】：

我是使用 ImmutableJS 库的新手，我在搞清楚这一点时遇到了一些麻烦。我有一个名为Options 的不可变记录对象。我希望能够遍历此记录，获取记录中每个项目的键和值。这是我的 Options 模型的样子：

export class Option extends Record (
  height: '10px',
  width: '47px',
  title: 'foo',
  isAvailable: false
) 
  constructor(props) 
    if (!props) 
      super();
      return;
    
  

我编写了以下代码来遍历选项记录中的每个元素，但它似乎不起作用：

var options = new Options();
options.toSeq().map((value, key) => 
  console.log(key + ': ' + value);
);

我希望这会将我的 Options Immutable Record 中的每个键/值对写入控制台窗口。但是，它不打印任何内容，甚至似乎根本不运行 map 函数中的代码。

如果您知道这里出了什么问题，请告诉我。提前致谢！ :)

【参考方案1】：

使用toMap 而不是toSeq

var options = new Options();
options.toMap().map((value, key) => 
  console.log(key + ': ' + value);
);

http://jsfiddle.net/w6h4soay/

【讨论】：

ImmutableJS 的 Record 没有 toMap() 函数，所以这不起作用，很遗憾。 facebook.github.io/immutable-js/docs/#/Record

@eclare211 您应该能够根据记录创建地图。它适用于 JSFiddle。你的代码有错误吗？

我明白了。我没有意识到它是从 Collections 继承的。而且我现在确实看到您的 js fiddle 确实可以正常工作。但是，当我这样做时，我的代码中确实出现了错误：Uncaught TypeError: options.toMap is not a function。不知道为什么它不适合我。

另外，你可以试试options.toSeq().toMap()

我不确定为什么options.toMap() 不适合我，但options.toSeq().toMap() 工作得很好！非常感谢您的帮助！

【参考方案2】：

我喜欢使用记录的_values、_keys、_defaultValues 和_iterate 属性。我认为下划线表示它们是私有的，但我找不到其他方法！

class Option extends Immutable.Record(
  height: '10px',
  width: '47px',
  title: 'foo',
  isAvailable: false
) 

var option = new Option();

console.log(option._keys); 
//  ["height", "width", "title", "isAvailable"]

console.log(option._values.toJS()); 
//  [undefined, undefined, undefined, undefined]

console.log(option._defaultValues); 
// 
//   height: '10px',
//   width: '47px',
//   title: 'foo',
//   isAvailable: false
// 

// i like this one the best
option.__iterate((item, key) => console.log(key, item));
// height, 10px
// width, 47px
// title, foo
// isAvailable, false

【参考方案3】：

你可以使用for of:

const options = new Options();

for (const [key, value] of options) 
  console.log(`$key:$value`);