天天看點

數組的常用操作方法

1.sort()

描述:能根據提供的排序規則,對數組元素進行排序

           排序順序可以是字母或數字,并按升序或降序,預設排序順序為按字母升序。

           使用數字排序,你必須通過一個函數作為參數來調用。

文法:arr.sort(排序規則);

注意:

         (1)如果不寫參數,預設按照編碼方式(Unicode大小)進行排序

         (2)本方法會改變原數組的結構

相容性:所有主要浏覽器都支援

var arr = [243,123,567,453,54,34,54,13,5,98,100];
var newArr = arr.sort(); 
console.log(arr); //(11) [100, 123, 13, 243, 34, 453, 5, 54, 54, 567, 98]
console.log(newArr); //(11) [100, 123, 13, 243, 34, 453, 5, 54, 54, 567, 98]
		
function sortFunc(a,b){
	return a-b;
};
var arr = [243,123,567,453,54,34,54,13,5,98,100];
var newArr = arr.sort(sortFunc);
console.log(arr); //(11) [5, 13, 34, 54, 54, 98, 100, 123, 243, 453, 567]
console.log(newArr); //(11) [5, 13, 34, 54, 54, 98, 100, 123, 243, 453, 567]
           

2.reverse()

描述:能夠将數組元素的順序進行颠倒(反序排列)

文法:arr.reverse();

注意:本方法能夠改變原數組的結構

相容性:所有主流浏覽器都支援

var arr = [11,34,54,67,53,23,1,32];
var newArr = arr.reverse();
console.log(arr); //(8) [32, 1, 23, 53, 67, 54, 34, 11]
console.log(newArr); //(8) [32, 1, 23, 53, 67, 54, 34, 11]
           

3.slice()

描述:從數組中下标為fromIndex開始截取,截取到下标toIndex為止,将截取的數組元素構成一個新的數組傳回

文法:arr.splice(fromIndex,toIndex);

注意:

         (1)截取的時候是從fromIndex開始,到toIndex為止,不包括toIndex下标處的元素

         (2)slice()方法不會修改原數組結構

         (3)slice方法的參數允許為負數,負數意味着倒數第幾個元素

相容性:所有主流浏覽器都支援

var arr = ['aa','bb','cc','dd','ee','ff'];
var newArr = arr.slice(3,6);
console.log(arr); //(6) ["aa", "bb", "cc", "dd", "ee", "ff"]
console.log(newArr); //(3) ["dd", "ee", "ff"]
           

4.splice()

描述:截取并替換元素

文法:arr.splice(index,removeCount,addItem1,addItem2,...);

注意:

         (1)本方法能夠改變原數組結構

         (2)對于本方法,前兩個參數為必要參數。後面所有的參數都是可選參數

         (3)截取出來的元素數量,不用必須和添加元素的數量一緻

相容性:所有主流浏覽器都支援

var arr = ['123','aaa','bbb',4,6,5,'ddd','ccc','eee'];
var subArr = arr.splice(3,4,'a','b','c','1','2','3');
console.log(subArr); //(4) [4, 6, 5, "ddd"]
console.log(arr); //(11) ["123", "aaa", "bbb", "a", "b", "c", "1", "2", "3", "ccc", "eee"]
           

5.indexOf()

描述:在數組中查找元素第一次出現的下标,如果沒有找到傳回-1

文法:arr.indexOf(item,fromIndex);

注意:

         (1)第二個參數是可選參數,代表從第幾個下标開始向後查找

         (2)第二個參數允許是負數,負數代表從倒數第幾個元素開始向後查找

         (3)【無論是正數參數還是負數參數,查找順序永遠都是向後查找】

相容性:IE8及其更在版本不支援,其餘都支援

var arr = ['小紅','小橙','小黃','小綠','小青','小紅'];
var index = arr.indexOf('小紅',2);
console.log(index); //5
           

6.lastIndexOf()

描述:在數組中查找元素最後一次出現的下标,如果沒有找到傳回-1

文法:arr.lastIndexOf(item,toIndex);

注意:

         (1)第二個參數是可選參數,代表向後查找到第幾個下标結束

         (2)第二個參數允許是負數,負數代表向後查找到【倒數第幾個】結束

相容性:IE8及其更在版本不支援,其餘都支援

var arr = ['小紅','小橙','小黃','小綠','小青','小紅'];
var index = arr.lastIndexOf('小紅',2);
console.log(index); //0
           

7.unshift()

描述:作用是在數組目前起始位置添加一個或多個元素,并傳回添加後數組的新長度

文法:arr.unshift(item1,item2,...);

注意:本方法會對原數組造成影響,可以根據需求決定是否儲存結果

相容性:IE8及更早版本不支援傳回undefined,其餘都支援

var arr = ['小紅','小橙','小黃'];
var newLength = arr.unshift('小綠','小青');
console.log(arr); //(5) ["小綠", "小青", "小紅", "小橙", "小黃"]
console.log(arr.length); //5
console.log(newLength); //5
           

8.shift()

描述:作用是删除數組開始位置的第一個元素,并傳回這個元素

文法:arr.shift();

注意:本方法會對原數組造成影響,可以根據需求決定是否儲存結果

相容性:所有主流浏覽器都支援

var arr = ['一','二','三','四','五'];
var deleteItem = arr.shift();
console.log(arr); //(4) ["二", "三", "四", "五"]
console.log(arr.length); //4
console.log(deleteItem); //一
           

9.push()

描述:作用是向數組的末尾添加一個或多個元素,并傳回數組的新長度

文法:arr.push(item1,item2,...);

注意:可以根據需要來決定是否儲存push方法的執行結果

           (1)push()方法會原數組造成影響

           (2)可以根據需要來決定是否儲存push()方法的執行結果

相容性:所有主流浏覽器都支援

var arr = [];
var newLength = arr.push('Licy',15);
console.log(arr); //(2) ["Licy", 15]
console.log(newLength); //2
	
var otherNewLength = arr.push('Lily');
console.log(arr); //(3) ["Licy", 15, "Lily"]
console.log(otherNewLength); //3
           

10.pop()

描述:作用是删除數組的最後一個元素,并将這個元素傳回

文法:arr.pop();

注意:

         (1)pop方法會對原數組造成影響

         (2)可以根據需要來決定是否儲存pop()方法的執行結果

         (3)pop()方法沒有參數

相容性:Chrome1.0、IE5.5、Firefox1.0、Safari、Opera開始支援

var arr = ['aaa','bbb','ccc','ddd','eee'];
var deleteItem = arr.pop();
console.log(deleteItem); //eee
console.log(arr.length); //4
console.log(arr); //(4) ["aaa", "bbb", "ccc", "ddd"]
           

11.isArray()

描述:用來判斷一個變量是否是數組。如果傳回true,否則傳回false

文法:Array.isArray(變量名);

注意:本方法不由數組變量調用,而是必須用Array調用

相容性:Chrome5、IE9.0、Firefox4、Safari5、Opera10.5開始支援

var arr = [11,22,33,44,55];
console.log(typeof arr); //object
console.log(Array.isArray(arr)); //true
           

12.valueOf()

描述:傳回數組本身

           該原始值由 Array對象派生的所有對象繼承。

文法:arr.valueOf();

注意:

         (1)valueOf()不會改變原數組

         (2)valueOf()方法通常由 JavaScript 在背景自動調用,并不顯式地出現在代碼中。

相容性:所有主流浏覽器都支援

var arr = [2,53,23,12,6,23];
var newArr = arr.valueOf();
console.log(arr); //(6) [2, 53, 23, 12, 6, 23]
console.log(newArr); //(6) [2, 53, 23, 12, 6, 23]
console.log(arr === arr.valueOf()); //true
           

13.toString()

描述:能夠将數組中的數組元素,拼接成以逗号隔開的字元串

文法:arr.toString();

注意:toString()方法不僅能合并數組元素,對布爾值類型也能夠生效

相容性:所有主流浏覽器都支援

var arr = ['aaa','bbb','ccc','ddd'];
var str = arr.toString();
console.log(str); //aaa,bbb,ccc,ddd

var bool = true;
console.log(bool); //true
var str = bool.toString();
console.log(str); //true
           

14.join()

描述:能夠以給定的分隔符做間隔,将數組中的元素合并為一個字元串

文法:arr.join('分隔符');

注意:無論是切割字元串,還是合并數組,都不會對原有的資料造成影響

相容性:所有主流浏覽器都支援

//切割字元串
var str = 'hello world goodbye world';
var wordArr = str.split(' ');
console.log(wordArr); //(4) ["hello", "world", "goodbye", "world"]
	    
//合并數組
var newStr = wordArr.join(' ');
console.log(newStr); //hello world goodbye world
console.log(wordArr); //(4) ["hello", "world", "goodbye", "world"]
           

15.concat()

描述:本方法用于連接配接兩個或多個數組

文法:arr.concat(arr1,arr2,arr3,...);

注意:本方法不會改變現有的數組,僅僅會傳回被連接配接數組的一個副本

相容性:所有主流浏覽器都支援

var arr = [11,22,33];
var arr1 = ['大紅','小紅'];
var arr2 = ['aaa','bbb','ccc'];
console.log(arr.concat(arr1,arr2)); (8) [11, 22, 33, "大紅", "小紅", "aaa", "bbb", "ccc"]
           

繼續閱讀