JS常用到數組操作

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

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]

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端中怎樣設定cookie

#前端中如何阻止事件傳播

#

以上是JS常用到數組操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！