js陣列API--溫故知新

彈指壹揮間發表於2017-09-26

一、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);
  };
}
複製程式碼

github地址：github.com/github1586

溫故知新——Spring AOP
2020-08-27
Spring
溫故知新——Spring AOP（二）
2020-08-28
Spring
溫故知新之從原始碼探析jsp執行原理
2017-11-27
原始碼JS
溫故知新 - 靶機練習-Toppo
2023-01-03
溫故知新-多執行緒-深入剖析AQS
2020-06-07
執行緒AQS
溫故知新----再談建構函式 (轉)
2007-12-10
函式
【溫故知新】程式設計原則和方法論
2020-06-16
程式設計
.net 溫故知新【15】：Asp.Net Core WebAPI 配置
2023-12-08
ASP.NETWebAPI
靶機練習 - 溫故知新 - Toppo(sudo 提權)
2023-01-12
.net 溫故知新【14】：Asp.Net Core WebAPI 快取
2023-11-24
ASP.NETWebAPI快取
.net 溫故知新：【5】非同步程式設計 async await
2021-08-26
非同步程式設計AI
.net 溫故知新【16】：Asp.Net Core WebAPI 篩選器
2023-12-18
ASP.NETWebAPI
重新溫習陣列(轉)
2007-08-15
陣列
js二維陣列新認識
2018-04-12
JS陣列
溫故知新-分散式鎖的實現原理和存在的問題
2020-07-11
分散式
.net 溫故知新【13】：Asp.Net Core WebAPI 使用依賴注入DI
2023-11-09
ASP.NETWebAPI依賴注入
Android 開發高手課溫故知新篇
2019-05-13
Android
JS 兩組陣列取不同值組成新陣列的方法
2020-11-11
JS陣列
.net 溫故知新：【10】.NET ORM框架EFCore使用入門之CodeFirs、DBFirst
2022-12-01
ORM框架
【webabcd】溫故知新ASP.NET 2.0(C#)(1) - MasterPage(母版頁)
2008-06-03
WebASP.NETC#AST
【重溫基礎】10.陣列
2018-12-24
陣列
溫故知新----執行緒之Runnable與Callable介面的本質區別
2023-03-27
執行緒
JS陣列
2020-09-23
JS陣列
JS陣列去重 – JSON陣列去重
2019-09-05
陣列JSON
PHP陣列轉換為js陣列
2019-02-16
PHP陣列JS
js 陣列方法
2019-01-23
JS陣列
Json 陣列
2018-08-05
JSON陣列
js偽陣列
2020-12-28
JS陣列
溫故知新-輸入網址-顯示網頁-到底到底到底到底-發生了什麼？
2021-09-14
網頁
JS使用迴圈按指定倍數分割陣列組成新的陣列的方法
2017-10-12
JS陣列
js 一維陣列轉二維陣列
2018-12-04
JS陣列
js 二維陣列轉一維陣列
2018-12-05
JS陣列
Js陣列方法解析
2019-03-05
JS陣列
js常用陣列方法
2018-11-26
JS陣列
JS陣列基本方法
2018-11-21
JS陣列
JS常用陣列操作
2018-10-29
JS陣列
JS 陣列筆記
2018-07-25
JS陣列筆記
js陣列方法集合
2020-12-03
JS陣列

js陣列API--溫故知新

一 、concat

返回值

二、copyWithin

返回值

三、entries

返回值

四、from

返回值

五、every

返回值

六、fill

返回值

七、filter

返回值

八、find

返回值

九、findIndex

返回值

十、forEach

十一、includes

返回值

十二、indexOf

返回值

十三、join

十四、keys

十五、lastIndexOf

返回值

十六、map

返回值

十七、reduce

返回值

十八、some

返回值

十九、splice

返回值

十九、splice

返回值

二十、of

返回值

相關文章

一、concat