ホームページ ウェブフロントエンド jsチュートリアル JavaScriptにおける一般的な配列操作方法のまとめ(コード)

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

Apr 13, 2019 am 10:57 AM
javascript

この記事は、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 サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

See all articles