【JavaScript】配列メソッドまとめ（ES7～に更新）

1.Array.push()

1 つ以上の要素を配列の末尾に追加し、新しい配列の長さを返します。元の配列が変更される。パラメータは 1 つから複数まで追加できます。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi");
console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"]    
console.log(x)//5  x是 新的数组长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi","Java");
console.log(fruits) //(6) ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Java"]  
console.log(x)   // 6 x是 新的数组长度

2. Array.unshift()、

配列に始まり追加1 つ以上の要素を取得し、新しい配列の長さを返します。元の配列が変更される。

let arr = [1, 2, 3, 4, 5]
let res = arr.unshift(6, 7)
console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
console.log(res) //7

3.Array.pop()

配列の最後の要素を削除して返します。配列が空の場合は返しますundefined。元の配列が変更される。

pop()メソッドは配列から最後の要素を削除します。

pop() 方法の戻り値は削除されたアイテムです。

let arr = [1, 2, 3, 4, 5]
let res = arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
console.log(res) // 5

4.Array.shift()

配列の最初の項目を削除し、最初の要素の値を返します。配列が空の場合に戻りますundefined。元の配列が変更される。

let arr = [1, 2, 3, 4, 5]
let res = arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4
console.log(res) // 1

5.Array.find()、findIndex()、findLast()、findLastIndex()

find()このメソッドは、テストに合格した (関数内で判断された) 配列の最初の要素の値を返します。

find()このメソッドは、配列内の要素ごとに関数の実行を 1 回呼び出します。

条件のテスト時に配列内の要素が返される場合true、find()条件を満たす要素が返され、後続の値に対して実行関数は呼び出されません。一致する要素がない場合に戻りますundefined

注:find()空の配列の場合、関数は実行されません。

注:find()配列の元の値は変更されません。

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    
    
    return age >= 18;
}
 
console.log(ages.find(checkAdult)); // 18
console.log(ages); //  [3, 10, 18, 20]

[1, 4, -5, 10].find((n) => n < 0)
// -5

[1, 5, 10, 15].find(function(value, index, arr) {
    
    
  return value > 9;
}) // 10

findIndex(): find() メソッドとよく似ており、最初の適格な配列メンバーの位置を返します。すべてのメンバーが基準を満たしていない場合は -1 を返します。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
    
    
  return value > 9;
}) // 2

どちらのメソッドも、コールバック関数の this オブジェクトをバインドするために使用される 2 番目のパラメーターを受け入れることができます。

// find()函数接收了第二个参数person对象，回调函数中的this对象指向person对象。
function f(v){
    
    
  return v > this.age;
}
let person = {
    
    name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

find()どちらfindIndex()も配列の 0 番目のビットから逆方向にチェックされます。ES2022 では 2 つの新しいメソッドが追加されfindLast()、findLastIndex()配列の最後のメンバーから順に前方をチェックし、他のすべてを同じに保ちます。

const array = [
  {
    
     value: 1 },
  {
    
     value: 2 },
  {
    
     value: 3 },
  {
    
     value: 4 }
];

array.findLast(n => n.value % 2 === 1); // { value: 3 }
array.findLastIndex(n => n.value % 2 === 1); // 2

６．Array.concat(arr1,arr2…)

2 つ以上の配列をマージします。新しい配列を生成する。元の配列は変更されません。

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]

7。Array.join()

配列の各項目を指定された文字と連結して文字列を形成します。デフォルトの接続文字は「,」カンマです。

let arr = [1, 2, 3, 4, 5];
let str1 = arr.join('*')
let str2 = arr.join('-')
let str3 = arr.join('#')
console.log(str1)  // 1*2*3*4*5
console.log(str2)  // 1-2-3-4-5
console.log(str3)  // 1#2#3#4#5

8.Array.reverse()

配列を反転します。元の配列が変更される。

let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr) //newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];

9.Array.sort()

配列要素を並べ替えます。文字列 UniCode でソート、元の配列が変更される。

デフォルト：

arr=[2,3,5,1,4] とします。

let newArr=arr.sort();
console.log(newArr,arr)//newArr=[1,2,3,4,5]; arr =[1,2,3,4,5]

関数ルールに従って並べ替えます。

①幼少期から大人になるまで

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    
    
  return a - b;
});
console.log(numbers);

②大きいものから小さいものまで

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    
    
  return b - a;
});
console.log(numbers);  // [5, 4, 3, 2, 1]

③配列オブジェクトの値に応じてソートする

var arr = [
    {
    
    name:'zopp',age:0},
    {
    
    name:'gpp',age:18},
    {
    
    name:'yjj',age:8}
];

function compare(property){
    
    
    return function(a,b){
    
    
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))

// 打印结果：按照age排序

(3) [{
    
    …}, {
    
    …}, {
    
    …}]
0: {
    
    name: "zopp", age: 0}
1: {
    
    name: "yjj", age: 8}
2: {
    
    name: "gpp", age: 18}
length: 3
__proto__: Array(0)

10.Array.map(function())

元の配列の各項目が関数を実行した後、新しい配列が返されます。元の配列は変更されません。(このメソッドと forEach の違いに注意してください)。

var arr = ['a','b','c','d'];
arr.map(function(item,index,arr){
    
       //参数含义同forEach
       console.log(item);
       console.log(index);
   });
	3 a
	4 0
	3 b
	4 1
	3 c
	4 2
	3 d
	4 3

mapforEachとの違い

mapこのメソッドは新しい配列を返します。配列内の要素は、関数の呼び出し後に元の配列要素を処理した値です。

forEachメソッドの戻り値は常に未定義です。(戻り値がないとも言えます)

11.Array.slice(start,end)

start から開始し、end の前で終了し、end には到達しません。
終了値が指定されていない場合は、配列の start から end までが開始されます。start には負の値を指定できます。過去に関係なく、-1 は配列の最後の位置を意味し、-2 は最後から 2 番目の位置を意味します。

値が 1 つの場合は、現在位置から配列の末尾までを削除します。

コピーされた配列の指定された場所の内容をインターセプトします

スライス (開始位置、終了位置); 2 番目のパラメータはデフォルトでは最後まで書き込まれず、前から後ろにのみインターセプトできます。戻り値は、インターセプトされたコンテンツによって形成された新しい配列です。

let arr=[1,2,3,4,5]
let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组；
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr,copyArr)//newArr=[2,3];arr=[1,2,3,4,5];

12.Array.splice(index,howmany,arr1,arr2…)

index 必要。項目を追加/削除する場所を指定する整数。配列の末尾からの位置を指定するには負の値を使用します。
howmanyオプション。削除するアイテムの数。0 に設定すると、項目は削除されません。
arr1, …, arr2オプション。配列に追加する新しい項目。
要素の削除と要素の追加、 position からの要素のindex削除howmany、 position からの順にarr1、arr2…データの挿入を行いますindex。howmany0の場合、要素は削除されません。元の配列が変更されます。

let arr = [1,2,3,4,5];
let num1 = arr.splice(1);
console.log(num1,arr) //num1=[2,3,4,5];arr=[1];

2 つの値がある場合、最初の値は削除の場所、2 番目の値は削除の数です。

let arr=[1,2,3,4,5]
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1,arr);// num1=[3,4,5],arr=[1,2]

値が 3 つ以上ある場合、最初の値は挿入された要素の位置、2 番目の値は置換の数、以降の値はすべて挿入される新しい要素です。

let arr=[1,2,3,4,5]
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8

//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num2,arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

13.Array.forEach(function())

配列の各要素に対して呼び出され、要素をコールバック関数に渡します。元の配列は変更されません。(このメソッドとマップの違いに注意してください。Array.forEach を直接出力すると、結果は未定義になります)。

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    
    
    console.log(`数组第${
      
      index+1}个元素是${
      
      item}`);
 })
    console.log(res);//forEach的返回值为undefined,
// 数组第1个元素是1
// 数组第2个元素是3
// 数组第3个元素是5
// 数组第4个元素是13
// 数组第5个元素是2

14.Array.filter(function)

基準を満たす配列内の要素をフィルターし、新しい配列を返します。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.filter(checkAdult))
VM57:6 (3) [32, 33, 40]

単一引数の単一行アロー関数

次のコード スニペットに示すように、これは非常に単純です。

const fn= foo =>`${
      
      foo} world`;

これはアロー関数の最もコンパクトな形式であり、フィルタリングなどの単純な処理関数によく使用されます。次のコード スニペットに示すように:

let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);

15.Array.every(function())

配列内の各項目を判定し、一致する場合は を返しtrue、一致しない場合は を返しますfalse。

every()このメソッドは、配列のすべての要素が指定された条件 (関数によって提供される) を満たしているかどうかを確認するために使用されます。

every()メソッドは、指定された関数を使用して配列内のすべての要素をチェックします。

配列内の要素が不十分であることが検出された場合、式全体が false を返し、残りの要素はチェックされません。

すべての要素が条件を満たしている場合に true を返します。

注:every()空の配列のチェックは行われません。

注:every()元の配列は変更されません。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.every(checkAdult)) // false

16.Array.some(function())

配列内の各項目を判定し、一致するものがない場合は戻りfalse、そうでない場合は戻りますtrue。

some()このメソッドは、配列内の要素が指定された条件 (関数によって提供される) を満たしているかどうかを確認するために使用されます。

some()このメソッドは、配列の各要素を順番に実行します。

1 つの要素が条件を満たす場合、式は を返しtrue、残りの要素はチェックされません。
条件を満たす要素がない場合に戻りますfalse。

注:some()空の配列のチェックは行われません。

注:some()元の配列は変更されません。

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.some(checkAdult))  // true

Array.everyそしてArray.someその違い

手法の違い

every(): 各項目は true を返す場合は true を返します

some(): 1 つの項目が true を返す限り true を返します

17.Array.reduce(function())

reduce()このメソッドは関数をアキュムレータとして受け取り、配列内の各値 (左から右) が最初に減算され、最終的に値として計算されます。

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
console.log(sum) // 4 15

18.Array.isArray()

isArray()メソッドは、オブジェクトが配列であるかどうかを判断するために使用されます。

オブジェクトが配列の場合は戻りtrue、それ以外の場合は戻りますfalse。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
console.log(Array.isArray(fruits)) // true

19.Array.forEach()

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    
    
console.log(`数组第${
      
      index+1}个元素是${
      
      item}`);
    })
console.log(res);//forEach的返回值为undefined,
// 数组第1个元素是1
// 数组第2个元素是3
// 数组第3个元素是5
// 数组第4个元素是13
// 数组第5个元素是2
// undefined //敲黑板——forEach()是没有返回值的！

20.Array.toString()

このメソッドは配列を文字列に変換します。

let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(arr)   // [1, 2, 3, 4, 5]
console.log(str)  // 1,2,3,4,5

21.Array.from()

Array.from()このメソッドは、配列のようなオブジェクトと反復可能なオブジェクト (ES6 の新しいデータ構造と を含む) の 2 種類のオブジェクトを実際の配列に変換するために使用されSetますMap。

配列と同様: 必須の機能は 1 つだけです。それは、長さ属性が必要であるということです。そのため、長さ属性を持つオブジェクトは Array.from() メソッドを通じて配列に変換できます。

let arrayLike = {
    
    
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

一般的な実際のアプリケーションでは、一般的な配列のようなオブジェクトは、DOM 操作によって返される NodeList コレクションと、関数内の引数オブ​​ジェクトです。

Iterator インターフェースのデータ構造がデプロイされていれば、Array.from() でそれを配列に変換できます。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

Array.from() は、2 番目のパラメーターとして関数を受け入れることもできます。これは、各要素を処理し、処理された値を返された配列に入れるために使用される配列の map() メソッドに似ています。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

22.flat()、flatMap() 扁平化

flat()
Array.prototype.flat()これは、ネストされた配列を 1 次元配列に「平坦化」するために使用されます。このメソッドは新しい配列を返しますが、元のデータには影響しません。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()デフォルトでは、1 つのレイヤーのみが「フラット化」されます。複数レイヤーのネストされた配列を「フラット化」したい場合は、メソッドのパラメーターを整数として記述し、フラット化するレイヤーの数を示しますflat()。値は 1 です。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

ネストの層の数に関係なく、それを 1 次元配列に変換したい場合は、Infinity キーワードをパラメーターとして使用できます。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

元の配列にスペースがある場合、 flat() メソッドはスペースをスキップします。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()
flatMap()Map()+flat()これは、最初に各値を実行しmap、最後に全体を実行することと同じです。flat

flatMap()このメソッドは、元の配列の各メンバーに対して関数を実行し ( の実行と同等) Array.prototype.map()）、その後、戻り値の配列に対して flat() メソッドを実行します。このメソッドは、元の配列を変更せずに新しい配列を返します。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()拡張できる配列は 1 レベルのみです。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

flatMap()このメソッドのパラメーターはトラバーサル関数であり、現在の配列メンバー、現在の配列メンバーの位置 (0 から始まる)、および元の配列の 3 つのパラメーターを受け入れることができます。

arr.flatMap(function callback(currentValue[, index[, array]]) {
    
    
  // ...
}[, thisArg])

flatMap()このメソッドには、トラバーサル関数でこれをバインドするために使用される 2 番目のパラメーターを持つこともできます。

23.toReversed()，toSorted()，toSpliced()，with()

一般的な配列の従来の方法では、 などのように元の配列を変更してしまうpush()、pop()、shift()、unshift()ため、元の配列を変更せずに配列の操作を可能にし、元の配列のコピーを返すメソッドがあります。

• Array.prototype.toReversed() -> Array
• Array.prototype.toSorted(compareFn) -> Array
• Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
• Array.prototype.with(index, value) -> Array

これらはそれぞれ、配列の元のメソッドに対応します。

• toReversed()対応するreverse()。配列メンバーの位置を反転するために使用されます。
• toSorted()対応するsort()、配列メンバーをソートするために使用されます。
• toSpliced()対応するsplice()。指定された数のメンバーを削除し、指定された位置に新しいメンバーを挿入するために使用されます。
• with(index,value)対応するsplice(index, 1, value)。指定された位置のメンバーを新しい値に置き換えるために使用されます。

上記は、これら 4 つの新しいメソッドに対応するオリジナルのメソッドであり、意味や使い方は全く同じですが、唯一の違いは、元の配列は変更されず、元の配列のコピーが返されることです。

const arr= [1, 2, 3];
arr.toReversed() // [3, 2, 1]
arr// [1, 2, 3]

const arr1= [3, 1, 2];
arr1.toSorted() // [1, 2, 3]
arr1// [3, 1, 2]

const array = [1, 2, 3, 4];
array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array // [1, 2, 3, 4]

const arr2= [1, 1, 3];
arr2.with(1, 2) // [1, 2, 3]
arr2// [1, 1, 3]