KnowHub

#配列オブジェクト

コンストラクター

「Array」はネイティブ JavaScript オブジェクトであり、新しい配列を生成するために使用できるコンストラクターです。

var arr = 新しい配列(2);
arr.length // 2
arr // [空×2]

上記のコードでは、Array() コンストラクターのパラメーター 2 は、2 つのメンバーを持つ配列を生成することを意味し、各位置は null 値です。

「new」キーワードを使用しない場合でも、結果は同じになります。

var arr = 配列(2);
// と同等
var arr = 新しい配列(2);

セマンティック上の理由から、また他のコンストラクターの使用法との一貫性を保つために、常に「new」を追加することをお勧めします。

Array() コンストラクタには大きな欠陥があります。パラメータの数が異なると、動作に一貫性がなくなる可能性があります。

// パラメータがない場合は空の配列を返す
new Array() // []

// 返される新しい配列の長さを示す単一の正の整数パラメータ
新しい配列(1) // [空]
new Array(2) // [空 x 2]

// 正ではない整数値がパラメータとして使用される場合、エラーが報告されます。
new Array(3.2) // RangeError: 配列の長さが無効です
new Array(-3) // RangeError: 配列の長さが無効です

// パラメータとしての単一の数値以外の値 (文字列、ブール値、オブジェクトなど)、
//このパラメータは返される新しい配列のメンバーです
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]

// 複数のパラメータがある場合、すべてのパラメータは返される新しい配列のメンバーになります。
新しい配列(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']

ご覧のとおり、コンストラクターとしての Array() は非常に一貫性のない動作をします。したがって、新しい配列の生成にこれを使用することはお勧めできません。配列リテラルを直接使用することをお勧めします。

// 悪い
var arr = 新しい配列(1, 2);

// 良い
var arr = [1, 2];

引数が正の整数の場合、返される配列のすべてのメンバーは空になることに注意してください。読み込むと「unknown」が返されますが、実際にはこの位置には値がありません。このとき、length属性は読み取れますが、キー名は取得できません。

var a = 新しい配列(3);
var b = [未定義、未定義、未定義];

a.length // 3
b.length // 3

a[0] // 未定義
b[0] // 未定義

// false の 0
bの0 // true

上記のコードでは、「a」は「Array()」によって生成された長さ 3 の空の配列であり、「b」は 3 つのメンバーがすべて「未定義」である配列です。これら 2 つの配列は異なります。キーの値を読み取ると、a と b は両方とも unknown を返しますが、a のキー名 (メンバーのシリアル番号) は空で、b のキー名には値があります。

静的メソッド

配列.isArray()

Array.isArray メソッドは、パラメータが配列であるかどうかを示すブール値を返します。これにより、「typeof」演算子の欠点を補うことができます。

var arr = [1, 2, 3];

typeof arr // "オブジェクト"
Array.isArray(arr) // true

上記のコードでは、typeof 演算子は配列の型が Object であることのみを示すことができますが、Array.isArray メソッドは配列を識別できます。

##インスタンスメソッド

valueOf()、toString()

valueOf メソッドはすべてのオブジェクトが所有するメソッドであり、オブジェクトを評価することを意味します。異なるオブジェクトの valueOf メソッドは一貫性がありません。配列の valueOf メソッドは配列自体を返します。

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

toString メソッドもオブジェクトの一般的なメソッドです。配列の toString メソッドは配列の文字列形式を返します。

var arr = [1, 2, 3];
arr.toString() // "1,2,3"

var arr = [1, 2, 3, [4, 5, 6]];
arr.toString() // "1,2,3,4,5,6"

プッシュ()、ポップ()

「push」メソッドは、配列の末尾に 1 つ以上の要素を追加するために使用され、新しい要素を追加した後の配列の長さを返します。このメソッドは元の配列を変更することに注意してください。

var arr = [];

arr.push(1) // 1
arr.push('a') // 2
arr.push(true, {}) // 4
arr // [1, 'a', true, {}]

上記のコードは、「push」メソッドを使用して 4 つのメンバーを配列に追加します。

pop メソッドは、配列の最後の要素を削除し、その要素を返すために使用されます。このメソッドは元の配列を変更することに注意してください。

var arr = ['a', 'b', 'c'];

arr.pop() // 'c'
arr // ['a', 'b']

空の配列に対して pop メソッドを使用すると、エラーは報告されませんが、unknown が返されます。

[].pop() // 未定義

「push」と「pop」は「後入れ先出し」スタック構造を形成するために一緒に使用されます。

var arr = [];
arr.push(1, 2);
arr.push(3);
arr.pop();
arr // [1, 2]

上記のコードでは、「3」は最後に配列に入りますが、最初に配列から出ます。

シフト()、シフト解除()

shift() メソッドは、配列の最初の要素を削除し、その要素を返すために使用されます。このメソッドは元の配列を変更することに注意してください。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

上記のコードでは、shift() メソッドを使用した後、元の配列が変更されています。

shift() メソッドは配列を走査してクリアできます。

var リスト = [1, 2, 3, 4];
var 項目;

while (item = list.shift()) {
  コンソール.ログ(項目);
}

リスト // []

上記のコードは、list.shift() メソッドを使用して、一度に 1 つの要素を取り出して配列を走査します。前提として、配列要素は '0' または 'false' に等しいブール値を持つ要素にすることはできないため、そのような走査はあまり信頼できません。

push() と shift() は、「先入れ先出し」キュー構造 (キュー) を形成するために一緒に使用されます。

unshift() メソッドは、配列の最初の位置に要素を追加するために使用され、新しい要素を追加した後の配列の長さを返します。このメソッドは元の配列を変更することに注意してください。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

unshift() メソッドは複数のパラメータを受け入れることができ、それらのパラメータはターゲット配列の先頭に追加されます。

var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]

参加する（）

join() メソッドは、指定されたパラメータを区切り文字として使用して、すべての配列メンバーを文字列に連結して返します。パラメータを指定しない場合、デフォルトでカンマが使用されます。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

配列メンバーが「未定義」、「null」、または空の場合、空の文字列に変換されます。

[未定義、null].join('#')
// '#'

['a',, 'b'].join('-')
// 'a--b'

このメソッドは、「call」メソッドを介して文字列または配列のようなオブジェクトに対しても使用できます。

Array.prototype.join.call('hello', '-')
// "こんにちは"

var obj = { 0: 'a'、1: 'b'、長さ: 2 };
Array.prototype.join.call(obj, '-')
// 'a-b'

###concat()

concat メソッドは複数の配列を結合するために使用されます。新しい配列のメンバーを元の配列のメンバーの末尾に追加し、元の配列を変更せずに新しい配列を返します。

['hello'].concat(['world'])
// ["こんにちは世界"]

['hello'].concat(['world'], ['!'])
// ["こんにちは世界"、 "！"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a:1})
// [2, {a: 1}]

パラメータとしての配列に加えて、「concat」はターゲット配列の末尾に追加される他のタイプの値もパラメータとして受け入れます。

[1, 2, 3].concat(4, 5, 6)
// [1、2、3、4、5、6]

配列メンバーにオブジェクトが含まれている場合、「concat」メソッドは現在の配列の浅いコピーを返します。いわゆる「浅いコピー」とは、新しい配列がオブジェクトの参照をコピーすることを指します。

var obj = { a: 1 };
var oldArray = [obj];

var newArray = oldArray.concat();

obj.a = 2;
newArray[0].a // 2

上記のコードでは、元の配列にはオブジェクトが含まれており、「concat」メソッドによって生成された新しい配列にはこのオブジェクトへの参照が含まれています。したがって、元のオブジェクトを変更すると、それに応じて新しい配列も変更されます。

逆行する（）

「reverse」メソッドは、配列要素を反転し、変更された配列を返すために使用されます。このメソッドは元の配列を変更することに注意してください。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

スライス（）

slice() メソッドは、ターゲット配列の一部を抽出し、元の配列を変更せずに新しい配列を返すために使用されます。

arr.slice(開始、終了);

最初のパラメータは開始位置 (0 から始まり、返される新しい配列に含まれます) で、2 番目のパラメータは終了位置です (ただし、この位置の要素自体は含まれません)。 2 番目のパラメーターを省略した場合は、元の配列の最後のメンバーが返されます。

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

上記のコードでは、最後の例 slice() にはパラメーターがなく、実際には元の配列のコピーを返します。

slice() メソッドのパラメータが負の数の場合、それは逆数計算の位置を示します。

var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]

上記のコードでは、「-2」は逆数計算の 2 番目の位置を表し、「-1」は逆数計算の最初の位置を表します。

最初のパラメータが配列の長さ以上である場合、または 2 番目のパラメータが最初のパラメータより小さい場合は、空の配列が返されます。

var a = ['a', 'b', 'c'];
a.slice(4) // []
a.slice(2, 1) // []

slice() メソッドの重要な用途は、配列のようなオブジェクトを実際の配列に変換することです。

Array.prototype.slice.call({ 0: 'a', 1: 'b', 長さ: 2 })
// ['a', 'b']

Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(引数);

上記のコードのパラメータは配列ではありませんが、それらに対して call メソッドと slice() メソッドを呼び出すことで、実際の配列に変換できます。

スプライス()

splice() メソッドは、元の配列の一部のメンバーを削除し、削除された位置に新しい配列メンバーを追加するために使用されます。戻り値は削除された要素です。このメソッドは元の配列を変更することに注意してください。

arr.splice(start, count, addElement1, addElement2, ...);

splice の第 1 パラメータは削除開始位置 (0 から開始)、第 2 パラメータは削除する要素の数です。後でさらにパラメーターがある場合は、それらが配列に挿入される新しい要素であることを意味します。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

上記のコードは、元の配列の位置 4 から 2 つの配列メンバーを削除します。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]

上記のコードは、メンバーの削除に加えて、2 つの新しいメンバーも挿入します。

開始位置が負の場合は、逆数の位置から削除することを意味します。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(-4, 2) // ["c", "d"]

上記のコードは、最後から 4 番目の位置 c から 2 つのメンバーが削除されることを示しています。

単純に要素を挿入する場合は、「splice」メソッドの 2 番目のパラメータを「0」に設定できます。

var a = [1, 1, 1];

a.splice(1, 0, 2) // []
a // [1、2、1、1]

最初のパラメーターのみが指定された場合、元の配列を指定された位置で 2 つの配列に分割することと同じになります。

var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]

選別（）

「sort」メソッドは配列メンバーをソートします。デフォルトは辞書順です。ソート後、元の配列が変更されます。

['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[4, 3, 2, 1].sort()
// [1、2、3、4]

[11, 101].sort()
// [101, 11]

[10111, 1101, 111].sort()
// [10111, 1101, 111]

上記のコードの最後の 2 つの例には特別な注意が必要です。 sort() メソッドはサイズではなく、辞書順に並べ替えます。つまり、値は最初に文字列に変換され、次に辞書順に比較されるため、「101」は「11」より前にランクされます。

「sort」メソッドでカスタムの方法でソートしたい場合は、関数をパラメータとして渡すことができます。

[10111, 1101, 111].sort(関数 (a, b) {
  a - b を返します。
})
// [111、1101、10111]

上記のコードでは、sort のパラメーター関数自体が、比較される 2 つの配列メンバーを表す 2 つのパラメーターを受け入れます。この関数の戻り値が「0」より大きい場合は、最初のメンバーが 2 番目のメンバーの後にソートされることを意味し、それ以外の場合は、最初の要素が 2 番目の要素の前にソートされることを意味します。

[
  { 名前: "張三"、年齢: 30 }、
  { 名前: "李思"、年齢: 24 }、
  { 名前: "王五"、年齢: 28 }
].sort(関数 (o1, o2) {
  o1.age - o2.age を返します。
})
//[
// { 名前: "李思"、年齢: 24 },
// { 名前: "王五"、年齢: 28 },
// { 名前: "張三"、年齢: 30 }
//]

カスタム並べ替え関数は数値を返す必要があることに注意してください。そうでない場合、ブラウザごとに実装が異なる可能性があり、結果の一貫性は保証されません。

// 悪い
[1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => a > b)

// 良い
[1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => a - b)

上記のコードでは、前者の並べ替えアルゴリズムはブール値を返しますが、これはお勧めできません。後者は数値なので、その方が良い書き方です。

マップ()

map() メソッドは、配列のすべてのメンバーをパラメータ関数に順番に渡し、各実行の結果を新しい配列に返します。

変数番号 = [1, 2, 3];

数値.map(関数(n) {
  n + 1 を返します。
});
// [2、3、4]

数字
// [1、2、3]

上記のコードでは、「numbers」配列のすべてのメンバーがパラメーター関数を順番に実行し、実行結果が新しい配列を形成して、元の配列を変更せずに返します。

map() メソッドは関数をパラメータとして受け取ります。この関数が呼び出されると、map() メソッドは、現在のメンバー、現在の位置、および配列自体の 3 つのパラメーターを関数に渡します。

[1, 2, 3].map(function(elem,index,arr){
  要素 * インデックスを返します。
});
// [0、2、6]

上記のコードでは、「map()」メソッドのコールバック関数には 3 つのパラメータがあります。「elem」は現在のメンバーの値、「index」は現在のメンバーの位置、「arr」は元の配列です。 ([1, 2, 3] )。

map() メソッドは、コールバック関数内の this 変数をバインドするために使用される 2 番目のパラメータも受け入れることができます (詳細については、「this 変数」の章を参照してください)。

var arr = ['a', 'b', 'c'];

[1, 2].map(関数(e) {
  これを返します[e];
}、編）
// ['b', 'c']

上記のコードは、map() メソッドの 2 番目のパラメータを使用して、コールバック関数内の this オブジェクトを arr 配列に指します。

配列内にギャップがある場合、「map()」メソッドのコールバック関数はこの位置では実行されず、配列内のギャップをスキップします。

var f = function (n) { return 'a' };

[1, 未定義, 2].map(f) // ["a", "a", "a"]
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"]

上記のコードでは、map() メソッドは unknown と null をスキップしませんが、ギャップをスキップします。

forEach()

forEach() メソッドは map() メソッドに非常に似ており、配列のすべてのメンバーに対してパラメーター関数を順番に実行します。ただし、「forEach()」メソッドは値を返さず、データを操作するためにのみ使用されます。これは、配列トラバーサルの目的が戻り値を取得することである場合は map() メソッドを使用し、それ以外の場合は forEach() メソッドを使用することを意味します。

forEach() の使用法は map() メソッドと一致しており、このパラメーターは現在値、現在位置、配列全体の 3 つのパラメーターも受け入れます。

関数 log(要素、インデックス、配列) {
  console.log('[' + インデックス + '] = ' + 要素);
}

[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

上記のコードでは、forEach() は戻り値を取得するためではなく、内容を画面に出力するために配列を走査しているため、map() メソッドを使用する必要はありません。

forEach() メソッドは、パラメータ関数の this 変数をバインドする 2 番目のパラメータを受け入れることもできます。

var out = [];

[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}、 外）;

アウト // [1, 4, 9]

上記のコードでは、空の配列 out は forEach() メソッドの 2 番目のパラメーターです。その結果、コールバック関数内の this キーワードは out を指します。

forEach() メソッドは実行を中断できず、常にすべてのメンバーを走査することに注意してください。特定の条件が満たされたときにトラバースを中断したい場合は、「for」ループを使用します。

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) ブレーク;
  console.log(arr[i]);
}
// 1

上記のコードでは、配列の 2 番目のメンバーに到達すると実行が中断されます。 forEach() メソッドではこれを行うことはできません。

forEach() メソッドは、配列内の空の位置もスキップします。

var log = 関数 (n) {
  コンソール.log(n + 1);
};

[1、未定義、2].forEach(ログ)
// 2
//NaN
// 3

[1、null、2].forEach(log)
// 2
// 1
// 3

[1, , 2].forEach(ログ)
// 2
// 3

上記のコードでは、forEach() メソッドは unknown と null をスキップしませんが、ギャップをスキップします。

フィルター（）

filter() メソッドは配列メンバーをフィルタリングするために使用され、条件を満たすメンバーが新しい配列を形成して返します。

そのパラメータは関数であり、すべての配列メンバーが順番に関数を実行し、戻り結果が「true」であるメンバーが新しい配列を形成して返します。このメソッドは元の配列を変更しません。

[1, 2, 3, 4, 5].filter(関数 (要素) {
  戻り値 (要素 > 3);
})
// [4, 5]

上記のコードは、「3」より大きい配列メンバーを新しい配列として返します。

var arr = [0, 1, 'a', false];

arr.filter(ブール値)
// [1, "a"]

上記のコードでは、filter() メソッドは、ブール値が true である配列 arr のすべてのメンバーを返します。

filter() メソッドのパラメータ関数は、現在のメンバー、現在の位置、配列全体の 3 つのパラメータを受け入れることができます。

[1, 2, 3, 4, 5].filter(関数 (要素, インデックス, arr) {
  インデックスを返します % 2 === 0;
});
// [1、3、5]

上記のコードは、偶数の位置にあるメンバーで構成される新しい配列を返します。

filter() メソッドは、パラメータ関数内の this 変数をバインドするために使用される 2 番目のパラメータを受け入れることもできます。

var obj = {最大: 3 };
var myFilter = 関数 (項目) {
  if (item > this.MAX) は true を返します。
};

var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj) // [8, 4, 9]

上記のコードでは、フィルター myFilter() 内に this 変数があり、これは filter() メソッドの 2 番目のパラメーター obj によってバインドでき、3 より大きいメンバーを返します。

一部()、すべて()

これら 2 つのメソッドは「assert」に似ており、配列メンバーが特定の条件を満たしているかどうかを判断するためのブール値を返します。

これらは関数をパラメータとして受け入れ、すべての配列メンバーが順番に関数を実行します。この関数は、現在のメンバー、現在の位置、配列全体の 3 つのパラメーターを受け取り、ブール値を返します。

some メソッドは、1 つのメンバーの戻り値が true である限り、some メソッド全体の戻り値は true になり、それ以外の場合は false を返します。

var arr = [1, 2, 3, 4, 5];
arr.some(関数 (要素、インデックス、arr) {
  要素を返します >= 3;
});
// 真実

上記のコードでは、配列 arr のメンバーが 3 以上の場合、some メソッドは true を返します。

「every」メソッドのすべてのメンバーの戻り値は「true」であり、「every」メソッド全体が「true」を返します。それ以外の場合は「false」を返します。

var arr = [1, 2, 3, 4, 5];
arr.every(関数 (要素、インデックス、arr) {
  要素を返します >= 3;
});
// 間違い

上記のコードでは、配列 arr のすべてのメンバーが 3 以上であるわけではないため、false が返されます。

空の配列の場合、「some」メソッドは「false」を返し、「every」メソッドは「true」を返し、コールバック関数は実行されないことに注意してください。

関数 isEven(x) { return x % 2 === 0 }

[].some(isEven) // false
[].every(isEven) // true

some メソッドと every メソッドは、パラメーター関数内の this 変数をバインドするために使用される 2 番目のパラメーターも受け入れることができます。

###reduce()、reduceRight()

reduce() メソッドと reduceRight() メソッドは配列の各メンバーを順番に処理し、最終的に値に累積します。それらの違いは、reduce() は左から右 (最初のメンバーから最後のメンバーへ) に処理され、reduceRight() は右から左へ (最後のメンバーから最初のメンバーへ) 処理されることです。 、他のすべてはまったく同じです。

[1, 2, 3, 4, 5].reduce(関数 (a, b) {
  コンソール.log(a, b);
  a + b を返します。
})
// 1 2
// 3 3
// 6 4
// 10 5
//最終結果: 15

上記のコードでは、配列のすべてのメンバーの合計を見つけるために reduce() メソッドが使用されています。 reduce() のパラメータは関数であり、配列の各メンバーがこの関数を順番に実行します。配列に n 個のメンバーがある場合、このパラメーター関数は n - 1 回実行されます。

  • 最初の実行: a は配列 1 の最初のメンバー、b は配列 2 の 2 番目のメンバーです。
  • 2 回目の実行: a は前のラウンドの戻り値 3、b は 3 番目のメンバー 3 です。
  • 3 回目の実行: a は前のラウンドの戻り値 6、b は 4 番目のメンバー 4 です。
  • 4 回目の実行: a は前のラウンドの戻り値 10、b は 5 番目のメンバー 5 です。この時点で、すべてのメンバーの走査が完了し、メソッド全体の戻り値は最後のラウンド '15' の戻り値になります。

「reduce()」メソッドと「reduceRight()」メソッドの最初のパラメータは関数です。この関数は次の 4 つのパラメータを受け入れます。

  1. 累積変数。初めて実行されるときは、デフォルトで配列の最初のメンバーになりますが、それ以降の実行では、前のラウンドの戻り値になります。
  2. 現在の変数。初めて実行されるときは、デフォルトで配列の 2 番目のメンバーになりますが、その後実行されるたびに、それが次のメンバーになります。
  3. 現在の場所。 2 番目のパラメータ (現在の変数) の位置を示す整数。デフォルトは「1」です。
  4. 元の配列。

これら 4 つのパラメータのうち、最初の 2 つだけが必須で、最後の 2 つはオプションです。

[1, 2, 3, 4, 5].reduce(関数(
  a, // 累積変数、必須
  b, // 現在の変数、必須
  i, // 現在位置、オプション
  arr // 元の配列、オプション
) {
  // ... ...

累積変数の初期値を指定したい場合は、それを reduce() メソッドと reduceRight() メソッドの 2 番目のパラメータに入れることができます。

[1, 2, 3, 4, 5].reduce(関数 (a, b) {
  a + b を返します。
}、10);
// 25

上記のコードは、パラメーター a の初期値が 10 であることを指定しているため、配列は 10 から累積を開始し、最終結果は 25 になります。この時点で、「b」は配列の最初のメンバーからトラバースを開始し、パラメーター関数が 5 回実行されることに注意してください。

常に 2 番目のパラメーターを追加することをお勧めします。これにより、各配列メンバーが reduce() メソッドのパラメーター関数を順番に実行します。さらに、2 番目のパラメーターを使用すると、空の配列エラーを防ぐことができます。

関数 add(prev, cur) {
  前へ + 現在を返す;
}

[].reduce(追加)
// TypeError: 初期値のない空の配列のリデュース
[].reduce(add, 1)
// 1

上記のコードでは、空の配列は累積変数の初期値を取得できないため、reduce() メソッドはエラーを報告します。このとき、2 番目のパラメータを追加すると、常に値が返されるようになります。

以下は reduceRight() メソッドの例です。

関数減算(prev, cur) {
  前のカーソルを返します。
}

[3, 2, 1].reduce(subtract) // 0
[3, 2, 1].reduceRight(subtract) // -4

上記のコードでは、「reduce()」メソッドは「3」から「2」を引いてから「1」を引いたものと同等であり、「reduceRight」メソッドは「1」から「2」を引いてから「3」を引いたものと同等です。 `。

これら 2 つのメソッドは配列を走査するため、実際に走査関連の操作を行うために使用できます。たとえば、文字長が最も長い配列メンバーを検索します。

関数 findLongest(entries) {
  return returns.reduce(function (最長, エントリ) {
    return エントリの長さ > 最長の長さ エントリ : 最長 ?
  }, '');
}

findLongest(['aaa', 'bb', 'c']) // "aaa"

上記のコードでは、reduce() のパラメータ関数は、文字長の長い方の配列メンバーを累積値として使用します。この結果、すべてのメンバーを走査した後、累積値は文字長が最も長いメンバーになります。

###indexOf()、lastIndexOf()

indexOf メソッドは、配列内で指定された要素が最初に出現する位置を返します。出現しない場合は -1 を返します。

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1
a.indexOf('y') // -1

indexOf メソッドは、検索の開始位置を示す 2 番目のパラメーターを受け入れることもできます。

['a', 'b', 'c'].indexOf('a', 1) // -1

上記のコードは、位置 1 から開始して文字 a を検索します。結果は -1 となり、文字が見つからなかったことを示します。

lastIndexOf メソッドは、配列内で指定された要素が最後に出現する位置を返します。出現しない場合は -1 を返します。

var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1

これら 2 つのメソッドは、「NaN」の位置の検索には使用できないことに注意してください。つまり、配列メンバーに「NaN」が含まれているかどうかを判断することはできません。

[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1

これは、これら 2 つのメソッドが内部的に比較に厳密等価演算子 (===) を使用しており、それ自体と等しくない値が NaN だけであるためです。

チェーンの使用法

上記の配列メソッドの多くは配列を返すため、チェーンで使用できます。

var ユーザー = [
  {名前: 'tom'、メールアドレス: 'tom@example.com'}、
  {名前: 'ピーター'、メールアドレス: 'peter@example.com'}
];

ユーザー
.map(関数 (ユーザー) {
  user.email を返します。
})
.filter(関数 (メール) {
  return /^t/.test(メール);
})
.forEach(関数 (メール) {
  コンソール.ログ(電子メール);
});
// "tom@example.com"

上記のコードでは、最初にすべての電子メール アドレスの配列が生成され、次に「t」で始まる電子メール アドレスがフィルターで除外され、最後に出力されます。

参考リンク

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章