コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptにおける一般的な配列操作方法のまとめ（コード）

JavaScriptにおける一般的な配列操作方法のまとめ（コード）

不言
リリース： 2019-04-13 10:57:47
転載
2689 人が閲覧しました

この記事は、JavaScript における一般的な配列操作方法をまとめたもの (コード) であり、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。

1. concat()

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

var arr1 = [1,2,3];    
var arr2 = [4,5];    
var arr3 = arr1.concat(arr2);
console.log(arr1);//[1, 2, 3]
console.log(arr3);//[1, 2, 3, 4, 5]
ログイン後にコピー

2. join()

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

var arr = [2,3,4];
console.log(arr.join());//2,3,4
console.log(arr);//[2, 3, 4]
ログイン後にコピー

3.push()

push() メソッドは、配列の末尾に 1 つ以上の要素を追加し、新しい長さを返すことができます。最後に追加すると長さが返され、元の配列が変更されます。 

var a = [2,3,4];    
var b = a.push(5);
console.log(a); //[2,3,4,5]
console.log(b);//4
push方法可以一次添加多个元素push(data1,data2....)
ログイン後にコピー

4.pop()

pop() メソッドは、配列の最後の要素を削除して返します。最後の要素を返すと、元の配列が変更されます。 

var arr = [2,3,4];
console.log(arr.pop());//4
console.log(arr); //[2,3]
ログイン後にコピー

5.shift()

shift() メソッドは、配列の最初の要素を削除し、最初の要素の値を返すために使用されます。元の配列を変更して、最初の要素を返します。 

var arr = [2,3,4];
console.log(arr.shift()); //2
console.log(arr);  //[3,4]
ログイン後にコピー

6. unshift()

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

var arr = [2,3,4,5];
console.log(arr.unshift(3,6)); //6
console.log(arr); //[3, 6, 2, 3, 4, 5]
ログイン後にコピー

7.slice()

arrayObject の要素を最初から最後まで含む新しい配列を返します (この要素は除きます)。選択された要素を返します。このメソッドは元の配列を変更しません。 

var arr = [2,3,4,5];
console.log(arr.slice(1,3));  //[3,4]
console.log(arr);  //[2,3,4,5]
ログイン後にコピー

8. splice()

splice() メソッドは、インデックスから始まる 0 個以上の要素を削除し、それらをパラメータ リスト要素で宣言された 1 つ以上の値に置き換えることができます。削除されました。 arrayObject から要素が削除された場合、削除された要素を含む配列が返されます。 splice() メソッドは配列を直接変更します。 

var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a);  // [5, 9, 6, 7, 8]    
var b = [5,6,7,8];
console.log(b.splice(1,2,3));  //[6, 7]
console.log(b); //[5, 3, 8]
ログイン後にコピー

9. substring() と substr()

同じ点: パラメーターを 1 つだけ記述する場合:

substr(startIndex);

#substring(startIndex);


どちらも同じ機能を持ち、現在の添字から文字列の末尾までの文字列フラグメントをインターセプトします。 

var str = '123456789';
console.log(str.substr(2));    //  "3456789"
console.log(str.substring(2));//  "3456789"
ログイン後にコピー
違い: 2 番目のパラメータ

substr(startIndex,lenth): 2 番目のパラメータは文字列の長さをインターセプトします (開始点から一定の長さの文字列をインターセプトします)

substring (startIndex, endIndex): 2 番目のパラメーターは、文字列の最後の添字をインターセプトします (2 つの位置の間の文字列をインターセプトします。「先頭は含みますが末尾は含みません」)

console.log("123456789".substr(2,5));    //  "34567"
console.log("123456789".substring(2,5));//  "345"
ログイン後にコピー
10.sort 並べ替え

Unicode コード位置による並べ替え、デフォルトの昇順:

    var Fruit = ['cherry', 'apples', 'bananas'];
  • fruit.sort(); / / ['apples', 'bananas', 'cherry']
var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]
ログイン後にコピー
11. reverse()

reverse() メソッドは、配列内の要素の順序を逆にするために使用されます。返されるのは反転された配列であり、元の配列が変更されます。 

var arr = [2,3,4];
console.log(arr.reverse()); //[4, 3, 2]
console.log(arr);  //[4, 3, 2]
ログイン後にコピー
Twelve、indexOf および lastIndexOf

はどちらも、検索する値と検索の開始位置という 2 つのパラメーターを受け入れます。
存在しない場合は -1 を返し、存在する場合は位置を返します。 indexOf は前から後ろに検索し、lastIndexOf は後ろから前に検索します。 

indexOf：
var a = [2, 9, 9];
    a.indexOf(2); // 0
    a.indexOf(7); // -1
if (a.indexOf(7) === -1) {      
// element doesn't exist in array   
}

lastIndexOf：
var numbers = [2, 5, 9, 2];
    numbers.lastIndexOf(2);     // 3
    numbers.lastIndexOf(7);     // -1
    numbers.lastIndexOf(2, 3);  // 3
    numbers.lastIndexOf(2, 2);  // 0
    numbers.lastIndexOf(2, -2); // 0
    numbers.lastIndexOf(2, -1); // 3
ログイン後にコピー
13.every

配列の各項目に対して指定された関数を実行し、各項目が ture を返す場合は true を返します。 

function isBigEnough(element, index, array) {
      return element < 10;
}
[2, 5, 8, 3, 4].every(isBigEnough);   // true
ログイン後にコピー

14.some

配列の各項目に対して指定された関数を実行します。いずれかの項目が ture を返す場合、true を返します。 

function compare(element, index, array) {
      return element > 10;
}
[2, 5, 8, 1, 4].some(compare);  // false
[12, 5, 8, 1, 4].some(compare); // true
ログイン後にコピー
15. filter

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

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];    
var longWords = words.filter(function(word){
      return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]
ログイン後にコピー
16.map

配列の各項目に対して指定された関数を実行し、各関数呼び出しの結果を返して新しい配列を形成します。 

var numbers = [1, 5, 10, 15];    
var doubles = numbers.map(function(x) {
       return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
ログイン後にコピー
17. forEach 配列トラバーサル 

const items = ['item1', 'item2', 'item3'];    
const copy = [];    
items.forEach(function(item){
    copy.push(item)
});
ログイン後にコピー
18.reduce

reduce は、配列内の各要素に対してコールバック関数を順番に実行します。ただし、削除された要素または削除されていない要素は除きます。配列 割り当てられた要素は、初期値 (または最後のコールバック関数の戻り値)、現在の要素の値、現在のインデックス、およびreduce が呼び出される配列の 4 つのパラメータを受け入れます。 

无初始值：
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
ログイン後にコピー
印刷結果:
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
ご覧いただけます。上の例では、インデックスは 1 から始まり、最初の prev の値が配列の最初の値になります。配列の長さは 4 ですが、reduce 関数は 3 回ループします。

初期値あり: 

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);
ログイン後にコピー
印刷結果:
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3 , 4] 10
この例では、インデックスは 0 から始まり、最初の prev 値は設定した初期値 0 で、配列の長さは 4 で、reduce 関数は 4 回ループします。

結論:initialValue が指定されていない場合、reduce は最初のインデックスをスキップしてインデックス 1 からコールバック メソッドを実行します。 initialValue が指定されている場合は、インデックス 0 から開始します。
ES6 では、配列を操作するための新しいメソッドが追加されました
1. find()
コールバック関数を渡し、現在の検索ルールを満たす配列内の最初の要素を見つけて返し、検索を終了します。 

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1
ログイン後にコピー
2. findIndex()

コールバック関数を渡し、現在の検索ルールを満たす配列内の最初の要素を見つけ、その添え字を返し、検索を終了します。 

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0
ログイン後にコピー
3.fill()

配列内の要素を新しい要素に置き換えると、置き換えられる添え字の範囲を指定できます。 

arr.fill(value, start, end)
ログイン後にコピー

4、copyWithin()
选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))
// [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1))
// [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))
// [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2
ログイン後にコピー

5、from
将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组。

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
ログイン後にコピー

6、of
用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8)// [3, 11, 8]
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7);// [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]
ログイン後にコピー

7、entries() 返回迭代器：返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
      console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
      console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
      console.log(v)
}
// ['a', 'a'] ['b', 'b']
ログイン後にコピー

8、values() 返回迭代器：返回键值对的value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
      console.log(v)
}
//'a' 'b' 'c'

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
      console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
      console.log(v)    
}
// 'a' 'b'
ログイン後にコピー

9、keys() 返回迭代器：返回键值对的key

//数组
const arr = ['a', 'b', 'c'];    
for(let v of arr.keys()) {
      console.log(v)
}
// 0 1 2

//Set
const arr = new Set(['a', 'b', 'c']);    
for(let v of arr.keys()) {
      console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
      console.log(v)
}
// 'a' 'b'
ログイン後にコピー

10、includes
判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。

var a = [1, 2, 3];
    a.includes(2); // true
    a.includes(4); // false
ログイン後にコピー

【相关推荐：JavaScript视频教程】

以上がJavaScriptにおける一般的な配列操作方法のまとめ（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript
ソース：segmentfault.com
前の記事：新しいオペレーターの詳しい使い方紹介 次の記事：スロットルバルブとデバウンシングの基本的な実装方法の紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート