效果圖如下所示:
Tip: 右鍵在新標(biāo)簽中打開查看清晰大圖
下面介紹JavaScript中的數(shù)組對象遍歷、讀寫、排序等操作以及與數(shù)組相關(guān)的字符串處理操作
創(chuàng)建數(shù)組
一般使用數(shù)組字面量[]創(chuàng)建新數(shù)組,除非想要創(chuàng)建指定長度的數(shù)組
// good var arr = []; var arr = ['red', 'green', 'blue']; var arr = [ ['北京', 90], ['上海', 50], ['廣州', 50] ]; // bad var arr = new Object();
使用push()動態(tài)創(chuàng)建二維數(shù)組實(shí)例<ul id = "source"><li>
北京空氣質(zhì)量:<b>90</b></li></ul>
var sourceList = document.querySelector('#source'); // 取得<ul>標(biāo)簽下所有<li>元素 var lis = sourceList.querySelectorAll('li'); // 取得<ul>標(biāo)簽下所有<b>元素 var bs = sourceList.querySelectorAll('li b'); var data = []; for (var i = 0, len = lis.length; i < len; i++) { // 法一:先對data添加一維空數(shù)組,使其成為二維數(shù)組后繼續(xù)賦值 data.push([]); // 分割文本節(jié)點(diǎn),提取城市名字 var newNod = lis[i].firstChild.splitText(2); data[i][0] = lis[i].firstChild.nodeValue; // 使用+轉(zhuǎn)換數(shù)字 data[i][1] = +bs[i].innerHTML; // 法二:先對一維數(shù)組賦值,再添加到data數(shù)組中,使其成為二維數(shù)組 var li = lis[i]; var city = li.innerHTML.split("空氣質(zhì)量:")[0]; var num = +li.innerText.split("空氣質(zhì)量:")[1]; data.push([city,num]); }
String.prototype.split()
方法用于把一個字符串分割成字符串?dāng)?shù)組。 split() 方法不改變原始字符串。
li.innerHTML.split
("空氣質(zhì)量:")-----這個拆成的數(shù)組為["北京","90"]的數(shù)組,再取數(shù)組
的第一項,即城市值。
Text.splitText()
方法會將一個文本節(jié)點(diǎn)分成兩個文本節(jié)點(diǎn),原來的文本節(jié)點(diǎn)將包含從開始到指定位置之前的內(nèi)容,新文本節(jié)點(diǎn)將包含剩下的文本。這個方法會返回一個新文本節(jié)點(diǎn)
querySelector()
方法接收一個CSS選擇符,返回與改模式匹配的第一個元素,如果沒有找到,則返回null
querySelectorAll()
方法接受一個CSS選擇符,返回一個NodeList對象,如果沒有找到,則為空
讀取和設(shè)置
存取數(shù)組元素
一維數(shù)組
arr[下標(biāo)索引]
多維數(shù)組
arr[外層數(shù)組下標(biāo)][內(nèi)層元素下標(biāo)]
length屬性
添加新項
arr[array.length] = []
清空數(shù)組或清除
arr.length = 0 || (少于項數(shù)的數(shù)值)
判斷數(shù)組非空
if(arr.length) {}
數(shù)組遍歷
遍歷數(shù)組不使用for in,因為數(shù)組對象可能存在數(shù)字以外的屬性,這種情況下for in不會得到正確結(jié)果
推薦使用forEach()方法
使用傳統(tǒng)的for循環(huán)
for(var i = 0, len = arr.length; i < len; i++){} for...in for (var index in arrayObj){ var obj = arrayObj[index]; } forEach() arr.forEach(function callback(currentValue, index, array) { //your iterator }[, thisArg]);
應(yīng)用
data.forEach(function (item, index) { li = document.createElement('li'); fragment.appendChild(li); li.innerHTML = '第' + digitToZhdigit(index + 1) + '名:' + item[0] + '空氣質(zhì)量:' + '<b>' + item[1] + '</b>'; }); const numbers = [1, 2, 3, 4]; let sum = 0; numbers.forEach(function(numer) { sum += number; }); console.log(sum);
引申1:在ES6中,可以使用let或const聲明所有局部變量,不使用var關(guān)鍵字。默認(rèn)使用const,除非需要重新分配變量。const用于聲明常量,let是新的聲明變量方式,具有塊級作用域即由花括號封閉起來,這樣就不用考慮各種嵌套下變量的訪問問題了。
var foo = true; if(foo) { let bar = foo*2; bar =something(bar); console.log(bar); } console.log(bar); // RefenceError
詳情見https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md
引申2:可以使用箭頭函數(shù)=>寫出更簡短的函數(shù)
MDN Arrow functions
numbers.forEach(numer => { });
數(shù)組排序
sort()方法
默認(rèn)情況下通過調(diào)用數(shù)組項toString()方法轉(zhuǎn)型,然后比較字符串順序(ASCII碼)從小到大排列數(shù)組
為了避免類似數(shù)值字符串比較時,"10"會排在"5"的前面,sort()接受一個比較函數(shù)compare()參數(shù),按數(shù)值大小比較
function compare(a, b) { if (a < b) { return -1; } else if (a > b) { return 1; } else { return 0; } }
該函數(shù)返回值小于0,則 a 排在 b前面;如果返回值大于0,則 b 排在 a 前面;如果返回值等于0,則 a 和 b 的相對位置不變。最后返回的是升序數(shù)組,我們也可以通過交換比較函數(shù)返回的值產(chǎn)生降序排序的結(jié)果。
另外如果比較的是數(shù),則可以簡化compare()函數(shù)如下(其中a-b升序,b-a降序)
function compare(a, b) { return a - b; }
運(yùn)用實(shí)例
可以特定對像某個屬性進(jìn)行排序
var objectList = []; function Persion(name,age){ this.name=name; this.age=age; } objectList.push(new Persion('jack',20)); objectList.push(new Persion('tony',25)); objectList.push(new Persion('stone',26)); objectList.push(new Persion('mandy',23)); //按年齡從小到大排序 objectList.sort(function(a,b){ return a.age-b.age });
可以對多維數(shù)組某一列進(jìn)行排序
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["廣州", 50], ["成都", 90], ["西安", 100] ]; aqiData.sort(function (a, b) { return a[1] - b[1]; }); console.table(aqiData); // 以表格
reverse()方法
返回一個逆向排序的數(shù)組
var values = [1, 2, 3, 4, 5]; values.reverse(); alert(values); // 5,4,3,2,1
其他數(shù)組操作方法功能分類
數(shù)組元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]); // 將一個或多個新元素添加到數(shù)組結(jié)尾,并返回數(shù)組新長度 arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]); // 將一個或多個新元素添加到數(shù)組開始,數(shù)組中的元素自動后移,返回數(shù)組新長度 arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]); // 將一個或多個新元素插入到數(shù)組的指定位置,插入位置的元素自動后移,返回""。第二個參數(shù)不為0(要刪除的項數(shù))時則可以實(shí)現(xiàn)替換的效果。 arr[array.length] = [] // 使用length屬性在數(shù)組末尾添加新項
數(shù)組元素的刪除
arrayObj.pop(); // 移除末端一個元素并返回該元素值 arrayObj.shift(); // 移除前端一個元素并返回該元素值,數(shù)組中元素自動前移 arrayObj.splice(deletePos,deleteCount); // 刪除從指定位置deletePos開始的指定數(shù)量deleteCount的元素,返回所移除的元素組成的新數(shù)組
數(shù)組元素的截取和合并
arrayObj.slice(startPos, [endPos]); // 以數(shù)組的形式返回數(shù)組的一部分,注意不包括 endPos 對應(yīng)的元素,如果省略 endPos 將復(fù)制 startPos 之后的所有元素 arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); // 將多個數(shù)組(也可以是字符串,或者是數(shù)組和字符串的混合)連接為一個數(shù)組,返回連接好的新的數(shù)組
數(shù)組的拷貝
arrayObj.slice(0); // 返回數(shù)組的拷貝數(shù)組,注意是一個新的數(shù)組,不是指向 arrayObj.concat(); // 返回數(shù)組的拷貝數(shù)組,注意是一個新的數(shù)組,不是指向
數(shù)組指定元素的索引(可以配合splice()使用)
arr.indexOf(searchElement[, fromIndex = 0]) // 返回首個被找到的元素(使用全等比較符===),在數(shù)組中的索引位置; 若沒有找到則返回 -1。fromIndex決定開始查找的位置,可以省略。 lastIndexOf() // 與indexOf()一樣,只不過是從末端開始尋找
數(shù)組的字符串化
arrayObj.join(separator); //返回字符串,這個字符串將數(shù)組的每一個元素值連接在一起,中間用 separator 隔開。
可以看做split()的逆向操作
數(shù)組值求和
array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)// 累加器和數(shù)組中的每個元素 (從左到右)應(yīng)用一個函數(shù),將其減少為單個值,返回函數(shù)累計處理的結(jié)果 var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value; }, 0); // total is 6
總結(jié)
以上所述是小編給大家介紹的JavaScript中數(shù)組常見操作技巧,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com