javascript 陣列(array) 常用的方法集錦(上)

幸福拾荒者發表於2019-03-01

由於三大框架的出現,對 DOM 的操作轉成對資料的操作,對資料的操作主要體現在陣列和物件上,今天就以陣列為例,對陣列的各種操作進行總結

concat()

用於連線兩個或多個陣列，該方法不會改變現有的陣列，而僅僅會返回被連線的新陣列

語法：Arr.concat(arr1,arr2,……,arrn)
引數： arr1 該引數可以是具體的值，也可以是陣列,物件,字串,bool 值等。可以是任意多個
返回值：返回一個新的陣列。該陣列是通過把所有 arr1 引數新增到 arrayObject 中生成的。如果要進行 concat() 操作的引數是陣列，那麼新增的是陣列中的每一個元素，而不是陣列

let arr = [1, 2];
let arr2 = [123, 456, 678];
let obj = { name: `王二`, age: 123 };
let initbool = false;
let newarr = arr.concat([3, 4, 5], 7, 8, [9, 10]);
let newarr2 = arr.concat(3, 4, 5, arr2, obj, initbool);
console.log(arr); //[1, 2]
console.log(newarr); //[1, 2, 3, 4, 5, 7, 8, 9, 10]
console.log(newarr2); //[1, 2, 3, 4, 5, 123, 456, 678, {name: "王二", age: 123}, false]
複製程式碼

copyWithin()

(ES6 新增) 將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前陣列。也就是說，使用這個方法，會修改當前陣列。

語法： Arr.copyWithin(target, start = 0, end = this.length)
引數：傳入的值預設為 number,傳入其他型別值 (bool,string,array,object,undefined)會進行型別轉化成 number 型別(引數為 NaN 的話為預設值)
- target ：必需從該位置開始替換資料。
- start ：可選從該位置開始讀取資料，預設為 0 。如果為負值，表示倒數。
- end ：可選到該位置前停止讀取資料，預設等於陣列長度。如果為負值，表示倒數。
返回值：返回當前陣列。也就是說，使用這個方法，會修改當前陣列

let arr = [1, 2, 3, 4, 5];
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [1, 2, 3, 4, 5];
let arr3 = [1, 2, 3, 4, 5];
let arr4 = [1, 2, 3, 4, 5];
let arr5 = [1, 2, 3, 4, 5];
let arr6 = [1, 2, 3, 4, 5];
let arr7 = [1, 2, 3, 4, 5];
let arr8 = [1, 2, 3, 4, 5];
let arr9 = [1, 2, 3, 4, 5];
let arr10 = [1, 2, 3, 4, 5];
let newarr = arr.copyWithin(0, 3, 4);
arr1.copyWithin(0, 3);
arr2.copyWithin(2);
arr3.copyWithin(1, 2, 4);
arr4.copyWithin(false, 3);
arr5.copyWithin(true, 3);
arr6.copyWithin(2, NaN);
arr7.copyWithin(2);
arr8.copyWithin(2, -1);
arr9.copyWithin(2, -2);
arr10.copyWithin(2, -2, -1);
console.log(arr); //[4, 2, 3, 4, 5]
console.log(newarr); //[4, 2, 3, 4, 5]
console.log(arr1); //[4, 5, 3, 4, 5]
console.log(arr2); //[1, 2, 1, 2, 3]
console.log(arr3); //[1, 3, 4, 4, 5]
console.log(arr4); //[4, 5, 3, 4, 5]
console.log(arr5); //[1, 4, 5, 4, 5]
console.log(arr6); //[1, 2, 1, 2, 3]
console.log(arr7); //[1, 2, 1, 2, 3]
console.log(arr8); //[1, 2, 5, 4, 5]
console.log(arr9); //[1, 2, 4, 5, 5]
console.log(arr10); //[1, 2, 4, 4, 5]
複製程式碼

entries()

(ES6 新增) 是對鍵值對的遍歷方法返回一個新的 Array Iterator 物件，該物件包含陣列中每個索引的鍵/值對,不會改變原陣列

語法：Array.entries()
引數：
返回值：返回一個新的 Array Iterator 物件,該物件包含陣列中每個索引的鍵/值對

let arr = [`a`, `b`, `c`];
let iterator1 = arr.entries();
console.log(iterator1); //Iterator
console.log(iterator1.next()); //{value: Array(2), done: false}
console.log(iterator1.next().value); //[1, "b"]
console.log(iterator1.next().value); //[2, "c"]
console.log(iterator1.next().value); // undefined
console.log(arr); // ["a", "b", "c"]
複製程式碼

every()

用於檢測陣列所有元素是否都符合指定條件（通過函式提供）

語法：Arr.every(function(currentValue,index,arr), thisValue)
引數：
function(currentValue, index,arr) 必須。函式，陣列中的每個元素都會執行這個函式
- currentValue:必須。當前元素的值
- index:可選。當前元素的索引值
- arr:可選。當前元素屬於的陣列物件
thisValue:可選。物件作為該執行回撥時使用，傳遞給函式，用作 “this” 的值。如果省略了 thisValue ，”this” 的值為 “undefined”
返回值：布林值。如果所有元素都通過檢測返回 true，否則返回 false

const isBigEnough = (element, index, array) => {
	return element >= 10;
};
let passed1 = [12, 5, 8, 130, 44].every(isBigEnough);
let passed2 = [12, 54, 18, 130, 44].every(isBigEnough);
console.log(passed1); // false
console.log(passed2); // true
複製程式碼

fill()

(ES6 新增)用一個固定值填充一個陣列中從起始索引到終止索引內的全部元素

語法：Arr.fill(value, start, end)
引數：
value:用來填充陣列元素的值
start:可選起始索引，預設值為 0
end:可選終止索引，預設值為 this.length。
返回值：修改後的原陣列。

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
let arr3 = [1, 2, 3];
let arr4 = [1, 2, 3];
let arr5 = [1, 2, 3];
let arr6 = [1, 2, 3];
let arr7 = [1, 2, 3];
let arr8 = [1, 2, 3];
let arr9 = [1, 2, 3];
let newarr = arr1.fill(7);
arr2.fill(4);
arr3.fill(4, 1);
arr4.fill(4, 1, 2);
arr5.fill(4, 1, 1);
arr6.fill(4, 3, 3);
arr7.fill(4, -3, -2);
arr8.fill(4, NaN, NaN);
arr9.fill(4, 3, 5); // [1, 2, 3]
console.log(arr1); //[7, 7, 7]
console.log(newarr); //[7, 7, 7]
console.log(arr2); // [4, 4, 4]
console.log(arr3); // [1, 4, 4]
console.log(arr4); // [1, 4, 3]
console.log(arr5); // [1, 4, 3]
console.log(arr6); // [1, 2, 3]
console.log(arr7); // [1, 2, 3]
console.log(arr8); // [4, 2, 3]
console.log(arr9); // [1, 2, 3]
複製程式碼

filter()

建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素

語法：arr.filter(callback(element index array),thisArg])
引數：
callback 用來測試陣列的每個元素的函式。呼叫時使用引數 (element, index, array)。返回 true 表示保留該元素（通過測試），false 則不保留。它接受三個引數
- element:當前在陣列中處理的元素
- index:可選正在處理元素在陣列中的索引
- array:可選呼叫了 filter 篩選器的陣列
thisArg 可選。執行 callback 時的用於 this 的值。
返回值：一個新的通過測試的元素的集合的陣列，如果沒有通過測試則返回空陣列

let arr = [1, 2, 4, 5, 6, 9, 10, 15];
let newarr = arr.filter(function(x) {
	return x % 2 !== 0;
});
console.log(arr); // [1, 2, 4, 5, 6, 9, 10, 15]
console.log(newarr); //[1, 5, 9, 15]
//去重
let arr2 = [`apple`, `strawberry`, `banana`, `pear`, `apple`, `orange`, `orange`, `strawberry`];
let arr3 = arr2.filter(function(element, index, self) {
	return self.indexOf(element) === index;
});
console.log(arr3); // ["apple", "strawberry", "banana", "pear", "orange"]
複製程式碼

find()

(ES6 新增) 用來查詢目標元素，找到就返回該元素，找不到返回 undefined

語法：arr.find(callback(element index array),thisArg])
引數：
callback 在陣列每一項上執行的函式，接收 3 個引數
- element:當前遍歷到的元素
- index:可選當前遍歷到的索引
- array:可選陣列本身
thisArg 可選。指定 callback 的 this 引數。
返回值：當某個元素通過 callback 的測試時，返回陣列中的一個值，否則返回 undefined。

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let arr2 = arr1.find((value, index, arr) => {
	return value > 4;
});
let arr3 = arr1.find((value, index, arr) => {
	return value > 14;
});
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2); //5
console.log(arr3); //undefined
複製程式碼

findIndex()

(ES6 新增) 方法返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1

語法：arr.findIndex(callback(element index array),thisArg])
引數：
callback 在陣列每一項上執行的函式，接收 3 個引數
- element:當前遍歷到的元素
- index:可選當前遍歷到的索引
- array:可選陣列本身
thisArg 可選。指定 callback 的 this 引數。
返回值：返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1。

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let arr2 = arr1.findIndex((value, index, arr) => {
	return value > 4;
});
let arr3 = arr1.findIndex((value, index, arr) => {
	return value > 14;
});
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2); //4
console.log(arr3); //-1
複製程式碼

forEach()

對陣列的每個元素執行一次提供的函式

語法：arr.forEach(callback(currentValue index array),thisArg])
引數：
callback 在陣列每一項上執行的函式，接收 3 個引數
- currentValue:陣列中正在處理的當前元素
- index:可選陣列中正在處理的當前元素的索引。
- array:可選 forEach()方法正在操作的陣列。
thisArg 可選。指定 callback 的 this 引數。
返回值：undefined, 對原陣列的操作有影響

let arr = [{ a: 1 }, {}];
arr.forEach(function(item, idx) {
	item.b = idx;
});
console.log(arr); // [{a: 1, b: 0}, {b: 1}]
複製程式碼

from()

(ES6 新增) from() 方法用於通過擁有 length 屬性的物件或可迭代的物件來返回一個陣列。如果物件是陣列返回 true，否則返回 false。

語法：Array.from(object, mapFunction, thisValue)
引數：
object:必需，要轉換為陣列的物件。
mapFunction:可選，陣列中每個元素要呼叫的函式。
thisValue:可選，對映函式(mapFunction)中的 this 物件。
返回值：物件是陣列返回 true，否則返回 false

let setObj = new Set([`a`, `b`, `c`]);
let arr = Array.from(setObj);
console.log(arr); //["a", "b", "c"]
console.log(Array.from([1, 2, 3], x => x + x)); //[2, 4, 6]
複製程式碼

includes()

(ES6 新增)方法用來判斷一個陣列是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回 false。

語法：arr.includes(searchElement, fromIndex)
引數：
searchElement :需要查詢的元素值
fromIndex 從該索引處開始查詢 searchElement。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜尋。預設為 0。
返回值：如果包含則返回 true，否則返回 false; (includes 方法使用全等（===）來判斷一個元素是否符合您的搜尋)

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
let e1 = { name: `zs`, age: `12` };
let e2 = { name: `ls`, age: `13` };
let arr1 = [e1, e2];
let arr4 = arr1.includes(e1);
console.log(arr4); //true
複製程式碼

indexOf()

方法返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

語法：arr.indexOf(searchElement[, fromIndex = 0])
引數：
searchElement: 要查詢的元素
fromIndex: 開始查詢的位置。如果該索引值大於或等於陣列長度，意味著不會在陣列裡查詢，返回-1。如果引數中提供的索引值是一個負值，則將其作為陣列末尾的一個抵消，即-1 表示從最後一個元素開始查詢，-2 表示從倒數第二個元素開始查詢，以此類推。注意：如果引數中提供的索引值是一個負值，並不改變其查詢順序，查詢順序仍然是從前向後查詢陣列。如果抵消後的索引值仍小於 0，則整個陣列都將會被查詢。其預設值為 0,indexOf 方法使用全等（===）來判斷一個元素是否符合您的搜尋
返回值：首個被找到的元素在陣列中的索引位置; 若沒有找到則返回 -1

let arr = [{ name: `zs`, age: `12` }, { name: `ls`, age: `13` }];
let index = arr.indexOf({ name: `zs`, age: `12` });
console.log(index); //-1
let e1 = { name: `zs`, age: `12` };
let e2 = { name: `ls`, age: `13` };
let arr1 = [e1, e2];
let index1 = arr1.indexOf(e2);
console.log(index1); //1
複製程式碼

isArray()

isArray() 方法用於判斷一個物件是否為陣列。如果物件是陣列返回 true，否則返回 false。

語法：Array.isArray(obj)
引數：
obj:必需，要判斷的物件。
返回值：布林值，如果物件是陣列返回 true，否則返回 false。

console.log(Array.isArray([])); //true
console.log(Array.isArray([1])); //true
console.log(Array.isArray(new Array())); //true
console.log(Array.isArray()); //false
console.log(Array.isArray({})); //false
console.log(Array.isArray(null)); //false
console.log(Array.isArray(undefined)); //false
console.log(Array.isArray(17)); //false
console.log(Array.isArray(`Array`)); //false
console.log(Array.isArray(true)); //false
console.log(Array.isArray(false)); //false
複製程式碼

join()

方法將一個陣列（或一個類陣列物件）的所有元素連線成一個字串並返回這個字串。

語法：Arr.join(separator)
引數：
separator: 可選。指定要使用的分隔符。如果省略該引數，則使用逗號作為分隔符。
返回值：返回一個字串。該字串是通過把 Arr 的每個元素轉換為字串，然後把這些字串連線起來，在兩個元素之間插入 separator 字串而生成的。

let elements = [`1`, `2`, `3`];
console.log(elements.join());
console.log(elements.join(`+`));
console.log(elements.join(`-`));
複製程式碼

keys()

(ES6 新增) keys() 方法用於從陣列建立一個包含陣列鍵的可迭代物件。如果物件是陣列返回 true，否則返回 false。

語法：arr.keys()
引數：
返回值：一個陣列可迭代物件

let arr = [`a`, `b`, `c`];
let 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。

語法：array.lastIndexOf(item,start)
引數：
item: 必需。規定需檢索的字串值
start: 可選的整數引數。規定在字串中開始檢索的位置。它的合法取值是 0 到 stringObject.length -1。如省略該引數，則將從字串的最後一個字元處開始檢索。
返回值：如果在 stringObject 中的 fromindex 位置之前存在 searchvalue，則返回的是出現的最後一個 searchvalue 的位置。

let arr = [`ab`, `cd`, `ef`, `ab`, `cd`];
console.log(arr.lastIndexOf(`cd`)); //4
console.log(arr.lastIndexOf(`cd`, 2)); //1
console.log(arr.lastIndexOf(`ab`, -3)); //0
複製程式碼

對陣列的總結下篇javascript 陣列(array) 常用的方法集錦(下)

Python 列表 list 陣列 array 常用操作集錦
2021-09-09
Python陣列
javascript陣列常用方法
2018-05-22
JavaScript陣列
JavaScript Array 陣列
2018-07-25
JavaScript陣列
JavaScript 陣列常用方法(二)
2021-10-20
JavaScript陣列
JavaScript Array常用方法
2018-04-08
JavaScript
JavaScript陣列幾個常用方法
2021-10-13
JavaScript陣列
JavaScript中陣列Array.sort()排序方法詳解
2018-05-26
JavaScript陣列排序
JavaScript刪除array陣列元素
2018-07-09
JavaScript陣列
Javascript - 陣列和陣列的方法
2019-02-17
JavaScript陣列
陣列的常用方法
2019-03-25
陣列
陣列常用的方法
2019-04-11
陣列
JavaScript裡的陣列Array使用方法總結，超全的o
2020-04-04
JavaScript陣列
JavaScript陣列常用操作
2018-06-02
JavaScript陣列
JavaScript 中的陣列分組：array.groupBy()
2022-01-21
JavaScript陣列
javascript中常用的陣列操作方法,以及是否會改變原始陣列
2018-05-23
JavaScript陣列
陣列常用方法
2019-07-17
陣列
常用陣列方法
2019-04-07
陣列
JS陣列Array的全部方法彙總
2018-10-25
JS陣列
JavaScript陣列方法
2018-03-16
JavaScript陣列
Array陣列
2021-10-22
陣列
模擬 javaScript Array 原型上的方法
2019-04-13
JavaScript原型
JavaScript陣列常用方法解析和深層次js陣列扁平化
2022-05-18
JavaScript陣列JS
js常用陣列方法
2018-11-26
JS陣列
常用陣列方法梳理
2019-02-28
陣列
陣列常用物件方法
2019-02-07
陣列物件
JavaScript陣列方法大全
2021-09-09
JavaScript陣列
JavaScript陣列小方法
2019-02-27
JavaScript陣列
JavaScript陣列方法（splice）
2018-07-07
JavaScript陣列
JavaScript常用陣列操作方法，包含ES6方法
2018-09-24
JavaScript陣列
js--陣列的 Array.of() 和 Array.from() 方法的使用總結
2021-11-10
JS陣列
陣列常用方法補充
2019-01-04
陣列
陣列中常用的方法總結
2020-09-23
陣列
JavaScript陣列去重方法
2022-05-09
JavaScript陣列
javascript陣列方法總結
2018-08-22
JavaScript陣列
JavaScript 的新陣列分組方法
2024-11-30
JavaScript陣列
js陣列常用方法總結
2020-12-28
JS陣列
字串和陣列常用方法整理
2019-01-04
字串陣列
陣列常用方法的簡單封裝
2020-12-21
陣列封裝

javascript 陣列(array) 常用的方法集錦(上)

concat()

copyWithin()

entries()

every()

fill()

filter()

find()

findIndex()

forEach()

from()

includes()

indexOf()

isArray()

join()

keys()

lastIndexOf()

相關文章