ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptの配列メソッドのまとめ(コード付き)

JavaScriptの配列メソッドのまとめ(コード付き)

不言
不言オリジナル
2018-08-28 17:39:001187ブラウズ

この記事は JavaScript の配列メソッドの概要を示しています (コード付き)。必要な方は参考にしていただければ幸いです。

1.copyWithin() メソッドは、元の配列を変更します。
配列の最初の 2 つの要素を最後の 2 つの要素にコピーします:
array.copyWithin(target, start, end)
パラメータの説明
target 必須。指定されたターゲットインデックスの場所にコピーします。
開始 オプション。要素のコピーの開始位置。
終了 オプション。コピーを停止するインデックス位置 (デフォルトは array.length)。負の値の場合は逆数を表します。

var arr = [1,2,3,4,5];
arr.copyWithin(3,0,2);
console.log(arr);  //1,2,3,1,2

2.every(function(){}) は元の配列を変更しません
配列内の各項目に対して関数を実行します。各項目が true を返す場合、それは true を返します。

var arr=[1,2,3,4,5];
var result=arr.every(function(item){
  return item>1;
})
console.log(result);  //false

3.some(function ( ) {}) 元の配列を変更しないでください。
配列の各項目は、True に返された項目が 1 つある場合、関数を実行します。

var arr=[1,2,3,4,5]
var result=arr.some(function(item){
  return item>1;
})
console.log(result)  //true

4.fill () Array
array.fill(value, start, end)
パラメータの説明
value 必須。埋める値。
開始 オプション。ポジションの補充を開始します。
終了 オプション。位置の充填を停止します (デフォルトは array.length です)

var arr=[1,2,3,4,5];
arr.fill("哈哈",0,3);
console.log(arr);  //[ '哈哈', '哈哈', '哈哈', 1, 2 ]

5.filter() は元の配列を変更しません
新しい配列を作成し、新しい配列の要素はすべてチェックして指定された配列の条件を満たす要素です。
注: filter() は空の配列を検出しません。

var ages = [22, 53, 16, 40];
var ar5=ages.filter(function(age){
  return age>30;
})
console.log(ar5) //[ 53, 40 ]

6.find()は元の配列を変更しません
テストに合格した(関数内で判定された)配列の最初の要素の値を返します。
find() メソッドは、配列内の要素ごとに関数の実行を 1 回呼び出します。
条件のテスト時に配列内の要素が true を返すと、find() は条件を満たす要素を返し、実行関数は実行されません。後続の値に対して呼び出されます。
条件を満たす要素が存在しない場合は、unknown が返されます。
注: 空の配列に対して find() 関数は実行されません。

var num = [212, 537, 160, 401];
function odd(x){
  return x%2;
}
var ar6=num.find(odd);
console.log(ar6);   //537

7.findIndex()は元の配列を変更しません
条件を満たすテスト条件(関数)に渡された配列の最初の要素の位置を返します。
findIndex() メソッドは、配列内の要素ごとに関数実行を 1 回呼び出します。
条件のテスト時に配列内の要素が true を返すと、findIndex() は条件を満たす要素のインデックス位置と後続の値を返します。実行関数を呼び出しても変わりません。
条件を満たす要素がない場合は、-1 が返されます。
注: 空の配列に対して findIndex() 関数は実行されません。

var num = [212, 537, 160, 401];
function odd(x){
  return x%2;
}
console.log(num.findIndex(odd)); //1

8.indexOf() は元の配列を変更しません
配列内の要素を検索し、その位置を返します。

var num = [212, 537, 160, 401];
console.log(num.indexOf(160));  //2

9.lastIndexOf() は元の配列を変更しません
指定された文字列値が出現する最後の位置を返し、文字列内の指定された位置を後ろから前に検索します。

var num = [212, 537, 160, 401];
console.log(num.indexOf(160));  //

10.join() は元の配列を変更します
配列を文字列に変換します。それ以外の場合、デフォルトはカンマです。
toString() は元の配列を変更します。配列を文字列に変換して結果を返します。パラメータはありません

var num = [212, 537, 160, 401];
console.log(num.join());  //212,537,160,401

11.map()は元の配列を変更しません

指定された関数で配列の各要素を処理し、処理された配列を返します

var arr=[12,23,45,56,78];
var arr1=arr.map(function(x){
  return x+1;
})
console.log(arr1);  //[ 13, 24, 46, 57, 79 ]
console.log(arr);   //[ 12, 23, 45, 56, 78 ]

12.forEach()は元の配列は変更しないでください。 array

メソッドは、配列の各要素を呼び出し、その要素をコールバック関数に渡すために使用されます。
注: forEach() は空の配列のコールバック関数を実行しません

var num=[ 212, 537, 160, 401 ];
num.forEach(function(num){
  return num/2;
})
console.log(num);  //[ 212, 537, 160, 401 ]

13.reduce() は元の配列を変更しません

配列内の各値から開始して関数をアキュムレータとして受け取ります (左から右へ) ) 削減され、最終的に値が計算されます。
reduce() は関数を構成するための高階関数として使用できます。
注:reduce() は空の配列のコールバック関数を実行しません

var arr=[ 12, 23, 45, 56, 78 ];
var arr2=arr.reduce(function(total,item){
  return total-item;
})
console.log(arr2); //-190
console.log(arr);  //[ 12, 23, 45, 56, 78 ]

14.reduceRight() 元の配列は変更しません

関数はreduce()と同じですが、相違点はreduceRight()が開始することです配列の最後から順に配列内の配列項目を累積します。
注:reduce() は空の配列に対してコールバック関数を実行しません

var arr=[ 12, 23, 45, 56, 78 ];
var arr2=arr.reduceRight(function(total,item){
  return total-item;
})
console.log(arr2);  //-58
console.log(arr);   //[ 12, 23, 45, 56, 78 ]

15.pop() は元の配列を変更します

配列の最後の要素を削除し、削除された要素を返します。パラメータがない場合、
shift() は元の配列を変更し、
delete して配列の最初の要素を返します。パラメータを指定しない場合、
push() は元の配列を変更します。
1 つ以上の要素を配列の末尾に追加し、新しい長さを返します。パラメーターは追加される要素であり、1 つ以上の可能性があります。
unshift() は元の配列を変更し、
1 つ以上の要素を配列の先頭に追加して、新しい長さを返します。パラメーターは追加される要素であり、1 つ以上の可能性があります

16.sort()      会改变原数组
对数组的元素进行排序,只能是一位数,如果是两位数会按字典序排列,改进:加一个回调函数

var arr2=[2,8,45,12,5,67,9];
arr2.sort(function(a,b){
  return a-b;
});
console.log(arr2);  //[ 2, 5, 8, 9, 12, 45, 67 ]

17.reverse()    会改变原数组
反转数组的元素顺序

var arr2=[ 2, 5, 8, 9, 12, 45, 67 ];
arr2.reverse();
console.log(arr2);    //[ 67, 45, 12, 9, 8, 5, 2 ]

18.valueOf()         不会改变原数组
返回数组对象的原始值,一般原样返回

var arr2=[ 67, 45, 12, 9, 8, 5, 2 ];
arr2.valueOf();
console.log(arr2);  //[ 67, 45, 12, 9, 8, 5, 2 ]
// 可以自己定义一个对象的valueOf()方法来覆盖它原来的方法。
// 这个方法不能含有参数,方法里必须return一个值。
var x = {};
x.valueOf = function(){
    return 10;
}
console.log(x+1);// 输出10
console.log(x+"hello");//输出10hello

19.slice()       不会改变原数组
选取数组的的一部分,并返回一个新数组。
array.slice(start, end)
参数        描述
start       可选。规定从何处开始选取(包括)。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元                 素,-2 指倒数第二个元素,以此类推。
end         可选。规定从何处结束选取(不包括)。该参数是数组片断结束处的数组下标。
                如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。
                如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

var arr2=[ 67, 45, 12, 9, 8, 5, 2 ];
console.log(arr2.slice(1,4));  //[ 45, 12, 9 ]
console.log(arr2);     //[ 67, 45, 12, 9, 8, 5, 2 ]

20.splice()    会改变原始数组
方法用于插入、删除或替换数组的元素。
array.splice(index,howmany,item1,.....,itemX)
参数                       描述
index                     必需。规定从何处添加/删除元素。
                              该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany               必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
                              如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX     可选。要添加到数组的新元素

arr3=[2,3,4,5,6,7,8];
//删除
arr3.splice(2,3);
console.log(arr3);   //[ 2, 3, 7, 8 ]
//增加
arr3.splice(1,0,9,10);
console.log(arr3);  //[ 2, 9, 10, 3, 7, 8 ]
//替换
arr3.splice(0,3,8,7,3);  //[ 8, 7, 3, 3, 7, 8 ]
console.log(arr3);

最后再小结一下:

会改变原数组的方法:copyWithin()、fill()、join()、pop()、push()、shift()、unshift()、sort()、reverse()、splice();

不会改变原数组的方法:every()、some()、filter()、find()、findIndex()、indexOf()、lastIndexOf()、map()、forEach()、reduce()、reduceRight()、valueOf()、slice();

相关推荐:

对JavaScript数组的方法总结

JavaScript数组中的indexOf方法

以上がJavaScriptの配列メソッドのまとめ(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。