ホームページ > 記事 > ウェブフロントエンド > JavaScript における配列オブジェクトの概要
配列オブジェクトは、単一の変数に複数の値を格納するために使用される配列オブジェクトです。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
var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
2. 疎配列
疎配列とは、0 から始まる不連続なインデックスを含む配列です。スパース配列では、length 属性の値が実際の要素数よりも大きくなるのが一般的です (まれです)
Examplevar a=["a",,"b",,,,"c",,];<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
的对象的成员。它们包括除 Global
和 Math
对象以外的所有JScript
固有对象。constructor
property
は、配列の長さ、つまり配列内の要素の数を表します | |
---|---|
コンストラクター属性 | |
を説明します。いくつかの操作による length 属性 | 配列の長さ属性は可変です |
配列の長さを減らす | 配列の長さを元に戻す |
prototype code> プロパティは、オブジェクト型のプロトタイプへの参照を返します。 <code>prototype 属性は object に共通です。 |
objectName パラメーターは、object オブジェクトの名前です。 |
配列オブジェクトの場合、次の例を使用して、prototype 属性の使用方法を示します。 | 配列オブジェクトにメソッドを追加して、配列内の最大要素値を返します。これを実現するには、関数を宣言し、それを Array.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]] | このコードが実行されると、y は配列 x の最大値、つまり 6 を保持します。
object.constructor //object は、オブジェクトまたは関数の名前です。 | 説明: |
Objectarray | |
description:その一部はecmascript5の新しい機能(ie678でサポートされていない) | |
function | |
concat() | 2つ以上の配列を接続し、結果を返します |
join() | 配列の要素を文字列に結合します |
pop() | 削除して返す配列の最後の要素 |
push() | 配列の末尾に 1 つ以上の要素を追加し、新しい長さを返します |
reverse | 配列内の要素の順序を反転します |
shift() | Delete そして、配列の最初の要素を返します |
slice() | 既存の配列から選択された要素を返します |
sort() | 配列要素を並べ替えます |
splice () | 要素を削除し、配列に新しい要素を追加します |
toSource() | オブジェクトのソースコードを返します |
toString() | 配列を文字列に変換して結果を返します |
toLocalString() | 配列をローカル要素に変換し、結果を返します |
unshift | 1 つ以上の要素を配列の先頭に追加し、新しい長さを返します |
主要对一些新特性进行讲解
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 + '|' + index + '|' + (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([])==='[object Array]';//true [].construcror===Array;//true
数组和一般对象的比较
数组 / 一般对象 | |
---|---|
相同点 | 都可以继承,对象不一定是数组,都可以当做对象添加属性 |
不同点 | 数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法 |
数组和字符串的比较
数组 /字符串 | |
---|---|
相同点 | 字符串是数组的一种 |
不同点 | 字符串是不可变的数组,字符串没有数组的方法 |
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流
以上がJavaScript における配列オブジェクトの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。