ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript での配列の作成と使用に関するディスカッション

JavaScript での配列の作成と使用に関するディスカッション

伊谢尔伦
伊谢尔伦オリジナル
2017-07-18 11:40:321706ブラウズ

配列は、順番に並べられた値のセットですが、オブジェクトの属性名には順序がありません。基本的に、配列は検索キーとして数値を使用しますが、オブジェクトにはユーザー定義のプロパティ名があります。 JavaScript には実際の連想配列はありませんが、オブジェクトを使用して関連関数を実装できます

Array() は Object() の特別なタイプにすぎません。つまり、Array() インスタンスは基本的に、いくつかの機能を備えた Object() です。追加機能) インスタンス。配列はあらゆる種類の値を保存でき、いつでも更新または削除でき、オブジェクトに加えて配列のサイズも動的に調整されます。配列型は JavaScript で最も一般的に使用される型です。さらに、JavaScript の配列は、他のほとんどの言語の配列とはまったく異なります。この記事では、JavaScript における配列の配列型について紹介します

配列の作成
配列を作成するには、リテラル構文を使用する方法と Array() コンストラクターを使用する方法の 2 つがあります


【リテラル ]


配列リテラルを使用するのが、配列要素を角括弧で囲んでカンマで区切るだけです


var empty = []; //没有元素的数组
var primes = [2,3,5,7,11]; //有5个数值的数组

JavaScript の配列や他の言語の配列はデータです。順序付きリストですが、他の言語とは異なり、JavaScript 配列の各項目はあらゆるタイプのデータを保持できます


var misc = [1.1,true, "a"]; //3个不同类型的元素

配列リテラルの値は定数である必要はなく、任意の式にすることができます


var base = 1024;
var table = [base,base+1,base+2,base+3];

オブジェクトリテラルまたは他の配列リテラルを含めることができます


var b = [ [1,{x:1,y:2}],[2,{x:3,y:4}] ];

配列の要素が配列のままであれば、多次元配列が形成されます


var a = [[1, 2], [3, 4]];

[注意]表現するときは数値リテラルを使用してください, 配列コンストラクターは呼び出されません


[コンストラクター]


コンストラクターを呼び出す方法は3つあります


【1】パラメータを付けずに空の配列を作成します


//该方法创建一个没有任何元素的空数组,等同于数组直接量[]
var a = new Array();

【2 】配列の長さを指定するために使用される数値パラメータがあります


var a = new Array(10);
console.log(a);//[]
console.log(a[0],a.length);//undefined 10

【注意】他の型のパラメータがある場合は、その値を含む項目が1つだけある配列が作成されます


var a = new Array('10');
console.log(a);//['10']
console.log(a[0],a.length);//10 1

【3】パラメータが複数ある場合、パラメータは配列の特定の要素として表現されます


var a = new Array(1,2,3);
console.log(a);//[1,2,3]
console.log(a[0],a[1],a[2]);//1 2 3

Array()コンストラクタを使用する場合、new演算子を省略できます


var a1 = Array();
var a2 = Array(10);
var a3 = Array(1,2,3);
console.log(a1,a2,a3);//[] [] [1,2,3]

配列の本質
配列とは、配列された値の集合であり、本質的には特別なオブジェクトです


typeof [1, 2, 3] // "object"

配列の特別な性質は、そのキー名は、整数を順番に並べたものです (0、1、2…)。配列メンバーのキー名は固定されているため、配列では各要素にキー名を指定する必要はありませんが、配列は特殊な形式のオブジェクトであり、配列にアクセスするには角括弧を使用する必要があります。要素は、角括弧を使用してオブジェクトのプロパティにアクセスするのと同じです。JavaScript 言語では、オブジェクトのキー名は常に文字列であると規定されているため、配列のキー名は実際には文字列です。数値で読み込める理由は、文字列以外のキー名を文字列に変換して属性名として使用するためです


var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));// ["0", "1", "2"]
var obj = {
name1: 'a',
name2: 'b',
name3: 'c'
};

ただし、配列のインデックスと属性名は区別する必要がありますof the object : すべてのインデックスは属性名ですが、0~232-2 (4294967294) の間の整数の属性名のみがインデックスになります



o={}; //创建一个普通的对象
o[1]="one"; //用一个整数来索引它
//数值键名被自动转成字符串
var arr = ['a', 'b', 'c'];
arr['0'] // 'a'
arr[0] // 'a'

[注意] 単一の値を識別子 (identifier) として使用することはできません。したがって、配列メンバーは角かっこでのみ表すことができます


var a = [];
//索引
a['1000'] = 'abc';
a[1000] // 'abc'
//索引
a[1.00] = 6;
a[1] // 6

配列のインデックスには負の数値または整数以外を使用できます。ただし、これは 0 ~ 2 の 32 -2 乗の範囲にないため、配列のインデックスではなく、配列の属性名のみであることがわかります。明らかな特徴は、配列の長さを変更しないことです。 array


var arr = [1, 2, 3];
arr[0];//1
arr.0;//SyntaxError


array Length


すべての配列には length プロパティがあり、これが通常の JavaScript オブジェクトと異なる点です。密 (つまり、非スパース) 配列の場合、長さ属性値は配列内の要素の数を表し、配列がスパース配列の場合、その値は配列内の最大インデックスより 1 大きくなります。値が要素の数より大きい場合、インデックス i が既存の配列の長さ以上の場合、長さ属性の値は i+1 に設定されます

var arr = ['a', 'b'];
arr.length // 2
arr[2] = 'c';
arr.length // 3
arr[9] = 'd';
arr.length // 10
arr[1000] = 'e';
arr.length // 1001

  【2】设置length属性为小于当前长度的非负整数n时,当前数组索引值大于等于n的元素将从中删除


a=[1,2,3,4,5]; //从5个元素的数组开始
a.length = 3; //现在a为[1,2,3]
a.length = 0; //删除所有的元素。a为[]
a.length = 5; //长度为5,但是没有元素,就像new

  【3】将数组的length属性值设置为大于其当前的长度。实际上这不会向数组中添加新的元素,它只是在数组尾部创建一个空的区域


var a = ['a'];
a.length = 3;
console.log(a[1]);//undefined
console.log(1 in a);//false

  如果人为设置length为不合法的值(即0——232-2范围以外的值),javascript会报错


// 设置负值
[].length = -1// RangeError: Invalid array length
// 数组元素个数大于等于2的32次方
[].length = Math.pow(2,32)// RangeError: Invalid array length
// 设置字符串
[].length = 'abc'// RangeError: Invalid array length

  由于数组本质上是对象,所以可以为数组添加属性,但是这不影响length属性的值


var a = [];
a['p'] = 'abc';
console.log(a.length);// 0
a[2.1] = 'abc';
console.log(a.length);// 0

数组遍历

  使用for循环遍历数组元素最常见的方法


var a = [1, 2, 3];
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}

  当然,也可以使用while循环


var a = [1, 2, 3];
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
var l = a.length;
while (l--) {
console.log(a[l]);
}

  但如果数组是稀疏数组时,使用for循环,就需要添加一些条件


//跳过不存在的元素
var a = [1,,,2];
for(var i = 0; i < a.length; i++){
if(!(i in a)) continue;
console.log(a[i]);
}

  还可以使用for/in循环处理稀疏数组。循环每次将一个可枚举的属性名(包括数组索引)赋值给循环变量。不存在的索引将不会遍历到


var a = [1,,,2];
for(var i in a){
console.log(a[i]);
}

  由于for/in循环能够枚举继承的属性名,如添加到Array.prototype中的方法。由于这个原因,在数组上不应该使用for/in循环,除非使用额外的检测方法来过滤不想要的属性


var a = [1,,,2];
a.b = &#39;b&#39;;
for(var i in a){
console.log(a[i]);//1 2 &#39;b&#39;
} 
//跳过不是非负整数的i
var a = [1,,,2];
a.b = &#39;b&#39;;
for(var i in a){
if(String(Math.floor(Math.abs(Number(i)))) !== i) continue;
console.log(a[i]);//1 2
}

  javascript规范允许for/in循环以不同的顺序遍历对象的属性。通常数组元素的遍历实现是升序的,但不能保证一定是这样的。特别地,如果数组同时拥有对象属性和数组元素,返回的属性名很可能是按照创建的顺序而非数值的大小顺序。如果算法依赖于遍历的顺序,那么最好不要使用for/in而用常规的for循环

  有三个常见的类数组对象:

  【1】arguments对象


// arguments对象
function args() { return arguments }
var arrayLike = args(&#39;a&#39;, &#39;b&#39;);
arrayLike[0] // &#39;a&#39;
arrayLike.length // 2
arrayLike instanceof Array // false

  【2】DOM方法(如document.getElementsByTagName()方法)返回的对象


// DOM元素
var elts = document.getElementsByTagName(&#39;h3&#39;);
elts.length // 3
elts instanceof Array // false

  【3】字符串


// 字符串
&#39;abc&#39;[1] // &#39;b&#39;
&#39;abc&#39;.length // 3
&#39;abc&#39; instanceof Array // false

  [注意]字符串是不可变值,故当把它们作为数组看待时,它们是只读的。如push()、sort()、reverse()、splice()等数组方法会修改数组,它们在字符串上是无效的,且会报错


var str = &#39;abc&#39;;
Array.prototype.forEach.call(str, function(chr) {
console.log(chr);//a b c
});
Array.prototype.splice.call(str,1);
console.log(str);//TypeError: Cannot delete property &#39;2&#39; of [object String]

  数组的slice方法将类数组对象变成真正的数组


var arr = Array.prototype.slice.call(arrayLike);

  javascript数组方法是特意定义为通用的,因此它们不仅应用在真正的数组而且在类数组对象上都能正确工作。在ECMAScript5中,所有的数组方法都是通用的。在ECMAScript3中,除了toString()和toLocaleString()以外的所有方法也是通用的


var a = {&#39;0&#39;:&#39;a&#39;,&#39;1&#39;:&#39;b&#39;,&#39;2&#39;:&#39;c&#39;,length:3};
Array.prototype.join.call(a,&#39;+&#39;);//&#39;a+b+c&#39;
Array.prototype.slice.call(a,0);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
Array.prototype.map.call(a,function(x){return x.toUpperCase();});//[&#39;A&#39;,&#39;B&#39;,&#39;C&#39;]

以上がJavaScript での配列の作成と使用に関するディスカッションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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