データ処理
batonjsを使ったプログラムを簡潔に書けるようになるデータ処理関数を紹介します。これらのユーティリティ関数はbatonjsに同梱されています。
このページで紹介する関数はコレクション(オブジェクトや配列)に要素を追加したり削除したりといった操作をするものがほとんどです。
batonコアで述べたように、batonjsではページ状態が変わったかどうかを===
で判断します。
ということは、オブジェクトのプロパティを更新したときや、配列の要素を追加・削除したときは、新しいコレクションが手元にあるようにしないといけないわけです。
このページで紹介する関数はその要求に応えるものですので、withStateと一緒に使うのに適しています。
なお、ここで紹介する関数は、配列をリストとして、オブジェクトを「文字列をキーとするマップ」として扱います。
リストとは、先頭から末尾まで要素が抜けなく詰まった並びのことです。
typeOf
値の型を調べます。
javascriptのtypeof演算子とほぼ同じですが、nullと配列をオブジェクトから区別することが違います。
typeOf(null) // === "null"
typeOf([]) // === "array"
typeOf({}) // === "object"
typeOf(0) // === "number"
typeOf("") // === "string"
typeOf(false) // === "boolean"
typeOf(undefined) // === "undefined"
typeof(() => 0) // === "function"
パラメーター
名前 | 型 | デフォルト | 説明 |
---|---|---|---|
value | any | 省略不可 | 型を調べたい値 |
返却値
名前 | 型 | 説明 |
---|---|---|
type | 文字列 | 型を表す文字列 |
insert
要素を追加したコレクション(配列またはオブジェクト)を作ります。
コレクションがオブジェクトの場合、要素の上書きはしません。
insert(0, "a", [0, 1, 2]) // --> ["a", 0, 1, 2]
insert(3, "a", [0, 1, 2]) // --> [0, 1, 2, "a"]
insert("a", "a", {x: 1, y: 2}) // --> {x: 1, y: 2, a: "a"}
insert("x", "x", {x: 1, y: 2}) // --> エラー
パラメーター
名前 | 型 | デフォルト | 説明 |
---|---|---|---|
index | number|string | 省略不可 | 要素を追加する位置。第3引数のコレクションが配列の場合は配列の添字となる整数、オブジェクトの場合はプロパティ名となる文字列 |
value | any | 省略不可 | コレクションに追加する要素 |
collection | array|object | 省略不可 | 要素を追加するコレクション |
返却値
名前 | 型 | 説明 |
---|---|---|
collection | array|object | 要素が追加されたコレクション |
remove
要素を削除したコレクション(配列またはオブジェクト)を作ります。
削除すべき要素が見つからない場合はエラーが発生します。
remove(0, [0, 1, 2]) // --> [1, 2]
remove(3, [0, 1, 2]) // --> エラー
remove("x", {x: 1, y: 2}) // --> {y: 2}
remove("a", {x: 1, y: 2}) // --> エラー
パラメーター
名前 | 型 | デフォルト | 説明 |
---|---|---|---|
index | number|string | 省略不可 | 削除する要素の位置。第2引数のコレクションが配列の場合は配列の添字となる整数、オブジェクトの場合はプロパティ名となる文字列 |
collection | array|object | 省略不可 | 要素を削除するコレクション |
返却値
名前 | 型 | 説明 |
---|---|---|
collection | array|object | 要素が削除されたコレクション |
update
要素を上書きしたコレクション(配列またはオブジェクト)を作ります。
複数の要素を同時に上書きできます。
update(0, "a", [0, 1, 2]) // --> ["a", 1, 2]
update(0, "a", 2, "b", [0, 1, 2]) // --> ["a", 1, "b"]
update(3, "a", [0, 1, 2]) // --> エラー
update("x", "a", {x: 0, y: 1, z: 2}) // --> {x: "a", y: 1, z: 2}
update("x", "a", "z", "b", {x: 0, y: 1, z: 2}) // --> {x: "a", y: 1, z: "b"}
update("a", "a", {x: 0, y: 1, z: 2}) // --> エラー
パラメーター
名前 | 型 | デフォルト | 説明 |
---|---|---|---|
index | number|string | 省略不可 | 要素を上書きする位置。最終引数のコレクションが配列の場合は配列の添字となる整数、オブジェクトの場合はプロパティ名となる文字列 |
value | any | 省略不可 | コレクションに追加する要素。keyとvalueのペアを複数回指定できます。 |
collection | array|object | 省略不可 | 上書き対象となるコレクション |
返却値
名前 | 型 | 説明 |
---|---|---|
collection | array|object | 要素が上書きされたコレクション |
sort
要素の並び順を変えた配列を作ります。
並び替えの仕様はjavascript標準のArray#sortと同じです。安定ソートです。
const less = (a, b) => (a - b)
sort(less, [5, 2, 4, 1, 3]) // --> [1, 2, 3, 4, 5]
パラメーター
名前 | 型 | デフォルト | 説明 |
---|---|---|---|
compare | 関数 | 省略不可 | 2つの要素aとbを比較して、その結果に応じて数値を返却する関数。 aがbより先の場合は0より小さい数を返却 aとbの順序が同じ場合(順序を変えない場合)は0を返却 aがbより後の場合は0より大きい数を返却 |
collection | array | 省略不可 | 並び替えをする配列 |
返却値
名前 | 型 | 説明 |
---|---|---|
collection | array | 並び替えが行われた配列 |