JavaScript の配列にカーソル付けてみた
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ カーソル操作するライブラリです
いきなりですがカーソルってあると便利じゃないですか?
[1,2,3,4,5,6,7,8,9,10] のような配列があって ある変数 val の値を探して 配列的に次の要素の値が欲しいとします
(この例だと 直接 1 足せばいいだけですがそれは置いといてください)
↑ のコードを書かないといけない場面があって カーソルあればもっと綺麗にいけないかなと思って作ってみました
相変わらず最低限の機能だけでいいのにムダに豪華になってます
なのでコードはリンク先で!
http://var.blog.jp/t/lib/cursor.js
それでも メソッドチェーンなので前から読んでいけばいいので見やすいといえば見やすいかと思います
この例では 配列のメソッドとしてるのでわかりやすく毎回 cursor という文字がメソッド名についてます
カーソルを取り出して カーソルに対して メソッドチェーンするということもできるようにしています
cursorInit
カーソルを初期化します
具体的に言うと 0 になります
やらないと初期値は undefined なので一部のメソッドがおかしな動きをします
cursorEnd
カーソルを配列の最後の要素に持ってきます
具体的に言うと length - 1 の値にします
空配列だと -1 ではなく 0 です
cursorNext
カーソルを1つ次に進めます
引数があるとその数だけ進めます
-1 だと 1 つ戻ります
cursorPrev
カーソルを1つ前に戻します
引数があるとその数だけ戻します
-1 だと 1 つ進みます
cursorToIndex
引数で指定した値にカーソルを直接セットします
cursorToNext
今のカーソルの位置から第一引数で指定した条件に一致するところまでカーソルを進めます
第二引数に数値を入れると その数だけ進めます
いわゆる検索です
第一引数に関数を渡すと 実行した返り値が true になると一致したとみなします
cursorToPrev
今のカーソルの位置から第一引数で指定した条件に一致するところまでカーソルを戻します
cursorToNext の逆です
cursorFromFirst
cursorToNext の開始位置を配列の最初からにしたものです
いったん cursorInit をしなくていいです
cursorFromLast
cursorToPrev の開始位置を配列の最後からにしたものです
cursorFromFirst の逆です
cursorToNextMatch
cursorToNext の第一引数が関数でも実行しない版です
関数を検索するときに使えます
cursorToPrevMatch
cursorToPrev の第一引数が関数でも実行しない版です
cursorToNextMatch の逆です
cursorFromFirstMatch
cursorFromFirst の第一引数が関数でも実行しない版です
cursorToNextMatch の開始位置を配列の最初からにしたものです
関数を検索するときに使えます
いったん cursorInit をしなくていいです
cursorFromLastMatch
cursorFromLast の第一引数が関数でも実行しない版です
cursorToPrevMatch の開始位置を配列の最後からにしたものです
cursorFromFirstMatch の逆です
cursorGet
カーソルの位置を返します
cursorGetVal
カーソルが指す位置の値を返します
cursorPos
引数があれば その引数をカーソルの位置にセットします
cursorToIndex と一緒です
引数がなければ カーソルの位置を取り出します
cursorGet と一緒です
cursorNull
カーソルの指す値が null かを判断します
null だと true が返ります
cursorOutOfRange
カーソルの指す位置が 配列の範囲外かを判断します
0 未満や length 以上の場合に true になります
cursorNull では自分で null を入れた場所でも true となっているので範囲外かを判断するならこっちを使います
cursorValExists
cursorOutOfRange では範囲外かを調べますが これは値が存在するかを調べます
length を書き換えたり delete したりすると間が抜けている配列が作られます
今のカーソルが指す位置にデータが存在するかを判断します
データがあると true なので cursorNull や cursorOutOfRange とは逆になります
cursorInjectAfter
カーソル位置の要素の次にデータを挿入します
引数が複数あれば 複数追加されます
cursorInjectBefore
カーソル位置の要素の前にデータを挿入します
引数が複数あれば 複数追加されます
cursorRemove
カーソル位置のデータを取り除きます
配列は詰められるので抜けている要素はできません
もちろん length が 1 減ります
cursorSetVal
カーソルの指す位置のデータを上書きします
cursorReplace
カーソルの指す位置のデータを置き換えます
引数がなければ cursorRemove とおなじになります
引数が 1 つだと cursorSetVal とおなじになります
引数が複数だと 今のカーソルが指すデータがなくなって複数の値が入ります
length は増えます
cursorSlice
カーソル位置からスライスしたものを返します
第ニ引数が true だと カーソルが指す値を含めません
第一引数が正の数だと そこから後ろに向かって 引数の数の要素数の配列になります
負の数だと そこから前に向かって 引数の数の要素数の配列になります
0 だと 後ろ方向にすべての要素 -0 だと前方向にすべての要素になります
getCursor
カーソルインスタンスを取得します
カーソルインスタンスでは短いメソッド名で操作できます
メソッドチェーンが配列に対してではなくなるので カーソル操作後に そのままチェーンをつないで 配列メソッドを呼び出せなくなります
init
reset
cursorInit です
end
cursorEnd です
next
cursorNext です
prev
cursorPrev です
to
toIndex
set
cursorToIndex です
toNext
nextSearch
cursorToNext です
toPrev
prevSearch
cursorToPrev です
fromFirst
firstSearch
cursorFromFirst です
fromLast
lastSearch
cursorFromLast です
toNextMatch
nextMatch
cursorToNextMatch です
toPrevMatch
prevMatch
cursorToPrevMatch です
fromFirstMatch
firstMatch
cursorFromFirstPrevMatch です
fromLastMatch
lastMatch
cursorFromLastMatch です
get
cursorGet です
getVal
val
cursorGetVal です
pos
cursorPos です
null
isNull
cursorNull です
outOfRange
isOutOfRange
cursorOutOfRange です
valExists
isValExists
cursorValExists です
injectAfter
cursorInjectAfter です
injectBefore
cursorInjectBefore です
remove
cursorRemove です
setVal
cursorSetVal です
replace
cursorReplace です
slice
cursorSlice です
swap
cursorSwap です
以上です
いっぱいありましたね
cursor インスタンスにしたほうがメソッド名が短くて分かりやすい形になってます
配列だと 被らないようにと cursor つけて長くなってますから
カーソル使って出来そうで使いそうなのはほぼ全部そろってるんじゃないかと思います
ただ カーソル位置をスタックで保存してないので 移動前に戻せないのがちょっと不便かもしれないです
カーソルって最初と最後がちゃんと配列の範囲内にするべきなのかわからなかったので JavaScript らしく自由に どこまでもいけるようになってます 空配列に対して -1000 でも 80000 でも大丈夫です
最近作ってるよくわからないライブラリのような何かの中では 一番利用価値があるかもしれないです
[1,2,3,4,5,6,7,8,9,10] のような配列があって ある変数 val の値を探して 配列的に次の要素の値が欲しいとします
(この例だと 直接 1 足せばいいだけですがそれは置いといてください)
var arr = [1,2,3,4,5,6,7,8,9,10]
arr[arr.indexOf(val) + 1]
なんか見づらいし arr が2回あるのも微妙なところですarr[arr.indexOf(val) + 1]
↑ のコードを書かないといけない場面があって カーソルあればもっと綺麗にいけないかなと思って作ってみました
相変わらず最低限の機能だけでいいのにムダに豪華になってます
なのでコードはリンク先で!
http://var.blog.jp/t/lib/cursor.js
使い方
使い方はこうなります[1,2,3,4,5,6,7,8,9,10].cursorInit().cursorToNext(val).cursorNext(1).cursorGetVal()
なんか長くなってますねそれでも メソッドチェーンなので前から読んでいけばいいので見やすいといえば見やすいかと思います
この例では 配列のメソッドとしてるのでわかりやすく毎回 cursor という文字がメソッド名についてます
カーソルを取り出して カーソルに対して メソッドチェーンするということもできるようにしています
[1,2,3,4,5,6,7,8,9,10].getCursor().init().toNext(val).next(1).val()
メソッド一覧
メソッドはいっぱいあります配列のメソッド
Array.prototype への拡張ですcursorInit
カーソルを初期化します
具体的に言うと 0 になります
やらないと初期値は undefined なので一部のメソッドがおかしな動きをします
cursorEnd
カーソルを配列の最後の要素に持ってきます
具体的に言うと length - 1 の値にします
空配列だと -1 ではなく 0 です
cursorNext
カーソルを1つ次に進めます
引数があるとその数だけ進めます
-1 だと 1 つ戻ります
cursorPrev
カーソルを1つ前に戻します
引数があるとその数だけ戻します
-1 だと 1 つ進みます
cursorToIndex
引数で指定した値にカーソルを直接セットします
cursorToNext
今のカーソルの位置から第一引数で指定した条件に一致するところまでカーソルを進めます
第二引数に数値を入れると その数だけ進めます
いわゆる検索です
第一引数に関数を渡すと 実行した返り値が true になると一致したとみなします
cursorToPrev
今のカーソルの位置から第一引数で指定した条件に一致するところまでカーソルを戻します
cursorToNext の逆です
cursorFromFirst
cursorToNext の開始位置を配列の最初からにしたものです
いったん cursorInit をしなくていいです
cursorFromLast
cursorToPrev の開始位置を配列の最後からにしたものです
cursorFromFirst の逆です
cursorToNextMatch
cursorToNext の第一引数が関数でも実行しない版です
関数を検索するときに使えます
cursorToPrevMatch
cursorToPrev の第一引数が関数でも実行しない版です
cursorToNextMatch の逆です
cursorFromFirstMatch
cursorFromFirst の第一引数が関数でも実行しない版です
cursorToNextMatch の開始位置を配列の最初からにしたものです
関数を検索するときに使えます
いったん cursorInit をしなくていいです
cursorFromLastMatch
cursorFromLast の第一引数が関数でも実行しない版です
cursorToPrevMatch の開始位置を配列の最後からにしたものです
cursorFromFirstMatch の逆です
cursorGet
カーソルの位置を返します
cursorGetVal
カーソルが指す位置の値を返します
cursorPos
引数があれば その引数をカーソルの位置にセットします
cursorToIndex と一緒です
引数がなければ カーソルの位置を取り出します
cursorGet と一緒です
cursorNull
カーソルの指す値が null かを判断します
null だと true が返ります
cursorOutOfRange
カーソルの指す位置が 配列の範囲外かを判断します
0 未満や length 以上の場合に true になります
cursorNull では自分で null を入れた場所でも true となっているので範囲外かを判断するならこっちを使います
cursorValExists
cursorOutOfRange では範囲外かを調べますが これは値が存在するかを調べます
length を書き換えたり delete したりすると間が抜けている配列が作られます
今のカーソルが指す位置にデータが存在するかを判断します
データがあると true なので cursorNull や cursorOutOfRange とは逆になります
cursorInjectAfter
カーソル位置の要素の次にデータを挿入します
引数が複数あれば 複数追加されます
cursorInjectBefore
カーソル位置の要素の前にデータを挿入します
引数が複数あれば 複数追加されます
cursorRemove
カーソル位置のデータを取り除きます
配列は詰められるので抜けている要素はできません
もちろん length が 1 減ります
cursorSetVal
カーソルの指す位置のデータを上書きします
cursorReplace
カーソルの指す位置のデータを置き換えます
引数がなければ cursorRemove とおなじになります
引数が 1 つだと cursorSetVal とおなじになります
引数が複数だと 今のカーソルが指すデータがなくなって複数の値が入ります
length は増えます
cursorSlice
カーソル位置からスライスしたものを返します
第ニ引数が true だと カーソルが指す値を含めません
第一引数が正の数だと そこから後ろに向かって 引数の数の要素数の配列になります
負の数だと そこから前に向かって 引数の数の要素数の配列になります
0 だと 後ろ方向にすべての要素 -0 だと前方向にすべての要素になります
getCursor
カーソルインスタンスを取得します
カーソルインスタンスでは短いメソッド名で操作できます
メソッドチェーンが配列に対してではなくなるので カーソル操作後に そのままチェーンをつないで 配列メソッドを呼び出せなくなります
カーソルのメソッド
init
reset
cursorInit です
end
cursorEnd です
next
cursorNext です
prev
cursorPrev です
to
toIndex
set
cursorToIndex です
toNext
nextSearch
cursorToNext です
toPrev
prevSearch
cursorToPrev です
fromFirst
firstSearch
cursorFromFirst です
fromLast
lastSearch
cursorFromLast です
toNextMatch
nextMatch
cursorToNextMatch です
toPrevMatch
prevMatch
cursorToPrevMatch です
fromFirstMatch
firstMatch
cursorFromFirstPrevMatch です
fromLastMatch
lastMatch
cursorFromLastMatch です
get
cursorGet です
getVal
val
cursorGetVal です
pos
cursorPos です
null
isNull
cursorNull です
outOfRange
isOutOfRange
cursorOutOfRange です
valExists
isValExists
cursorValExists です
injectAfter
cursorInjectAfter です
injectBefore
cursorInjectBefore です
remove
cursorRemove です
setVal
cursorSetVal です
replace
cursorReplace です
slice
cursorSlice です
swap
cursorSwap です
以上です
いっぱいありましたね
cursor インスタンスにしたほうがメソッド名が短くて分かりやすい形になってます
配列だと 被らないようにと cursor つけて長くなってますから
カーソル使って出来そうで使いそうなのはほぼ全部そろってるんじゃないかと思います
ただ カーソル位置をスタックで保存してないので 移動前に戻せないのがちょっと不便かもしれないです
カーソルって最初と最後がちゃんと配列の範囲内にするべきなのかわからなかったので JavaScript らしく自由に どこまでもいけるようになってます 空配列に対して -1000 でも 80000 でも大丈夫です
最近作ってるよくわからないライブラリのような何かの中では 一番利用価値があるかもしれないです