日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

splice方法_[7000字]JavaScript数组所有方法基础总结

發布時間:2025/4/5 javascript 21 豆豆
生活随笔 收集整理的這篇文章主要介紹了 splice方法_[7000字]JavaScript数组所有方法基础总结 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

基礎決定一個人的上限,很多時候我們感嘆別人在實現一個功能時使用方法的精妙,并且反思,為什么別人想的出來自己卻想不出來?我覺得主要是因為對于基礎的掌握上有很大的差距。本文總結數組的所有方法的基礎使用,希望對你有幫助,如果有錯誤,請指出。

ES6新增構造方法

Array.form()

語法

Array.from(arrayLike[, mapFn[, thisArg]])

作用

將類數組與可迭代對象轉化為數組

參數

arrayLike想要轉換成數組的偽數組對象或可迭代對象。 mapFn 可選如果指定了該參數,新數組中的每個元素會執行該回調函數。 thisArg 可選可選參數,執行回調函數 mapFn 時 this 對象。

返回值

轉化后的新數組

注意事項

1、該類數組對象必須具有 length 屬性,用于指定數組的長度。如果沒有 length 屬性,那么 轉換后的數組是一個空數組。

// 沒有length屬性返回空數組let obj = {0:'a',1:'b',2:'c'}Array.from(obj); // []

2、該類數組對象的屬性名必須為數值型或字符串型的數字,且數字必須是以0開始

// key不是數字或包含數字的字符串返回undefinedlet obj = {name:'九九歐',age:18,length:2}Array.from(obj); // [undefined, undefined]// key是數字但不是以0開始let obj = {2:'a',3:'b',4:'c',length:3}Array.from(obj); // [undefined, undefined, "a"]// 滿足所有條件let obj = {0:'a',1:'b',2:'c',length:3}Array.from(obj); // ["a","b","c"]

Array.from()在轉化對象時,要求過于苛刻,因此不適用于轉化對象,它的應用場景主要是以下幾個

從類數組對象(arguments)生成數組 let fn = function(){console.log(Array.from(arguments));}fn(1,2,3) // [1,2,3]從 String 生成數組Array.from('九九歐'); // ["九","九","歐"]從Set生成數組Array.from(new Set(["九","九","歐","歐"])); // ["九","歐"]從Map生成數組Array.from(new Map([[1, 'a'], [2, 'b']])); // [[1, 'a'], [2, 'b']]生成一個從0開始到指定數字的定長連續數組Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.of()

語法

Array.of(element0[, element1[, ...[, elementN]]])

作用

將參數依次轉化為數組中的項

參數

任意個參數,將按順序成為返回數組中的元素

返回值

轉化后的新數組

Array.of()與Array()的區別

當傳入多個參數時,兩者之間沒有區別

當傳入一個參數且參數為數字時,區別如下

Array.of(9);// [9]Array(9);// [empty × 9]

判斷數組的方法

Array.isArray()

語法

Array.isArray(obj)

作用

判斷傳遞的值是否是一個數組

參數

需要判斷的值

返回值

布爾值

實例

Array.isArray([]) // trueArray.isArray({}) // falseArray.isArray('a') // falseArray.isArray(1) // falseArray.isArray(null) // falseArray.isArray(undefined) // false

改變自身值的方法

pop

語法

arr.pop()

作用

刪除數組中最后一個元素

參數

返回值

從數組中刪除的元素(數組為空時,返回undefined)

實例

let ary = [1,2,3,4];console.log(ary.pop()); // 4console.log(ary); // [1,2,3]

push

語法

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

作用

將一個或多個元素添加到數組的末尾

參數

被添加到數組末尾的元素

返回值

新數組的長度

實例

let ary = [1,2,3];ary.push(4);console.log(ary); // [1,2,3,4]

應用

合并兩個數組

思路:利用apply改變this的指向,以及apply傳遞參數時會將數組中的項以此傳遞

let ary1 = [1,2,3];let ary2 = [4,5,6];let ary3 = Array.prototype.push.apply(ary1,ary2)console.log(ary1); // [1,2,3,4,5,6]console.log(ary3); // 6

shift

語法

arr.shift()

作用

刪除數組的第一個元素

參數

返回值

被刪除的元素

實例

let ary = [1,2,3];let result = ary.shift();console.log(ary); // [2,3]console.log(result); // 1

unshift

語法

arr.unshift(element1, ..., elementN)

作用

在數組的開頭添加一個或多個元素

參數

要添加到數組開頭的元素或多個元素

返回值

新數組的長度

實例

let ary = [4, 5, 6];let result = ary.unshift(1, 2, 3);console.log(ary); // [1, 2, 3, 4, 5, 6]console.log(result); // 6

sort

語法

arr.sort([compareFunction])

作用

數組的元素進行排序

參數

compareFunction 可選用來指定按某種順序進行排列的函數。如果省略,則元素按照轉換為的字符串的各個字符的Unicode位點進行排序。 firstEl第一個用于比較的元素。 secondEl第二個用于比較的元素。

返回值

排序后的數組

實例

若 comparefn(a, b) < 0,那么a 將排到 b 前面(數字升序)

let ary = [2,4,1,6,7,3,8,9,5];ary.sort(function(a,b){return a-b;})console.log(ary); // [1,2,3,4,5,6,7,8,9]

若 comparefn(a, b) = 0,那么a 和 b 相對位置不變

let ary = [2,4,1,6,7,3,8,9,5];ary.sort(function(a,b){return a-a;})console.log(ary); // [2,4,1,6,7,3,8,9,5]

若 comparefn(a, b) > 0,那么a , b 將調換位置(數字降序)

let ary = [2,4,1,6,7,3,8,9,5];ary.sort(function(a,b){return b-a;})console.log(ary); // [9,8,7,6,5,4,3,2,1]

省略參數時,元素按照轉換為的字符串的各個字符的Unicode位點進行排序

let ary = [9,8,7,6,5,4,3,2,1,0]ary.sort();console.log(ary); // [0,1,2,3,4,5,6,7,8,9]let ary = ["e","d","c","b","a"] ary.sort();console.log(ary); // ["a","b","c","d","e"]

splice

語法

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

作用

刪除或替換現有元素、原地添加新的元素

參數

start指定修改的開始位置(從0計數)。如果超出了數組的長度,則從數組末尾開始添加內容;如果是負值,則表示從數組末位開始的第幾位(從-1計數,這意味著-n是倒數第n個元素并且等價于array.length-n); 如果負數的絕對值大于數組的長度,則表示開始位置為第0位。 deleteCount (可選)整數,表示要移除的數組元素的個數。如果 deleteCount 大于 start 之后的元素的總數,則從 start 后面的元素都將被刪除(含第 start 位)。如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是說如果它大于或者等于start之后的所有元素的數量),那么start之后數組的所有元素都會被刪除。如果 deleteCount 是 0 或者負數,則不移除元素。這種情況下,至少應添加一個新元素。 item1, item2, ...(可選)要添加進數組的元素,從start 位置開始。如果不指定,則 splice() 將只刪除數組元素。

返回值

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

實例

刪除某個元素

let ary = [1,2,3,3,4,5,6]ary.splice(2,1);console.log(ary); // [1,2,3,4,5,6]

替換某個元素

let ary = [1,2,3,3,5,6]ary.splice(3,1,4);console.log(ary); // [1,2,3,4,5,6]

刪除最后n個元素

let ary = [1,2,3,3,5,6]ary.splice(-2);console.log(ary); // [1,2,3,4]

reverse

語法

arr.reverse()

作用

顛倒數組中元素的位置

參數

返回值

顛倒后的數組

實例

let ary = [1,2,3,4,5]ary.reverse();console.log(ary); // [5,4,3,2,1]

copyWith

語法

arr.copyWithin(target[, start[, end]])

作用

復制數組的一部分到同一數組中的另一個位置

參數

target0 為基底的索引,復制序列到該位置。如果是負數,target 將從末尾開始計算。如果 target 大于等于 arr.length,將會不發生拷貝。如果 target 在 start 之后,復制 的序列將被修改以符合 arr.length。 start0 為基底的索引,開始復制元素的起始位置。如果是負數,start 將從末尾開始計算。如果 start 被忽略,copyWithin 將會從0開始復制。 end0 為基底的索引,開始復制元素的結束位置。copyWithin 將會拷貝到該位置,但不包括end這個位置的元素。如果是負數,end將從末尾開始計算。如果end被忽略,copyWithin方法將會一直復制至數組結尾(默認為 arr.length)。

返回值

改變后的數組

實例

[1, 2, 3, 4, 5].copyWithin(-2) // [1, 2, 3, 1, 2][1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5][1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5][1, 2, 3, 4, 5].copyWithin(-2, -3, -1) // [1, 2, 3, 3, 4]

fill

語法

arr.fill(value[, start[, end]])

作用

用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引

參數

value用來填充數組元素的值。 start (可選)起始索引,默認值為0。 end (可選)終止索引,默認值為 this.length(不包含終止索引)

返回值

修改后的數組

實例

const ary = [1, 2, 3, 4];console.log(ary.fill(0, 2, 4)); // [1, 2, 0, 0]const ary = [1, 2, 3, 4];console.log(ary.fill(5, 1)); // [1, 5, 5, 5]const ary = [1, 2, 3, 4];console.log(ary.fill(6)); // [6, 6, 6, 6]

省略終止索引

const ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log(ary.fill(0, 2)); // [1, 2, 0, 0, 0, 0, 0, 0, 0, 0]

不改變自身值的方法

concat

語法

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

作用

合并兩個或多個數組

參數

valueN可選將數組和/或值連接成新數組。如果省略了valueN參數參數,則concat會返回一個它所調用的已存在的數組的淺拷貝。

返回值

新的 Array 實例

實例

合并兩個數組

const ary1 = ['九','九'];const ary2 = ['歐'];let ary3 = ary1.concat(ary2);console.log(ary3); // ['九','九','歐']

合并三個數組

const ary1 = [1,2,3];const ary2 = [4,5,6];const ary3 = [7,8,9];let ary4 = ary1.concat(ary2,ary3);console.log(ary4); // [1,2,3,4,5,6,7,8,9]

將值連接到數組

const ary1 = [1,2,3];const ary2 = [7,8,9];let ary3 = ary1.concat(4,5,6,ary2);console.log(ary3); // [1,2,3,4,5,6,7,8,9]}

flat

語法

var newArray = arr.flat([depth])

作用

將多維數組轉化為一維數組

參數

指定要提取嵌套數組的結構深度,默認值為 1

返回值

一個包含將數組與字數組中所有元素的新數組

實例

let ary = [1, 2, [3, [4,[5,[6,[7]]]]]];console.log(ary.flat()); // [1,2,3,[4,[5,[6,[7]]]]]console.log(ary.flat(2)); // [1,2,3,4,[5,[6,[7]]]]console.log(ary.flat(3)); // [1,2,3,4,5,[6,[7]]] // 傳入的參數為“Infinity”時,無論是幾維數組都會變成1維數組console.log(ary.flat(Infinity)); // [1,2,3,4,5,6,7]

flat方法會移除數組中的空項

let ary = [1, 2, , 4, 5];console.log(ary.flat()); // [1, 2, 4, 5]

flatMap

語法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])

作用

使用映射函數映射每個元素,然后將結果壓縮成一個新數組

參數

callback:可以生成一個新數組中元素的函數,包含一下三個參數: currentValue:當前正在數組中處理的元素 index(可選):數組中正在處理的當前元素的索引 array:被調用map的數組 thisAry(可選):執行callback函數值,this的值

返回值

新數組

實例

let ary = [1, 2, 3, 4];console.log(ary.flatMap(x => [x * 2])); // [2, 4, 6, 8]console.log(ary.flatMap(x => [[x * 2]])); // [[2], [4], [6], [8]]

工作原理

先map()再flat()

let names = ['九', '九', '歐'];// 步驟 1: maplet result = names.map((name, index) => [name, index]); // [ ['九', 1], ['九', 2 ], ['歐',3]]// 步驟 2: flatresult.flat(); // [ '九', 1, '九', 2 ,'歐',3]let names = ['九', '九', '歐'];let result = names.flatMap((name, index) => [name, index]); // [ '九', 1, '九', 2 ,'歐',3]

join

語法

arr.join([separator])

作用

將一個數組(或一個類數組對象)的所有元素連接成一個字符

參數

separator 可選指定一個字符串來分隔數組的每個元素。如果需要,將分隔符轉換為字符串。如果缺省該值,數組元素用逗號(,)分隔。如果separator是空字符串(""),則所有元素 之間都沒有任何字符。

返回值

一個所有數組元素連接的字符串。如果 arr.length 為0,則返回空字符串

注意事項

如果一個元素為 undefined 或 null,它會被轉換為空字符串

實例

const ary = ['九', '九', '歐'];let ary = ary.join(); // "九,九,歐"let ary = ary.join(', '); // "九, 九, 歐"let ary = ary.join(' + '); // "九 + 九 + 歐"let ary = ary.join(''); // "九九歐"

slice

語法

arr.slice([begin[, end]])

作用

將數組中一部分元素淺復制存入新的數組對象

參數

begin (可選)提取起始處的索引(從 0 開始),從該索引開始提取原數組元素。如果該參數為負數,則表示從原數組中的倒數第幾個元素開始提取。slice(-2) 表示提取原數組中的倒數第二個元素到最后一個元素(包含最后一個元素)。如果省略 begin,則 slice 從索引 0 開始。如果 begin 大于原數組的長度,則會返回空數組。 end (可選)提取終止處的索引(從 0 開始),在該索引處結束提取原數組元素。slice 會提取原數組中索引從 begin 到 end 的所有元素(包含 begin,但不包含 end)。slice(1,4) 會提取原數組中從第二個元素開始一直到第四個元素的所有元素 (索引 為 1, 2, 3的元素)。如果該參數為負數,則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最后一個元素(不包含最后一個元素,也就是只有倒數第二個元素)。如果 end 被省略,則 slice 會一直提取到原數組末尾。如果 end 大于數組的長度,slice 也會一直提取到原數組末尾。

返回值

一個含有被提取元素的新數組

實例

const ary = [1,2,3,4,5];console.log(ary.slice(1,4)); // [2,3,4]console.log(ary.slice(0,100)); // [1,2,3,4,5]console.log(ary.slice(50,100)); // []

應用

將類數組轉化為數組

function fn() {return Array.prototype.slice.call(arguments);}console.log(fn(1, 2, 3)); // [1, 2, 3]

toString

語法

arr.toString()

作用

返回數組的字符串形式

參數

返回值

數組的字符串形式

實例

const array = ['九', '九', '歐'];let str = array.toString();console.log(str); // 九,九,歐console.log(typeof str); // string

toLocaleString

語法

arr.toLocaleString([locales[,options]]);

作用

返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串,這些字符串將使用一個特定語言環境的字符串(如逗號 ",")隔開

參數

locales 可選帶有BCP 47語言標記的字符串或字符串數組。 options 可選一個可配置屬性的對象,對于數字 Number.prototype.toLocaleString()對于日期 Date.prototype.toLocaleString().

返回值

表示數組元素的字符串

indexOf

語法

arr.indexOf(searchElement[, fromIndex])

作用

返回在數組中可以找到一個給定元素的第一個索引,如果不存在,則返回-1

參數

searchElement要查找的元素 fromIndex 可選開始查找的位置。如果該索引值大于或等于數組長度,意味著不會在數組里查找,返回-1。如果參數中提供的索引值是一個負值,則將其作為數組末尾的一個抵消,即-1表示從最后一個元素開始查找,-2表示從倒數第二個元素開始查找,以此類推。 注意:如果參數中提供的索引值是一個負值,并不改變其查找順序,查找順序仍然是從前向后查詢數組。如果抵消后的索引值仍小于0,則整個數組都將會被 查詢。其默認值為0.

返回值

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

實例

const ary = [5,6,7,8,5];ary.indexOf(5); // 0ary.indexOf(1); // -1ary.indexOf(5, 2); // 4ary.indexOf(5, -2); // 4

lastIndexOf

語法

arr.lastIndexOf(searchElement[, fromIndex])

作用

查找元素在數組中最后一次出現時的索引,如果沒有,則返回-1

參數

searchElement被查找的元素。 fromIndex 可選從此位置開始逆向查找。默認為數組的長度減 1(arr.length - 1),即整個數組都被查 找。如果該值大于或等于數組的長度,則整個數組會被查找。如果為負值,將其視為從數組末尾向前的偏移。即使該值為負,數組仍然會被從后向前查找。如果該值為負時,其絕對值大于數組長度,則方法返回 -1,即數組不會被查找。

返回值

數組中該元素最后一次出現的索引,如未找到返回-1

實例

const ary = [5, 6, 7, 8, 5];ary.lastIndexOf(5); // 4ary.lastIndexOf(1); // -1ary.lastIndexOf(5, 2); // 0ary.lastIndexOf(5, -2); // 0

includes

語法

arr.includes(valueToFind[, fromIndex])

作用

判斷一個數組是否包含一個指定的值

參數

valueToFind需要查找的元素值。 fromIndex 可選從fromIndex 索引處開始查找 valueToFind。如果為負值,則按升序從 array.length + fromIndex 的索引開始搜 (即使從末尾開始往前跳 fromIndex 的絕對值個索引, 然后往后搜尋)默認為 0。

返回值

布爾值

注意事項

使用 includes()比較字符串和字符時區分大小寫 includes方法與indexOf方法的功能有些類似,不同點在于includes方法可以找到NaN而indexOf不行

實例

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

toSource

語法

array.toSource()

作用

返回一個代表該數組的源代碼的字符串

參數

返回值

代表數組源碼的字符串

實例

var array = ['a', 'b', 'c'];console.log(array.toSource()); // ["a", "b", "c"]

遍歷數組的方法

forEach

語法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

作用

對數組的每個元素執行一次給定的函數

參數

callback為數組中每個元素執行的函數,該函數接收一至三個參數: currentValue數組中正在處理的當前元素。 index 可選數組中正在處理的當前元素的索引。 array 可選forEach() 方法正在操作的數組。 thisArg 可選當執行回調函數 callback 時,用作 this 的值。

返回值

undefined

注意事項

1、forEach() 遍歷的范圍在第一次調用 callback 前就會確定。調用 forEach 后添加到數組中的項不會被 callback 訪問到

const ary = [1,2,3,4,5];ary.forEach(item =>{if(item === 1){ary.push(6) // 遍歷開始后數組新增的項不會被遍歷}console.log(item); })// 1// 2// 3// 4// 5

2、如果已經存在的值被改變,則傳遞給 callback 的值是 forEach() 遍歷到他們那一刻的值。已刪除的項不會被遍歷到

const ary = [1,2,3,4,5];ary.forEach(item =>{if(item === 1){ary.pop()//在遍歷到數組第一項時就把最后一項刪除了,被刪除的項不會被遍歷}console.log(item); })// 1// 2// 3// 4

3、如果已訪問的元素在迭代時被刪除了(例如使用 shift()),之后的元素將被跳過

const ary = [1,2,3,4,5];ary.forEach(item =>{if(item === 3){ary.shift();//遍歷到第2項時,以訪問的元素被刪除,則下一項跳過遍歷}console.log(item); })// 1// 2// 3// 5

4、forEach() 為每個數組元素執行一次 callback 函數;與 map() 或者 reduce() 不同的是,它總是返回 undefined 值,并且不可鏈式調用。因為此特性,forEach一般用于鏈式調用的結尾。

let ary = [1, 2, 3, 4, 5]let result = ary.forEach(item => {})console.log(result) // undefined

5、除了拋出異常以外,沒有辦法中止或跳出 forEach() 循環。下面是for與forEach的對比。

const ary = [1, 2, 3, 4, 5];for (let i = 0; i < ary.length; i++) {if(ary[i] === 3){console.log("找到了");break;}console.log(ary[i]);}// 1// 2// 找到了ary.forEach(item => {if(item === 3){console.log("找到了");}console.log(item);})// 1// 2// 找到了// 3// 4// 5

6、forEach()雖然不能跳出整個循環,但是可以跳出當前循環,作用與循環中的continue類似

const ary = [1, 2, 3, 4, 5];ary.forEach(item => {if (item === 3) {console.log("找到了");return;}console.log(item);})// 1// 2// 找到了// 4// 5

7、forEach()中不可以使用break或者continue,否則會報錯 8、forEach()不對未初始化的值進行任何操作

const ary = [1, 2, , 4];ary.forEach(item => {console.log(element);});// 1// 2// 4

9、使用拋出異常的方式終止forEach()循環

try {let ary = [1, 2, 3, 4, 5];ary.forEach(item => {if (item === 3) {throw new Error("EndIterative");}console.log(item);});} catch (e) {if (e.message != "EndIterative") {throw e;}}// 1// 2

應用

數組扁平化

function flatten(arr) {const result = [];arr.forEach((item) => {if (Array.isArray(item))result.push(...flatten(item));elseresult.push(item);})return result;}

filter

語法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

作用

使用傳入的函數測試所有元素,并返回所有通過測試的元素組成的新數組

參數

callback用來測試數組的每個元素的函數。返回 true 表示該元素通過測試,保留該元素, false 則不保留。它接受以下三個參數: element數組中當前正在處理的元素。 index可選正在處理的元素在數組中的索引。 array可選調用了 filter 的數組本身。 thisArg可選執行 callback 時,用于 this 的值。

返回值

由通過測試的元素組成的新數組,如果沒有元素通過測試,則返回空數組

實例

var ary1 = [1, 2, 3, 4, 5];var ary2 = ary1.filter(value => value > 3);console.log(ary2); // [4,5]

應用

1、數組對象的鍵值搜索

let users = [{ 'user': '九九', 'age': 18 },{ 'user': '八八', 'age': 19 },{ 'user': '七七', 'age': 20 },]let filtered = users.filter(n => n.age===18)console.log(filtered) // [{'user': '九九'}]

2、數組去重

let ary = [1,1,2,2,3,3,4,4,5,5]let result = ary.filter((item, index, arr) => arr.indexOf(item) === index)// indexOf只返回找到的第一個值的下標console.log(result); // [1,2,3,4,5]

3、去除空字符串以及null和undefined 思路:利用了空字符串和null、undefined轉化為boolean的結果為false

let ary = ['A', '', 'B', null, undefined, 'C', ' ']let result = ary.filter((item, idx, arr) => item && item.trim())console.log(result) //["A", "B", "C"]

map

語法

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

作用

創建一個新數組,其結果是該數組中的每個元素是調用一次提供的函數后的返回值

參數

callback生成新數組元素的函數,使用三個參數: currentValuecallback 數組中正在處理的當前元素。 index可選callback 數組中正在處理的當前元素的索引。 array可選map 方法調用的數組。 thisArg可選執行 callback 函數時值被用作this。

返回值

一個由原數組每個元素執行回調函數后的結果組成的新數組

實例

let numbers = [1, 4, 9];let result = numbers.map(Math.sqrt);let numbers = [1, 4, 9];let result = numbers.map(num => num * 2);console.log(result); // [2,8,18]

every

語法

arr.every(callback[, thisArg])

作用

測試一個數組內的所有元素是否都能通過某個指定函數的測試

參數

callback用來測試每個元素的函數,它可以接收三個參數: element用于測試的當前值。 index可選用于測試的當前值的索引。 array可選調用 every 的當前數組。 thisArg執行 callback 時使用的 this 值。

返回值

布爾值

實例

let arr1 = [12, 5, 8, 130, 44];let arr2 = [12, 54, 18, 130, 44];arr1.every(x => x >= 10); // falsearr2.every(x => x >= 10); // true

some

語法

arr.some(callback(element[, index[, array]])[, thisArg])

作用

測試數組中是不是至少有1個元素通過了被提供的函數測試

參數

callback用來測試每個元素的函數,接受三個參數: element數組中正在處理的元素。 index 可選數組中正在處理的元素的索引值。 array可選some()被調用的數組。 thisArg可選執行 callback 時使用的 this 值。

返回值

布爾值

實例

let arr1 = [1,2,3,4,5]; let arr2 = [1,2,3,4,5,12]; arr1.some(x => x > 10); // falsearr2.some(x => x > 10); // true

reduce

語法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

作用

對數組中的每個元素執行一個reducer函數,并將其結果匯總為單個返回值

參數

callback執行數組中每個值 (如果沒有提供 initialValue則第一個值除外)的函數,包含四個參數: accumulator累計器累計回調的返回值; 它是上一次調用回調時返回的累積值,或initialValue(見 于下方)。 currentValue數組中正在處理的元素。 index 可選數組中正在處理的當前元素的索引。 如果提供了initialValue,則起始索引號為0, 否則從索引1起始。 array可選調用reduce()的數組 initialValue可選作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值,則將 使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

返回值

函數累計處理的結果

實例

let arr = [1, 2, 3, 4] let sum = arr.reduce((acc, cur) => { return acc + cur; }); console.log(sum); // 10

應用

將二維數組轉化為一維數組

let arr = [[0, 1],[2, 3],[4, 5]] let flattened = arr.reduce( (acc, cur) => acc.concat(cur) ); console.log(flattened); // [0,1,2,3,4,5]

reduceRight

語法

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

作用

接受一個函數作為累加器(accumulator)和數組的每個值(從右到左)將其減少為單個值

參數

callback一個回調函數,用于操作數組中的每個元素,它可接受四個參數: accumulator累加器:上一次調用回調函數時,回調函數返回的值。首次調用回調函數時,如果 initialValue 存在,累 加器即為 initialValue,否則須為數組中的最后一個元素(詳見下方 initialValue 處相關說明)。 currentValue當前元素:當前被處理的元素。 index可選數組中當前被處理的元素的索引。 array可選調用 reduceRight() 的數組。 initialValue可選 首次調用 callback 函數時,累加器 accumulator 的值。如果未提供該初始值,則將使用數組中的最后一個元素,并跳過該元素。如果不給出初始值,則需保證數組不為空。否則,在空數組上調用 reduce 或 reduceRight 且未提供初始值(例如 [].reduce( (acc, cur, idx, arr) => {} ) )的話,會導致類型錯誤 TypeError: reduce of empty array with no initial value。

返回值

執行之后的值

entires

語法

arr.entries()

作用

返回一個新的Array Iterator對象,該對象包含數組中每個索引的鍵/值對

參數

返回值

一個新的 Array 迭代器對象

實例

let arr = ["a", "b", "c"];let iterator = arr.entries();console.log(iterator.next().value); // [0, "a"]console.log(iterator.next().value); // [1, "b"]console.log(iterator.next().value); // [2, "c"]console.log(iterator.next().value); // undefined, 迭代器處于數組末尾時, 再迭代就會返回undefined

find

語法

arr.find(callback[, thisArg])

作用

返回數組中滿足提供的測試函數的第一個元素的值。都不滿足則返回 undefined

參數

callback在數組每一項上執行的函數,接收 3 個參數: element當前遍歷到的元素。 index可選當前遍歷到的索引。 array可選數組本身。 thisArg可選執行回調時用作this 的對象。

返回值

數組中第一個滿足所提供測試函數的元素的值,都不滿足則返回 undefined

實例

let arr = [1, 3, 5, 7, 8, 9, 10];let result = arr.find(value => { if (value % 2 == 0) { return value } }); console.log(result); // 8

fineIndex

語法

arr.findIndex(callback[, thisArg])

作用

判斷數組中是否有滿足測試函數的項

參數

callback針對數組中的每個元素, 都會執行該回調函數, 執行時會自動傳入下面三個參數: element當前元素。 index當前元素的索引。 array調用findIndex的數組。 thisArg可選。執行callback時作為this對象的值。

返回值

數組中通過提供測試函數的第一個元素的索引。若都未通過則返回-1

實例

let arr = [1, 3, 5, 7, 8, 9, 10];let result = arr.findIndex(value => {if (value % 2 == 0) { return value } }); console.log(result); // 4

keys

語法

arr.keys()

作用

返回一個包含數組中每個索引鍵的Array Iterator對象

參數

返回值

一個新的 Array 迭代器對象

實例

let arr = ["abc", "xyz"]; let iterator = arr.keys(); console.log(iterator.next()); // Object {value: 0, done: false} console.log(iterator.next()); // Object {value: 1, done: false} console.log(iterator.next()); // Object {value: undefined, done: true}

values

語法

arr.values()

作用

返回一個新的 Array Iterator 對象,該對象包含數組每個索引的值

參數

返回值

一個新的 Array 迭代器對象

實例

let arr = ["abc", "def"]; let iterator = arr.values(); console.log(iterator.next().value); //abcconsole.log(iterator.next().value); //def

參考

MDN-Array.prototype

JavaScript數組所有API全解密

總結

以上是生活随笔為你收集整理的splice方法_[7000字]JavaScript数组所有方法基础总结的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。