前書き
配列オブジェクト
Array は JavaScript ネイティブオブジェクトで、新しい配列を生成するために使用できるコンストラクタです。
var c = new Array(0x2);
var c = Array(0x2);
c.length;
c;常に新しいものを追加することをお勧めします。
Array()コンストラクタには大きな欠点があり、引数が異なると挙動に一貫性がなくなります。したがって、このコンストラクタを使用して新しい配列を生成することは推奨しません。
var foo = new Array(0x1, 0x2);
var foo = [
0x1,
0x2
];静的メソッド
Array.isArray()
引数が配列であるかどうかを示すブール値を返します。typeof 演算子がないことを補います。
typeof演算子は配列の型がObjectであることを示すだけですが、Array.isArrayメソッドは配列を識別します。
var foo = [
0x1,
0x2,
0x3
];
typeof foo;
Array.isArray(foo);方法論の例
valueOf(), toString()
valueOfメソッドはすべてのオブジェクトが持っているメソッドで、そのオブジェクトに値が求められていることを示します。valueOfメソッドはオブジェクト間で一貫性がなく、配列のvalueOfメソッドは配列そのものを返します。
toStringメソッドもオブジェクトに共通で、配列のtoStringメソッドは配列の文字列形式を返します。
var b = [
0x1,
0x2,
0x3
];
b.valueOf();
b.toString();
var b = [
0x1,
0x2,
0x3,
[
0x4,
0x5,
0x6
]
];
b.toString();push(), pop()
- push メソッドは、配列の末尾にひとつ以上の要素を追加し、新しい要素が追加された後の配列の長さを返すために使用します。
- pop メソッドは、配列の最後の要素を削除してその要素を返すために使用します。
- 空の配列に対して pop メソッドを使用してもエラーは発生しませんが、未定義が返されます。
shift()この場合、unshift()
- shift() メソッドは、配列の最初の要素を削除してその要素を返すために使用します。
- unshift() メソッドは、配列の最初の位置に要素を追加し、新しい要素を追加した後の配列の長さを返すために使用します。
join()
join() メソッドは、指定した引数を区切り文字として、すべての配列メンバを連結した単一の文字列を返します。引数を指定しなかった場合の既定値はカンマ区切りです。
callメソッドを使えば、このメソッドは文字列や配列のようなオブジェクトにも使えます。
var bar = [
0x1,
0x2,
0x3,
0x4
];
bar.join('\x20');
bar.join('\x20|\x20');
bar.join();
Array.prototype.join.call('hello', '-');
var c = {
0x0: 'a',
0x1: 'b',
'length': 0x2
};
Array.prototype.join.call(c, '-');concat()
concat メソッドは、複数の配列を結合するために使用します。新しい配列のメンバを受け取り、それを元の配列のメンバの後ろに追加して新しい配列を返します。
引数として配列だけでなく、concat は他の型の値も引数として受け取り、対象の配列の末尾に追加します。
[].concat({ 'a': 0x1 }, { 'b': 0x2 })[0x2].concat({ 'a': 0x1 })[0x1, 0x2, 0x3].concat(0x4, 0x5, 0x6);配列のメンバにオブジェクトが含まれている場合、concat メソッドは現在の配列のシャローコピーを返します。シャローコピー」とは、新しい配列がオブジェクトへの参照をコピーすることを意味します。
var foo = { 'a': 0x1 };
var b = [foo];
var c = b.concat();
foo.a = 0x2;
c[0x0].a;元の配列にはオブジェクトが含まれ、concatメソッドで生成される新しい配列にはそのオブジェクトへの参照が含まれます。つまり、元のオブジェクトが変更されると、新しい配列も変更されます。
reverse()
reverse メソッドは、配列の要素を反転して変更後の配列を返すために使用します。
slice()
slice() メソッドは、対象となる配列の一部を取り出して新しい配列を返すもので、 元の配列は変更しません。
第1引数は開始位置、第2引数は終了位置です。第2引数を省略すると、元の配列の最後のメンバまで戻ります。
var foo = [
'a',
'b',
'c'
];
foo.slice(0x0);
foo.slice(0x1);
foo.slice(0x1, 0x2);
foo.slice(0x2, 0x6);
foo.slice();slice() メソッドの引数が負の場合は、逆数が計算される場所を示します。
第一引数が配列の長さ以上、または第二引数が配列の長さ未満の場合は空の配列を返します。
slice()メソッドの重要な用途は、配列のようなオブジェクトを本当の配列に変えることです。
Array.prototype.slice.call({
0x0: 'a',
0x1: 'b',
'length': 0x2
});
Array.prototype.slice.call(document.querySelectorAll('div'));
Array.prototype.slice.call(arguments);splice()
splice() メソッドを使用すると、元の配列の一部を削除し、 削除した位置に新しい配列メンバを追加することができます。
splice の最初の引数は削除の開始位置で、2 番目の引数は削除する要素の数です。さらに引数が続く場合は、配列に挿入される新しい要素です。
arr.splice(start, count, addElement1, addElement2, ...);
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
splice メ ソ ッ ド の第二引数には、 要素を単に挿入す る 場合は 0 を指定 し ます。
sort()
sort メソッドは、配列のメンバをソートします。デフォルトでは、辞書順にソートされます。
sort() メソッドはサイズ順ではなく、辞書順でソートします。つまり、最初に値を文字列に変換してから辞書順に比較するので、101 が 11 よりも先になります。
sortメソッドに独自の方法でソートさせたい場合は、引数として関数を渡します。
[].sort(function (foo, c) {
return foo - c;
});sort 引数関数は、比較する 2 つの配列メンバを表す 2 つの引数をとります。この関数の戻り値が 0 より大きい場合は、最初の要素が 2 番目の要素の後ろにあることを意味します。
カスタムソート関数は値を返すべきです。そうでないと、ブラウザによって実装が異なる可能性があり、すべての結果が一貫しているという保証はありません。
// bad
[1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => a > b)
// good
[1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => a - b)
map()
mapメソッドは、順番にパラメータ関数に渡された配列のすべてのメンバーとなり、その後、毎回新しい配列の実装の結果を返します。実行結果は、元の配列を変更せずに、新しい配列として返されます。
var obj = [
0x1,
0x2,
0x3
];
obj.map(function (b) {
return b + 0x1;
});
obj;map メソッドは、引数として関数を受け入れます。この関数が呼び出されると、map メソッドは 3 つの引数 (現在のメンバ、現在の位置、および配列自体) を渡します。
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
mapこのメソッドのコールバック関数には3つの引数があり、elemは現在のメンバの値、indexは現在のメンバの位置、arrは元の配列である。
mapメソッドは、コールバック関数内で this変数をバインドするための2番目のパラメータを受け取ることもできます。
var a = [
'a',
'b',
'c'
];
[
0x1,
0x2
].map(function (b) {
return this[b];
}, a);配列にヌル位置がある場合、mapメソッドのコールバック関数はその位置では実行されず、配列のヌル位置をスキップします。
forEach()
forEach メソッドは、配列のすべてのメンバに対して順番に引数関数を実行するという点で、map メソッドと非常によく似ています。しかし、forEach メソッドは値を返さず、データを操作するためだけに使用されます。つまり、配列の走査の目的が戻り値を得ることであれば map メソッドを使用し、そうでなければ forEach メソッドを使用します。
また、この関数は3つの引数（現在値、現在位置、配列全体）を受け取ります。
function foo(bar, obj, a) {
console.log('[' + obj + ']\x20=\x20' + bar);
}
[
0x2,
0x5,
0x9
].forEach(foo);forEachメソッドは、パラメータ関数の this変数にバインドする第2引数を取ることもできます。
var foo = [];
[
0x1,
0x2,
0x3
].forEach(function (b) {
this.push(b * b);
}, foo);
foo;コールバック関数内の thisキーワードはoutを指します。
forEach メソッドを中断することはできず、常にすべてのメンバを走査します。特定の条件が満たされたときに走査を中断したい場合は、for ループを使用します。
forEach メソッドは、配列の空白もスキップします。
filter()
filterメソッドは、配列のメンバをフィルタリングするために使用され、新しい配列のメンバの条件を満たして返します。
その引数は、関数を実行するすべての配列のメンバーを順番に、戻り値は、新しい配列の真のメンバーを返すことです。
[1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
// [4, 5]
filter メソッドの引数関数は、現在のメンバ、現在の位置、および配列全体の 3 つの引数を取ることができます。
[
0x1,
0x2,
0x3,
0x4,
0x5
].filter(function (b, bar, c) {
return bar % 0x2 === 0x0;
});この引数は、引数関数内で this変数をバインドするために使用されます。
var obj = { MAX: 3 };
var myFilter = function (item) {
if (item > this.MAX) return true;
};
var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj) // [8, 4, 9]
フィルターmyFilterには内部変数 thisがあり、フィルターメソッドの2番目のパラメーターobjによってバインドされ、3以上のメンバーを返すことができます。
some(), every()
このふたつのメソッドは "assert" と似ており、配列のメンバが特定の条件を満たすかどうかを boolean 値で返します。
この関数は、現在のメンバ、現在の位置、配列全体の3つの引数を受け取り、ブール値を返します。
someメソッドは、1つのメンバの返り値が真である限り、someメソッド全体に対して真を返し、そうでない場合は偽を返します。
var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
return elem >= 3;
});
// true
everyメソッドは、すべてのメンバーの戻り値がtrueであればeveryメソッド全体に対してtrueを返し、そうでなければfalseを返します。
var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
return elem >= 3;
});
// false
someメソッドとeveryメソッドは第2引数を取ることもでき、この引数はパラメータ関数内で this変数をバインドするために使われます。
reduce() および reduceRight()
reduce メソッドと reduceRight メソッドは、配列の各メンバーを順番に処理し、最終的に 1 つの値に累積します。reduce は左から右へ処理し、 reduceRight は右から左へ処理するという違いがありますが、それ以外は同じです。
[
0x1,
0x2,
0x3,
0x4,
0x5
].reduce(function (bar, obj) {
console.log(bar, obj);
return bar + obj;
});reduce メソッドと reduceRight メソッドの最初の引数は関数です。この関数は、次の 4 つの引数を受け入れます。
- 累積変数、デフォルトは配列の最初のメンバー
- 現在の変数、デフォルトは配列の2番目のメンバ
- 現在の位置
[1, 2, 3, 4, 5].reduce(function (a, b) {
return a + b;
}, 10);
// 25
引数aの初期値が10であることを指定し、bが配列の最初のメンバーから走査されるようにする。
function bar(a, b) {
return a - b;
}
[
0x3,
0x2,
0x1
].reduce(bar)[0x3, 0x2, 0x1].reduceRight(bar);このふたつのメソッドは配列を走査するので、 実際には走査に関連する操作も行うことができます。たとえば、最も長い文字数を持つ配列のメンバを見つけるなどです。
function b(obj) {
return obj.reduce(function (bar, c) {
return c.length & gt;
bar.length ? c : bar;
}, '');
}
b([
'aaa',
'bb',
'c'
]);indexOf(), lastIndexOf()
indexOf メソッドは、指定した要素が配列内で最初に現れる位置を返します。
var foo = [
'a',
'b',
'c'
];
foo.indexOf('b');
foo.indexOf('y');indexOfメソッドには、検索の開始位置を示す第2パラメータを指定することもできます。
lastIndexOf メソッドは、配列内で指定した要素が最後に出現した場所を返します。
これらの2つのメソッドは、NaNの位置を検索するために使用することはできない、すなわち、配列メンバがNaNを含むかどうかを決定することはできないことに注意してください。
これは、内部的にはこれら2つのメソッドは厳密な等号演算子を使って比較され、NaNはそれ自身と等しくない唯一の値だからです。
連鎖
var a = [
{
'name': 'tom',
'email': 'tom@example.com'
},
{
'name': 'peter',
'email': 'peter@example.com'
}
];
a.map(function (c) {
return c.email;
}).filter(function (bar) {
return /^t/.test(bar);
}).forEach(function (b) {
console.log(b);
});梱包対象物
オブジェクトはJavaScript言語の主要なデータ型であり、3つのプリミティブ型（数値、文字列、ブーリアン）の値も、特定の条件下で自動的にオブジェクト、またはプリミティブ型の「ラップオブジェクト」に変換されます。「ラッパーオブジェクト
これら3つのネイティブ・オブジェクトは、プリミティブ型の値をオブジェクトに変換することができます。
var obj = new Number(0x7b);
var b = new String('abc');
var a = new Boolean(!false);
typeof obj;
typeof b;
typeof a;
obj === 0x7b;
b === 'abc';
a === !false;ラップされたオブジェクトは、第一に、"オブジェクト "型がJavaScriptのすべての値をカバーできるように、言語が共通のデータモデルを持つように、第二に、プリミティブ型の値が独自のメソッドを呼び出す方法を持つように設計されています。
Number、String、Booleanの3つのネイティブオブジェクトは、コンストラクタとしてではなく、通常の関数として呼び出される場合、任意の型の値を数値、文字列、ブール値に変換するためによく使用されます。
要約すると、これらの3つのオブジェクトは、コンストラクタとして使用すると、プリミティブ型の値をオブジェクトに変換することができ、通常の関数として使用すると、任意の型の値をプリミティブ型の値に変換することができます。
方法論の例
つのラッパー・オブジェクトは、それぞれいくつかのインスタンス・メソッドを提供します。これらは共通して、Object オブジェクトから継承されたメソッド、 valueOf() と toString() を共有しています。
valueOf()
valueOf() メソッドは、ラップされたオブジェクト・インスタンスに対応する元の型の値を返します。
new Number(0x7b).valueOf();
new String('abc').valueOf();
new Boolean(!false).valueOf();toString()
toString() メソッドは、対応する文字列形式を返します。
new Number(0x7b).toString();
new String('abc').toString();
new Boolean(!false).toString();プリミティブ型からインスタンスオブジェクトへの自動変換
プリミティブ型の値が自動的にラッパー・オブジェクトとして呼び出される、つまり、ラッパー・オブジェクトのプロパティやメソッドが呼び出される場合があります。この場合、JavaScriptエンジンは自動的にプリミティブ型の値をラッパー・オブジェクトのインスタンスに変換し、使用後すぐにインスタンスを破棄します。
例えば、文字列は length プロパティを呼び出すことができ、これは文字列の長さを返します。
var b = 'abc';
b.length;
var a = new String(b);
a.length;abcは文字列であり、それ自体がオブジェクトではないため、length属性を呼び出すことはできません。JavaScriptエンジンは、自動的にlength属性が呼び出されるラップされたオブジェクトに変換します。呼び出しが終わると、一時オブジェクトは破棄されます。これは、元の型からインスタンスオブジェクトへの自動変換と呼ばれます。
一方、呼び出しが終了すると、ラッパー・オブジェクトのインスタンスは自動的に破棄されます。
これは、文字列のプロパティに対する次の呼び出しが、前の呼び出しで生成されたオブジェクトではなく、新しく生成されたオブジェクトを実際に呼び出すことを意味します。
文字列にプロパティを追加したい場合は、そのプロトタイプ・オブジェクトであるString.prototypeで定義するしかありません。
カスタマイズされた方法論
ネイティブのインスタンス・メソッドに加えて、ラッパー・オブジェクトは、プリミティブ型の値を直接呼び出すためのカスタム・メソッドやプロパティを持つこともできます。
例えば、文字列と数値を2倍にする新しいdoubleメソッドを追加することができます。
String.prototype.bar = function () {
return this.valueOf() + this.valueOf();
};
'abc'.bar();
Number.prototype.bar = function () {
return this.valueOf() + this.valueOf();
};
0x7b.bar();ブール値オブジェクト
Booleanオブジェクトは、JavaScriptの3つのラッパー・オブジェクトのうちの1つです。コンストラクタとして、主にラッパー・オブジェクトのブール値のインスタンスを生成するために使われます。
var foo = new Boolean(!false);
typeof foo;
foo.valueOf();型変換のためのブール関数
Booleanオブジェクトは、コンストラクタとしてだけでなく、それ自体で任意の値をBooleanに変換するために使用することができます。この時点でBooleanは単なる道具的なメソッドです。
また、double no 演算子を使用して、任意の値をブール値に変換することも可能です。
