検索
ホームページウェブフロントエンドjsチュートリアルJavaScript でよく使用される Array オブジェクトのメソッドの紹介 (コード例)

この記事では、JavaScript でよく使用される Array オブジェクトのメソッド (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

js では、配列は特別なオブジェクトです。これは私たちがよく使用するデータ形式です。今日は、一般的に使用される配列メソッドを整理しましょう。

1. 基本

いくつかの基本的なメソッドを簡単に紹介します:
配列の作成

var arr1 = new Array();  //括号可以传参,指定数组长度。目前arr1.length是0
var arr2 = new Array(3);//arr2.length是3
var arr3 = new Array(1,2,3,4);  //当传多个参数时,js会把这些参数作为数组的初始值。
console.log(arr3);  // [1,2,3,4]

new Array () 配列を作成するときの注意点が 1 つあります。パラメータが 1 つだけ渡される場合、値が数値以外の場合。配列の最初のパラメータとして使用され、長さ 1 の配列が生成されます。数値の場合は、その数値の長さの空の配列が作成されます。

しかし、実際には、上記の作成方法は一般的には使用されていません。私たちはこのように書くことに慣れています

var arr = [];
var arr = [0,1,2,3]

基本的なメソッド

arr.length  //数组的长度
arr[1] //数组下标是1的值。数组的下标从0开始计数
arr.push(值) //往数组添加元素

2. その他のメソッド

var arr = ["element1","element2","element3","element4"];     //下面所有案列都是用的这个数组

//获取指定元素的下标
var index = arr. indexOf(”element2“);   // 1

(1)splice(index,number,item1,..., itemX ) は、配列の要素を追加または削除し、削除された要素を返します。

##index必須。整数。項目を追加/削除する位置。配列の末尾からの位置を負の数値で指定します。 #番号#item1, ..., itemXオプション。新しい項目が配列に追加されました。 実際の例を見てみましょう
//删除
let getReturn = arr.splice(1,1);
console.log(getReturn);  // ["element2"]
console.log(arr);    //["element1",","element3","element4"]

//添加
let getReturn = arr.splice(arr.length,0,"element5","element6");
console.log(getReturn);  //[]
console.log(arr);    //["element1","element2","element3","element4","element5","element6"]
パラメータ 説明
必須。削除するアイテムの数。 0 に設定すると、項目は削除されません。
(2) Pop() メソッドでは、配列の最後のビットを削除し、削除された要素を返します。

let getReturn = arr.pop();
console.log(getReturn);    //element4
console.log(arr);    //["element1","element2","element3"]
(3) slide(start,end) は、既存の配列から選択された要素を返します。

パラメータ 説明 ##start必須。整数。項目を追加/削除する位置。配列の末尾からの位置を負の数値で指定します。 必須。削除するアイテムの数。 0 に設定すると、項目は削除されません。 注: このメソッドは配列を変更するのではなく、部分配列を返すことに注意してください。配列から要素のセグメントを削除する場合は、Array.splice() メソッドを使用する必要があります。
let getReturn = arr.slice(1,3);
console.log(getReturn);    //["element2", "element3"]
console.log(arr);    //["element1", "element2", "element3", "element4"]
(4) join(separator) は、配列内のすべての要素を文字列に入れます。
終了

区切り文字: オプション。使用する区切り文字を指定します。このパラメータを省略した場合は、カンマが区切り文字として使用されます。

let getReturn = arr.join();
console.log(getReturn);    //element1,element2,element3,element4
console.log(arr);    //["element1", "element2", "element3", "element4"]

(5) concat(array1,array2,...,arrayX) メソッドは、2 つ以上の配列を接続するために使用されます。

配列X: 必須。このパラメータには、特定の値または配列オブジェクトを指定できます。任意の数値を指定できます。

//传数组
let getReturn = arr.concat(['element5',"element6"],["element7"]);
console.log(getReturn);    //["element1", "element2", "element3", "element4", "element5", "element6", "element7"]
console.log(arr);    // ["element1", "element2", "element3", "element4"]

//传元素
let getReturn = arr.concat('element5',"element6");
console.log(getReturn);    //["element1", "element2", "element3", "element4", "element5", "element6"]
console.log(arr);    //["element1", "element2", "element3", "element4"]

(6) sort(sortby) メソッドは、配列の要素をソートするために使用されます。

sortby: オプション。ソート順を指定します。関数である必要があります。

戻り値: 配列への参照。配列は元の配列に基づいてソートされ、新しい配列は生成されないことに注意してください。

比較ルール: 文字エンコーディングに従って並べ替えるので、結果が希望どおりにならない可能性があります。それを解決するにはパラメーターを渡す必要があります。

let newArr = [3,5,2,4,1];

let getReturn = newArr.sort();
console.log(getReturn);      //[1, 2, 3, 4, 5]
console.log(newArr);    //[1, 2, 3, 4, 5]

今回ほど良くない別の例を見てみましょう。 want

let newArr = [1000,88,93,6,34];
let getReturn = newArr.sort();
console.log(getReturn);    //[1000, 34, 6, 88, 93]
console.log(newArr);    // [1000, 34, 6, 88, 93]

//要实现大小排序,我们需要传参数解决
function sortNumber(a,b){    //定义函数
    return a - b
}
let getReturn = newArr.sort();
console.log(getReturn);    //[6, 34, 88, 93, 1000]
console.log(newArr);    //[6, 34, 88, 93, 1000]

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

配列が空の場合、shift() メソッドは何も行わず、未定義の値を返します。

  let getReturn = arr.shift();
  console.log(getReturn);    //element1
  console.log(arr);    //["element2","element3","element4"]

(8) unshift() メソッドは、配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します。

arr.unshift(newelement1,newelement2,....,newelementX)

  let getReturn = arr.unshift("element-1","element0");
  console.log(getReturn);    //6
  console.log(arr);    //["element-1","element0","element1","element2","element3","element4"]

(9) toString() メソッドは、配列を文字列に変換し、結果を返すことができます。

arr.unshift(newelement1,newelement2,....,newelementX)

  let getReturn = arr.toString();
  console.log(getReturn,typeof getReturn);    //element1,element2,element3,element4 string
  console.log(arr,typeof arr);    //["element1", "element2", "element3", "element4"] "object"

注: 文字列操作に使用すると、JavaScript はこのメソッドを呼び出して、配列を自動的に string に変換します。例:

let string = arr+"123";
console.log(string);    //element1,element2,element3,element4123

(10) reverse() メソッドは、配列内の要素の順序を逆にするために使用されます。

このメソッドは、新しい配列を作成せずに元の配列を変更します。

  let getReturn = arr.reverse();
  console.log(getReturn);    //["element4", "element3", "element2", "element1"]
  console.log(arr);    //["element4", "element3", "element2", "element1"]

3. また、

さらに、valueOf()、toLocaleString()、および toSource() メソッドがあります。ただ、私は使ったこともないし、利用シーンも思い浮かばないので、分けて話しません。

以上がJavaScript でよく使用される Array オブジェクトのメソッドの紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
Java vs JavaScript:開発者向けの詳細な比較Java vs JavaScript:開発者向けの詳細な比較May 16, 2025 am 12:01 AM

Javaandjavascriptaredistinctlanguages:javaisusedforenterpriseandmobileapps、whilejavascriptisforinteractivewebpages.1)javaiscompiled、staticatically、andrunsonjvm.2)javascriptisisterted、dynamsornoded.3)

JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1)グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2)バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3)パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント://および / * *を使用するためのガイドJavaScriptコメント://および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments:シングルライン(//)およびマルチライン(//)

Python vs. JavaScript:開発者の比較分析Python vs. JavaScript:開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript:ジョブに適したツールを選択するPython vs. JavaScript:ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1)データサイエンスおよび自動化タスクのPythonを選択します。 2)フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript:それぞれの強みを理解するPythonとJavaScript:それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア:CまたはCの上に構築されていますか?JavaScriptのコア:CまたはCの上に構築されていますか?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション:フロントエンドからバックエンドまでJavaScriptアプリケーション:フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例:Webページテキストのコンテンツを変更します。 2。バックエンドの例:node.jsサーバーを作成します。

See all articles

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 中国語版

SublimeText3 中国語版

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

SublimeText3 Mac版

SublimeText3 Mac版

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