點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

JavaScript中數組常見操作技巧

來源：懂視網責編：小采時間：2020-11-27 22:31:21

JavaScript中數組常見操作技巧

JavaScript中數組常見操作技巧:效果圖如下所示： Tip: 右鍵在新標簽中打開查看清晰大圖下面介紹JavaScript中的數組對象遍歷、讀寫、排序等操作以及與數組相關的字符串處理操作創建數組一般使用數組字面量[]創建新數組，除非想要創建指定長度的數組 // good var arr = [

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript中數組常見操作技巧:效果圖如下所示： Tip: 右鍵在新標簽中打開查看清晰大圖下面介紹JavaScript中的數組對象遍歷、讀寫、排序等操作以及與數組相關的字符串處理操作創建數組一般使用數組字面量[]創建新數組，除非想要創建指定長度的數組 // good var arr = [

效果圖如下所示：

Tip: 右鍵在新標簽中打開查看清晰大圖

下面介紹JavaScript中的數組對象遍歷、讀寫、排序等操作以及與數組相關的字符串處理操作

創建數組

一般使用數組字面量[]創建新數組，除非想要創建指定長度的數組

// good
var arr = [];
var arr = ['red', 'green', 'blue'];
var arr = [
 ['北京', 90],
 ['上海', 50], 
 ['廣州', 50]
];
// bad 
var arr = new Object();

使用push()動態創建二維數組實例<ul id = "source"><li>北京空氣質量：<b>90</b></li></ul>

var sourceList = document.querySelector('#source');
// 取得<ul>標簽下所有<li>元素
var lis = sourceList.querySelectorAll('li');
// 取得<ul>標簽下所有<b>元素
var bs = sourceList.querySelectorAll('li b');
var data = [];
for (var i = 0, len = lis.length; i < len; i++) {
 // 法一：先對data添加一維空數組，使其成為二維數組后繼續賦值
 data.push([]);
 // 分割文本節點，提取城市名字
 var newNod = lis[i].firstChild.splitText(2);
 data[i][0] = lis[i].firstChild.nodeValue;
 // 使用+轉換數字
 data[i][1] = +bs[i].innerHTML;
 // 法二：先對一維數組賦值，再添加到data數組中，使其成為二維數組
 var li = lis[i];
 var city = li.innerHTML.split("空氣質量：")[0];
 var num = +li.innerText.split("空氣質量：")[1];
 data.push([city,num]);
}

String.prototype.split() 方法用于把一個字符串分割成字符串數組。 split() 方法不改變原始字符串。

li.innerHTML.split("空氣質量：")-----這個拆成的數組為["北京"，"90"]的數組，再取數組

的第一項，即城市值。

Text.splitText()方法會將一個文本節點分成兩個文本節點，原來的文本節點將包含從開始到指定位置之前的內容，新文本節點將包含剩下的文本。這個方法會返回一個新文本節點

querySelector()方法接收一個CSS選擇符，返回與改模式匹配的第一個元素，如果沒有找到，則返回null

querySelectorAll()方法接受一個CSS選擇符，返回一個NodeList對象，如果沒有找到，則為空

讀取和設置

存取數組元素

一維數組

arr[下標索引]

多維數組

arr[外層數組下標][內層元素下標]

length屬性

添加新項

arr[array.length] = []

清空數組或清除

arr.length = 0 || (少于項數的數值)

判斷數組非空

if(arr.length) {}

數組遍歷

遍歷數組不使用for in，因為數組對象可能存在數字以外的屬性，這種情況下for in不會得到正確結果

推薦使用forEach()方法

使用傳統的for循環

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]);

應用

data.forEach(function (item, index) {
 li = document.createElement('li');
 fragment.appendChild(li);
 li.innerHTML = '第' + digitToZhdigit(index + 1) + '名：' + item[0] + '空氣質量：' + '<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關鍵字。默認使用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：可以使用箭頭函數=>寫出更簡短的函數

MDN Arrow functions

numbers.forEach(numer => {
});

數組排序

sort()方法

默認情況下通過調用數組項toString()方法轉型，然后比較字符串順序（ASCII碼）從小到大排列數組
為了避免類似數值字符串比較時，"10"會排在"5"的前面，sort()接受一個比較函數compare()參數，按數值大小比較

function compare(a, b) {
 if (a < b) {
 return -1;
 } else if (a > b) {
 return 1;
 } else {
 return 0;
 } 
}

該函數返回值小于0，則 a 排在 b前面；如果返回值大于0，則 b 排在 a 前面；如果返回值等于0，則 a 和 b 的相對位置不變。最后返回的是升序數組，我們也可以通過交換比較函數返回的值產生降序排序的結果。
另外如果比較的是數，則可以簡化compare()函數如下(其中a-b升序，b-a降序)

function compare(a, b) {
 return a - b;
}

運用實例

可以特定對像某個屬性進行排序

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
});

可以對多維數組某一列進行排序

var aqiData = [
 ["北京", 90],
 ["上海", 50],
 ["福州", 10],
 ["廣州", 50],
 ["成都", 90],
 ["西安", 100]
];
aqiData.sort(function (a, b) {
 return a[1] - b[1];
});
console.table(aqiData); // 以表格

輸出到控制臺，用于調試直觀了然

reverse()方法

返回一個逆向排序的數組

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

其他數組操作方法功能分類

數組元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]); // 將一個或多個新元素添加到數組結尾，并返回數組新長度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]); // 將一個或多個新元素添加到數組開始，數組中的元素自動后移，返回數組新長度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]); // 將一個或多個新元素插入到數組的指定位置，插入位置的元素自動后移，返回""。第二個參數不為0（要刪除的項數）時則可以實現替換的效果。
arr[array.length] = [] // 使用length屬性在數組末尾添加新項

數組元素的刪除

arrayObj.pop(); // 移除末端一個元素并返回該元素值
arrayObj.shift(); // 移除前端一個元素并返回該元素值，數組中元素自動前移
arrayObj.splice(deletePos,deleteCount); // 刪除從指定位置deletePos開始的指定數量deleteCount的元素，返回所移除的元素組成的新數組

數組元素的截取和合并

arrayObj.slice(startPos, [endPos]); // 以數組的形式返回數組的一部分，注意不包括 endPos 對應的元素，如果省略 endPos 將復制 startPos 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); // 將多個數組（也可以是字符串，或者是數組和字符串的混合）連接為一個數組，返回連接好的新的數組

數組的拷貝

arrayObj.slice(0); // 返回數組的拷貝數組，注意是一個新的數組，不是指向
arrayObj.concat(); // 返回數組的拷貝數組，注意是一個新的數組，不是指向

數組指定元素的索引（可以配合splice()使用）

arr.indexOf(searchElement[, fromIndex = 0]) // 返回首個被找到的元素（使用全等比較符===），在數組中的索引位置; 若沒有找到則返回 -1。fromIndex決定開始查找的位置，可以省略。
lastIndexOf() // 與indexOf()一樣，只不過是從末端開始尋找

數組的字符串化

arrayObj.join(separator); //返回字符串，這個字符串將數組的每一個元素值連接在一起，中間用 separator 隔開。

可以看做split()的逆向操作

數組值求和

array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue）// 累加器和數組中的每個元素 (從左到右)應用一個函數，將其減少為單個值，返回函數累計處理的結果
var total = [0, 1, 2, 3].reduce(function(sum, value) {
 return sum + value;
}, 0);
// total is 6

總結

以上所述是小編給大家介紹的JavaScript中數組常見操作技巧，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com