Array.from() 用於將兩類對象轉為真正的數組,類似數組對象和可遍歷對象(包括數據結構Set和Map)轉化為數組 格式:Array.from(arrayLike[, mapFn[, thisArg]]) // 字元串 Array.from('foo'); // ["f", "o", "o"] ...
Array.from()
用於將兩類對象轉為真正的數組,類似數組對象和可遍歷對象(包括數據結構Set和Map)轉化為數組
格式:Array.from(arrayLike[, mapFn[, thisArg]])
// 字元串
Array.from('foo'); // ["f", "o", "o"]
// Set結構,類似數組,是個集合,具有add,has,delete,clear等方法,後面詳細說
var s = new Set(['foo', window]);
Array.from(s); // ["foo", window]
// Map結構,類似對象,具有size,get,set,has,delete,clear等方法,後面詳細說
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); // [[1, 2], [2, 4], [4, 8]]
// Array-like object (arguments)
function f() {
return Array.from(arguments);
}
f(1, 2, 3); // [1, 2, 3]
// 箭頭函數操縱參數,箭頭函數下一節詳細說
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
// 等同於
Array.from([1, 2, 3]).map(x => x + x)
// 等同於
Array.from([1,2,3]).map(function(x){
return x+x;
})
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
// 等同於
Array.from({length: 5}).map((v, i) => i)
Array.of()
用於將一組值,轉換為數組
格式:Array.of(element0[, element1[, ...[, elementN]]])
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
這個方法的主要目的,是彌補數組構造函數Array()的不足。因為參數個數的不同,會導致Array()的行為有差異。
Array() // []
Array(3) // [undefined, undefined, undefined]
Array(3, 4, 5) // [3, 4, 5]
如果考慮瀏覽器不支持Arrray.of方法,可以用下麵代碼實現
if (!Array.of) {
Array.of = function() {
return Array.prototype.slice.call(arguments);
};
}
find()和findIndex()
用於找出第一個符合條件的數組元素。
格式:arr.find(callback[, thisArg])
callback是回調函數,找到返回值為ture則返回該元素,否則返回undefined;
另外,findIndex()和find()類似,只是返回第一個符合條件的數組元素位置,都不符合則返回-1
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}, window) // 2
[2, 3, NaN, 5].find(function(value, index, arr){
return Object.is(NaN, value);
}) // NaN
[2, 3, NaN, 5].findIndex(function(value, index, arr){
return Object.is(NaN, value);
}) // 2
fill()
用於給定值填充數組
格式:arr.fill(value, start, end) start和end表示開始位置、結束位置屬於可選項
可用於數組的初始化,註意:數組中已有的元素,會被替換
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
entries(),keys()和values()
格式:arr.entries(), arr.keys(), arr.values()
這三個方法都是用於遍曆數組,其中,entries()是對鍵值對的遍歷,keys()是對鍵名的遍歷、values()是對鍵值的遍歷
for(let i of ["a", "b"].keys()){
console.log(i);
}
// 0
// 1
for(let el of ["a", "b"].values()){
console.log(el);
}
// 瀏覽器暫不支持,理論上會輸出a, b的
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
map()
用於提供該數組每個元素調用一次回調函數返回結果組成的新數組
格式:var new_array = arr.map(callback[, thisArg])
[1, 4, 9].map(Math.sqrt); // [1, 2, 3]
[1, 4, 9].map(function(num){
return num*2
}) // [2, 8, 18]
// es6中的 =>
[1, 4, 9].map(num => num*2); // [2, 8, 18]
// 數組裡包含格式化對象
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var newArr = kvArray.map(function(obj){
var o = {};
o.key = obj.key;
o.value = obj.value*2
return o;
});
console.log(JSON.stringify(newArr)); // [{"key":1,"value":20},{"key":2,"value":40},{"key":3,"value":60}]
filter()
用於提供該數組每個元素通過回調函數過濾返回結果組成的新數組
格式:var newArray = arr.filter(callback[, thisArg])
註意:跟map()方法的區別,是通過過濾,結果為ture時的元素,不通過回調函數過濾的則忽略
[1, 4, 9].filter(num => num>2); // [4, 9]
[1, 4, 9].map(num => num>2); // [false, true, true]
reduce()
可以稱之為迭代器或者累加器,用於把數組中單個元素調用一次回調元素返回結果迭代後再去調用下一個元素,最終返回一個值
格式:arr.reduce(callback, [initialValue]);callback的參數包括accumulator(回調返回的值或初始值)、currentValue(當前元素值)、currentIndex(當前元素索引,可選)、array(數組,可選); initialValue(初始值,可選)
[2, 4, 6].reduce(function(acc, cur, index, arr){
// console.log('累計值為'+acc+' 當前值為'+cur+' 當前索引為'+index);
// console.log(arr); //可以查看列印的相關參數
return acc + cur;
}); // 12 所有元素相加的值
// 有初始值的情況 =>寫法
[2, 4, 6].reduce((acc, cur) => acc + cur, 10); // 22 初始值10+所有元素相加的值
// 還可以用於數組合併
[[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}); // [0, 1, 2, 3, 4, 5]
// 數組中元素的最大值
[1,2,5,6,3].reduce((acc,cur)=>{
return Math.max(acc, cur);
}); // 6