js中數組常用的方法總結


數組方法目錄

  1. push 數組末尾添加元素
  2. unshift 數組開始位置增加元素
  3. shift 刪除數組中的第一項
  4. pop 刪除數組中的最后一項
  5. splice 數組增刪改
  6. slice 查找兩個索引中間的內容返回到新數組
  7. concat 數組拼接
  8. toString 數組轉化為字符串
  9. join 數組轉化為字符串
  10. indexof/lastindexof 檢測某一項出現在數組中的第一次的索引和最后一次的索引
  11. reverse 反轉數組
  12. sort 數組排序
  13. forEach 遍歷數組執行回調函數沒有返回值
  14. includes 判斷數組是夠包含某一項值
  15. map 遍歷數組執行回調返回新數組
  16. some 所有元素進行判斷 只要有一個滿足就返回true
  17. find 返回數組中滿足函數的第一個元素值
  18. flat 按照一個指定的深度遍歷數組最好是infinity
  19. fill 用一個固定的值來填充數組每個都一樣
  20. filter 判斷數組滿足條件的元素返回新數組
  21. reduce 對每一個元素執行函數,匯總成一個數
  22. from 讓一個類數組轉化為數組
  23. isArray 判斷傳遞的參數是不是數組
  24. every 所有元素進行判斷都滿足了返回true
  25. findIndex 返回數組中滿足函數的第一個元素的索引,都不滿足返回-1
  26. of 創建數組

數組中常用的方法

  • 方法的作用和含義
  • 方法的實參(類型和含義)
  • 方法的返回值
  • 原來的數組會不會發生改變

實現數組增刪改的方法

這一部分方法都會修改原有的數組

1. push()

/**
 * push:向數組末尾增加內容
 * @params
 *   多個任意類型
 * @return 
 *   新增后數組的長度
 */
let arr=[10,20];
let res=arr.push(30,'AA');
//基於原生js操作鍵值對的方法,也可以向末尾追加一項新的內容
arr[arr.length]=40;
console.log(res,arr);//[10,20,30,'AA',40]

2. unshift()

/**
 * unshift:向數組開始位置增加內容
 * @params
 *   多個任意類型
 * @return 
 *   新增后數組的長度
 */

3. shift()

/**
 * shift:刪除數組中的第一項
 * @params
 *   
 * @return 
 *   刪除的哪一項
 * 基於原生js中的delete把數組當做普通的對象 確實可以刪除掉某一項內容 但是不會影響數組背身的結構特點(length長度不會改變)項目中不應該這樣刪除數據
 */

4. pop()

/**
 * pop:刪除數組中最后一項
 * @params
 *   
 * @return 
 *   刪除的哪一項
 * 基於原生js讓數組的長度減掉一位 默認干掉的就是最后一項
 */

5. splice()

/**
 * splice:實現數組的增加、刪除、修改
 * @params
 *  刪除: n,m 都是數字 從索引n開始刪除m個元素(m不寫 直接刪除到末尾)
 *  修改:n,m,x 從索引n開始刪除m個元素 用x占據刪除的部分
 *  增加:n,0,x 從索引n開始 一個都不刪 把x放到索引n的前面 
 * @return 
 *   把刪除的部分用新數組儲存起來返回
 * 基於這種方法可以清空一個數組,把原始數組中的內容以新數組儲存起來(有點類似於數組的克隆,把原來數組克隆一份一模一樣的給新數組)
 * arr.splice(0)數組為空
 */

數組的查詢和拼接

此組學習的方法,原來數組不會改變

6. slice()

/**
 * slice:實現數組的查找
 * @params
 *   n,m 都是數字 從索引n開始找到索引為m的地方(不包含m這一項)
 *   m不寫就是找到末尾
 * @return 
 *   把找到的內容以一個新數組的形式返回
 數組的克隆,參數0不寫也可以
 res=arr.slice(0)
 思考:
 1.如果n/m為負數會怎樣?如果n>m了會怎樣?如果是小數會怎樣?如果是非有效數字會怎樣?如果m或n的值比最大索引都大會怎樣?
 2.這種克隆方式為淺克隆
 */

7. concat()

/**
 * concat:實現數組拼接
 * @params
 *   多個任意類型值
 * @return 
 *   拼接后的新數組(原來數組不變)
 */

數組轉化為字符串

原有數組不變

8. toString()

/**
 * toString:把數組轉化為字符串
 * @params
 *   沒有參數
 * @return 
 *   轉換后的字符串,每一項用逗號分隔(原數組不變)
 */

9. join()

/**
 * join:把數組轉化為字符串
 * @params
 *   指定的分隔符(字符串格式)
 * @return 
 *   轉化后的字符串(原來的數組不變)
 */

檢測數組中是否包含某一項

10. indexof/lastindexof

/**
 * indexof/lastindexof:檢測當前項在數組中第一次或者最后一次出現的位置的索引值(IE678不兼容)
 * @params
 *   要檢索的這一項的內容
 * @return 
 *   這一項出現的位置索引值()如果數組中沒有這一項 返回的結果是-1
 * 也可以使用es6中的includes方法判斷 返回的是布爾值
 */

數組的排序或者排列

11. reverse()

/**
 * reverse:把數組倒過來排列
 * @params
 *   不需要
 * @return 
 *   排列后的新數組
 *	 原來數組改變
 */

12. sort()

/**
 * sort:實現數組后的排序
 * @params
 *   可有可無,也可以是個函數
 * @return 
 *   排序后的新數組
 *	 原來數組改變
 * sort方法如果不傳遞參數,是無法處理10以上的數字排序的(默認按照每一項的第一個字符來排,不是我們想要的結果)
 * 想要實現多位數正常排序 需要給sort傳遞一個函數,函數中返回a-b實現升序 返回b-a實現降序
 */

13. forEach()

/**
 * forEach:遍歷數組中的每一項內容
 * @params
 *   回調函數
 * @return 
 *   沒有
 *	 原來數組不變
arr.forEach((item,index)>{
	數組中有多少項,函數就會默認執行多少次
	每一次執行函數:item是數組中當前要操作的這一項,index是當前項的索引
}=)
 */

14. includes()

/**
 * includes()方法用來判斷一個數組是否包含一個指定的值,如果是返回 true,否則false。
 * 參數
 * valueToFind:必須。需要查找的元素值。
 * fromIndex:可選。從該索引處開始查找 searchElement。如果為負值,則按升序從 array.length + * * fromIndex 的索引開始搜索。默認為 0。
 * 返回值
 * 布爾值。如果找到指定值返回 true,否則返回 false。
 * 
*/
arr.includes(valueToFind[, fromIndex])

var arr = ['a', 'b', 'c'];
 
arr.includes('c', 0);   //true
arr.includes('c', 3);   //false
arr.includes('c', 100); // false

15. map

/*
map() 方法返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
注意: map() 不會對空數組進行檢測。
注意: map() 不會改變原始數組。
參數:
function(){}:必須,函數,數組中的每個元素都會執行這個函數
currentValue:必須,當前元素的值
index:可選,當前元素的索引
arr:可選,當前元素屬於的數組對象
thisValue:可選。對象作為該執行回調時使用,傳遞給函數,用作 "this" 的值。如果省略了 thisValue,或者傳入 null、undefined,那么回調函數的 this 為全局對象。
返回值:
返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值。
*/
array.map(function(currentValue,index,arr), thisValue)

16. some

/*
some() 方法用於檢測數組中的元素是否滿足指定條件(函數提供)。
some() 方法會依次執行數組的每個元素:
	如果有一個元素滿足條件,則表達式返回true , 剩余的元素不會再執行檢測。
	如果沒有滿足條件的元素,則返回false。
注意: some() 不會對空數組進行檢測。
注意: some() 不會改變原始數組。
參數:
function(){}必須。函數,數組中的每個元素都會執行這個函數
currentValue:必須。當前元素的值
index:可選。當前元素的索引值
arr:可選。當前元素屬於的數組對象
thisValue:可選。對象作為該執行回調時使用,傳遞給函數,用作 "this" 的值。
返回值:布爾值。如果數組中有元素滿足條件返回 true,否則返回 false。
*/
array.some(function(currentValue,index,arr),thisValue)

17. find

/*
find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
參數:
callback
	在數組每一項上執行的函數,接收 3 個參數:
	element
		當前遍歷到的元素。
	index可選
		當前遍歷到的索引。
	array可選
		數組本身。
thisArg可選
	執行回調時用作this 的對象。
返回值:
數組中第一個滿足所提供測試函數的元素的值,否則返回 undefined。
*/
arr.find(callback[, thisArg])

18. flat

/*
flat() 方法會按照一個可指定的深度遞歸遍歷數組,並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。
參數:
depth 可選
	指定要提取嵌套數組的結構深度,默認值為 1。
	Infinity:展開任意深度的嵌套數組
返回值:
	一個包含將數組與子數組中所有元素的新數組。
*/
var newArray = arr.flat([depth])

19. fill

/*
fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。
參數:
	value
		用來填充數組元素的值。
	start 可選
		起始索引,默認值為0。
	end 可選
		終止索引,默認值為 this.length。、
返回值:
	修改后的數組。
*/
arr.fill(value[, 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, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[

20. filter

/*
filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
參數:
	callback
		用來測試數組的每個元素的函數。返回 true 表示該元素通過測試,保留該元素,false 則不保留。它接受以下三個參數:
		element
			數組中當前正在處理的元素。
		index可選
			正在處理的元素在數組中的索引。
		array可選
			調用了 filter 的數組本身。
	thisArg可選
		執行 callback 時,用於 this 的值。
返回值:
	一個新的、由通過測試的元素組成的數組,如果沒有任何數組元素通過測試,則返回空數組。
*/
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
//示例:
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

21. reduce

/*
reduce() 方法對數組中的每個元素執行一個提供的reducer函數(升序執行),將其結果匯總為單個返回值。
參數:
	callback
		執行數組中每個值的函數,包含四個參數:
		accumulator
			累計器累計回調的返回值; 它是上一次調用回調時返回的累積值,或initialValue
		currentValue
			數組中正在處理的元素。
		currentIndex可選
			數組中正在處理的當前元素的索引。 如果提供了initialValue,則起始索引號為0,否則為1。
		array可選
			調用reduce()的數組
initialValue可選
	作為第一次調用 callback函數時的第一個參數的值。如果沒有提供初始值,則將使用數組中的第一個元素。在沒有初始值的空數組上調用 reduce 將報錯。
返回值:
	函數累計處理的結果
*/
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
//示例:
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和為 6

22. from

/*
Array.from() 方法從一個類似數組或可迭代對象中創建一個新的數組實例
參數:
	arrayLike
		想要轉換成數組的偽數組對象或可迭代對象。
	mapFn (可選參數)
		如果指定了該參數,新數組中的每個元素會執行該回調函數。
	thisArg (可選參數)
		可選參數,執行回調函數 mapFn 時 this 對象。
返回值:
	一個新的數組實例
*/
Array.from(arrayLike[, mapFn[, thisArg]])

23. isArray

/*
Array.isArray() 用於確定傳遞的值是否是一個數組
參數:
	obj
		需要檢測的值。
返回值:
	如果對象是 Array,則為true; 否則為false。
*/
Array.isArray(obj)
//示例:
Array.isArray([]);//true
Array.isArray([1]);//true
Array.isArray(new Array());//true

24. every

/*
every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。
注意:若收到一個空數組,此方法在一切情況下都會返回 true。
參數:
	callback
		用來測試每個元素的函數,它可以接收三個參數:
		element
			於測試的當前值。
		index可選
			用於測試的當前值的索引。
		array可選
			調用 every 的當前數組。
	thisArg
		執行 callback 時使用的 this 值。
返回值
	如果回調函數的每一次返回都為 truthy 值,返回 true ,否則返回 false。
*/
arr.every(callback[, thisArg])


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

25. findIndex()

/*
參數:
	callback
		針對數組中的每個元素, 都會執行該回調函數, 執行時會自動傳入下面三個參數:
		element
			當前元素。
		index
			當前元素的索引。
		array
			調用findIndex的數組
返回值:
	  數組中通過提供測試函數的第一個元素的索引。否則,返回-1
*/
arr.findIndex(callback[, thisArg])

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

26. of

//Array.of() 方法創建一個具有可變數量參數的新數組實例,而不考慮參數的數量或類型
/*
參數:
	elementN
		任意個參數,將按順序成為返回數組中的元素
返回值:
	新的數組實例
當調用 new Array( )構造器時,根據傳入參數的類型與數量的不同,實際上會導致一些不同的結果

let arr=new Array(2)//創建長度為2的數組
let arr=new Array(1,2)//創建一個長度為2並且值為1,2的數組

當使用單個數值參數來調用 Array 構造器時,數組的長度屬性會被設置為該參數。 如果使用多個參數(無論是否為數值類型)來調用,這些參數也會成為目標數組的項。數組的這種行為既混亂又有風險,因為有時可能不會留意所傳參數的類型。
*/
//Array.of( )方法總會創建一個包含所有傳入參數的數組,而不管參數的數量與類型:
let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM