JavaScriptの配列操作方法のまとめ（例付き）

この記事は JavaScript の配列操作方法をまとめたものです (例付き)。必要な方は参考にしていただければ幸いです。

ECMAScript には、配列にすでに含まれている項目を操作するためのメソッドが多数用意されています。ここでは、数多くある方法のうち、元の配列を変更するかどうかを分類基準として、それぞれの方法について私なりの理解をまとめ、一つ一つ説明していきます。

1. 元の配列は変更されません

1. concat()

使用方法: array.concat(array2,array3,...,arrayX)

戻り値: 新しい配列を返します。

concat() メソッドは、2 つ以上の配列を連結するために使用されます。このメソッドは既存の配列を変更せず、連結された配列のコピーを返すだけです。

引数が渡されない場合、現在の配列をコピーしてそのコピーを返します。渡された値が配列でない場合、値は結果の配列の末尾に追加されます。

var arr1 = [1,2,3];
var arr2 = arr1.concat(4,[5,6]);

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

2. join()

使用方法: array.join(separator)

戻り値: 文字列を返します

join() メソッドはすべてに使用されます。配列内の要素は文字列に入れられます。要素は指定された区切り文字で区切られます。デフォルトでは要素の区切りに「,」が使用されますが、元の配列は変更されません。

var arr1 = [1,2,3];
var arr2 = arr1.join();

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // 1,2,3

は以前、複数の連続する * を生成する必要がある関数に遭遇しました。最初は for ループを使用して直接実行できましたが、後で join() メソッドについて学習した後、それが実行できることがわかりました。たった一言。

var arr3 = "";
for(let i = 0; i < 15; i ++) {
    arr3 = arr3 + "*";
}
console.log(arr3);  // ***************

var arr4 = new Array(16).join("*");
console.log(arr4);  // ***************

3.slice()

使用方法: array.slice(start, end)

戻り値: 先頭から末尾までを含む (この要素を除く) 新しい配列を返します。

slice() は、返される項目の開始位置と終了位置である 1 つまたは 2 つのパラメータを受け取ります。

パラメータが 1 つだけの場合、slice() メソッドはパラメータで指定された位置から現在の配列の末尾までのすべての項目を返します。
パラメータが 2 つある場合、メソッドは先頭と末尾の間の項目を返します。 -- ただし、終了位置の項目は含まれません。
パラメータが負の数の場合、配列の末尾から始まる位置を指定します。つまり、-1 は最後の要素を指し、-2 は最後から 2 番目の要素を指し、以下同様になります。

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1);
var arr3 = arr1.slice(2,4);
var arr4 = arr1.slice(-4,-2);  // 等价于 arr1.slice(2,4);

console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2);  // [ 2, 3, 4, 5, 6 ]
console.log(arr3);  // [ 3, 4 ]
console.log(arr4);  // [ 3, 4 ]

は、このメソッドを使用して疑似配列を標準 data

    Array.prototype.slice.call(arguments)

に変換します。

4. some()

使用方法: array.some(function(currentValue,index,arr),thisValue)

Return value: ブール値

or ==> 関数がいずれかの項目に対して true を返した場合、残りの要素はテストを実行しません。要素が条件を満たす場合、false を返します。

function compare(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].some(compare);  // false
[20, 5, 8, 1, 4].some(compare);  // true

5.every()

使用方法: array.every(function(currentValue,index,arr),thisValue)

戻り値: ブール値

==> each() は、配列内の各項目に対して指定された関数を実行します。関数が各項目に対して true を返した場合、条件を満たさない要素がある場合は残りの要素はテストされず、false が返されます。

function compare(item, index, arr){
    return item > 10;
}

[20, 50, 80, 11, 40].every(compare);  // true
[20, 50, 80, 10, 40].every(compare);  // false

5. filter()

使用方法: array.filter(function(currentValue,index,arr), thisValue)

戻り値: return array

filter() メソッドは新しい配列を作成し、新しい配列内の要素が、条件を満たす指定された配列内のすべての要素についてチェックされます。

配列の各項目に対して指定された関数を実行し、結果が true となる項目で構成される配列を返します。

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]

6.map()

使用方法:array.map(function(currentValue,index,arr),thisValue)

戻り値:配列を返します

map() メソッドは新しい配列を返し、配列内の要素は関数呼び出し後の元の配列要素の値になります。

function mapArr(item, index, arr){
    return item * 4;
}

[2, 5, 8, 1, 4].map(mapArr);  // [8,20,32,4,16]

筆記試験や面接でよく聞かれる質問は、map 配列メソッドの実装です。以下は、私が書いた forEach()##6 です。 #使用法：array.forEach(function(currentValue,index,arr),thisValue)

戻り値：未定義

forEach() メソッドは、配列の各要素を呼び出し、その要素を Callback に渡すために使用されます。 。このメソッドには戻り値がありません。
for ループを使用して配列を反復処理するのと基本的に同じです。

var arr = [2, 4, 8, 6, 1];

Array.prototype.myMap = function (fn, thisValue) {
    var arr = this,
        len = arr.length,
        tmp = 0,
        result = [];
    thisValue = thisValue || null;
    for (var i = 0; i < len; i++) {
        var item = arr[i],
            index = i;
        tmp = fn.call(thisValue, item, index, arr);
        result.push(tmp);
    }
    return result
}

function mapArr(item, index, arr) {
    return item * 4;
}
arr.myMap(mapArr)   // [8, 16, 32, 24, 4]

7.reduce()とreduceRight()

使用方法:array.reduce(function(total, currentValue, currentIndex, arr),initialValue)

戻り値: 戻り値の計算結果

パラメータ説明##function(total,currentValue ,インデックス、arr)initialValue

必須。配列の各要素を実行するために使用される関数。

オプション。関数に渡される初期値

函数参数

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法中数组的第一项开始，逐个遍历到最后；而reduceRight()则从数组的最后一项开始，向前遍历到第一项。

如果没有设置initialValue，total的值为数组第一项，currentValue为数组第二项。
如果设置了initialValue，则total的值就是initialValue，currentValue为数组第一项。

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum);

console.log(numbers);  // [ 65, 44, 12, 4 ]
console.log(res);  //  125

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum, 10);  // 初始值设置为10，所以最终结果也相应的加10

console.log(res);  //  135

具体reduce()方法用得好是能起到很大的作用的，对于批量修改从后台获取的数据十分有用，可以参考JS进阶篇--JS数组reduce()方法详解及高级技巧

二、会改变原数组

1. push()

使用方法：array.push(item1, item2, ..., itemX)
返回值： 返回新数组的长度

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);

console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6

2. pop()

使用方法：array.pop()
返回值： 数组原来的最后一个元素的值（移除的元素）

pop()方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.pop();

console.log(arr); // [ 65, 44, 12 ]
console.log(arr1); //  4

3. unshift()

使用方法：array.unshift(item1,item2, ..., itemX)
返回值： 返回新数组的长度

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.unshift(1);

console.log(arr); // [ 1, 65, 44, 12, 4 ]
console.log(arr1); //  5

4. shift()

使用方法：array.shift()
返回值： 数组原来的第一个元素的值（移除的元素）

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.shift();

console.log(arr); // [ 44, 12, 4 ]
console.log(arr1); //   65

5. sort()

使用方法：array.sort(sortfunction)
返回值： 返回排序后的数组（默认升序）

sort() 法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。

P.S 由于排序是按照 Unicode code 位置排序，所以在排序数字的时候，会出现"10"在"5"的前面，所以使用数字排序，你必须通过一个函数作为参数来调用。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values);  // [ 0, 1, 10, 15, 5 ]

values.sort(function(a, b){
  return a - b;
})
console.log(values);  //  [0, 1, 5, 10, 15 ]

6. reverse()

使用方法：array.reverse()
返回值： 返回颠倒后的数组

reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。

var values = [0, 1, 5, 10, 15];
values.reverse();
console.log(values);  // [ 15, 10, 5, 1, 0 ]

7. fill()

使用方法：array.fill(value, start, end)
返回值： 返回新的被替换的数组

fill()方法用于将一个固定值替换数组的元素。

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置(不包含) (默认为 array.length)

var values = [0, 1, 5, 10, 15];
values.fill(2);
console.log(values);  // [ 2, 2, 2, 2, 2 ]

values = [0, 1, 5, 10, 15];
values.fill(2,3,4);
console.log(values);  // [ 0, 1, 5, 2, 15 ]

8. splice()

使用方法：array.splice(index,howmany,item1,.....,itemX)

返回值： 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组

splice()有多种用法：

1、删除: 可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。splice(0,2) // 会删除数组中前两项

2、插入: 可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。splice(2,0,1,4) // 会从数组位置2的地方插入1和4

3、替换: 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需提供3个参数：起始位置、要删除的项数和要插入的项。插入的项不必与删除的项数相等。splice(2,3,1,4) // 会从数组位置2删除两项，然后再从位置2的地方插入1和4

// 删除
var values = [4,8,0,3,7];
var remove = values.splice(3,1);
console.log(values);  // [ 4, 8, 0, 7 ]
console.log(remove);  // [ 3 ]    删除第四项
// 插入
remove = values.splice(2,0,1,2);
console.log(values);  // [ 4, 8, 1, 2, 0, 7 ]
console.log(remove);  // []  从位置2开始插入两项，由于没有删除所有返回空函数
// 替换
remove = values.splice(2,2,6,9,10);
console.log(values);  // [ 4, 8, 6, 9, 10, 0, 7 ]
console.log(remove);  // [ 1, 2 ]  从位置2开始删除两项，同时插入三项

以上がJavaScriptの配列操作方法のまとめ（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。