JavaScriptのよく使われる配列操作方法.

51662 ワード

JavaScript

JavaScriptのよく使われる配列操作方法.
concat()
concat()方法は、2つ以上の配列を接続し、接続された配列の1つのコピーを返すために使用される.

は元の配列を変更しない.

    let arr1 = [2, 3, 4],
        arr2 = [4, 5, 6];

    let arr3 = arr1.concat(arr2);
    console.log(arr3);
    // [ 2, 3, 4, 4, 5, 6 ]

ジョン()
join()メソッドは、配列中のすべての要素を一つの文字列に入れるために使用されます.要素は指定されたセパレータによって分離され、デフォルトでは'を使用し、'号は分割されます.

は元の配列を変更しない.

    let arr1 = [10, 20, 30];

    console.log(arr1.join()); // 10,20,30
    console.log(arr1); // [ 10, 20, 30 ]

push()
push()メソッドは、配列の末尾に1つ以上の要素を追加し、新しい長さを返します.末尾に追加します.戻りは長さで、元の配列を変更します.

は、元の配列を変更する.

戻り値は、新しい長さ

である.

は、複数の要素

を追加することができる.

    let arr1 = [10, 20, 30];

    console.log(arr1.push(50)); // 4
    console.log(arr1); // [ 10, 20, 30, 50 ]
    arr1.push(60, 70)
    console.log(arr1); // [ 10, 20, 30, 50, 60, 70 ]

ポップ()
pop()メソッドは、配列の最後の要素を削除して返します.最後の要素を返します.元の配列が変わります.

は、元の配列を変更する.

戻り値は、最後の要素(削除された要素)

である.

    let arr1 = [10, 20, 30];

    console.log(arr1.pop()); // 30
    console.log(arr1); // [ 10, 20 ]

shift()
shift()メソッドは、配列の最初の要素をそこから削除し、最初の要素の値を返します.最初の要素を返し、元の配列を変更します.

は、元の配列を変更する.

戻り値は、最初の要素(削除された要素)

である.

    let arr1 = [10, 20, 30];

    console.log(arr1.shift()); // 10
    console.log(arr1); // [ 20, 30 ]

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

は、元の配列を変更する.

戻り値は、新しい長さ

である.

は、複数の要素

を追加することができる.

    let arr1 = [10, 20, 30];

    console.log(arr1.unshift(50)); // 4
    console.log(arr1); // [ 50, 10, 20, 30 ]

    arr1.unshift(60, 70);
    console.log(arr1); //[ 60, 70, 50, 10, 20, 30 ]

slice(start,end)
新しい配列を返します.startからendまでの要素が含まれます.選択した要素を返します.この方法は元の配列を変更しません.

は元の配列を変更しない.

は、選択された要素に値を返します.

    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.slice(1, 3)); // [ 20, 30 ]
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]

splice(start,deleteCount,item 1,item 2)
splice()方法は、startから始まるゼロまたはdeleteCountの要素を削除し、削除された要素をパラメータリストで宣言された1つまたは複数の値で置き換えることができる.配列から要素を削除すると、削除された要素を含む配列が返されます.splice()メソッドは直接配列を修正します.

start:修正の開始位置を指定します.配列の長さを超えたら、配列の最後から内容を追加します.負の値であれば、配列の末尾から何番目か(−1から数えます)を表します.負の値の絶対値が配列の長さより大きい場合は、開始位置が0番目となります.

deleteCount:deleteCountが0または負の値であれば、要素は除去されない.この場合、少なくとも新しい要素を追加します.deleteCountがstart以降の要素の総数より大きい場合、startの後ろの要素はすべて削除されます.deleteCountが省略されると、それは(arr.length-start)に相当する.

item:配列に追加する要素は、start位置から開始します.指定しない場合は、splice()は配列要素のみを削除します.

元配列を変更する

は、削除された要素からなる配列を返します.もし空の配列が戻っていないならば.


    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.splice(1, 1)); // [ 20 ]
    console.log(arr1); // [ 10, 30, 40, 50, 60 ]

    console.log(arr1.splice(1, 0, 'append')); // []
    console.log(arr1); // [ 10, 'append', 30, 40, 50, 60 ]

    console.log(arr1.splice(1, 2, 'append1', 'append2')); // []
    console.log(arr1); // [ 10, 'append1', 'append2', 40, 50, 60 ]

sort(comple)
Unicodeの位置によって並べ替えられます.標準昇順です.

compare(a,b)は、ある順序で並べられた関数を指定するために使用されます.省略すると、要素は変換された文字列の各文字のユニフォームの位置に従って並べ替えられます.戻り値が0より大きい場合、bはaの前の

に配置される.

元配列を変更する

戻り値は、順序付けされた配列

である.

    let arr1 = [40, 20, 50, 10, 30];
    console.log(arr1.sort((a, b) => { return a - b; }));// [ 10, 20, 30, 40, 50 ]
    console.log(arr1);// [ 10, 20, 30, 40, 50 ]

    let strArr = ['a', 'c', 'e', 'b', 'd'];
    console.log(strArr.sort()); // [ 'a', 'b', 'c', 'd', 'e' ]
    console.log(strArr); // [ 'a', 'b', 'c', 'd', 'e' ]

逆転()
reverse()メソッドは、配列中の要素の順序を逆さまにするために使用されます.は、反転した配列を返します.元の配列が変わります.

元配列を変更する

戻り値が反転した配列

    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.reverse()); // [ 60, 50, 40, 30, 20, 10 ]
    console.log(arr1); // [ 60, 50, 40, 30, 20, 10 ]

indexOf()とlastIndexOf()
2つのパラメータを許可します.検索の値、開始位置を検索します.いいえ、-1を返します.存在します.位置に戻ります.indexOfは行った後で探します.lastIndexOfは後から前へ探します.

は、元の配列

を変更しない.

戻り値:戻り値が存在しない-1があり、戻り位置下付き

が存在する.

    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.indexOf(20)); // 1
    console.log(arr1.lastIndexOf(20)); // 1
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]

    console.log(arr1.indexOf(20, 2)); // -1
    console.log(arr1.lastIndexOf(40, 2)); // -1

行列を巡回する方法

は、3つのパラメータcurrentValueを受信する.配列内で処理されている要素.index:配列内で処理されている要素のインデックス値です.array:呼び出しられた配列.

私()
配列の各項目に指定された関数を実行し、いずれかの項目をtureに返すと、trueを返します.

は、元の配列

を変更しない.

    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.some((value) => {
        return value > 30;
    })); // true
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]
    console.log(arr1.some((value) => {
        return value > 70;
    })); // false

every()
配列の各項目に指定された関数を実行します.各項目はtureに戻り、trueに戻ります.

は、元の配列

を変更しない.

    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.every((value) => {
        return value > 1;
    })); // true
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]
    console.log(arr1.every((value) => {
        return value > 40;
    })); // false

filter()
配列の各項目に指定された関数を実行します.結果はtureの項目からなる行列を返します.

は、元の配列

を変更しない.

の戻り値は、行列

である.


    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.filter((value) => {
        return value > 40;
    })); // [ 50, 60 ]
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]

find()
コールバック関数が入ってきました.行列の中で現在の検索規則に合致する最初の要素が見つかり、それを返して検索を終了します.

ES 6追加

は、元の配列

を変更しない.

戻り値は、配列内の条件に適合する第1の要素

である.

    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.find((value) => {
        return value > 40;
    })); // 50
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]

findIndex()
現在の検索規則に合致する配列の最初の要素を見つけ、その下付きを返して検索を終了します.

ES 6追加

は、元の配列

を変更しない.

戻り値は、配列内の条件に適合する第1の要素の下付き

である.


    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.findIndex((value) => {
        return value > 40;
    })); // 4
    console.log(arr1); // [ 10, 20, 30, 40, 50, 60 ]

fill(value、start、end)
1つの配列の最初の索引から終了のインデックス内のすべての要素を固定値で塗りつぶします.終了インデックスは含まれていません.

ES 6追加

元配列を変更する

戻り値は、変更された新しい配列

である.


    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.fill(99, 2, 4)); // [ 10, 20, 99, 99, 50, 60 ]
    console.log(arr1); // [ 10, 20, 99, 99, 50, 60 ]

includes()
配列が指定された値を含むかどうかを判断するために使用されます.場合によってはtrueに戻ります.そうでなければfalseに戻ります.

ES 6文法を追加しました.

は、元の配列

を変更しない.

の戻り値は、ブール値

である.

は、ES 5のindexOf判定方式を置き換えることができる.indexOfは要素がNaNかどうかを判断し、エラーを判断します.


let arr1 = [10, 20, 30, 40, 50, 60];

console.log(arr1.includes(30)); // true
console.log(arr1.includes(55)); // false
console.log(arr1); // [ 10, 20, 99, 99, 50, 60 ]

    let arr1 = [10, 20, 30, 40, 50, 60, NaN];

    console.log(arr1.includes(NaN)); // true
    console.log(arr1.indexOf(NaN)); // -1
    console.log(arr1); // [ 10, 20, 99, 99, 50, 60 ]

reduce(calback(Acceumulator、current Value、index、arr)、initial Value)
積算器と配列の各要素(左から右へ)に関数を適用して、単一の値に簡略化します.

は、元の配列

を変更しない.

戻り値が関数積算処理の結果

initial Valueが提供されていない場合、reduceはインデックス1の場所からcalback方法を実行し、最初のインデックスをスキップします.initial Valueを提供する場合は、インデックス0から開始します.配列が空で、initial Valueが提供されていない場合は、TypeErrをスローします.

    //   
    let arr1 = [10, 20, 30, 40, 50, 60];

    console.log(arr1.reduce((calculate, value) => {
        return calculate += value;
    }, 0)); // 210
    console.log(arr1); // [ 10, 20, 99, 99, 50, 60 ]

    //          
    let arr1 = [[10, 20], [30, 40],[50, 60]];

    console.log(arr1.reduce((calculate, value) => {
        return calculate.concat(value);
    }, [])); // [ 10, 20, 30, 40, 50, 60 ]
    console.log(arr1); // [ [ 10, 20 ], [ 30, 40 ], [ 50, 60 ] ]

巡回モードの比較


    //           
    let policy = {"ips": 0,"waf": 0,"pvs": 1};
    
    let filterArr = Object.keys(policy).filter((key) => {
        return policy[key] === 0;
    });
    /*****************  forEach************/
    // let filterArr = [];
    // Object.keys(policy).forEach((key) => {
    //     if (policy[key] === 0) {
    //         filterArr.push(key);
    //     }
    // });
    console.log(filterArr); // [ 'ips', 'waf' ]

    /***********************************   **********************************************/

    const TEXT_TYPE = {
        ips: '           ',
        waf: '   WEB      ',
        pvs: '           '
    };

    //               
    let mapArr = filterArr.map((key) => {
        return TEXT_TYPE[key];
    });
    /*****************  forEach************/
    // let mapArr = [];
    // filterArr.forEach((key) => {
    //     mapArr.push(TEXT_TYPE[key]);
    // });

    console.log(mapArr); // [ '           ', '   WEB      ' ]

    /***********************************   **********************************************/

    //            
    let someBoolean = Object.keys(policy).some((key) => {
        return policy[key] === 0;
    });

    /*****************  forEach************/
    // let someBoolean = false;
    // Object.keys(policy).forEach((key) => {
    //     if (policy[key] === 0) {
    //         someBoolean = true;
    //         return false;
    //     }
    // });
    console.log(someBoolean); // true

    /***********************************   **********************************************/

    //            
    let everyBoolean = Object.keys(policy).every((key) => {
        return policy[key] > 0;
    });
    console.log(everyBoolean); // false

    /***********************************   **********************************************/

[javascript]ブラウザ下のテキストドメインカーソルの位置