javascript 數組(array) 經常使用的方法集錦(上)

時間  2019-12-05
標籤 javascript 數組 array 經常 使用 方法 集錦 欄目 JavaScript 简体版
原文   原文鏈接

因爲三大框架的出現,對 DOM 的操做轉成對數據的操做,對數據的操做主要體如今數組和對象上,今天就以數組爲例,對數組的各類操做進行總結javascript

concat()

用於鏈接兩個或多個數組，該方法不會改變現有的數組，而僅僅會返回被鏈接的新數組java

  • 語法：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)app

  • 參數：傳入的值 默認爲 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 對象，該對象包含數組中每一個索引的鍵/值對,不會改變原數組post

  • 語法：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 新增)用一個固定值填充一個數組中從起始索引到終止索引內的所有元素ui

  • 語法：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()

建立一個新數組, 其包含經過所提供函數實現的測試的全部元素this

  • 語法：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) 經常使用的方法集錦(下)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程