js數組API--溫故知新
一 、concat
concat() 方法用於連接兩個或多個數組。
該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。
arrayObject.concat(arrayX,arrayX,......,arrayX)
返回值
返回一個新的數組。該數組是通過把所有 arrayX 參數添加到 arrayObject 中生成的。如果要進行 concat() 操作的參數是數組,那麼添加的是數組中的元素,而不是數組。
// create two arrays
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
/* call concat() on the first array passing
the second as an argument */
var arr3 = arr1.concat(arr2);
// log the result
console.log(arr3);
// expected output: a,b,c,d,e,f
二、copyWithin
數組實例的copyWithin方法,在當前數組內部,將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前數組。也就是說,使用這個方法,會修改當前數組
Array.prototype.copyWithin(target, start = 0, end = this.length)
target (必需):從該位置開始替換數據。
start (可選):從該位置開始讀取數據,默認爲 0 。如果爲負值,表示倒數。
end (可選):到該位置前停止讀取數據,默認等於數組長度。如果爲負值,表示倒數。
返回值
修改後的數組
[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]
三、entries
entries()方法返回一個新的數組迭代器對象,該對象包含數組中每個索引的鍵/值對。
返回值
一個新的數組迭代器對象。
var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']
var a = ['a', 'b', 'c'];
var iterator = a.entries();
for (let e of iterator) {
console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
四、from
from()方法返回一個新的數組迭代器對象,該對象包含數組中每個索引的鍵/值對。
Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike(必需):一個類似數組的或可迭代的對象,可以轉換爲數組。
mapFn (可選):映射函數來調用數組的每個元素。
thisArg (可選):在執行mapFn時使用的值。
返回值
一個新的數組實例。
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
Array.from('foo');
// ["f", "o", "o"]
var s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// arguments 參數專數組
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]
五、every
entries()方法返回一個回調函數的條件bool值。
arr.every(callback[, thisArg])
callback(必需):回調函數。
thisArg (可選):當前值。
返回值
返回 回調函數每個數組元素的bool值
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
六、fill
fill()方法將數組的所有元素從起始索引填充到結束索引。
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)
value:一個類似數組的或可迭代的對象,可以轉換爲數組。
start :開始位置 默認爲0
end :結束位置 默認爲當前length
返回值
修改後的數組。
[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}
七、filter
filter()方法創建一個新的數組,其中包含符合回調條件的所有元素。
var newArray = arr.filter(callback[, thisArg])
callback:回調函數。
thisArg:當前元素
返回值
一個帶有符合條件的元素的新數組。
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
var longWords = words.filter(function(word){
return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]
ES6
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
var longWords = words.filter(word => word.length > 6);
// Filtered array longWords is ["exuberant", "destruction", "present"]
八、find
find()方法返回滿足回調條件的數組中第一個元素的值。否則將返回未定義。
arr.find(callback[, thisArg])
callback:回調函數。
thisArg:當前元素
返回值
如果元素符合條件 返回數組中的值;否則,未定義。
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130
九、findIndex
findIndex()方法返回滿足回調條件的數組中第一個元素的索引。否則將返回-1。
arr.findIndex(callback[, thisArg])
callback:回調函數。
thisArg:當前元素
返回值
如果元素符合條件 返回數組中的值的索引;否則,-1。
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough);
// index of 4th element in the Array is returned,
// so this will result in '3'
十、forEach
findIndex()方法返回滿足回調條件的數組中第一個元素的索引。否則將返回1。
arr.forEach(function callback(currentValue, index, array) {
//your iterator
}[, thisArg]);
callback:回調函數。
currentValue:在數組中處理當前元素
index:在數組中處理當前元素的索引。
array:當前數組
var a = ['a', 'b', 'c'];
a.forEach(function(element) {
console.log(element);
});
// a
// b
// c
十一、includes
includes()方法確定一個數組是否包含某個元素,返回true或false。
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
serachElement:查詢元素。
fromIndex:開始查詢元素位置
返回值
boolean
var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false
[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
indexOf()返回一個給定元素可以在數組中找到的第一個索引,如果不是,則返回- 1。
arr.indexOf(searchElement[, fromIndex])
serachElement:查詢元素。
fromIndex:開始查詢元素位置
返回值
返回一個給定元素可以在數組中找到的第一個索引,如果不是,則返回- 1。
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
if (a.indexOf(7) === -1) {
// element doesn't exist in array
}
十三、join
join()將數組中的所有元素(或類似數組的對象)連接到一個字符串中。
arr.join()
arr.join(separator)
separator:分隔符
var a = ['Wind', 'Rain', 'Fire'];
a.join(); // 'Wind,Rain,Fire'
a.join('-'); // 'Wind-Rain-Fire'
十四、keys
keys()方法返回一個新的數組迭代器對象,該對象包含數組中每個索引的鍵。
arr.keys()
var arr = ['a', 'b', 'c'];
var iterator = arr.keys();
console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
十五、lastIndexOf
lastIndexOf()方法返回在數組中可以找到給定元素的最後一個索引,如果不存在,則返回- 1。該數組向後搜索,從fromIndex開始。
arr.lastIndexOf(searchElement)
arr.lastIndexOf(searchElement, fromIndex)
serachElement:查詢元素。
fromIndex:開始查詢元素位置
返回值
數組中元素的一個索引;如果沒有找到 -1。
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3
十六、map
map()方法創建一個新的數組,該數組的結果是調用調用數組中的每個元素的函數。
var new_array = arr.map(function callback(currentValue, index, array) {
// Return element for new_array
}[, thisArg])
callback:回調函數。
currentValue:在數組中處理當前元素
index:在數組中處理當前元素的索引。
array:當前數組
返回值
每個元素的改變後的組成的新數組
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]
十七、reduce
reduce()方法對累加器和數組中的每個元素(從左到右)使用一個函數,以將其還原爲一個值。
arr.reduce(callback[, initialValue])
callback:回調函數。
initiaValue:當前元素
返回值
數組的累加
// create an array
var numbers = [0, 1, 2, 3];
/* call reduce() on the array, passing a callback
that adds all the values together */
var result = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
// log the result
console.log(result);
// expected output: 6
十八、some
some()方法檢測數組中至少一個元素是否通過所提供回調函數的條件。
arr.some(callback[, thisArg])
callback:回調函數。
thisArg:當前元素
返回值
boolane
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
十九、splice
splice()方法通過刪除現有元素和/或添加新元素來更改數組的內容。
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)
start:開始位置。
deleteCount:如果deleteCount爲0,則沒有刪除元素。在這種情況下,您應該指定至少一個新元素。
item1, item2:添加到數組中的元素,從開始索引開始。如果沒有指定任何元素,splice()將只刪除數組中的元素。
返回值
包含已刪除元素的數組。如果只刪除了一個元素,則返回一個元素數組。如果沒有刪除元素,則返回空數組。
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // insert 'drum' at 2-index position
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1); // remove 1 item at 2-index position (that is, "drum")
// myFish is ["angel", "clown", "mandarin", "sturgeon"]
十九、splice
splice()方法通過刪除現有元素和/或添加新元素來更改數組的內容。
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)
start:開始位置。
deleteCount:如果deleteCount爲0,則沒有刪除元素。在這種情況下,您應該指定至少一個新元素。
item1, item2:添加到數組中的元素,從開始索引開始。如果沒有指定任何元素,splice()將只刪除數組中的元素。
返回值
包含已刪除元素的數組。如果只刪除了一個元素,則返回一個元素數組。如果沒有刪除元素,則返回空數組。
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // insert 'drum' at 2-index position
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1); // remove 1 item at 2-index position (that is, "drum")
// myFish is ["angel", "clown", "mandarin", "sturgeon"]
二十、of
Array.of()方法創建一個新的數組實例,該數組實例的參數數目不定,不管參數的類型或類型。
Array.of(element0[, element1[, ...[, elementN]]])
elementN:創建數組的元素
返回值
返回新函數實例
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
// 實現原理(兼容)
if (!Array.of) {
Array.of = function() {
return Array.prototype.slice.call(arguments);
};
}