JavaScript配列の一般的な操作

13107 ワード

前言
jqueryやunderscoreなどのクラスライブラリでよく使われる配列関連の操作に慣れていると思います.$などです.isArray,_.some,_.findなどの方法.ここでは原生jsの配列操作に対していくつかの包装を多くしたにほかならない.
ここでは主にJavaScript配列操作の一般的なAPIについてまとめる.プログラムの問題を解決するのに役立つと信じています.
1、性質
JavaScriptの配列は、オフセット量を表すインデックスがそのオブジェクトの属性であり、インデックスが整数である可能性がある特殊なオブジェクトです.ただし、JavaScriptオブジェクトの属性名は文字列でなければならないため、これらの数値インデックスは内部で文字列タイプに変換されます.
2、操作
2.1配列タイプの判定
var array0 = [];    //    

var array1 = new Array();   //    

//   : IE6/7/8     Array.isArray   

alert(Array.isArray(array0));

//

alert(array1 instanceof Array);

//   

alert(Object.prototype.toString.call(array1) === '[object Array]');

2.2配列と文字列
非常に簡単です:配列から文字列に変換し、joinを使用します.文字列から配列に変換し、splitを使用します.
// join -          ,  join

console.log(['Hello', 'World'].join(','));    // Hello,World

// split -          ,  split

console.log('Hello World'.split(' '));    // ["Hello", "World"] 

2.3要素の検索
文字列タイプindexOfはよく使われると思いますが、配列のindexOfが同じように要素を検索するために使用できることはめったに知りません.
// indexOf -     

console.log(['abc', 'bcd', 'cde'].indexOf('bcd'));  // 1



// 

var objInArray = [

    {

        name: 'king',

        pass: '123'

    },

    {

        name: 'king1',

        pass: '234'

    }

];



console.log(objInArray.indexOf({

    name: 'king',

    pass: '123'

}));    // -1



var elementOfArray = objInArray[0];

console.log(objInArray.indexOf(elementOfArray));    // 0

以上から,配列にオブジェクトを含むこの配列に対してindexOf法は深さ比較によって対応するルックアップ結果を得るのではなく,対応する要素を比較する参照にすぎないことが分かる.
2.4配列接続
concatを使用すると、concatを使用すると新しい配列が生成されることに注意してください.
var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

var array3 = array1.concat(array2); //

console.log(array3);

2.5クラスリスト操作
要素を追加するにはpushとunshiftをそれぞれ使用し、要素を除去するにはpopとshiftをそれぞれ使用します.
// push/pop/shift/unshift

var array = [2, 3, 4, 5];



//        

array.push(6);

console.log(array); // [2, 3, 4, 5, 6] 



//        

array.unshift(1);

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



//         

var elementOfPop = array.pop();

console.log(elementOfPop);   // 6

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



//        

var elementOfShift = array.shift();

console.log(elementOfShift);   // 1

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

2.6 splice方法
主な2つの用途:
1>配列の中央から要素を追加および削除
2>既存の配列から新しい配列を取得
もちろん、二つの用途は一気に合成され、一部のシーンでは用途を重視し、一部では用途を重視している.
配列の中間位置から要素を追加および削除するには、spliceメソッドで配列に要素を追加します.次のパラメータを指定します.
1>インデックスの開始(つまり、要素の追加を開始したい場所)
2>削除する要素の数または抽出する要素の数(要素を追加するときに0に設定)
3>配列に追加する要素
var nums = [1, 2, 3, 7, 8, 9];

nums.splice(3, 0, 4, 5, 6);

console.log(nums);  // [1, 2, 3, 4, 5, 6, 7, 8, 9] 

//                 

var newnums = nums.splice(3, 4);

console.log(nums);  // [1, 2, 3, 8, 9]

console.log(newnums);   // [4, 5, 6, 7] 

2.7並べ替え
主にreverseとsortの2つの方法を紹介します.配列反転はreverseを用い,sort法は単純なソートだけでなく複雑なソートにも用いることができる.
//     

var array = [1, 2, 3, 4, 5];

array.reverse();

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

まず文字列要素の配列をソートします
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];

arrayOfNames.sort();

console.log(arrayOfNames);  // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"] 

数値要素の配列をソートします
//            ,sort()               

var nums = [3, 1, 2, 100, 4, 200];

nums.sort();

console.log(nums);  // [1, 100, 2, 200, 3, 4] 

sortメソッドは辞書順に要素をソートするので,要素が文字列タイプであると仮定するので,要素時に数値タイプであっても文字列タイプとみなされる.この場合、メソッドを呼び出すときにサイズ比較関数を入力することができ、ソートすると、sort()メソッドは、その関数に基づいて配列内の2つの要素のサイズを比較し、配列全体の順序を決定します.
var compare = function(num1, num2) {

    return num1 > num2;

};

nums.sort(compare);

console.log(nums);  // [1, 2, 3, 4, 100, 200] 
var objInArray = [

    {

        name: 'king',

        pass: '123',

        index: 2

    },

    {

        name: 'king1',

        pass: '234',

        index: 1

    }

];

//          ,  index    

var compare = function(o1, o2) {

    return o1.index > o2.index;

};

objInArray.sort(compare);

console.log(objInArray[0].index < objInArray[1].index); // true

2.8反復メソッド
主にforEachとevery、someとmap、filterを含む
forEachはみんなができると信じています.主に他の4つの方法を紹介します.
everyメソッドは、配列内の各要素に対して使用されるブール型の戻り値を持つ関数を受け入れます.すべての要素に対して関数がtrueを返す場合、メソッドはtrueを返します.
var nums = [2, 4, 6, 8];

//             

var isEven = function(num) {

    return num % 2 === 0;

};

//       ,   true

console.log(nums.every(isEven)); // true

someメソッドは、ブール型の戻り値を持つ関数も受け入れ、要素が関数にtrueを返す限り、メソッドはtrueを返します.
var isEven = function(num) {

    return num % 2 === 0;

};

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

console.log(nums1.some(isEven)); // true

mapとfilterの2つの方法はいずれも新しい配列を生成することができ、mapが返す新しい配列は元の要素に関数を適用した結果である.例えば、
var up = function(grade) {

    return grade += 5;

}

var grades = [72, 65, 81, 92, 85];

var newGrades = grades.ma

filterメソッドはeveryメソッドと類似しており、ブールタイプの戻り値を持つ関数が入力されます.every()メソッドとは異なり、配列内のすべての要素に関数を適用し、結果がtrueの場合、メソッドはtrueを返すのではなく、関数を適用した結果trueの要素を含む新しい配列を返します.
var isEven = function(num) {

    return num % 2 === 0;

};

var isOdd = function(num) {

    return num % 2 !== 0;

};

var nums = [];

for (var i = 0; i < 20; i++) {

    nums[i] = i + 1;

}

var evens = nums.filter(isEven);

console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 

var odds = nums.filter(isOdd);

console.log(odds);  // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] 

3.まとめ
以上、低レベルブラウザでサポートされていない方法もいくつかありますが、その後、他の方法で互換性を実現します.
よくある方法ですが、あまり考えにくい方法かもしれません.皆さん、もっと気をつけてください.
 
参照先:
『データ構造とアルゴリズムJavaScript記述』