JavaScript陣列常用方法集合
1.陣列的定義
陣列(array)是按次序排列的一組值。每個值的位置都有編號(從0開始),整個陣列用方括號表示
var arr = ['a', 'b', 'c'];
2.建立陣列的三種方法
// 常規方式 var arr = new Array(); arr[0] = 'a'; arr[1] = 'b'; arr[2] = 'c'; // 簡潔方式 var arr = new Array('a', 'b', 'c'); // 字面方式 var arr = ['a', 'b', 'c']; var arr = [ {a: 1}, [1, 2, 3], function() {return true;} ];
3.陣列方法和屬性
length 設定或返回陣列元素的個數,length = 0也可以清空陣列。
var arr = ['a', 'b', 'c'];
arr.length // 3
arr.length = 5;
arr.length; // 5
arr[4] // undefined
arr.length = 0;
arr // []
pop() 刪除陣列中的最後一個元素,並返回刪除的元素
var arr = ['a', 'b', 'c']; arr.pop(); // c arr // ['a', 'b']
push() 向陣列的末尾新增一個或多個新元素,並返回新陣列的長度
var arr = ['a', 'b', 'c'];
arr.push('d'); // 4
arr // ['a', 'b', 'c', 'd']
shift() 刪除陣列的第一個元素,並返回刪除的元素
var arr = ['a', 'b', 'c'];
arr.shift(); // a
arr // ['b', 'c']
unshift() 向陣列的開頭新增一個或多個元素,並返回新陣列的長度
var arr = ['a', 'b', 'c']; arr.unshift('A'); // 4 arr // ['A', 'a', 'b', 'c']
toString() 把陣列轉換成字串,並返回結果
var arr = ['a', 'b', 'c'];
arr.toString(); // a, b, c
arr // ['a', 'b', 'c']
valueOf() 返回陣列物件的原始值
var arr = ['a', 'b', 'c'];
arr.valueOf(); // a, b, c
arr // ['a', 'b', 'c']
indexOf() 搜尋陣列中的元素,並返回它所在的位置,如果搜尋的元素沒有出現,則返回-1
var arr = ['a', 'b', 'c'];
arr.indexOf('b'); // 1
arr // ['a', 'b', 'c']
lastIndexOf() 返回指定字串最後出現的位置,在一個字串中指定的位置從後往前搜尋。如果搜尋的元素沒有出現,則返回-1
var arr = ['a', 'b', 'c', 'b'];
arr.lastIndexOf('b'); // 3
arr // ['a', 'b', 'c', 'b']
join() 將陣列中的每個元素轉換成字串,並將這些字串連線起來
var arr = ['a', 'b', 'c'];
arr.join(); // a, b, c
arr.join('-'); // a-b-c
arr.join(' and '); // a and b and c
arr // ['a', 'b', 'c']
concat() 連線兩個或多個數組,並返回合併結果,不會改變現有的陣列
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1.concat(arr2); // ['a', 'b', 'c', 'd', 'e', 'f']
arr1 // ['a', 'b', 'c']
slice() 選取陣列的一部分,並返回一個新陣列,不會改變原陣列
// array.slice(start, end)
// start 可選, 規定從何處開始選取。如果是負數,那麼它規定從陣列尾部開始算起的位置。也就是 說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。
// end 可選, 規定從何處結束選取。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數,那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數,那麼它規定的是從陣列尾部開始算起的元素。
var arr = ['a', 'b', 'c','d', 'e'];
arr.slice(1,3); // ['b', 'c']
arr // ['a', 'b', 'c','d', 'e']
splice() 從陣列中新增、刪除、替換元素,會改變原陣列
// array.splice(index,howmany,item1,.....,itemX)
// index 必需, 規定從何處新增/刪除元素。
// howmany 必需, 規定應該刪除多少元素。必須是數字,但可以是 "0"。
// item1, ..., itemX 可選, 要新增到陣列的新元素
var arr1 = ['a', 'b', 'c','d', 'e'];
arr1.splice(0,1);
arr1 // ["b", "c", "d", "e"]
var arr2 = ['a', 'b', 'c','d', 'e'];
arr2.splice(0, 1, 'A');
arr2 // ["A", "b", "c", "d", "e"]
var arr3 = ['a', 'b', 'c','d', 'e'];
arr3.splice(0, 0, 'A');
arr3 // ["A", "a", "b", "c", "d", "e"]
reverse() 用於顛倒陣列中元素的順序,會改變原陣列
var arr = ['a', 'b', 'c','d', 'e'];
arr.reverse(); // ["e", "d", "c", "b", "a"]
arr // ["e", "d", "c", "b", "a"]
find() 返回符合傳入測試函式條件的陣列元素
// find() 方法返回通過測試(函式內判斷)的陣列的第一個元素的值。
// find() 方法為陣列中的每個元素都呼叫一次函式執行:
// 當陣列中的元素在測試條件時返回 true 時, find() 返回符合條件的元素,之後的值不會再呼叫執行函式。
// 如果沒有符合條件的元素返回 undefined
var ages = ['10', '18', '20','36', '50'];
function checkAdult(age) {
return age >= 20;
}
ages.find(checkAdult) // 20
ages // ['10', '18', '20','36', '50']
filter() 檢測數值元素,並返回符合條件的所有元素的陣列
// filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。
var ages = ['10', '18', '20','36', '50'];
function checkAdult(age) {
return age >= 20;
}
ages.filter(checkAdult) // ["20", "36", "50"]
ages // ['10', '18', '20','36', '50']
includes() 判斷一個數組是否包含一個指定的值
var ages = ['10', '18', '20','36', '50'];
ages.includes('10'); // true
ages.includes('75'); // false
ages // ['10', '18', '20','36', '50']
map() 通過指定函式處理陣列中的每個元素,並返回處理後的
// map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。
// map() 方法按照原始陣列元素順序依次處理元素。
//array.map(function(currentValue,index,arr), thisValue)
//currentValue 必須,當前元素的值
//index 可選, 當期元素的索引值
//arr 可選, 當期元素屬於的陣列物件
//this.value 可選, 物件作為該執行回撥時使用,傳遞給函式,用作 "this" 的值。
var ages = [10, 18, 20, 36, 50];
var res = ages.map(function(item, index, input) {
return item * 10
})
res // [100, 180, 200, 360, 500]
ages // [10, 18, 20, 36, 50]
forEach() 遍歷陣列,陣列每個元素都執行一次回撥函式,會改變原陣列
// forEach() 方法用於呼叫陣列的每個元素,並將元素傳遞給回撥函式。
// array.forEach(function(currentValue, index, arr), thisValue)
// currentValue 必需, 當前元素
// index 可選, 當前元素的索引值。
// arr 可選, 當前元素所屬的陣列物件。
var ages = [10, 18, 20, 36, 50];
var res = ages.forEach(function(item, index, input) {
input[index] = item *10;
})
res // undefined
ages // [100, 180, 200, 360, 500]
sort() 對陣列的元素進行排序,預設按升序排序,會改變原陣列
var ages = [36, 50, 10, 20, 18];
ages.sort(); // [10, 18, 20, 36, 50]
ages // [10, 18, 20, 36, 50]
some() 檢測陣列元素中是否有元素符合指定條件
// some() 方法用於檢測陣列中的元素是否滿足指定條件(函式提供)。
// some() 方法會依次執行陣列的每個元素:
// 如果有一個元素滿足條件,則表示式返回true , 剩餘的元素不會再執行檢測。
// 如果沒有滿足條件的元素,則返回false。
var ages = ['10', '18', '20','36', '50'];
function checkAdult(age) {
return age >= 20;
}
ages.some(checkAdult) // true
ages // ['10', '18', '20','36', '50']
every() 檢測陣列中是否每個元素都符合指定條件
// every() 方法用於檢測陣列所有元素是否都符合指定條件(通過函式提供)。
// every() 方法使用指定函式檢測陣列中的所有元素:
// 如果陣列中檢測到有一個元素不滿足,則整個表示式返回 false ,且剩餘的元素不會再進行檢測。
// 如果所有元素都滿足條件,則返回 true。
var ages = ['10', '18', '20','36', '50'];
function checkAdult(age) {
return age >= 20;
}
ages.every(checkAdult) // false
ages // ['10', '18', '20','36', '50']
isArray() 判斷物件是否為陣列
// isArray() 方法用於判斷一個物件是否為陣列。
// 如果物件是陣列返回 true,否則返回 false。
var ages = ['10', '18', '20','36', '50'];
Array.isArray(ages); // true
ages // ['10', '18', '20','36', '50']
reduce() 將陣列元素迭代計算為一個值(從左到右)
// reduce() 方法接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值。
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// total 必需,初始值, 或者計算結束後的返回值。
// currentValue 必需,當前元素
// currentIndex 可選,當前元素的索引
// arr 可選,當前元素所屬的陣列物件。
var ages = [10, 18, 20, 36, 50];
function getSun(total, num) {
return total + num;
}
ages.reduce(getSun) // 134
ages // ['10', '18', '20','36', '50']