詳解JavaScript中數(shù)組的相關(guān)知識(shí)
創(chuàng)建數(shù)組
js中數(shù)組的聲明可以有如下幾種方式:
var arr = []; // 簡(jiǎn)寫模式 var arr = new Array(); // new一個(gè)array對(duì)象 var arr = new Array(arrayLength); // new一個(gè)確定長(zhǎng)度的array對(duì)象
要說(shuō)明的是:
- 雖然第三種方法聲明了數(shù)組的長(zhǎng)度,但是實(shí)際上數(shù)組長(zhǎng)度是可變的。也就是說(shuō),即使指定了長(zhǎng)度為5,仍然可以將元素存儲(chǔ)在規(guī)定長(zhǎng)度之外,這時(shí)數(shù)組的長(zhǎng)度也會(huì)隨之改變。
- 此外,還需要明確的一點(diǎn):
- js是弱類型語(yǔ)言,也就是數(shù)組中的元素類型不需要一樣。
舉個(gè)數(shù)組中元素類型不一致的例子:
var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu']; for (var i = 0; i < arr.length; i ++) { console.log(arr[i]); }
數(shù)組元素訪問(wèn)
JavaScript數(shù)組的索引值也是從0開始的,我們可以直接通過(guò)數(shù)組名+下標(biāo)的方式對(duì)數(shù)組元素進(jìn)行訪問(wèn)。
示例代碼如下:
var arr = [1, 2, 3]; console.log(arr[0]); console.log(arr[1]);
此外,數(shù)組的遍歷推薦使用連續(xù)for循環(huán)的模式,不推薦for-in,具體原因參考:Loop through array in JavaScript
遍歷數(shù)組示例代碼如下:
var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu']; for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); }
注意:
上述代碼中,一個(gè)小優(yōu)化在于提前獲取數(shù)組的大小,這樣不需要每次遍歷都去查詢數(shù)組大小。對(duì)于超大數(shù)組來(lái)說(shuō),能提高一定的效率。
添加數(shù)組元素
有三種方法可以往一個(gè)數(shù)組中添加新的元素,分別是:push、unshift、splice。下面我分別來(lái)介紹一下這三種方法。
push
push方法,在數(shù)組末尾添加元素。示例代碼如下:
var arr = []; arr.push(1); arr.push(2); arr.push(3); for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); }
執(zhí)行結(jié)果為:
1 2 3
unshift
unshift方法,是在數(shù)組頭部添加元素。示例代碼如下:
var arr = []; arr.unshift(1); arr.unshift(2); arr.unshift(3); for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); }
執(zhí)行結(jié)果如下:
3 2 1
splice
splice方法是在數(shù)組的指定位置插入新元素,之前的元素則是自動(dòng)順序后移。注意splice的函數(shù)原型為:
array.splice(index, howMany, element...)
howMany表示要?jiǎng)h除的元素個(gè)數(shù),如果只是添加元素,此時(shí)howMany需要置為0。
示例代碼如下:
var arr = [1, 2, 3, 4]; arr.splice(1, 0, 7, 8, 9); for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); }
執(zhí)行結(jié)果如下:
1 7 8 9 2 3 4
刪除數(shù)組元素
與增加數(shù)組元素一樣,刪除數(shù)組中的元素也有三個(gè)方法,分別是:pop、shift和splice。接下來(lái),分別講解一下這三個(gè)函數(shù)的用法。
pop
pop方法是移除數(shù)組中的最后一個(gè)元素。push和pop的組合可以將數(shù)組實(shí)現(xiàn)類似于棧(先入后出)的功能。示例代碼如下:
var arr = []; arr.push(1); arr.push(2); arr.push(3); while (arr.length != 0) { var ele = arr.pop(); console.log(ele); }
shift
shift方法是移除第一個(gè)元素,數(shù)組中的元素自動(dòng)前移。(這種方法肯定對(duì)應(yīng)著效率問(wèn)題,時(shí)間復(fù)雜度是O(n))。
var arr = []; arr.push(1); arr.push(2); arr.push(3); function traverseArray(arr) { for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); } } while (arr.length != 0) { var ele = arr.shift(); traverseArray(arr); }
大家可以自己考慮運(yùn)行結(jié)果。
splice
在增加數(shù)組元素的時(shí)候,我們就講過(guò)splice,這個(gè)函數(shù)原型中有一個(gè)howMany參數(shù),代表從index開始刪除之后的多少個(gè)元素。
示例代碼如下:
var arr = [1, 2, 3, 4, 5, 6, 7]; function traverseArray(arr) { for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); } } arr.splice(1, 3); traverseArray(arr);
執(zhí)行結(jié)果為:
1 5 7
數(shù)組的拷貝和截取
舉個(gè)例子,代碼如下:
var arr1 = [1, 2, 3, 4]; var arr2 = arr1;
這個(gè)時(shí)候,arr2只是保存arr1數(shù)組在堆內(nèi)存的地址,并沒有在堆內(nèi)存重新申請(qǐng)內(nèi)存搞一個(gè)數(shù)組出來(lái)。所以對(duì)arr2的修改會(huì)同時(shí)影響到arr1。因此,如果我們需要拷貝一份數(shù)組該怎么做呢?這就引出了需要學(xué)習(xí)的slice和concat函數(shù)。
slice
這里的slice和python語(yǔ)法的slice是一樣的,都是返回?cái)?shù)組的切片。slice函數(shù)原型為:
array.slice(begin, end)
返回從begin到end的所有元素,注意包含begin,但是不包含end。
缺省begin,默認(rèn)從0開始。缺省end,默認(rèn)到數(shù)組末尾。
因此,拷貝數(shù)組我們可以通過(guò)如下代碼實(shí)現(xiàn):
var arr1 = [1, 2, 3, 4]; var arr2 = arr1.slice(); arr2[2] = 10000 function traverseArray(arr) { for (var i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); } } traverseArray(arr1); traverseArray(arr2);
執(zhí)行結(jié)果如下:
1 2 3 4 1 2 10000 4
concat
concat方法將創(chuàng)建一個(gè)新數(shù)組,然后將調(diào)用它的對(duì)象(this 指向的對(duì)象)中的元素以及所有參數(shù)中的數(shù)組類型的參數(shù)中的元素以及非數(shù)組類型的參數(shù)本身按照順序放入這個(gè)新數(shù)組,并返回該數(shù)組.
示例代碼如下:
var alpha = ["a", "b", "c"]; var number = [1, 2, 3] // 新數(shù)組為["a", "b", "c", 1, 2, 3] var complex = alpha.concat(number);
相關(guān)文章
微信小程序 本地?cái)?shù)據(jù)讀取實(shí)例
這篇文章主要介紹了微信小程序 本地?cái)?shù)據(jù)讀取實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2017-08-08JavaScript日拱算法題解滑動(dòng)窗口的最大值示例
這篇文章主要為大家介紹了JavaScript日拱算法題解滑動(dòng)窗口的最大值實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09