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);
  };
}

js數組API--溫故知新

js數組API--溫故知新

一 、concat

返回值

二、copyWithin

返回值

三、entries

返回值

四、from

返回值

五、every

返回值

六、fill

返回值

七、filter

返回值

八、find

返回值

九、findIndex

返回值

十、forEach

十一、includes

返回值

十二、indexOf

返回值

十三、join

十四、keys

十五、lastIndexOf

返回值

十六、map

返回值

十七、reduce

返回值

十八、some

返回值

十九、splice

返回值

十九、splice

返回值

二十、of

返回值

一、concat