![見出し画像](https://assets.st-note.com/production/uploads/images/24944833/rectangle_large_type_2_18e6abfa2364e6912d1e934fc621716e.jpeg?width=1200)
Photo by
daraz
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 joined1 = items.join(','); // -> '1,2,3,4'
final joined2 = 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']
条件を満たす要素が少なくとも1つあるか
// 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)は追加する要素のインデックスと要素1つを引数にとり、何も返さない
var items = ['apple', 'orange', 'pear'];
items.insert(0, 'lemon'); // -> ['lemon', 'apple', 'orange', 'pear']
まとめ
Swift版、Kotlin版などもニーズがあるかも(自分的には必要ないけど)
この記事が気に入ったらサポートをしてみませんか?