ko.utils（配列編）

これはKnockoutJSアドベントカレンダーの記事です。

KnockoutJS Advent Calendar 2014 - Qiita

今日は Knockout の便利機能が入った ko.utils について適当に紹介します。

今回は配列編。

紹介するのは以下のメソッドです。

• ko.utils.arrayForEach

• ko.utils.arrayFirst

• ko.utils.arrayFilter

• ko.utils.arrayGetDistinctValues

• ko.utils.arrayMap

• ko.utils.arrayPushAll

• ko.utils.arrayRemoveItem

ちなみにソースコードはここです。

https://github.com/knockout/knockout/blob/master/src/utils.js

• ko.utils.arrayForEach

配列をぐるぐるします。

サンプル

var years = [1950, 1960, 1970, 1980];
  ko.utils.arrayForEach(years, function(item, index){
    console.log(index + " : " + item);
});

結果

0 : 1950
1 : 1960
2 : 1970
3 : 1980

• ko.utils.arrayFirst

配列の中で最初に条件に一致した値を返します。

サンプル

var strArray = ["a1", "b2", "c3", "d4"];
var result = ko.utils.arrayFirst(strArray, function(value){ return value.charAt(0) === "b"});
console.log(result);

結果

b2

• ko.utils.arrayFilter

配列を指定した条件でフィルタした結果の配列を返します。

サンプル

var result = ko.utils.arrayFilter(["a", "b", "c", "d", "e", "f"], function (item, index) {
  return index % 2 == 0;
});
console.log(result);

結果

["a", "c", "e"]

• ko.utils.arrayGetDistinctValues

配列の中の重複しない値を返します。

var result = ko.utils.arrayGetDistinctValues(["a", "b", "b", "c", "c"]);
console.log(result);

結果

["a", "b", "c"]

• ko.utils.arrayIndexOf

最初に見つかった配列の値のインデックスを返します。
見つからなかった場合は -1 を返します。

var result1 = ko.utils.arrayIndexOf(["a", "b", "c", "d", "c"], "c");
console.log(result1);
var result2 = ko.utils.arrayIndexOf(["a", "b", "c"], "d");
console.log(result2);

結果

2
-1

• ko.utils.arrayMap

配列の中の各要素に対して特定の処理を行った配列を返します。

var result = ko.utils.arrayMap([1, 2, 3, 4, 5], function(item, index){
  return item * 2;
});
console.log(result);

結果

[2, 4, 6, 8, 10]

• ko.utils.arrayPushAll

配列に他の配列を追加します。

サンプル

var targetArray = [1,2,3];
var extraArray = ["a", "b", "c"];
ko.utils.arrayPushAll(targetArray, extraArray);
console.log(targetArray);

結果

[1, 2, 3, "a", "b", "c"]

• ko.utils.arrayRemoveItem

最初に一致した値を配列から削除します。（一つだけ）

サンプル

var input = ["a", "b", "c", "b", "e"];
ko.utils.arrayRemoveItem(input, "b");
console.log(input);

結果

["a", "c", "b", "e"]

ここのブログと内容がかぶったけどCoffeeではなくJavaScriptで書いたのでご愛嬌。
http://weathercook.hatenadiary.jp/entry/2013/01/06/211720