Dart List チートシート

DartのListクラスのメソッドについて、Javascriptと比較したいと思います。

『JavascriptのArray.find()はDartでどう書くの？』といったニーズ（ほぼ自分用）にお応えしてまとめました。

長さ

// Javascript
const length = items.length;

// Dart
final length = items.length;

連結する

// Javascript
items.concat(otherItems);

// Spread operatorを使った場合
const items = [...items, ...otherItems];

// Dart
items.addAll(otherItems);

// Spread operatorを使った場合Javascriptと同じ書き方
final items = [...items, ...otherItems];

全ての要素が条件を満たすか

// Javascript
const isAllEven = items.every(item => item % 2 === 0);

// Dart
final isAllEven = items.every((item) => item % 2 == 0);

すべての要素が指定した値になる配列を作成

// Javascript
const filled = Array(3).fill(42);

// Dart
final filled = List<int>.filled(3, 42)

条件に合致する要素だけにフィルターして配列を作成

// Javascript
const evenItems = items.filter(n => n % 2 === 0);

// Dart
final evenItems = items.where((n) => n % 2 == 0).toList();

条件を満たす最初の要素

// Javascript
const found = items.find(item => item.id === 42);

// Dart （見つからない場合orElseでnullを返す）
final found = items.firstWhere((item) => item.id == 42, orElse: () => null);

⚠firstWhereのorElseが省略されていて且つ条件を満たす要素がない場合、StateErrorがthrowされます。

条件を満たす最初の要素のindex

// Javascript
const index = items.findIndex(item => item === 42);

// Dart （見つからない場合は-1が返ってくる）
final index = items.indexWhere((item) => item == 42);

// 第2引数で探索を開始するindexを指定できる
// List<int> items = [39, 40, 41, 42, 42];
final index = items.indexWhere((item) => item == 42, 2); // -> 3

サブ配列の要素を再帰的に結合した新しい配列を生成

// Javascript
const items = [1, 2, [3, 4]];
const flattened = items.flat(); // -> [1, 2, 3, 4]

// Dart
final items = [1, 2, [3, 4]];
final flattened = items.expand((_) => _).toList(); // -> [1, 2, 3, 4]

各要素に対して関数実行

// Javascript
items.forEach(item => console.log(item));

// Dart
items.forEach((item) => print(item));

各要素に対して関数実行 (index付き)

// Javascript
items.forEach((item, index) => console.log(item, index));

// Dart
// forEachにindexが必要な場合、asMap()でMap<int, E>型に変換する　※indexは第1引数
items.asMap().forEach((index, item) => print('$item, $index'));

配列に含まれているかどうかチェック

// Javascript
const isIncludes = items.includes(42);

// Dart
final isIncludes = items.contains(42);

指定された値が最初に現れたインデックス

// Javascript
const index = items.indexOf(item => item === 42);

// Dart （値が見つからない場合は-1）
final index = items.indexOf(42);

配列の全要素を順に連結した文字列を作成

// Javascript
// Javascriptのjoin()はデフォルトの区切り文字としてカンマが適用される
const items = [1, 2, 3, 4];
const joined = items.join(); // -> '1,2,3,4'

// Dart
// 区切り文字を引数で指定する
// 区切り文字がなければ全要素が連結される
final items = [1, 2, 3, 4];
final joined１ = items.join(','); // -> '1,2,3,4'
final joined２ = items.join(); // -> '1234'

各要素に関数を実行しその結果の新しい配列を生成

// Javascript
const newItems = items.map(item => item + 1);

// Dart
final newItems = items.map((item) => item + 1).toList();

配列から最後の要素を取り除きその要素を返す

// Javascript
const item = items.pop();

// Dart
final item = items.removeLast();

⚠removeLast()は配列itemsの長さを変化させます。

配列の末尾に要素を追加

// Javascript
items.push(42);

// Dart
items.add(42);

⚠Javascriptは新しい配列の長さを返しますが、Dartはvoidです。

各要素にreducer関数を実行して単一の値にして返す

// Javascript
// accumulatorはコールバックの戻り値を累積
// 累積値は、ひとつ前の戻り値、もしくは初期値
// itemは現在の要素
const reduced = items.reduce((accumulator, item) => {
 accumulator[item.id] = item;
 return accumulator;
}, {});

// Dart
// accumulatorはコールバックの戻り値を累積
// 累積値は、ひとつ前の戻り値、もしくは初期値
// itemは現在の要素
final reduced = items.fold({}, (accumulator, item) {
 accumulator[item.id] = item;
 return accumulator;
});

⚠初期値（サンプルでは{}）を与える順番がJavascriptとDartで違います。

配列を反転させる

// Javascript
const items = ['apples', 'oranges', 'pears'];
const reversed = items.reverse();

// Dart
final items = ['apples', 'oranges', 'pears'];
final reversed = items.reversed.toList();

配列から要素を取り除きその要素を返す

// Javascript
// shift()は先頭の要素を取り除き
items.shift();

// Dart
// 引数に取り除く要素のindexを指定する
items.removeAt(0);

⚠removeAt()は配列itemsの長さを変化させます。

begin から end までシャローコピーして新しい配列を生成

// Javascript
const items = ['apple', 'orange', 'pear', 'lemon', 'grape'];
const sliced = items.slice(1, 3); // ['orange', 'pear']

// Dart
// end は含まれない。元の配列は変更されない。
final items = ['apple', 'orange', 'pear', 'lemon', 'grape'];
final sliced = items.sublist(1, 3); // ['orange', 'pear']

条件を満たす要素が少なくとも１つあるか

// Javascript
const hasOdd = items.some(item => item % 2);

// Dart
final hasOdd = items.any((item) => item % 2 == 0);

ソート

// Javascript
final items = [5, 2, 3, 4];
items.sort((a, b) => a - b); // -> [2, 3, 4, 5]

// Dart
final items = [5, 2, 3, 4];
items.sort((a, b) => a - b); // -> [2, 3, 4, 5]

// 昇順にソートするならComparatorは省略可
final items = [5, 2, 3, 4];
items.sort(); // -> [2, 3, 4, 5]

⚠ソートは配列上で直接行われます。

挿入

// Javascript
// 配列の最初に要素を追加し、新しい配列の長さを返す
var items = ['apple', 'orange', 'pear'];
items.unshift('lemon'); // -> ['lemon', 'apple', 'orange', 'pear']

// Dart
// insert(index, element)は追加する要素のインデックスと要素１つを引数にとり、何も返さない
var items = ['apple', 'orange', 'pear'];
items.insert(0, 'lemon'); // -> ['lemon', 'apple', 'orange', 'pear']

まとめ

Swift版、Kotlin版などもニーズがあるかも（自分的には必要ないけど）