JavaScript你不知道的一些數(shù)組方法

更新時間：2017年08月18日 11:04:43 作者：Funwt

這篇文章主要介紹了JavaScript你不知道的一些數(shù)組方法,需要的朋友可以參考下

concat

var a = [1,2,3];
a.concat([4,5,6],7,8);//[1,2,3,4,5,6,7,8]

注意，a數(shù)組并沒有改變，只是返回了一個新數(shù)組。

copyWithin

它接受三個參數(shù)。

target （必需）：從該位置開始替換數(shù)據(jù)。
start （可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn)為 0 。如果為負(fù)值，表示倒數(shù)。
end （可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長度。如果為負(fù)值，表示倒數(shù)。

這三個參數(shù)都應(yīng)該是數(shù)值，如果不是，會自動轉(zhuǎn)為數(shù)值

// 將 3 號位復(fù)制到 0 號位 
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) 
// [4, 2, 3, 4, 5] 
// -2 相當(dāng)于 3 號位， -1 相當(dāng)于 4 號位 
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) 
// [4, 2, 3, 4, 5] 
// 將 3 號位復(fù)制到 0 號位 
[].copyWithin.call({length: 5, 3: 1}, 0, 3) 
// {0: 1, 3: 1, length: 5} 
// 將 2 號位到數(shù)組結(jié)束，復(fù)制到 0 號位 
var i32a = new Int32Array([1, 2, 3, 4, 5]); 
i32a.copyWithin(0, 2); 
// Int32Array [3, 4, 5, 4, 5] 
// 對于沒有部署 TypedArray 的 copyWithin 方法的平臺 
// 需要采用下面的寫法 
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); 
// Int32Array [4, 2, 3, 4, 5]

entries

var a = [1,2,3];
var en = a.entries();
en.next().value;//[0.1];

返回一個迭代對象

every

function isBigEnough(element, index, array) {
 return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

每項(xiàng)都通過測試函數(shù)返回true，否則返回false

fill

[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]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

改變的是數(shù)組本身

filter

function isBigEnough(value) {
 return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

返回一個新的數(shù)組

find

方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefind

function isBigEnough(element) {
 return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130

findIndex

findIndex()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。否則返回-1。

function isBigEnough(element) {
 return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

forEach

let a = ['a', 'b', 'c'];
a.forEach(function(element) {
 console.log(element);
});
// a
// b
// c
//語法
array.forEach(callback(currentValue, index, array){
 //do something
}, this)
array.forEach(callback[, thisArg])

callback

為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收三個參數(shù)：
currentValue(當(dāng)前值)
數(shù)組中正在處理的當(dāng)前元素。
index(索引)
數(shù)組中正在處理的當(dāng)前元素的索引。
array
forEach()方法正在操作的數(shù)組。
thisArg可選
可選參數(shù)。當(dāng)執(zhí)行回調(diào) 函數(shù)時用作this的值(參考對象)

注意：沒有辦法中止或者跳出 forEach 循環(huán)，除了拋出一個異常。如果你需要這樣，使用forEach()方法是錯誤的，你可以用一個簡單的循環(huán)作為替代。如果您正在測試一個數(shù)組里的元素是否符合某條件，且需要返回一個布爾值，那么可使用 Array.every,Array.some。如果可用，新方法 find()或者findIndex()也可被用于真值測試的提早終止。

include

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

參數(shù)

searchElement

需要查找的元素值。

fromIndex

可選

從該索引處開始查找 searchElement

。如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開始搜索。默認(rèn)為 0。

返回值

一個 Boolean。

[1, 2, 3].includes(2);  // true
[1, 2, 3].includes(4);  // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

indexOf

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

參數(shù)

searchElement

要查找的元素

fromIndex

開始查找的位置。如果該索引值大于或等于數(shù)組長度，意味著不會在數(shù)組里查找，返回-1。如果參數(shù)中提供的索引值是一個負(fù)值，則將其作為數(shù)組末尾的一個抵消，即-1表示從最后一個元素開始查找，-2表示從倒數(shù)第二個元素開始查找，以此類推。注意：如果參數(shù)中提供的索引值是一個負(fù)值，仍然從前向后查詢數(shù)組。如果抵消后的索引值仍小于0，則整個數(shù)組都將會被查詢。其默認(rèn)值為0.

返回值

首個被找到的元素在數(shù)組中的索引位置; 若沒有找到則返回 -1

let a = [2, 9, 7, 8, 9]; 
a.indexOf(2); // 0 
a.indexOf(6); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1
if (a.indexOf(3) === -1) {
 // element doesn't exist in array
}

join

str = arr.join()
// 默認(rèn)為 ","
str = arr.join("")
// 分隔符 === 空字符串 ""
str = arr.join(separator)
// 分隔符

keys

keys() 方法返回一個新的Array迭代器，它包含數(shù)組中每個索引的鍵

let arr = ["a", "b", "c"];
let iterator = arr.keys();
// undefined
console.log(iterator);
// Array Iterator {}
console.log(iterator.next()); 
// Object {value: 0, done: false}
console.log(iterator.next()); 
// Object {value: 1, done: false}
console.log(iterator.next()); 
// Object {value: 2, done: false}
console.log(iterator.next()); 
// Object {value: undefined, done: true}

map

map() 方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。

let array = arr.map(function callback(currentValue, index, array) { 
 // Return element for new_array 
}[, thisArg])
let numbers = [1, 5, 10, 15];
let doubles = numbers.map((x) => {
 return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

callback

生成新數(shù)組元素的函數(shù)，使用三個參數(shù)：

currentValue

callback 的第一個參數(shù)，數(shù)組中正在處理的當(dāng)前元素。

index

callback 的第二個參數(shù)，數(shù)組中正在處理的當(dāng)前元素的索引。

array

callback 的第三個參數(shù)，map 方法被調(diào)用的數(shù)組。

thisArg

可選的。執(zhí)行 callback 函數(shù)時使用的this 值。

返回值

一個新數(shù)組，每個元素都是回調(diào)函數(shù)的結(jié)果。

pop和push

pop()方法從數(shù)組中刪除最后一個元素，并返回該元素的值。此方法更改數(shù)組的長度。

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

arr.push(element1, ..., elementN)

合并兩個數(shù)組

該示例使用 apply() 添加第二個數(shù)組的所有元素。

注意當(dāng)?shù)诙€數(shù)組(如示例中的moreVegs)太大時不要使用這個方法來合并數(shù)組，因?yàn)槭聦?shí)上一個函數(shù)能夠接受的參數(shù)個數(shù)是有限制的。具體可以參考 apply()

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];
// 將第二個數(shù)組融合進(jìn)第一個數(shù)組
// 相當(dāng)于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);
console.log(vegetables); 
// ['parsnip', 'potato', 'celery', 'beetroot']

reduce和reduceRight

reduce() 方法對累加器和數(shù)組中的每個元素 (從左到右)應(yīng)用一個函數(shù)，將其減少為單個值。

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
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

callback

執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)

accumulator

上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）

currentValue

數(shù)組中正在處理的元素

currentIndex

數(shù)據(jù)中正在處理的元素索引，如果提供了 initialValue ，從0開始；否則從1開始

array

調(diào)用 reduce 的數(shù)組

initialValue

可選項(xiàng)，其值用于第一次調(diào)用 callback 的第一個參數(shù)。如果沒有設(shè)置初始值，則將數(shù)組中的第一個元素作為初始值?？諗?shù)組調(diào)用reduce時沒有設(shè)置初始值將會報錯。

PS: 與 reduceRight()和reduce() 的執(zhí)行方向相反

reverse

reverse 方法顛倒數(shù)組中元素的位置，并返回該數(shù)組的引用。

shift與unshift

shift() 方法從數(shù)組中刪除第一個元素，并返回該元素的值。此方法更改數(shù)組的長度。

unshift() 方法將一個或多個元素添加到數(shù)組的開頭，并返回新數(shù)組的長度。

slice

slice() 方法返回一個從開始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個新數(shù)組對象。原始數(shù)組不會被修改。

arr.slice();
//[0,end];
arr.slice(start);
//[start,end];
arr.slice(start,end);
//[start,end];

slice不修改原數(shù)組，只會返回一個淺復(fù)制了原數(shù)組中的元素的一個新數(shù)組。原數(shù)組的元素會按照下述規(guī)則拷貝：

如果該元素是個對象引用（不是實(shí)際的對象），slice會拷貝這個對象引用到新的數(shù)組里。兩個對象引用都引用了同一個對象。如果被引用的對象發(fā)生改變，則新的和原來的數(shù)組中的這個元素也會發(fā)生改變。

對于字符串、數(shù)字及布爾值來說不是String、Number或者Boolean，slice會拷貝這些值到新的數(shù)組里。在別的數(shù)組里修改這些字符串或數(shù)字或是布爾值，將不會影響另一個數(shù)組。

如果向兩個數(shù)組任一中添加了新元素，則另一個不會受到影響

some

some() 方法測試數(shù)組中的某些元素是否通過由提供的函數(shù)實(shí)現(xiàn)的測試。

const isBiggerThan10 = (element, index, array) => {
 return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); 
// false
[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true

toLocaleString與toString

toLocaleString() 返回一個字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串，這些字符串將使用一個特定語言環(huán)境的字符串（例如一個逗號 ","）隔開。

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 輸出 "1,337,2017/8/13 下午8:32:24,foo"
// 假定運(yùn)行在中文（zh-CN）環(huán)境，北京時區(qū)
var a=1234
a.toString()
//"1234"
a.toLocaleString()
//"1,234"
//當(dāng)數(shù)字是四位及以上時，toLocaleString()會讓數(shù)字三位三位一分隔，像我們有時候數(shù)字也會三位一個分號
var sd=new Date()
sd
//Wed Feb 15 2017 11:21:31 GMT+0800 (CST)
sd.toLocaleString()
//"2017/2/15 上午11:21:31"
sd.toString()
//"Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"

splice

splice() 方法通過刪除現(xiàn)有元素和/或添加新元素來更改一個數(shù)組的內(nèi)容。

array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)

start

指定修改的開始位置（從0計數(shù)）。如果超出了數(shù)組的長度，則從數(shù)組末尾開始添加內(nèi)容；如果是負(fù)值，則表示從數(shù)組末位開始的第幾位（從1計數(shù)）。

deleteCount 可選

整數(shù)，表示要移除的數(shù)組元素的個數(shù)。如果 deleteCount 是 0，則不移除元素。這種情況下，至少應(yīng)添加一個新元素。如果 deleteCount 大于start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。

如果deleteCount被省略，則其相當(dāng)于(arr.length - start)。

item1, item2, ... 可選

要添加進(jìn)數(shù)組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數(shù)組元素。

返回值

由被刪除的元素組成的一個數(shù)組。如果只刪除了一個元素，則返回只包含一個元素的數(shù)組。如果沒有刪除元素，則返回空數(shù)組。

您可能感興趣的文章: