JavaScriptの一般的な配列操作方法

1.pop()を削除し、配列の最後の要素pop()を返します.方法は「イジェクトされた」値を返します.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              
//   fruits         （"Mango"）
//       "Mango"

2.push()メソッド(配列の最後に)は、新しい要素を配列に追加します.push()方法は、新しい配列の長さを返します.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       
//    fruits        
//       5

3.shift()メソッドは、最初の配列要素を削除し、他のすべての要素をより低いインデックスに「シフト」します.shift()メソッドは「シフトされた」文字列を返します.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            
//   fruits         "Banana"
//    "Banana"

4.unshift()メソッド(先頭)は、新しい要素を配列に追加し、「逆シフト」の古い要素:unshift()方法は、新しい配列の長さを返します.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    
//   fruits       "Lemon"
//    5

5.delete()は、配列に未定義の空洞を残します.pop()またはshift()を使って取ってください.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           //   fruits          undefined

6.splice()方法は、新しいエントリを配列に追加するために使用できます.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

splice()を使用して要素の最初のパラメータ(2)を削除し、新しい要素を追加すべき位置(スティッチング)を定義します.第二のパラメータ(0)は、どのぐらいの要素を削除すべきかを定義します.残りのパラメータ(「Lemon」、「Kiwi」)は、追加する新しい要素を定義します.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        //    fruits        

7.裁断配列slice()方法で新しい配列を作成します.ソース配列から要素を削除しません.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

slice()は、2つのパラメータ(1,3)を受け入れることができます.この方法はパラメータの開始から要素を選択し、パラメータを終了するまで(含まない).

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

8.concat()メソッドは既存の配列を変更しません.常に新しい配列を返します.concat()方法は任意の数の配列パラメータを使用することができる.

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   //  arr1、arr2   arr3      

9.reverse()メソッドは、配列中の要素の順序を逆さまにするために使用されます.この方法は、新しい配列を作成することなく、元の配列を変更します.
10.配列並び替えsort()sort()は配列の要素に対して並べ替えられます.中には一つの並べ替え用の判定関数が含まれています.関数には二つのパラメータが含まれていなければなりません.この二つのパラメータはそれぞれ配列のn番目とn＋1番目の要素を表します.n番目とn＋1番目の要素の大きさを比較して並べ替えます.

let a = [1,3,8,4,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a);
// [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a);
// [1, 2, 3, 4, 5, 6, 7, 8]

判断関数を使用しない場合、デフォルトでは要素を文字列に変換し、unicodeで判断します.これはいくつかの数字の並べ替えエラーをもたらします.

let a = [1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a); // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]

11.和睦を求める

    [1,2,3,1,3].reduce((prev,cur)=>{
        return prev+cur;
    },0)

12 indexOf()、lastIndexOf()
indexOf()は、配列にある値が含まれているかどうかを判断し、判断する方式は「左から右」であり、含まれている場合はこの値を配列中のインデックス値に戻し、ない場合は-1に戻り、二つのパラメータがあり、最初のパラメータは判断する値(必ず記入)を表し、二つ目のパラメータは配列のどの位置から判断するかを表します.

let a = [1,2,3,4,5,6,7,8];
console.log(a.indexOf(4)); // 3
console.log(a.indexOf(4,5));
// -1 (  6,7,8      4 )

lastIndexOf()は、配列にある値が含まれているかどうかを判断し、判断する方式は「右から左」であり、含まれている場合はこの値を配列中のインデックス値に戻し、ない場合は-1に戻り、この方法は2つのパラメータがあり、最初のパラメータは判断する値(必須)を示し、2つ目のパラメータは、配列のどの位置から右から左へ検索するかを判断することを示しています.(デフォルトは配列全体の長さ-1)を選択します.

let a = [1,2,3,4,5,6,7,8];
console.log(a.lastIndexOf(3)); // 2
console.log(a.lastIndexOf(3,1));
// -1 (   1,2   ，     3 )

13.find()find()は、指定された関数内に配列の「一つ一つ」要素を持ち込んで判断し、判断条件に適合する最初の要素を返します.要素がないとundefinedに戻ります.

let a = [1,2,3,4,5,6,7,8];
console.log(a.find(e => e > 3)); // 4
console.log(a.find(e => e < 0)); // undefined

14.findIndex()findIndex()は、配列中の「それぞれ」要素を指定された関数内に持ち込んで判断し、判断条件に合致する最初の位置インデックスを返します.要素がないと-1に戻ります.

let a = [1,2,3,4,5,6,7,8];
console.log(a.findIndex(e => e > 3)); // 3
console.log(a.findIndex(e => e < 0)); // -1

15.filter()filter()は配列中の「一つずつ」の要素を指定の関数内に持ち込んで判断します.要素が判断条件に該当すると戻ります.新しい配列を作ります.

let a = [1,2,3,4,5,6,7,8];
console.log(a.filter(e => e > 3));
// [4, 5, 6, 7, 8]
console.log(a.filter(e => e%2 == 0));
// [2, 4, 6, 8]

16.forEach()
forEach()は配列中の要素を指定の関数に当てはめて演算します.関数は3つのパラメータがあります.最初のパラメータは各要素の値(必須)を表し、2番目のパラメータはこの要素の索引値(オプション)、3番目のパラメータは元の配列(オプション)を表します.

let a = [1,2,3,4,5];
let b = 0;
a.forEach(item => {
    b = b + item;
});
console.log(b); // 15 ( 1+2+3+4+5 )

2番目と3番目のパラメータを組み合わせて使うと、元の配列を変える効果があります.

let a = [1,2,3,4,5];
a.forEach((item, index, arr) => {
    arr[index] = item * 10;
});
console.log(a); // [10,20,30,40,50]

17.map()map()は各要素を処理して、最後に新しい配列に戻ります.中には関数(必須)と戻り関数のthisパラメータ(オプション)があります.関数内には三つのパラメータが含まれています.最初は各要素の値(必須)で、二つ目は現在の要素の索引値(オプション)で、三つ目は現在の配列(オプション)です.

let a = [1,2,3,4,5,6,7,8];
let b = a.map(e => {
    return e + 10;
});
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

第二及び第三のパラメータを使用する例:

let a = [1,2,3,4,5,6,7,8];
let b = a.map((e,i,arr) => {
    return `${e}${i}${arr.find(e => e%5 == 1)}`;
//    「   +     +       1      」
});
console.log(b);
// ['101', '211', '321', '431', '541', '651', '761', '871']

コールバック関数でthisのパラメータを使うと、矢印関数のthisの方向と関数のthisの方向が違うので、一般的な関数で処理します.

let a = [1,2,3,4,5,6,7,8];
let b = a.map(function(e){
    return e + this; //     this 10
}, 10);
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

18.flat()flat()は、1つのマルチ次元配列の深さを1次元(平たい化または降次元と呼ばれる)に変換するパラメータを持っています.変換する深さ数字を表しています.1(1つの層だけを展開して1次元配列にします.2なら、2つの層だけを展開して1次元グループに入れます.

let a = [1,2,[3],[4,[5,[6]]]];
let b = a.flat();
let c = a.flat(2);
let d = a.flat(Infinity);
console.log(b); // [1, 2, 3, 4, [5, [6]]]
console.log(c); // [1, 2, 3, 4, 5, [6]]
console.log(d); // [1, 2, 3, 4, 5, 6]

19.Aray.isAray()
Aray.isAray()は、要素が配列であるかどうかを判断し、もしtrueに戻るならば、falseに戻ります.

let a = [1,2,3,4,5,6,7,8];
let b = 123;
let c = 'hello';
let d = {d1:1,d2:2};
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false
console.log(Array.isArray(c)); // false
console.log(Array.isArray(d)); // false

20.0.ray.from()
Aray.from()は「クラス配列」または「反復可能なオブジェクト」を配列に変換し、Aray.from()は2つのパラメータがあり、最初のパラメータは「クラス配列オブジェクト」または「反復可能なオブジェクト」(必須)、2番目のパラメータは配列要素に変換するための函数(書き込み)である.
クラスの配列オブジェクトは、length属性およびインデックス化indexの要素を有し、反復オブジェクトは、それ自体の要素、例えばMapおよびSetなどを反復的に利用することができることを示す.

let a = 'abcde';
let b = Array.from(a);
console.log(b); // ['a','b','c','d','e']
let c = Array.from(a, e => e + e);
console.log(c); // ['aa','bb','cc','dd','ee']

クラスの配列オブジェクトの書き方には、length属性が必要で、オブジェクトのkeyは0から始まる数字で、変換された要素インデックスに対応します.

let a = {
    '0': 14,
    '2': 13,
    '1': 7,
    '3': 9,
    '4': 6,
    length: 5
};
let b = Array.from(a);
console.log(b); // [14,7,13,9,6]

21.ray.of()
Aray.of()は、数字や文字列などをすばやく配列に変換することができます.

let a = Array.of(1,'a',2,'b',3);
console.log(a);
// [1, "a", 2, "b", 3]

22.toString()
toString()は配列全体を文字列に変換します.

let a = [1,2,3,4,5,6,7,8];
let b = a.toString();
console.log(b);
// 1,2,3,4,5,6,7,8

23.every()
everry()は指定された関数内に配列中の「一つ一つ」の要素を持ち込んで判断します.判断条件に合わない要素があれば、falseに戻ります.全部該当するとtrueに戻ります.

let a = [1,2,3,4,5,6];
console.log(a.every(e => e > 3));
// fasle (   1、2    3，3    3 )
console.log(a.every(e => e > 0));
// true

本文の部分はWeChat公衆号からフロントエンドの達人(frontend84)を参考にして、著者:フロントエンドの達人以下は参照リンクを添付します.権利侵害があれば、本人に連絡して削除してください.https://cloud.tencent.com/developer/article/1485922は参照してください.一緒に共有してください.