JavaScript陣列方法大全

趁著有時間，總結了下陣列所有的屬性和方法，記錄博客，便于后續使用

at()
- at方法，用于獲取陣列中，對應索引位置的值，不能修改，
- 語法：array.at(count);
- 引數：count，陣列的索引值
- 回傳值：回傳該索引在陣列中對應的值，如果count大于等于陣列的長度時，回傳undefined
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const len = arr.at(1)
console.log(len);// 2
```
concat()

- concat方法用于連接兩個或多個陣列
- 語法：array.concat(arr1,arr2,arr...);
- 引數: arr1, ...arrx，可選，該引數可以是具體的值，也可以是陣列物件，可以是任意多個，引數為空時，將拷貝呼叫該方法的陣列作為副本回傳，
- 回傳值：Array，回傳一個新的陣列，該陣列是通過把所有 arrayX 引數添加到 arrayObject 中生成的，如果要進行 concat() 操作的引數是陣列，那么添加的是陣列中的元素，而不是陣列，
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.concat();
const arr2 = arr.concat(['我是lanny',12],['嘿嘿'],'啦啦啦');
console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, '我是lanny', 12, '嘿嘿', '啦啦啦'];
```
constructor
- constructor屬性，回傳陣列的建構式，其回傳值是對函式的參考，而不是函式的名稱，對于 JavaScript 陣列，constructor 屬性回傳function Array() { [native code] }，對于 JavaScript 物件，constructor 屬性回傳：function Object() { [native code] }
- 可以通過如下形式，對資料的型別進行判斷
- const arr = [1,2,3]
- console.log(arr.constructor === Array);// true
copyWithin
- copyWithin用于從陣列的指定位置拷貝元素到陣列的另一個指定位置中，
- 語法：array.copyWithin(target, start, end)
- 引數：target-必需，復制到指定目標索引位置，start-可選，元素復制的起始位置，end-可選，停止復制的索引位置 (默認為 array.length)，如果為負值，表示倒數，
- 注意，該方法會改變原陣列
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
arr.copyWithin(0,4,9);
console.log(arr);// [5, 6, 7, 8, 9, 6, 7, 8, 9, 10]
```
entries()
- entries方法回傳一個陣列的迭代物件，該物件包含陣列的鍵值對 (key/value)，迭代物件中陣列的索引值作為 key，陣列元素作為 value.
- 語法：array.entries()
- 回傳值：Array Iterator一個陣列的迭代物件，
- ```
const arr = ['lanny','jhon','alex','emily'].entries();
for (const [key,value] of arr) {
      console.log(key,value)
}
//0 'lanny'
//1 'jhon'
//2 'alex'
//3 'emily'
```
every()
- every方法用于檢測陣列所有元素是否都符合指定條件, 指定函式檢測陣列中的所有元素：如果陣列中檢測到有一個元素不滿足，則整個運算式回傳 false ，且剩余的元素不會再進行檢測，如果所有元素都滿足條件，則回傳 true，
- 語法：array.every(function(currentValue, index,arr),thisValue);
- 注意： every() 不會對空陣列進行檢測，every() 不會改變原始陣列，
- 引數：
  - function(currentValue, index,arr)
    - 必須，函式，陣列中的每個元素都會執行這個函式，
    - currentValue：必須，每次遍歷回圈時，當前元素的值，
    - index-可選，當前元素的索引值，
    - arr-可選，當前元素屬于的陣列物件，
  - thisValue 可選，物件作為該執行回呼時使用，傳遞給函式，用作 "this" 的值，如果省略了 thisValue ，"this" 的值為 "undefined"，
- 回傳值：boolean，true或者false，
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const condition = arr.every(function(currentValue,index,arr){
     console.log(this);//arr
     return typeof currentValue =https://www.cnblogs.com/LannyChung/archive/2023/02/20/=='number'
 },arr)
 console.log(condition) // true
```
fill()
- fill方法用于將一個固定值替換陣列的元素，
- 語法：array.fill(value,start,end);
- 引數：value-必需，填充的值，start-可選，開始填充位置，end-可選，停止填充位置 (默認為 array.length)，
- 回傳值：Array，回傳新替換的值作為陣列的唯一項，
- 注意：該方法會改變原陣列
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.fill('嘟嘟',0,1);
console.log(arr);//['嘟嘟', 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1);//['嘟嘟']
```
filter()
- filter方法用于過濾，回傳指定函式中要求的條件，filter() 不會改變原始陣列、不會對空陣列進行檢測，
- 語法：array.filter(function(currentValue,index,arr), thisValue);
- 引數：
  - function(currentValue, index,arr)
    - 必須，函式，陣列中的每個元素都會執行這個函式，
    - currentValue：必須，每次遍歷回圈時，當前元素的值，
    - index-可選，當前元素的索引值，
    - arr-可選，當前元素屬于的陣列物件，
  - thisValue 可選，物件作為該執行回呼時使用，傳遞給函式，用作 "this" 的值，如果省略了 thisValue ，"this" 的值為 "undefined"，
- 回傳值：Array，回傳一個新陣列，滿足所執行的函式條件
- ```
const arr = [1,2,3,"啦啦",6,7,"小L",9,10];
const arr1 = arr.filter((item)=>typeof item === 'string');
console.log(arr1);//["啦啦", "小L"]
```
find()
- find方法回傳通過測驗（函式內判斷）的陣列的第一個元素的值，find() 方法為陣列中的每個元素都呼叫一次函式執行：當陣列中的元素在測驗條件時回傳 true 時, find() 回傳符合條件的元素，之后的值不會再呼叫執行函式，如果沒有符合條件的元素回傳 undefined，注意: find() 對于空陣列，函式是不會執行的、 find() 并沒有改變陣列的原始值，
- 語法：array.find(function(currentValue,index,arr), thisValue);
- 引數：
  - function(currentValue, index,arr)
    - 必須，函式，陣列中的每個元素都會執行這個函式，
    - currentValue：必須，每次遍歷回圈時，當前元素的值，
    - index-可選，當前元素的索引值，
    - arr-可選，當前元素屬于的陣列物件，
  - thisValue 可選，物件作為該執行回呼時使用，傳遞給函式，用作 "this" 的值，如果省略了 thisValue ，"this" 的值為 "undefined"，
- 回傳值：any，任意型別，滿足函式條件的第一個對應值，如果都不滿足，回傳undefined，
- ```
const arr = [1,2,3,4,5,"嘟嘟",7,"嘿嘿",9,10];
const value = https://www.cnblogs.com/LannyChung/archive/2023/02/20/arr.find((item)=>typeof item ==='number'));//2
console.log(value);// 1
```
findIndex()
- findIndex方法回傳傳入一個測驗條件（函式）符合條件的陣列第一個元素位置，方法為陣列中的每個元素都呼叫一次函式執行：當陣列中的元素在測驗條件時回傳 true 時, findIndex() 回傳符合條件的元素的索引位置，之后的值不會再呼叫執行函式，如果沒有符合條件的元素回傳 -1，注意: findIndex() 對于空陣列，函式是不會執行的、findIndex() 并沒有改變陣列的原始值，
- 語法：array.findIndex(function(currentValue, index, arr), thisValue);
- 引數：
  - function(currentValue, index,arr)
    - 必須，函式，陣列中的每個元素都會執行這個函式，
    - currentValue：必須，每次遍歷回圈時，當前元素的值，
    - index-可選，當前元素的索引值，
    - arr-可選，當前元素屬于的陣列物件，
  - thisValue 可選，物件作為該執行回呼時使用，傳遞給函式，用作 "this" 的值，如果省略了 thisValue ，"this" 的值為 "undefined"，
- 回傳值：number，索引值，回傳符合條件的元素的索引位置，之后的值不會再呼叫執行函式，如果沒有符合條件的元素回傳 -1，
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const index = arr.findIndex((item=>item === 9);
console.log(index);//8  注意，是索引位置
```
findLast()
- 該方法與find方法相同，唯一區別是，遍歷呼叫函式查找時，是倒序查找，從陣列末尾，向前查找的
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const last = arr.findLast((item)=>typeof item === 'number');
console.log(last);//10
```

findLastIndex()

該方法與findIndex方法相同，唯一區別是，遍歷呼叫函式查找時，是倒序查找，從陣列末尾，向前查找的.

const arr = [1,2,3,4,5,6,7,8,9,10];
const lastIndex = arr.findLastIndex((item)=>typeof item === 'number');
console.log(lastIndex);//9 注意，是索引位置

flat()
- 該方法用于將嵌套的多維陣列，轉換成一維陣列，該方法會自動洗掉，空的索引值,且不會改變原陣列，
- 語法：array.flat(hierarchy)
- 引數值：hierarchy-陣列的嵌套層級，number，或者 Infinity-不管嵌套多少層
- 回傳值：Array，轉換之后的一維陣列，
- ```
const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]];
const arr1 = arr.flat(Infinity);
console.log(arr1);//['a', 0, 5, 18, 29, '嘿嘿', {key:'002'}]
```
flatMap()
- 先對陣列中每個元素進行處理，再對陣列執行 flat() 方法，
- 語法：array.flatMap(function(currentValue,index,arr),thisValue)；
- 引數：
  - function(currentValue, index,arr)
    - 必須，函式，陣列中的每個元素都會執行這個函式，
    - currentValue：必須，每次遍歷回圈時，當前元素的值，
    - index-可選，當前元素的索引值，
    - arr-可選，當前元素屬于的陣列物件，
  - thisValue 可選，物件作為該執行回呼時使用，傳遞給函式，用作 "this" 的值，如果省略了 thisValue ，"this" 的值為 "undefined"，
- 回傳值：Array，回傳處理之后的陣列，
- ```
const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]]
const arrFlat = arr.flatMap(item=>{
    if(typeof item === 'string'){
        return item + '已處理'
    }else{
        return item
    }
})
console.log(arrFlat);// ['a已處理', 0, 5, [18,29], ['嘿嘿',{key:'002']]
```
forEach()
- forEach().方法用于呼叫陣列的每個元素，并將元素傳遞給回呼函式，即遍歷陣列，在函式中進行操作，forEach() 對于空陣列是不會執行回呼函式的，該方法沒有回傳值，即undefined
- 語法：array.forEach(callbackFn(currentValue, index, arr), thisValue);
- 引數：
  - function(currentValue, index,arr)
    - 必須，函式，陣列中的每個元素都會執行這個函式，
    - currentValue：必須，每次遍歷回圈時，當前元素的值，
    - index-可選，當前元素的索引值，
    - arr-可選，當前元素屬于的陣列物件，
  - thisValue 可選，物件作為該執行回呼時使用，傳遞給函式，用作 "this" 的值，如果省略了 thisValue ，"this" 的值為 "undefined"，
- 回傳值：無，undefined，
- ```
const arr = [1,"嘟嘟",3,4,5,6,7,8,9,10];
arr.forEach((item,index)=>{
    if(typeof item === 'number'){
        arr[index] = item * 2
    }
})
console.log(arr);// [2, '嘟嘟', 6, 8, 10, 12, 14, 16, 18, 20]
```
indexOf()
- indexOf方法可回傳陣列中某個指定的元素位置，該方法將從頭到尾地檢索陣列，看它是否含有對應的元素，開始檢索的位置在陣列 start 處或陣列的開頭（沒有指定 start 引數時），如果找到一個 item，則回傳 item 的第一次出現的位置，開始位置的索引為 0，如果在陣列中沒找到指定元素則回傳 -1，
- 語法：array.indexOf(item,start);
- 引數：item必須，查找的元素，start可選的整數引數，規定在陣列中開始檢索的位置，它的合法取值是 0 到 stringObject.length - 1，如省略該引數，則將從字串的首字符開始檢索，
- 回傳值：number，索引值，元素在陣列中的位置，如果沒有搜索到則回傳 -1，
```
const arr = ["嘟嘟",2,3,4,5,6,7,8,9,10];
const index = arr.indexOf('嘟嘟')
console.log(index);// 0
```
lastIndexOf()
- lastIndexOf()方法可回傳一個指定的元素在陣列中最后出現的位置，從該字串的后面向前查找，如果要檢索的元素沒有出現，則該方法回傳 -1，該方法將從尾到頭地檢索陣列中指定元素 item，開始檢索的位置在陣列的 start 處或陣列的結尾（沒有指定 start 引數時），如果找到一個 item，則回傳 item 從尾向前檢索第一個次出現在陣列的位置，陣列的索引開始位置是從 0 開始的，如果在陣列中沒找到指定元素則回傳 -1，
- 語法：array.lastIndexOf(item,start)；
- 引數：item必需，規定需檢索的字串值，start可選的整數引數，規定在字串中開始檢索的位置，它的合法取值是 0 到 stringObject.length - 1，如省略該引數，則將從字串的最后一個字符處開始檢索，
- 回傳值：number，索引值，元素在陣列中的位置，如果沒有搜索到則回傳 -1，
- ```
const arr = [0,1,2,4,1,5];
const index = arr.lastIndexOf(1);
console.log(index);//4 索引位置，倒數
```
join()
- join()方法用于把陣列中的所有元素轉換一個字串，元素是通過指定的分隔符進行分隔的，該方法不會改變原陣列，
- array.join(separator);
- 引數：separator可選，指定要使用的分隔符，如果省略該引數，則使用逗號作為分隔符，
- 回傳值：String回傳一個字串，該字串是通過把 arrayObject 的每個元素轉換為字串，然后把這些字串連接起來，在兩個元素之間插入 separator 字串而生成的，
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arr1 = arr.join('');
console.log(arr1);// "1234嘟嘟678910"
```
keys()
- keys()方法用于從陣列創建一個包含陣列鍵的可迭代物件.如果物件是陣列回傳 true，否則回傳 false，
- 回傳值：一個陣列可迭代物件，
- ```
const arr = ['lanny','jhon','alex','emily'];
for (const item of arr.keys()) {
    console.log(item)// 陣列的索引值,依次列印 0/1/2/3
}
```
includes()
- includes()方法用來判斷一個陣列是否包含一個指定的值，如果是回傳 true，否則false
- 語法：array.includes(searchElement, fromIndex);
- 引數：searchElement必須，需要查找的元素值，fromIndex可選，從該索引處開始查找 searchElement，如果為負值，則按升序從 array.length + fromIndex 的索引開始搜索，默認為 0，如果fromIndex大于等于陣列長度，則回傳 false，該陣列不會被搜索，
- 回傳值：布林值，如果找到指定值回傳 true，否則回傳 false，
- ```
const arr = ['嘟嘟', 4, 6, 8, 10, 12, 14, 16, 18, 20];
console.log(arr.includes('嘟嘟'));// true
```

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544492.html

標籤：其他

上一篇：正則的擴展詳解

下一篇：記錄--什么時候會阻塞HTML檔案渲染程序？

JavaScript陣列的方法大全（最新）

JavaScript陣列方法大全

at()

concat()

constructor

copyWithin

entries()

every()

fill()

filter()

find()

findIndex()

findLast()

findLastIndex()

flat()

flatMap()

forEach()

indexOf()

lastIndexOf()

join()

keys()

includes()