javascript中常用的陣列操作方法,以及是否會改變原始陣列

飛翔荷蘭人發表於2018-05-23
JavaScript陣列

改變原始陣列的操作方法：

  1. push：向陣列末尾新增元素，並返回新的長度
  2. pop：刪除最後一個並返回刪除的元素
  3. unshift：向陣列開頭新增元素，並返回新的長度
  4. shift：將第一個元素刪除並且返回刪除元素，空即為undefined
  5. reverse：顛倒陣列順序
  6. sort：對陣列排序
  7. splice：刪，增，替換陣列元素，返回被刪除陣列，無刪除則不返回

不會改變原始陣列的操作方法：

  1. concat：連線多個陣列，返回新的陣列
  2. join：將陣列中所有元素以引數作為分隔符放入一個字元
  3. slice：返回選定元素
  4. map(es6)：陣列對映為新的陣列
  5. filter(es6)：陣列過濾，返回所有通過方法判斷後(判斷為true時)生成的新陣列
  6. forEach：陣列遍歷，沒有返回值
  7. every(es6)：對陣列中的每一項執行給定函式，如每一項均為true時返回true，否則返回false
  8. some(es6)：陣列中的的元素執行給定函式，如其中有一項為true時返回true，此時剩餘的元素不會再執行檢測，如果所以都為false則返回false
  9. find(es6)：尋找陣列中符合測試方法（函式）條件的第一個元素，並且返回該元素
  10. reduce(es6)：方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。
  11. indexOf: 方法返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
  12. includes(es7)：方法用來判斷一個陣列是否包含一個指定的值，根據情況，如果包含則返回true，否則返回false。

使用

// 連線陣列
//__concat方法__
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1.concat(array2); // ["a", "b", "c", "d", "e", "f"]
// __展開運算子方法__
[...array1, ...array2] // ["a", "b", "c", "d", "e", "f"]



//迴圈
var arr = ['a', 'b', 'c'];
arr.forEach(function(element, index) {
  console.log(element + ',' + index);
});
// a , 0
// b , 1
// c , 2

// 箭頭函式寫法
arr.forEach((element,index) => console.log(element,index));



//迴圈對映(map)
var numbers = [1, 5, 10, 15];
let doubles = numbers.map((item, index) => item * 2);
// [2, 10, 20, 30]

// 陣列是否元素包含(includes)
let a = [1, 2, 3];
a.includes(2);
// true
a.includes(4);
// false



//查詢元素(find)
//查詢陣列中大於等於15的元素，並且返回第一個元素
var ret = [12, 5, 8, 130, 44].find(function(element) {
    return element >= 15; // 方法需要有返回值，判斷得出true或者false，返回為true的元素
  }
);
// 130



// 過濾陣列(filter)
// 過濾陣列中大於等於10的元素並且返回新陣列
var filtered = [12, 5, 8, 130, 44].filter(function(value) {
    return value >= 10; // 方法需要有返回值，判斷得出true或者false，返回為true的元素
  }
);
// [12, 130, 44]



// 迴圈判斷(every) 為每個元素都執行
var passed = [12, 5, 8, 130, 44].every(function (element, index, array) {
  return (element >= 10);
});
// false


// 迴圈判斷(some) 遇到返回值為true的就停止執行
var passed = [12, 5, 8, 130, 44].some(function (element, index, array) {
  return (element >= 10);
});
// true



// 陣列擷取(slice) 不改變原陣列
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(2)  // ["camel", "duck", "elephant"]  返回陣列從下標2開始直到結尾的一個新陣列
animals.slice(2, 4)  //["camel", "duck"]  返回陣列從下標2到4之間到一個新陣列



// 陣列減接(splice)  改變原陣列
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // ["angel", "clown", "drum", "mandarin", "sturgeon"]    0為刪減個數，在索引為2的位置不刪減並且插入'drum'
myFish.splice(2, 1); //  ["angel", "clown", "mandarin", "sturgeon"]       從索引為2的位置刪除1項（也就是'drum'這一項）



// 使用 lastIndexOf
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // index === 3
var index = array.lastIndexOf(8); // index === -1



// 陣列轉字串(join)
let a = ['Wind', 'Rain', 'Fire'];
a.join() //預設為逗號分隔
// 'Wind,Rain,Fire'
a.join("-") // 用 - 分隔
// 'Wind-Rain-Fire'



// es6 陣列去重
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
let newarr = Array.from(set);
// newarr === [1, 2, 3, 4, 5]

複製程式碼

相關文章