JavaScript 配列の一般的な操作テクニック

前書き

皆さんは、jquery やアンダースコア、$.isArray、_.some、_.find、その他のメソッドなどの他のライブラリでの一般的な配列関連の操作に慣れていると思います。これは、ネイティブ JS での配列操作のための追加のパッケージ化にすぎません。
ここでは主にJavaScriptの配列操作に共通するAPIをまとめます。プログラムの問題を解決するのに誰もが役立つと信じています。

1. プロパティ
JavaScript の配列は、オフセットを表すために使用されるオブジェクトのプロパティであり、インデックスは整数である場合があります。ただし、JavaScript オブジェクトのプロパティ名は文字列である必要があるため、これらの数値インデックスは内部で文字列型に変換されます。

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 配列と文字列

は非常に簡単です。配列から文字列に変換するには、join を使用し、文字列から配列に変換するには、split を使用します。

// join - 由数组转换为字符串，使用join
console.log(['Hello', 'World'].join(','));    // Hello,World
// split - 由字符串转换为数组，使用split
console.log('Hello World'.split(' '));    // ["Hello", "World"]

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 メソッドは詳細な比較を通じて対応する検索結果を取得するのではなく、対応する要素の参照を比較するだけです。

4 配列接続

concat を使用します。 concat を使用すると、新しい配列が生成されることに注意してください。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 实现数组连接之后，会创建出新的数组
console.log(array3);

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]

6 splice メソッド

には、主に 2 つの用途があります:
① 配列の途中で要素を追加および削除する
② 元の配列から新しい配列を取得する

もちろん、2 つの用途は一度に組み合わされます、シナリオによっては目的 1 に重点を置き、シナリオによっては目的 2 に重点を置きます。

配列の途中から要素を追加および削除します。splice メソッドでは、次のパラメーターを指定する必要があります
① 開始インデックス (つまり、要素の追加を開始する場所)
② 削除する要素の数、または抽出する要素の数 (要素を追加する場合、このパラメータは 0 に設定されます)
③ 配列に追加したい要素

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]

7 並べ替え

主に 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

8 iteratorメソッド

には、主にforEachとevery、someandmap、filter
forEachが含まれます。他の4つのメソッドを中心に紹介します。
すべてのメソッドは、戻り値がブール型である関数を受け入れ、配列内の各要素にこの関数を使用します。関数がすべての要素に対して 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 メソッドはどちらも、新しい配列を生成できます。map によって返される新しい配列は、元の要素に特定の関数を適用した結果です。例:

var up = function(grade) {
    return grade += 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma

filter メソッドは、戻り値がブール型である関数を渡すという点で、every メソッドとよく似ています。 Every() メソッドとは異なり、関数が配列内のすべての要素に適用され、結果が 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 プログラミング設計に役立つことを願っています。