ホームページ ウェブフロントエンド jsチュートリアル JavaScript における配列オブジェクトの概要

JavaScript における配列オブジェクトの概要

Jun 26, 2017 am 09:07 AM
javascript js 物体 配列 詳しい説明

配列オブジェクトは、単一の変数に複数の値を格納するために使用される配列オブジェクトです。JS 配列は弱く型指定されているため、配列要素にはオブジェクトや他の配列を含めることができます。

  • 配列を作成するための構文

1. 配列コンストラクター

1、var list=new Array();2、var list=new Array(size);3、var list=new Array(element0,element1,...elementn);
ログイン後にコピー

var Array[element0,element1,...elementn];
ログイン後にコピー
rree

    配列の分類
  • 1.次元配列、2 の本質次元配列とは、配列内の要素も配列であることを意味します。
var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
ログイン後にコピー

2. 疎配列

疎配列とは、0 から始まる不連続なインデックスを含む配列です。スパース配列では、length 属性の値が実際の要素数よりも大きくなるのが一般的です (まれです)

Example

var a=["a",,"b",,,,"c",,];< /code ><br/><br/><code>var a=["a",,"b",,,,"c",,];

  • 数组对象属性

属性作用
length 属性表示数组的长度,即其中元素的个数
prototype 属性返回对象类型原型的引用
constructor 属性表示创建对象的函数

1、length 属性

通过一些操作来讲解length属性
var arr=[1,2,3,4,5,6,7,8,9,10];//定义了一个包含10个数字的数组。
数组的长度属性是可变的

var list[1,true,null,undefined,{x:1},[1,2,3]];
ログイン後にコピー

访问数组元素

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素
ログイン後にコピー

减小数组长度

alert(arr.length); //显示数组的长度10
arr.length=15; //增大数组的长度,length属性是可变的
alert(arr.length); //显示数组的长度已经变为15
ログイン後にコピー

恢复数组长度

alert(arr[3]); //显示第4个元素的值,为4
ログイン後にコピー

2、prototype 属性

prototype 属性返回对象类型原型的引用。prototype 属性是object共有的。
objectName.prototype
objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

对于数组对象,用以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。

arr.length=2; //将数组的长度减少到2,数组中的元素只剩下索引值小于2的元素
alert(arr[9]); //这时候显示第10个元素已经变为"undefined"因为索引值大于等于2的元素都被抛弃了
ログイン後にコピー

该代码执行后,y 保存数组 x 中的最大值,或说 6。

3、constructor 属性

constructor 属性表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明:constructor 属性是所有具有prototype 的对象的成员。它们包括除 GlobalMath对象以外的所有JScript固有对象。constructor

配列オブジェクトのプロパティ

  • property

  • function

lengthプロパティは、配列の長さ、つまり配列内の要素の数を表しますプロトタイプ属性戻り値オブジェクト 型プロトタイプの参照コンストラクター属性は、オブジェクトを作成する関数を表します
1、length属性var arr=[ 1,2,3,4,5,6,7,8,9,10];//10 個の数値を含む配列を定義します。
arr.length=10; //将数组长度恢复为10
alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回,显示"undefined"
ログイン後にコピー
配列要素にアクセスします
function array_max( )
{   var i, max = this[0];   for (i = 1; i < this.length; i++)
   {       if (max < this[i])
       max = this[i];
   }   return max;
}Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );
ログイン後にコピー
x = new String("Hi");if (x.constructor == String) // 进行处理(条件为真)。//或function MyFunc {// 函数体。
}

y = new MyFunc;if (y.constructor == MyFunc) // 进行处理(条件为真)。
ログイン後にコピー
y = new Array();
ログイン後にコピー
2. プロトタイプ属性objectName.prototype説明: プロトタイプ属性を使用して、オブジェクトのクラスの基本関数のセットを提供します。 オブジェクトの新しいインスタンスは、オブジェクトのプロトタイプに割り当てられた操作を「継承」します。 配列オブジェクトにメソッドを追加して、配列内の最大要素値を返します。これを実現するには、関数を宣言し、それを Array.prototype に追加して使用します。 このコードが実行されると、y は配列 x の最大値、つまり 6 を保持します。
3. コンストラクター属性 constructor 属性は、オブジェクトを作成する関数を表します。 説明: constructor プロパティは、prototype を持つすべてのオブジェクトのメンバーです。これらには、Global オブジェクトと Math オブジェクトを除くすべての JScript ネイティブ オブジェクトが含まれます。 constructor 属性は、特定のオブジェクト インスタンスを構築する関数への参照を保持します。たとえば:
var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]
ログイン後にコピー
ログイン後にコピー
forarrays:rreeemethodfunction concat()2つ以上の配列を接続し、結果を返しますjoin()配列の要素を文字列に結合しますpop()削除して返す配列の最後の要素push()配列の末尾に 1 つ以上の要素を追加し、新しい長さを返しますreverse配列内の要素の順序を反転しますshift()Delete そして、配列の最初の要素を返しますslice()既存の配列から選択された要素を返しますsort() 配列要素を並べ替えますsplice ()要素を削除し、配列に新しい要素を追加しますtoSource()オブジェクトのソースコードを返しますtoString()配列を文字列に変換して結果を返しますtoLocalString() 配列をローカル要素に変換し、結果を返しますunshift 1 つ以上の要素を配列の先頭に追加し、新しい長さを返します
を説明します。いくつかの操作による length 属性配列の長さ属性は可変です
配列の長さを減らす配列の長さを元に戻す
prototype </ code> プロパティは、オブジェクト型のプロトタイプへの参照を返します。 <code>prototype 属性は object に共通です。 objectName パラメーターは、object オブジェクトの名前です。
配列オブジェクトの場合、次の例を使用して、prototype 属性の使用方法を示します。
var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]
ログイン後にコピー
ログイン後にコピー
object.constructor //object は、オブジェクトまたは関数の名前です。
Objectarray
description:その一部はecmascript5の新しい機能(ie678でサポートされていない)
🎜valueof()🎜🎜Return配列オブジェクトの元の値は、配列object🎜🎜🎜🎜map()を介してループ()を介してarray🎜🎜🎜🎜filter()🎜🎜filtersにマッピングします。 Every()🎜🎜check 判定🎜🎜🎜🎜 some()🎜🎜チェックして判定🎜🎜🎜🎜reduce()🎜🎜特定の操作をペアで実行🎜🎜🎜🎜reduceRight()🎜🎜操作を右から左に実行🎜 🎜 🎜🎜indexOf()🎜🎜特定の要素を見つけるための配列の取得🎜🎜🎜🎜Array.isArray([])🎜🎜それが配列であるかどうかを判断する🎜🎜🎜🎜

主要对一些新特性进行讲解
concat
concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。
例如

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]
ログイン後にコピー
ログイン後にコピー

slice
slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素

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

splice
splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a,b)从a位置开始截取其中的b个元素
object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(2,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];
ログイン後にコピー

foreach
foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分别对应:数组元素,元素的索引,数组本身console.log(x + &#39;|&#39; + index + &#39;|&#39; + (a === arr));
});// 1|0|true// 2|1|true// 3|2|true// 4|3|true// 5|4|true
ログイン後にコピー

说明:如果只有一个参数那这个参数代表数组元素,也就是数组的值,请看例2。

例2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21
ログイン後にコピー

map
map 对数组做一些映射,map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,它与forEach的区别是forEach为数组中的每个元素执行一次回调函数。

var arr = [1, 2, 3];
arr.map(function(x) {     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]
ログイン後にコピー

filter
filter 过滤掉某些元素,和map有点类似,Array的filter也接收一个函数。但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素,也就是过滤掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
ログイン後にコピー

every()与some()
every()与some()方法都是JS中数组的迭代方法。every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
总结就是every()当每个元素都符合条件的时候返回true,而some()是任一项满足条件就返回true

例1 every()var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {     return x < 10;
}); // true

arr.every(function(x) {     return x < 3;
}); // false
ログイン後にコピー

some只需要有一个符合的就行

例2 somevar arr = [1, 2, 3, 4, 5];
arr.some(function(x) {     return x === 3;
}); // true

arr.some(function(x) {     return x === 100;
}); // false
ログイン後にコピー

reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
ログイン後にコピー
var arr = [1, 2, 3];var sum = arr.reduce(function(x, y) {     return x + y
}, 0); //参数 0是可选的,如果写了参数0那第一次传递的两个值就是0和1
如果不写第一次传递的就是数组的前两个值,计算结果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];var max = arr.reduce(function(x, y) {     console.log(x + "|" + y);     return x > y ? x : y;
});// 3|9// 9|6
max; // 9
ログイン後にコピー

reduceRight
和reduce一样只不过reduceRight 变成了从右到左两两执行某些操作

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);     return x > y ? x : y;
});// 6|9// 9|3max; // 9
ログイン後にコピー

indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,indexOf(a,b)表示查找a元素,从b位置开始;lastindexOf表示从右向左找。当b为负数的时候表示从倒数第几个元素开始找,请看例子。

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1表示没有这个元素
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4查找1从倒数第3个元素开始
arr.indexOf(2, -1); // -1查找2从倒数第1个元素开始
arr.lastIndexOf(2); // 3从右边开始找第一次出现2的位置
arr.lastIndexOf(2, -2); // 3从右边的倒数第二个开始找2出现的位置
arr.lastIndexOf(2, -3); // 1
ログイン後にコピー

isArray
isArray用来判断是否是数组,但是isArray是Array构造器对象上的属性,所以不能直接用isArray,必须要写成Array.isArray([]),但是可以其它的判断方法直接判断

[]instanceof Array;//true
({}).toString.apply([])===&#39;[object Array]&#39;;//true
[].construcror===Array;//true
ログイン後にコピー

数组和一般对象的比较

  数组 / 一般对象
相同点 都可以继承,对象不一定是数组,都可以当做对象添加属性
不同点 数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法

数组和字符串的比较

 

  数组 /字符串
相同点 字符串是数组的一种
不同点 字符串是不可变的数组,字符串没有数组的方法

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流 

以上が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衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

foreach ループを使用して PHP 配列から重複要素を削除するにはどうすればよいですか? foreach ループを使用して PHP 配列から重複要素を削除するにはどうすればよいですか? Apr 27, 2024 am 11:33 AM

foreach ループを使用して PHP 配列から重複要素を削除する方法は次のとおりです。配列を走査し、要素がすでに存在し、現在の位置が最初に出現しない場合は、要素を削除します。たとえば、データベース クエリの結果に重複レコードがある場合、このメソッドを使用してそれらを削除し、重複レコードのない結果を取得できます。

PHP 配列ディープ コピーの技術: さまざまな方法を使用して完璧なコピーを実現する PHP 配列ディープ コピーの技術: さまざまな方法を使用して完璧なコピーを実現する May 01, 2024 pm 12:30 PM

PHP で配列をディープ コピーする方法には、json_decode と json_encode を使用した JSON エンコードとデコードが含まれます。 array_map と clone を使用して、キーと値のディープ コピーを作成します。シリアル化と逆シリアル化には、serialize と unserialize を使用します。

PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析 PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析 May 03, 2024 pm 09:03 PM

PHP の配列キー値の反転メソッドのパフォーマンスを比較すると、array_flip() 関数は、大規模な配列 (100 万要素以上) では for ループよりもパフォーマンスが良く、所要時間が短いことがわかります。キー値を手動で反転する for ループ方式は、比較的長い時間がかかります。

MySQLクエリ結果の配列をオブジェクトに変換するにはどうすればよいですか? MySQLクエリ結果の配列をオブジェクトに変換するにはどうすればよいですか? Apr 29, 2024 pm 01:09 PM

MySQL クエリ結果の配列をオブジェクトに変換する方法は次のとおりです。 空のオブジェクト配列を作成します。結果の配列をループし、行ごとに新しいオブジェクトを作成します。 foreach ループを使用して、各行のキーと値のペアを新しいオブジェクトの対応するプロパティに割り当てます。新しいオブジェクトをオブジェクト配列に追加します。データベース接続を閉じます。

PHP 配列の多次元ソートの実践: 単純なシナリオから複雑なシナリオまで PHP 配列の多次元ソートの実践: 単純なシナリオから複雑なシナリオまで Apr 29, 2024 pm 09:12 PM

多次元配列のソートは、単一列のソートとネストされたソートに分類できます。単一列のソートでは、array_multisort() 関数を使用して列ごとにソートできますが、ネストされたソートでは、配列を走査してソートするための再帰関数が必要です。具体的な例としては、製品名による並べ替えや、売上数量や価格による化合物の並べ替えなどがあります。

PHP 配列のディープ コピーのベスト プラクティス: 効率的な方法を発見する PHP 配列のディープ コピーのベスト プラクティス: 効率的な方法を発見する Apr 30, 2024 pm 03:42 PM

PHP で配列のディープ コピーを実行するためのベスト プラクティスは、 json_decode(json_encode($arr)) を使用して配列を JSON 文字列に変換し、それから配列に戻すことです。 unserialize(serialize($arr)) を使用して配列を文字列にシリアル化し、それを新しい配列に逆シリアル化します。 RecursiveIteratorIterator を使用して、多次元配列を再帰的に走査します。

データソートにおけるPHP配列グループ化機能の応用 データソートにおけるPHP配列グループ化機能の応用 May 04, 2024 pm 01:03 PM

PHP の array_group_by 関数は、キーまたはクロージャ関数に基づいて配列内の要素をグループ化し、キーがグループ名、値がグループに属する要素の配列である連想配列を返すことができます。

PHP 関数はどのようにオブジェクトを返すのでしょうか? PHP 関数はどのようにオブジェクトを返すのでしょうか? Apr 10, 2024 pm 03:18 PM

PHP 関数は、return ステートメントに続いてオブジェクト インスタンスを使用してオブジェクトを返すことにより、データをカスタム構造にカプセル化できます。構文: functionget_object():object{}。これにより、カスタム プロパティとメソッドを使用してオブジェクトを作成し、オブジェクトの形式でデータを処理できるようになります。

See all articles