深入探密Javascript數(shù)組方法
在JavaScript中,數(shù)組可以使用Array構(gòu)造函數(shù)來(lái)創(chuàng)建,或使用[]快速創(chuàng)建,這也是首選的方法。數(shù)組是繼承自O(shè)bject的原型,并且他對(duì)typeof沒(méi)有特殊的返回值,他只返回'object'。
1. Array.prototype.slice方法
數(shù)組的 slice 方法通常用來(lái)從一個(gè)數(shù)組中抽取片斷。不過(guò),它還有將“類數(shù)組”(比如arguments和HTMLCollection)轉(zhuǎn)換為真正數(shù)組的本領(lǐng)。
var nodesArr = Array.prototype.slice.call(document.forms);
var argsArr = Array.prototype.slice.call(arguments);
我就好奇了為什么數(shù)組的slice方法有這樣的本領(lǐng),它在javascript引擎中是如何實(shí)現(xiàn)的?slice的兄弟方法有沒(méi)有這樣的本領(lǐng)?
帶著好奇心,下載Google的V8 javascript引擎源碼到本地,V8源碼的下載地址:https://github.com/v8/v8。
在v8-master/src/array.js中查找“Array.prototype.slice”:
function ArraySlice(start, end) {
CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
...
var result = []; // 這句是關(guān)鍵
if (end_i < start_i) return result;
if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {
...
SparseSlice(array, start_i, end_i - start_i, len, result);
} else {
SimpleSlice(array, start_i, end_i - start_i, len, result);
}
...
return result;
接著猜想調(diào)用“類數(shù)組”走的應(yīng)該是SimpleSlice方法,然后在源碼查找“SimpleSlice“,發(fā)現(xiàn)Array.prototype.splice源碼中也調(diào)用了SimpleSlice方法,且結(jié)果變量也初始化為空數(shù)組。不過(guò),想用splice方法把“類數(shù)組”轉(zhuǎn)化為真正數(shù)組,必須要傳入起始位置參數(shù)為0,即:
var nodesArr = Array.prototype.splice.call(document.forms, 0);
因?yàn)樗膶?shí)現(xiàn)原理就是將被刪除的數(shù)組項(xiàng)組成新數(shù)組。感興趣的童鞋可以看下Array.prototype.splice的源碼實(shí)現(xiàn)。
此外,slice還可以克隆一個(gè)數(shù)組:
var arr = [1, 2, 3];
var cloneArr = arr.slice(); // cloneArr: [1, 2, 3]
2. Array.prototype.push 方法
使用 push方法可以合并數(shù)組:
var arr1 = [1, 'str', {name: 'lang'}];
var arr2 = [2, 'ing'];
Array.prototype.push.apply(arr1, arr2);
// 返回結(jié)果:[1, "str", {name: 'lang'}, 2, "ing"]
3. Array.prototype.sort 方法
先上代碼:
var arr = ['1', '2', '10', '12'];
arr.sort();
// 返回結(jié)果:["1", "10", "12", "2"]
上面的結(jié)果通常不是我們想要的,那么如何按數(shù)值大小排序:
arr.sort(function(a, b) {
return a - b;
})
// 返回結(jié)果:["1", "2", "10", "12"]
有了排序比較器函數(shù)之后,就可以自定義很多比較器,從而實(shí)現(xiàn)個(gè)性化的排序。
4. length 屬性
數(shù)組的length屬性,不是只讀的,也就說(shuō)還可寫(xiě)哦,比如使用length屬性去截?cái)鄶?shù)組:
var arr = [1, 2, 3, 4];
arr.length = 2;
// arr: [1, 2]
arr.length = 0;
// arr: []
與此同時(shí),如果把length屬性變大,數(shù)組的長(zhǎng)度值變會(huì)增加,且使用undefined來(lái)作為新的元素填充。
var arr = [];
arr.length = 3;
// arr: [undefined, undefined, undefined]
好了,今天就總結(jié)到這里了,已經(jīng)凌晨了,以后有什么新發(fā)現(xiàn)再append到這里。
之前,沒(méi)有寫(xiě)博客的習(xí)慣,只習(xí)慣把平時(shí)的總結(jié)放到有道云筆記中,沒(méi)想到把觀點(diǎn)寫(xiě)出來(lái)著實(shí)要花點(diǎn)心思的,因?yàn)橐紤]如何表達(dá),才能讓別人更好地理解。
有什么表達(dá)不對(duì)或理解錯(cuò)誤的地方,還望大家?guī)兔χ刚鰜?lái)。
另附上一些常用的javascript數(shù)組方法
concat()連接兩個(gè)或更多的數(shù)組,并返回結(jié)果。
join()把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔。
pop()刪除并返回?cái)?shù)組的最后一個(gè)元素
push()向數(shù)組的末尾添加一個(gè)或更多元素,并返回新的長(zhǎng)度。
reverse()顛倒數(shù)組中元素的順序。
shift()刪除并返回?cái)?shù)組的第一個(gè)元素
slice()從某個(gè)已有的數(shù)組返回選定的元素
sort()對(duì)數(shù)組的元素進(jìn)行排序
splice()刪除元素,并向數(shù)組添加新元素。
toSource()返回該對(duì)象的源代碼
toString()把數(shù)組轉(zhuǎn)換為字符串,并返回結(jié)果。
toLocaleString()把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組,并返回結(jié)果。
unshift()向數(shù)組的開(kāi)頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度。
valueOf()返回?cái)?shù)組對(duì)象的原始值
- JavaScript數(shù)組方法大全(推薦)
- JavaScript數(shù)組方法總結(jié)分析
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- javascript中FOREACH數(shù)組方法使用示例
- 超詳細(xì)的javascript數(shù)組方法匯總
- javascript中數(shù)組方法匯總
- Javascript中數(shù)組方法匯總(推薦)
- js數(shù)組方法擴(kuò)展實(shí)現(xiàn)數(shù)組統(tǒng)計(jì)函數(shù)
- javascript對(duì)數(shù)組的常用操作代碼 數(shù)組方法總匯
- 數(shù)組方法解決JS字符串連接性能問(wèn)題有爭(zhēng)議
- JS中的數(shù)組方法筆記整理
相關(guān)文章
PHP開(kāi)發(fā)者必須掌握的6個(gè)關(guān)鍵字
這篇文章主要介紹了PHP開(kāi)發(fā)者必須掌握的6個(gè)關(guān)鍵字,需要的朋友可以參考下2014-04-04javascript數(shù)據(jù)代理與事件詳解分析
所謂數(shù)據(jù)代理(也叫數(shù)據(jù)劫持),指的是在訪問(wèn)或者修改對(duì)象的某個(gè)屬性時(shí),通過(guò)一段代碼攔截這個(gè)行為,進(jìn)行額外的操作或者修改返回結(jié)果。比較典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 對(duì)象2021-11-11javascript的面向?qū)ο缶幊桃黄饋?lái)看看
這篇文章主要為大家詳細(xì)介紹了javascript的面向?qū)ο缶幊?,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02Javascript學(xué)習(xí)筆記之函數(shù)篇(五) : 構(gòu)造函數(shù)
javascript本身是沒(méi)有類的概念,只有函數(shù)的概念。javascript的類實(shí)際上也是一個(gè)javascript的函數(shù),在這個(gè)特殊的函數(shù)中間可以包含變量和其他javascript函數(shù)的引用。那么這個(gè)特殊的函數(shù)本身就是javascript所謂類的構(gòu)造函數(shù)。2014-11-11實(shí)例區(qū)別onClick和onDBClick兩事件方法
實(shí)例區(qū)別onClick和onDBClick兩事件方法2008-09-09分享5個(gè)頂級(jí)的JavaScript Ajax組件庫(kù)
AJAX是用來(lái)對(duì)服務(wù)器進(jìn)行異步HTTP調(diào)用的一系列web開(kāi)發(fā)技術(shù)客戶端框架,本文為大家分享了5個(gè)頂級(jí)的JavaScript Ajax組件庫(kù)2018-09-09