溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-07 20:14:34 來(lái)源：腳本之家 閱讀：153 作者：Funwt 欄目：web開發(fā)

concat

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

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

copyWithin

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

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

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

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

返回一個(gè)迭代對(duì)象

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)都通過測(cè)試函數(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]

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

find

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

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

findIndex

findIndex()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。否則返回-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
//語(yǔ)法
array.forEach(callback(currentValue, index, array){
 //do something
}, this)
array.forEach(callback[, thisArg])

callback

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

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

include

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

參數(shù)

searchElement

需要查找的元素值。

fromIndex

可選

從該索引處開始查找 searchElement

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

返回值

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

返回值

首個(gè)被找到的元素在數(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() 方法返回一個(gè)新的Array迭代器，它包含數(shù)組中每個(gè)索引的鍵

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)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(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ù)，使用三個(gè)參數(shù)：

currentValue

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

index

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

array

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

thisArg

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

返回值

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

pop和push

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

push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回?cái)?shù)組的新長(zhǎng)度。

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

合并兩個(gè)數(shù)組

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

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

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

reduce和reduceRight

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

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ù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(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 的第一個(gè)參數(shù)。如果沒有設(shè)置初始值，則將數(shù)組中的第一個(gè)元素作為初始值?？諗?shù)組調(diào)用reduce時(shí)沒有設(shè)置初始值將會(huì)報(bào)錯(cuò)。

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

reverse

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

shift與unshift

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

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

slice

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

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

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

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

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

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

some

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

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() 返回一個(gè)字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串，這些字符串將使用一個(gè)特定語(yǔ)言環(huán)境的字符串（例如一個(gè)逗號(hào) ","）隔開。

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)境，北京時(shí)區(qū)
var a=1234
a.toString()
//"1234"
a.toLocaleString()
//"1,234"
//當(dāng)數(shù)字是四位及以上時(shí)，toLocaleString()會(huì)讓數(shù)字三位三位一分隔，像我們有時(shí)候數(shù)字也會(huì)三位一個(gè)分號(hào)
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)"

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

splice

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

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

start​

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

deleteCount 可選

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

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

item1, item2, ... 可選

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

返回值

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手