所有陣列的方法（api）總結

陳林007發表於2019-04-19
陣列API

目錄所有陣列的方法（api）

ES3 的陣列方法

join();
  • 目的：將陣列轉換為字串
  • 是否改變原陣列：不改變原陣列，返回一個新的字串
let arr = ["a","b","c","d","e"];
let arr1 = arr.join();
console.log(arr1); // a,b,c,d,e
console.log(arr); // ["a", "b", "c", "d", "e"] 不改變原來的陣列
let arr2 = arr.join("-");
console.log(arr2); // a-b-c-d-e
複製程式碼
reverse();
  • 目的 將陣列中的元素顛倒順序
  • 是否改變原陣列：改變原來的陣列
let arr = ["a","b","c","d","e"];
let arr1 = arr.reverse();
console.log(arr1); // ["e", "d", "c", "b", "a"]
console.log(arr); // ["e", "d", "c", "b", "a"] 改變原來的陣列
//怎麼顛倒字串呢?
//先把字串轉換陣列再用陣列的reverse轉換
let str = "abcde";
let str1 = str.split("").reverse().join("");
console.log(str1); // edcba
複製程式碼
sort();
  • 目的： 將陣列中的元素按照一定規則排序(必須是數字)
  • 是否改變原陣列：改變原來的陣列
let arr = [5,4,6,1,8,2,9];
let arr1 = arr.sort();
console.log(arr1); // [1, 2, 4, 5, 6, 8, 9]
console.log(arr); // [1, 2, 4, 5, 6, 8, 9] 改變原來的陣列
複製程式碼
concat();
  • 目的 用於連線兩個或多個陣列
  • 是否改變原陣列：不改變原來的陣列，返回一個新的陣列
let arr1 = [5,4,6,1,8,2,9];
let arr2 = ["a","b","c","d"];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [5, 4, 6, 1, 8, 2, 9, "a", "b", "c", "d"]
複製程式碼
slice(start，end);
  • 目的： 已有的陣列中返回選定的元素
  • 是否改變原陣列：不改變原來的陣列，返回一個新的陣列
let arr = ["a","b","c","d"];
let arr1 = arr.slice(0,1); 
let arr2 = arr.slice(1)
console.log(arr1); // ["a"]
console.log(arr2); // ["b", "c", "d"]
複製程式碼
splice();
  • 目的 向/從陣列中新增/刪除專案，然後返回被刪除的專案
  • 是否改變原陣列：改變原來的陣列
let list = [1,2,3,];
// 刪除
// list.splice(0,3);  // 刪除  -> 從下標為0開始,項數為1
// console.log(list); // [2,3]
// list.splice(0,2);  // 刪除  -> 從下標為0開始,項數為2
// console.log(list); // []

//替換
// list.splice(0,1,4); // 替換 -> 從下標為0開始,項數為1的陣列元素替換成4
// console.log(list);  // [4,2,3]
// list.splice(0,2,4); // 替換 -> 從下標為0開始,項數為2的陣列元素替換成4(即4,2整體替換成4)
// console.log(list);  // [4,3]

//新增
list.splice(1,0,5); // 表示在下標為1處新增一項5
console.log(list);    // [1,5,2,3]        
複製程式碼
push();和pop();
  • 目的： 向陣列後面中插入或刪除元素
  • 是否改變原陣列：改變原來的陣列
let list = [1,2,3];
let list1 = list.push(5);
console.log(list1); // 4 陣列長度
console.log(list); // [1, 2, 3, 5]
let list2 = list.pop();
console.log(list2); // 後面最後一個值5 陣列值
console.log(list);  // [1,2,3] 
複製程式碼
unshift();和shift();
  • 目的 想陣列前面中插入或刪除
  • 是否改變原陣列：改變原來的陣列
let list = [1,2,3,];
let list1 = list.unshift(5);
console.log(list1); // 4 陣列長度
console.log(list); // [5，1, 2, 3]
let list2 = list.shift();
console.log(list2); // 5 第一個陣列值
console.log(list);  // [1,2,3]    
複製程式碼
toString();和toLocaleSting();
  • 目的： 把陣列轉換為字串，並返回結果，每一項以逗號分割;把陣列轉換為本地陣列，並返回結果。
  • 是否改變原陣列：不改變原來的陣列，返回一個新的字串
let list = [1,2,3,];
let list1 = list.toString();
console.log(list1); // 1,2,3
let list2 = list.toLocaleString();
console.log(list2); // 1,2,3
複製程式碼

ES5的陣列方法

map();

*目的： 建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果

  • 是否改變原陣列：不改變原來的陣列，返回一個新陣列
let list = [1,2,3,];
const data = list.map(item=>(item * 2));
console.log(data); // [2, 4, 6]
console.log(list); // 原來陣列不變
複製程式碼
filter();
  • 目的： 將陣列的每個元素傳遞給指定的函式，並返回一個陣列，它包含該函式的返回值
  • 是否改變原陣列：不改變原來的陣列，返回一個新陣列,新陣列是原陣列的子集
let arr = [1,2,3,4,5,8,9,10];
let list = arr.filter((x) => {
   return x>2;
})
console.log(list); // [3, 4, 5, 8, 9, 10]
複製程式碼
every()和some();
  • 目的：對陣列元素應用指定的函式判定
  • 對於空陣列，every() 返回true, some()返回 false.
let arr = [1,2,3,4,5,8,9,10];
let list = arr.every((x) => {
   return x>2;
})
console.log(list); // false

let arr = [1,2,3,4,5,8,9,10];
let list = arr.some((x) => {
   return x>2;
})
console.log(list); // true
複製程式碼
reduce()和reduceRight()
  • 目的：使用指定的函式將陣列元素進行組合，生成單個值．
  • 是否改變原陣列: 不改變原陣列，返回一個新陣列。
let data = [1,2,3,4,5,6,7,8,9,10]
let str = data.reduce((prev,cur,index,arr) => {
	return prev + cur ;
});
console.log(str); // 55

reduceRight()從陣列的末尾向前將陣列中的陣列項做累加

let data = [1,2,3,4,5,6,7,8,9,10]
let str = data.reduceRight((prev,cur,index,arr) => {
	return prev + cur ;
});
console.log(str);
複製程式碼
indexOf()和lastIndexOf()
  • 目的：搜尋陣列中具有給定值的元素。
  • indexOf() 指從前往後查詢. lastIndexOf() 指從後往前查詢.
let arr = [2, 4, 6, 8, 8, 6, 4, 2];
console.log(arr.indexOf(4, 2));     //從索引為2的位置開始查詢   6
console.log(arr.indexOf(4));        //從頭開始找，找到第一個即停止  1


let arr = [2, 4, 6, 8, 8, 6, 4, 2];
console.log(arr.lastIndexOf(4));    //從後往前走，但返回的是從前往後的索引  6
console.log(arr.indexOf("2"));      //找不到返回-1 -1
複製程式碼

ES6的陣列方法

Array.from();
  • 目的：將類陣列物件和可遍歷物件轉化為陣列．
let obj = "ffkfkfk";
let list = Array.from(obj);
console.log(list); // ["f", "f", "k", "f", "k", "f", "k"]
複製程式碼
Array.of()
  • 目的：將一組值轉化為陣列．
let arr = [1,2,3,4];
let list = Array.of(arr);
console.log(list); // [Array(4)]
複製程式碼
copyWithin();
  • 目的：在陣列內部，將指定位置的成員複製到其他位置(會覆蓋原有成員)．
  • 是否修改原陣列：修改原陣列.
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let list = fruits.copyWithin(2, 0);
console.log(list)   // ["Banana", "Orange", "Banana", "Orange"]
複製程式碼
find()和findIndex()
  • 目的：在陣列內部, 找到第一個符合條件的陣列成員．
查詢元素，返回找到的值，找不到返回undefined。
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
const ret1 = arr1.find((value, index, arr) => {
  return value > 4
})

const ret2 = arr1.find((value, index, arr) => {
  return value > 14
})
console.log('%s', ret1)  // 5
console.log('%s', ret2)  // undefined
複製程式碼
fill();
  • 目的：如其意，填充一個陣列．
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const list = fruits.fill("Runoob");
console.log(list);  // ["Runoob", "Runoob", "Runoob", "Runoob"]
複製程式碼

ES7的陣列方法

includes();
  • 目的：表示某個陣列是否包含給定的值，與字串的includes()方法類似.
Array.prototype.includes方法返回一個布林值，表示某個陣列是否包含給定的值，與字串的includes方法類似。該方法屬於 ES7 ，但 Babel 轉碼器已經支援。
[1, 2, 3].includes(2); // true
 
[1, 2, 3].includes(4); // false
 
[1, 2, NaN].includes(NaN); // true


該方法的第二個參數列示搜尋的起始位置，預設為 0 。如果第二個引數為負數，則表示倒數的位置，如果這時它大於陣列長度（比如第二個引數為 -4 ，但陣列長度為 3 ），則會重置為從 0 開始。

[1, 2, 3].includes(3, 3); // false
 
[1, 2, 3].includes(3, -1); // true
複製程式碼

總結不對的地方請大神們指點一下

相關文章