JSでよく使われる配列メソッドのまとめ

今回はJSでよく使われる配列メソッドについてまとめて、JSでデータを使う際の注意点について、実際の事例を交えて見ていきましょう。

1. concat() メソッドは、2 つ以上の配列を結合するために使用されます。このメソッドは既存の配列を変更しませんが、新しい配列を返します。

例:
var array1 = ['a', 'b', 'c'];

var array2 = ['d', 'e', 'f'];

console.log( array1.concat(array2));

// ["a", "b", "c", "d", "e", "f"]

2. filter() メソッドは新しいものを作成します。配列には、提供された関数を通じて実装されたテストのすべての要素が含まれます。 (フィルタリングに使用可能)

例:
function isBigEnough(value) {
return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough) ;

// フィルタリングされた値は [12, 130, 44]

// ES6 の方法

const isBigEnough = value => value >= 10;

let [...spread]= [12, 5, 8, 130, 44];

let filtered = Spread.filter(isBigEnough);

3. find() メソッドは、提供されたテスト関数を満たす配列内の最初の要素の値を返します。それ以外の場合は、未定義が返されます。

例:
function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough) // 130

4, findIndex () メソッドは、指定されたテスト関数を満たす配列内の最初の要素のインデックスを返します。それ以外の場合は、-1 が返されます。

function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough);
// 配列内の 4 番目の要素のインデックスが返されます。 ,
// したがって、これは '3' になります

5。 forEach() メソッドは、配列の各要素に対して提供された関数を 1 回実行します。 (JavaScriptのforループに相当)

例:

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

arr.forEach(function(element) {
console) .log(element);
});

arr.forEach( element => console.log(element));

// a
// b
// c

6、indexOf() メソッド指定された要素が見つかる配列内の最初のインデックスを返します。要素が存在しない場合は -1 を返します。

例:
let a = [2, 9, 7, 8, 9];
a.indexOf(6) // -1
a.indexOf(7); ); // 2
a.indexOf(8); // 3
a.indexOf(9) // 1

if (a.indexOf(3) === -1) {

// 要素は配列には存在しません
}

7。map() メソッドは新しい配列を作成し、その結果は配列内の各要素に対して提供された関数を呼び出すことによって返されます。

例:

// ES6
letnumbers = [1, 5, 10, 15];
let doubles =numbers.map( x => x ** 2);

// doubles は現在 [1] , 25, 100, 225]

// 数値は [1, 5, 10, 15] のままです

const数値 = [2, 4, 8, 10];

let halfs =numbers.map(x => x / 2);

letnumbers = [1, 4, 9];

letroots =numbers.map(Math.sqrt);
// ルートは [1, 2, 3] になりました
// 数値はまだ [ 1, 4, 9]

8. Pop() メソッドは、配列から最後の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します。

例:

let a = [1, 2, 3];
a.length; // 3

a.pop() // 3

console.log(a); 2]

a.length; // 2

9.reduce() メソッドは、アキュムレーターと配列内の各要素に (左から右に) 関数を適用し、単一の値に減らします。

例:

const array1 = [1, 2, 3, 4];

constレデューサ = (アキュムレータ,
currentValue) => アキュムレータ +currentValue;// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

// 予想される出力: 10

// 5 + 1 + 2 + 3 + 4

console.log(array1.reduce(reducer, 5));

/ / 期待される出力: 15
// フィルター処理された値は [12, 130, 44]

10, Array.isArray() は、渡された値が Array かどうかを判断するために使用されます

例:

Array.isArray([ 1 , 2, 3]);

// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false


11. Array.from() メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトから新しい配列インスタンスを作成します。

例: const bar = ["a", "b", "c"];

Array.from(bar);

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

Array .from('foo');
// ["f", "o", "o"]

12. fill() メソッドは、開始インデックスから終了インデックスまでの固定値を配列に書き込みます。すべての要素。

例: var array1 = [1, 2, 3, 4];

// position 2 から位置 4 まで 0 で埋める
console.log(array1.fill(0, 2, 4));
// 期待される出力: [1, 2, 0, 0]

//位置 1 から 5 を埋めます
console.log(array1.fill(5, 1));
// 期待される出力: [1, 5, 5, 5]

console.log(array1.fill(6));
// 期待される出力: [6, 6, 6, 6]

構文:
arr.fill(value[, start[, end]])
つまり、(Filled value, start value (index), end value ( 1 から開始))

13. include() メソッドは、配列に指定された値が含まれているかどうかを判断するために使用され、含まれている場合は true を返し、含まれていない場合は false を返します。

例:
let a = [1, 2, 3];

a.includes(2);
// true

a.includes(4); ) メソッドは、配列 (または配列のようなオブジェクト) のすべての要素を
string

に連結し、この文字列を返します。

例: let a = ['Wind', 'Rain', 'Fire'];

console.log(a.join());

// デフォルトは ","
// 'Wind, Rain,Fire'

console.log(a.join(""));
// 区切り文字 === 空の文字列 ""
// "WindRainFire"

console.log(a.join("- ") );
// Separator "-"
// 'Wind-Rain-Fire'

15. Push() メソッドは、1 つ以上の要素を配列の末尾に追加し、新しい配列の長さを返します。

例: varnumbers = [1, 2, 3];numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

数値。 Push(5, 6, 7);

console.log(numbers);

// [1, 2, 3, 4, 5, 6, 7]

16 メソッドは関数を受け入れます。累積アキュムレータと配列の各値 (右から左へ) を 1 つの値に削減します。 Array.prototype.reduce() の実行方向とは逆

例: let flattened = [[0, 1],

[2, 3],

[4, 5]
].reduceRight((a , b) => {
return a.concat(b);
}, []);

// 平坦化は [4, 5, 2, 3, 0, 1]

17.メソッド 配列から最初の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します。

例: let a = [1, 2, 3];let b = a.shift();

console.log(a);
// [2, 3]

console.log( b);

// 1

18.lice() メソッドは、選択された配列の先頭から末尾までの部分 (末尾を除く) の浅いコピーを新しい配列オブジェクトに返します。元の配列は変更されません。

例: var Animals = ['ant', 'bison', 'rakuda', 'duck', 'elephant'];

console.log(animals.slice(2));

// 期待される出力: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));

// 期待される出力: Array ["camel", "duck"]

console .log(animals.slice(1, 5));

// 期待される出力: Array ["bison", "camel", "duck", "elephant"]

19. some() メソッドは配列をテストします。特定の要素は、提供された関数によって実装されたテストに合格します。

例: const isBiggerThan10 = (要素, インデックス, 配列) => {return element > 10;

}

[2, 5, 8, 1, 4].some(isBiggerThan10); / false

[12, 5, 8, 1, 4].some(isBiggerThan10);

// true

20. sort() メソッドは、配列の要素を並べ替えます。そして配列を返します。 sort ソートは必ずしも安定しているとは限りません。デフォルトの並べ替え順序は、文字列 Unicode コード ポイントに基づいています。

例:

var Fruit = ['サクランボ', 'リンゴ', 'バナナ'];

fruit.sort(); // ['リンゴ', 'バナナ', 'サクランボ']

21 splice() メソッドは、既存の要素を削除したり、新しい要素を追加したりして、配列の内容を変更します。


例:

var myFish = ['angel', 'pillow', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum') // インデックス 2 に 'drum' を挿入します。 '// myFish は ["angel", "clown", "drum", "mandarin", "sturgeon"] になります

myFish.splice(2, 1); // インデックス 2 から 1 つの項目を削除します (つまり、 'ドラム' アイテム)
// myFish は ["angel", "pillow", "mandarin", "sturgeon"] になります

構文:
array.splice(start)

array .splice(start, deleteCount)

array.splice(start, deleteCount, item1, item2, ...)

パラメータ:
start
変更の開始位置を指定します(0から数えます)。配列の長さを超える場合は、配列の末尾から内容が追加されます。負の値の場合は、start パラメーターのみが使用されている場合は配列の末尾から始まる番号を示します。 deleteCount を指定しないと、:array.splice(start) などの item は [start, end] の要素を削除することを意味します。
deleteCount オプションの
整数。削除する配列要素の数を示します。 deleteCount が 0 の場合、要素は削除されません。この場合、少なくとも 1 つの新しい要素を追加する必要があります。 deleteCount が開始後の要素の総数より大きい場合、開始後のすべての要素 (開始位置を含む) が削除されます。
deleteCountを省略した場合、(arr.length - start)と同等になります。
item1, item2, ... オプション
開始位置から配列に追加される要素。指定しない場合、splice() は配列要素のみを削除します。
splice メソッドは、deleteCount パラメータを使用して、削除するか追加するかを制御します。
start パラメータは必須で、開始位置 (0 から数えて) を示します。たとえば、start=0 は最初の位置から開始します。 -1 は最後のものから開始することを意味します。
①. 開始位置から[start, end]要素を削除します。
array.splice(start)
②. 開始位置から要素[start, Count]を削除します。
array.splice(start, deleteCount)
③. 開始位置から item1, item2, ... 要素を追加します。
array.splice(start, 0, item1, item2, ...)

22. toString() は、指定された配列とその要素を表す文字列を返します 。

23. unshift() メソッドは、配列の先頭に 1 つ以上の要素を追加し、新しい配列の長さを返します。

例:

let a = [1, 2, 3];
a.unshift(4, 5);

console.log(a);
// [4, 5, 1, 2, 3] ]

24. substring() メソッドは、文字列内の指定された 2 つの添え字の間の文字を抽出するために使用されます。
例:
var str="Hello world!";
document.write(str.substring(3)+"
");//lo world!
document.write(str.substring( 3,7));//lo w

構文:
string.substring(from, to)

パラメータ
from
必須。文字列 Object 内で抽出される部分文字列の最初の文字の位置を指定する非負の整数。
から
まではオプションです。文字列 Object 内で、抽出される部分文字列の最後の文字より 1 つ多い位置にある非負の整数。
このパラメータを省略した場合、返される部分文字列は文字列の末尾に移動します。

25. substr() メソッドは、文字列の開始添え字から指定された数の文字を抽出できます。
例
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3,7));p//lo worl
構文:
stringObject.substr(start,length)

パラメータ:
start
必須。抽出される部分文字列の開始インデックス。数値である必要があります。負の場合、このパラメータは文字列の末尾からの位置を宣言します。つまり、-1 は文字列の最後の文字を指し、-2 は最後から 2 番目の文字を指し、以下同様になります。
長さ
オプション。部分文字列内の文字数。数値である必要があります。このパラメータを省略した場合は、stringObject の先頭から末尾までの文字列が返されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

Android APPでロゴのサイズを作る方法

Vue.JSのカスタム命令の使い方

Node.jsのPEGjsの使い方

Angularjs+mybatis でコメントシステムを作成します

以上がJSでよく使われる配列メソッドのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。