博客 / 詳情

返回

深入淺出JavaScript:ES6數組方法

ES6數組方法

以下方法添加到了Array.prototype對象上(isArray除外)

indexOf

類似字符串的indexOf()方法

stringObject.indexOf(searchvalue,fromindex)
var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (從3號位開始搜索)
console.log(data.indexOf(4)); // -1 (未找到)
console.log(data.indexOf("5")); // -1 (未找到,因為5 !== "5")

lastIndexOf

類似indexOf()方法(順序相反)

forEach

Array在ES5新增的方法中,參數都是function類型,默認有傳參(遍歷的數組內容,對應的數組索引,數組本身)

[].forEach(function(value, index, array) {
    // ...
});

forEach方法 遍歷數組元素

var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) { 
    console.log(color);
});

forEach除了接受一個必須的回調函數參數,還可以接受一個可選的上下文參數(改變回調函數裏面的this指向)(第2個參數)如果這第2個可選參數不指定,則使用全局對象代替(在瀏覽器是為window),嚴格模式下甚至是undefined

array.forEach(callback,[ thisObject])

map

映射(一一對應)。[].map();基本用法跟forEach方法類似:

array.map(callback,[ thisObject]);

但是callback需要有return值(如果沒有,就像會返回undefined)

var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item) { 
    return item.toUpperCase(); 
});
console.log(a2); // logs A,B,C

filter

過濾篩選(callback在這裏擔任的是過濾器的角色,當元素符合條件,過濾器就返回true,而filter則會返回所有符合過濾條件的元素)。

array.filter(callback,[ thisObject]);

指數組filter後,返回過濾後的新數組。用法跟map相似

var a1 = ['a', 10, 'b', 20, 'c', 30];
var a2 = a1.filter(function(item) { 
    return typeof item == 'number'; 
});
console.log(a2); // logs 10,20,30

every(且)

every(callback[, thisObject])當數組中每一個元素在callback上被返回true時就返回true。

function isNumber(value){ 
    return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // logs false

some(或)

some(callback[, thisObject]) 只要數組中有一項在callback上被返回true,就返回true。

function isNumber(value){ 
return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // logs true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // logs false

reduce(從左到右累加)

對數組中的所有元素調用指定的回調函數。
該回調函數的返回值為累積結果,並且此返回值在下一次調用該回調函數時作為參數提供。

var a = [10, 20, 30];
var total = a.reduce(function(first, second) { 
    return first + second; 
}, 0);
console.log(total) // Prints 60

reduceRight(從右到左累加)

reduce的作用完全相同,唯一的不同是,reduceRight是從右至左遍歷數組的元素。

Array構造器上的isArray

Array.isArray直接寫在了Array構造器上,而不是prototype對象上。
Array.isArray會根據參數的[[Class]]內部屬性是否是”Array”返回true或false.

Array.isArray("NO U")
falseArray.isArray(["NO", "U"])// true

Array.prototype.slice.call

真實數組具有slice方法,可以對數組進行淺複製(不影響原數組),返回的依然是數組。
類似數組雖然有length屬性,可以使用for循環遍歷,卻不能直接使用slice方法,會報錯!但是通過Array.prototype.slice.call則不會報錯,本身(類似數組)被從頭到尾slice複製了一遍——變成了真實數組!

將類似數組的對象(比如arguments)轉換為真實的數組

Array.prototype.slice.call(arguments)
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.