本文實(shí)例講述了JavaScript數(shù)組及常見操作方法。分享給大家供大家參考，具體如下：

數(shù)組及操作方法

數(shù)組就是一組數(shù)據(jù)的集合，javascript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的。

定義數(shù)組的方法

//對(duì)象的實(shí)例創(chuàng)建
var aList = new Array(1,2,3);
//直接量創(chuàng)建
var aList2 = [1,2,3,'asd'];

操作數(shù)組中數(shù)據(jù)的方法

1、獲取數(shù)組的長度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

2、用下標(biāo)操作數(shù)組的某個(gè)數(shù)據(jù)：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

3、join() 將數(shù)組成員通過一個(gè)分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4

4、push() 和 pop() 從數(shù)組最后增加成員或刪除成員

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4

5、unshift()和 shift() 從數(shù)組前面增加成員或刪除成員

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4

6、reverse() 將數(shù)組反轉(zhuǎn)

var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 彈出4,3,2,1

7、indexOf() 返回?cái)?shù)組中元素第一次出現(xiàn)的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在數(shù)組中增加或刪除成員

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個(gè)元素開始，刪除1個(gè)元素，然后在此位置增加'7,8,9'三個(gè)元素
alert(aList); //彈出 1,2,7,8,9,4

多維數(shù)組

多維數(shù)組指的是數(shù)組的成員也是數(shù)組的數(shù)組。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //彈出2;

JavaScript 數(shù)組操作方法小結(jié)

ECMAScript為操作已經(jīng)包含在數(shù)組中的項(xiàng)提供了很多方法。這里本人總結(jié)一下自己對(duì)這些方法的理解，如此之多的方法中，我首先已是否會(huì)改變?cè)瓟?shù)組做為分類標(biāo)準(zhǔn)，逐個(gè)解釋一下每一個(gè)方法。

一、不會(huì)改變?cè)瓟?shù)組

1. concat()

使用方法：array.concat(array2,array3,...,arrayX)
返回值： 返回一個(gè)新的數(shù)組

concat()方法用于連接兩個(gè)或多個(gè)數(shù)組。該方法不會(huì)改變現(xiàn)有的數(shù)組，僅會(huì)返回被連接數(shù)組的一個(gè)副本。
在沒有傳遞參數(shù)的情況下，它只是復(fù)制當(dāng)前數(shù)組并返回副本；如果傳遞的值不是數(shù)組，這些值就會(huì)簡單地添加到結(jié)果數(shù)組的末尾。

var arr1 = [1,2,3];
var arr2 = arr1.concat(4,[5,6]);

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // [ 1, 2, 3, 4, 5, 6 ]

2. join()

使用方法：array.join(separator)
返回值： 返回一個(gè)字符串

join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的，默認(rèn)使用','號(hào)分割，不改變?cè)瓟?shù)組。

var arr1 = [1,2,3];
var arr2 = arr1.join();

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // 1,2,3

之前接觸過一個(gè)功能是需要生成多個(gè)連續(xù)的*，一開始是直接使用for循環(huán)可以做到，后面了解了join()方法后，發(fā)現(xiàn)其實(shí)一句話就可以弄好了。

var arr3 = "";
for(let i = 0; i < 15; i ++) {
    arr3 = arr3 + "*";
}
console.log(arr3);  // ***************

var arr4 = new Array(16).join("*");
console.log(arr4);  // ***************

3. slice()

使用方法：array.slice(start, end)
返回值： 返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素

slice()接受一或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置。
在只有一個(gè)參數(shù)的情況下，slice()方法返回從該參數(shù)指定位置到當(dāng)前數(shù)組末尾的所有項(xiàng)；
如果有兩個(gè)參數(shù)，改方法返回起始和結(jié)束位置之間的項(xiàng)——但不包括結(jié)束位置的項(xiàng)。
如果參數(shù)為負(fù)數(shù)，規(guī)定從數(shù)組尾部開始算起的位置。也就是說，-1 指最后一個(gè)元素，-2 指倒數(shù)第二個(gè)元素，以此類推。

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1);
var arr3 = arr1.slice(2,4);
var arr4 = arr1.slice(-4,-2);  // 等價(jià)于 arr1.slice(2,4);

console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2);  // [ 2, 3, 4, 5, 6 ]
console.log(arr3);  // [ 3, 4 ]
console.log(arr4);  // [ 3, 4 ]

對(duì)于偽數(shù)組轉(zhuǎn)換為標(biāo)準(zhǔn)數(shù)據(jù)就用到了這個(gè)方法
Array.prototype.slice.call(arguments)

4. some()

使用方法：array.some(function(currentValue,index,arr),thisValue)
返回值： 布爾值

或 ==> some()對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù)，如果該函數(shù)對(duì)任一項(xiàng)返回true，剩余的元素不會(huì)再執(zhí)行檢測(cè)；如果沒有滿足條件的元素，則返回false。

function compare(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].some(compare);  // false
[20, 5, 8, 1, 4].some(compare);  // true

5. every()

使用方法：array.every(function(currentValue,index,arr),thisValue)
返回值： 布爾值

和 ==> every()對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)返回true，剩余的元素不會(huì)再執(zhí)行檢測(cè)；如果其中有一個(gè)沒有滿足條件的元素，則返回false。

function compare(item, index, arr){
    return item > 10;
}

[20, 50, 80, 11, 40].every(compare);  // true
[20, 50, 80, 10, 40].every(compare);  // false

5. filter()

使用方法：array.filter(function(currentValue,index,arr), thisValue)
返回值： 返回?cái)?shù)組

filter()方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
對(duì)數(shù)組的每一項(xiàng)都運(yùn)行給定的函數(shù)，返回結(jié)果為true的項(xiàng)組成的數(shù)組。

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]

6. find() —— ES6新增的方法

使用方法：array.find(function(currentValue, index, arr),thisValue)
返回值： 返回符合測(cè)試條件的第一個(gè)數(shù)組元素值，如果沒有符合條件的則返回 undefined

find()方法傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它，并且終止搜索。

filter()和find()方法的區(qū)別：

filter()方法是對(duì)數(shù)組的每一項(xiàng)都進(jìn)行檢查，最后返回結(jié)果為true的數(shù)組；而find()方法當(dāng)找到符合的元素時(shí)，立刻返回該元素，之后的元素不再進(jìn)行檢查；
filter()方法如果沒有找到符合的元素返回空的數(shù)組；而find()方法沒有找到符合的元素則返回undefined

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]
[2, 5, 8, 1, 4].find(filterArr); // 5

function findArr(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].filter(findArr);  // []
[2, 5, 8, 1, 4].find(findArr); // undefined

7. map()

使用方法：array.map(function(currentValue,index,arr), thisValue)
返回值： 返回?cái)?shù)組

map()方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

function mapArr(item, index, arr){
    return item * 4;
}

[2, 5, 8, 1, 4].map(mapArr);  // [8,20,32,4,16]

經(jīng)常筆試和面試都會(huì)考到的一道題 ——實(shí)現(xiàn)一個(gè)map數(shù)組方法，以下是本人自己寫的一個(gè)方法

var arr = [2, 4, 8, 6, 1];

Array.prototype.myMap = function (fn, thisValue) {
    var arr = this,
        len = arr.length,
        tmp = 0,
        result = [];
    thisValue = thisValue || null;
    for (var i = 0; i < len; i++) {
        var item = arr[i],
            index = i;
        tmp = fn.call(thisValue, item, index, arr);
        result.push(tmp);
    }
    return result
}

function mapArr(item, index, arr) {
    return item * 4;
}
arr.myMap(mapArr)   // [8, 16, 32, 24, 4]

8. forEach()

使用方法：array.forEach(function(currentValue, index, arr), thisValue)
返回值： undefined

forEach() 方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。這個(gè)方法沒有返回值。
本質(zhì)上與使用for循環(huán)迭代數(shù)組一樣。

var items = [1, 2, 4, 7, 3];
var copy = [];

items.forEach(function(item,index){
  copy.push(item*index);
})

console.log(items);  // [ 1, 2, 4, 7, 3 ]
console.log(copy);  // [ 0, 2, 8, 21, 12 ]

9. reduce() 與 reduceRight()

使用方法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
返回值： 返回計(jì)算結(jié)果

函數(shù)參數(shù)

這兩個(gè)方法都會(huì)迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終返回的值。其中，reduce()方法中數(shù)組的第一項(xiàng)開始，逐個(gè)遍歷到最后；而reduceRight()則從數(shù)組的最后一項(xiàng)開始，向前遍歷到第一項(xiàng)。

如果沒有設(shè)置initialValue，total的值為數(shù)組第一項(xiàng)，currentValue為數(shù)組第二項(xiàng)。
如果設(shè)置了initialValue，則total的值就是initialValue，currentValue為數(shù)組第一項(xiàng)。

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum);

console.log(numbers);  // [ 65, 44, 12, 4 ]
console.log(res);  //  125

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum, 10);  // 初始值設(shè)置為10，所以最終結(jié)果也相應(yīng)的加10

console.log(res);  //  135

具體reduce()方法用得好是能起到很大的作用的，對(duì)于批量修改從后臺(tái)獲取的數(shù)據(jù)十分有用，可以參考JS進(jìn)階篇--JS數(shù)組reduce()方法詳解及高級(jí)技巧

10. indexOf() 和 lastIndexOf()

使用方法：array.indexOf(item,start)
返回值： 元素在數(shù)組中的位置,如果沒與搜索到則返回 -1

indexOf() 和 lastIndexOf() 方法都接收兩個(gè)參數(shù)：要查找的項(xiàng)和（可選）查找起點(diǎn)位置的索引。
其中，indexOf()方法從數(shù)組開頭開始向后查找；lastIndexOf() 方法從數(shù)組末尾開始向前查找。

var n = [1,2,3,4,5,4,3,2,1];

console.log(n.indexOf(4));  // 3
console.log(n.lastIndexOf(4));  // 5

console.log(n.indexOf(4,4));  // 5
console.log(n.lastIndexOf(4,4));  // 3

indexOf()可以使用在數(shù)組去重中，如下：

var n = [1, 2, 3, 4, 5, 4, 3, 2, 1];
function fn(arr) {
    var result = [],
        len = arr.length;
    for (var i = 0; i < len; i++) {
        var item = arr[i];
        if (result.indexOf(item) < 0) {
            result.push(item);
        }
   }
    return result;
}
console.log(fn(n));  // [1, 2, 3, 4, 5]

二、會(huì)改變?cè)瓟?shù)組

1. push()

使用方法：array.push(item1, item2, ..., itemX)
返回值： 返回新數(shù)組的長度

push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度。

var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);

console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6

2. pop()

使用方法：array.pop()
返回值： 數(shù)組原來的最后一個(gè)元素的值（移除的元素）

pop()方法用于刪除并返回?cái)?shù)組的最后一個(gè)元素。返回最后一個(gè)元素，會(huì)改變?cè)瓟?shù)組。

var arr = [65, 44, 12, 4];
var arr1 = arr.pop();

console.log(arr); // [ 65, 44, 12 ]
console.log(arr1); //  4

3. unshift()

使用方法：array.unshift(item1,item2, ..., itemX)
返回值： 返回新數(shù)組的長度

unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。返回新長度，改變?cè)瓟?shù)組。

var arr = [65, 44, 12, 4];
var arr1 = arr.unshift(1);

console.log(arr); // [ 1, 65, 44, 12, 4 ]
console.log(arr1); //  5

4. shift()

使用方法：array.shift()
返回值： 數(shù)組原來的第一個(gè)元素的值（移除的元素）

shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。返回第一個(gè)元素，改變?cè)瓟?shù)組。

var arr = [65, 44, 12, 4];
var arr1 = arr.shift();

console.log(arr); // [ 44, 12, 4 ]
console.log(arr1); //   65

5. sort()

使用方法：array.sort(sortfunction)
返回值： 返回排序后的數(shù)組（默認(rèn)升序）

sort() 法用于對(duì)數(shù)組的元素進(jìn)行排序。
排序順序可以是字母或數(shù)字，并按升序或降序。
默認(rèn)排序順序?yàn)榘醋帜干颉?br /> P.S 由于排序是按照 Unicode code 位置排序，所以在排序數(shù)字的時(shí)候，會(huì)出現(xiàn)"10"在"5"的前面，所以使用數(shù)字排序，你必須通過一個(gè)函數(shù)作為參數(shù)來調(diào)用。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values);  // [ 0, 1, 10, 15, 5 ]

values.sort(function(a, b){
  return a - b;
})
console.log(values);  //  [0, 1, 5, 10, 15 ]

6. reverse()

使用方法：array.reverse()
返回值： 返回顛倒后的數(shù)組

reverse() 方法用于顛倒數(shù)組中元素的順序。返回的是顛倒后的數(shù)組，會(huì)改變?cè)瓟?shù)組。

var values = [0, 1, 5, 10, 15];
values.reverse();
console.log(values);  // [ 15, 10, 5, 1, 0 ]

7. fill() —— ES6新增的方法

使用方法：array.fill(value, start, end)
返回值： 返回新的被替換的數(shù)組

fill()方法用于將一個(gè)固定值替換數(shù)組的元素。

var values = [0, 1, 5, 10, 15];
values.fill(2);
console.log(values);  // [ 2, 2, 2, 2, 2 ]

values = [0, 1, 5, 10, 15];
values.fill(2,3,4);
console.log(values);  // [ 0, 1, 5, 2, 15 ]

8. splice()

使用方法：array.splice(index,howmany,item1,.....,itemX)
返回值： 如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組

splice()有多種用法：

1、刪除: 可以刪除任意數(shù)量的項(xiàng)，只需要指定2個(gè)參數(shù)：要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)。

splice(0,2) // 會(huì)刪除數(shù)組中前兩項(xiàng)

2、插入: 可以向指定位置插入任意數(shù)量的項(xiàng)，只需提供3個(gè)參數(shù)：起始位置、0（要?jiǎng)h除的項(xiàng)數(shù)）和要插入的項(xiàng)。如果要插入多個(gè)項(xiàng)，可以再傳入第四、第五，以至任意多個(gè)項(xiàng)。

splice(2,0,1,4) // 會(huì)從數(shù)組位置2的地方插入1和4

3、替換: 可以向指定位置插入任意數(shù)量的項(xiàng)，且同時(shí)刪除任意數(shù)量的項(xiàng)，只需提供3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入的項(xiàng)。插入的項(xiàng)不必與刪除的項(xiàng)數(shù)相等。

splice(2,3,1,4) // 會(huì)從數(shù)組位置2刪除兩項(xiàng)，然后再從位置2的地方插入1和4

// 刪除
var values = [4,8,0,3,7];
var remove = values.splice(3,1);
console.log(values);  // [ 4, 8, 0, 7 ]
console.log(remove);  // [ 3 ]    刪除第四項(xiàng)
// 插入
remove = values.splice(2,0,1,2);
console.log(values);  // [ 4, 8, 1, 2, 0, 7 ]
console.log(remove);  // []  從位置2開始插入兩項(xiàng)，由于沒有刪除所有返回空函數(shù)
// 替換
remove = values.splice(2,2,6,9,10);
console.log(values);  // [ 4, 8, 6, 9, 10, 0, 7 ]
console.log(remove);  // [ 1, 2 ]  從位置2開始刪除兩項(xiàng)，同時(shí)插入三項(xiàng)

9. copyWithin()

—— ES6新增的方法

使用方法：array.copyWithin(target, start, end)
返回值： 返回新復(fù)制的數(shù)組

copyWithin()方法選擇數(shù)組的某個(gè)下標(biāo)，從該位置開始復(fù)制數(shù)組元素，默認(rèn)從0開始復(fù)制。也可以指定要復(fù)制的元素范圍。

var fruits = [1,2,3,4,5,6];
fruits.copyWithin(1);  // [ 1, 1, 2, 3, 4, 5 ]   從下標(biāo)為1的元素開始，復(fù)制數(shù)組

fruits.copyWithin(3, 0, 3);  // [ 1, 2, 3, 1, 2, 3 ]  從下標(biāo)為3的元素開始，復(fù)制數(shù)組坐標(biāo)為0到2的數(shù)組

三、其他

1. form() —— ES6新增的方法

使用方法：Array.from(object, mapFunction, thisValue)
返回值： 數(shù)組對(duì)象

from() 方法用于字符串、擁有 length 屬性的對(duì)象(偽數(shù)組)或可迭代的對(duì)象(Set/Map)來返回一個(gè)數(shù)組。

var myArr = Array.from("RUNOOB");
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
var s1 = Array.from(s);
var m1 = Array.from(m);

console.log(myArr);  // [ "R", "U", "N", "O", "O", "B" ]
console.log(s1);  // [ "A", "B", "C" ]
console.log(m1);  // [ [ 1, "x" ], [ 2, "y" ], [ 3, "z" ]]

對(duì)于偽數(shù)組轉(zhuǎn)換為標(biāo)準(zhǔn)數(shù)據(jù)除了Array.prototype.slice.call(arguments)，還可以使用以下方法：

function test(){
     var arg = Array.from(arguments);
     arg.push(5);
     console.log(arg);  // [ 1, 2, 3, 4, 5 ]
}
test(1,2,3,4);

還可以結(jié)合new Set()進(jìn)行數(shù)組的去重

> function dedupe(array){
return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

批量操作數(shù)組中的數(shù)據(jù)，需要用到循環(huán)語句

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《javascript面向?qū)ο笕腴T教程》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論