首頁 > web前端 > js教程 > 主體

總結JavaScript中數組物件的介紹

零下一度
發布: 2017-06-26 09:07:34
原創
1226 人瀏覽過

Array物件即數組物件用於在單一變數中儲存多個值,JS的數組是弱類型的,所以允許數組中含有不同類型的元素,數組元素甚至可以是物件或其他數組。

  • 建立陣列的語法

1、Array建構器

1、var list=new Array();2、var list=new Array(size);3、var list=new Array(element0,element1,...elementn);
登入後複製

2、字面量的方式

var Array[element0,element1,...elementn];
登入後複製

舉例

var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
登入後複製
var list[1,true,null,undefined,{x:1},[1,2,3]];
登入後複製
  • 陣列的分類

#1、二維數組,二維數組的本質是數組中的元素又是數組。

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素
登入後複製

2、稀疏數組

稀疏數組是包含從0開始的不連續索引的數組。在稀疏數組中一般length屬性值比實際元素個數大(不常見)
範例
var a=["a",,"b",,,,"c",,] ;

  • 陣列物件屬性

##prototype 屬性傳回物件類型原型的參考constructor 屬性表示建立物件的函數
#屬性作用
length 屬性表示陣列的長度,即其中元素的個數
##1、length 屬性

透過一些運算來講解length屬性

var arr=[1,2,3,4,5,6,7,8, 9,10];
//定義了一個包含10個數字的陣列。 陣列的長度屬性是可變的

alert(arr.length); //显示数组的长度10
arr.length=15; //增大数组的长度,length属性是可变的
alert(arr.length); //显示数组的长度已经变为15
登入後複製

存取陣列元素

alert(arr[3]); //显示第4个元素的值,为4
登入後複製

減少陣列長度

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

恢復陣列長度

arr.length=10; //将数组长度恢复为10
alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回,显示"undefined"
登入後複製

2、prototype 屬性

prototype

 屬性傳回物件類型原型的參考。 prototype 屬性是object共有的。 objectName.prototype
objectName
 參數是object物件的名稱。 說明:用 prototype 屬性提供物件的類別的一組基本功能。 物件的新實例「繼承」賦予該物件原型的操作。

對於陣列對象,用下列範例說明prototype 屬性的用途。

為陣列物件新增傳回陣列中最大元素值的方法。要完成這一點,請聲明一個函數,將它加入 Array.prototype, 並使用它。

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( );
登入後複製

該程式碼執行後,y 儲存陣列 x 中的最大值,或說 6。

3、constructor 屬性

constructor

 屬性表示建立物件的函數。 object.constructor //object
是物件或函數的名稱。 說明:constructor
 屬性是所有具有prototype 的物件的成員。它們包括除 Global 和 Math物件以外的所有JScript固有物件。 constructor屬性保存了對建構特定物件實例的函數的參考。 例如:

x = new String("Hi");if (x.constructor == String) // 进行处理(条件为真)。//或function MyFunc {// 函数体。
}

y = new MyFunc;if (y.constructor == MyFunc) // 进行处理(条件为真)。
登入後複製

對於陣列來說:

y = new Array();
登入後複製

    #Array的物件方法
  • ##說明:部分是ECMAScript5的新特性(IE678不支援)

#方法##concat()連接兩個或更多的數組,並傳回結果#join()將數組的元素組起一個字串pop()刪除並傳回陣列的最後一個元素push()陣列末端新增一個或多個元素,傳回新的長度reverse顛倒陣列中元素的順序shift()刪除並傳回陣列的第一個元素#slice()從某個已有的陣列傳回選定的元素sort()對陣列元素排序splice()刪除元素,並在陣列中新增元素toSource()#傳回該物件的原始程式碼##toString ()toLocalString()unshiftvalueof()forEach()##map()對陣列做一些映射filter()#過濾every()檢查判斷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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板