JavaScript中有哪些遍歷數組的方式

本篇文章給大家分享的是有關JavaScript中有哪些遍歷數組的方式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

一、Js自帶的map()方法

1.方法概述

map()方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組

2.格式說明

var newArray = ["1","2","3"].map(fucntion(e,i,arr){return parseInt(e,10)})

• map中回調函數中的第一個參數為：當前正在遍歷的元素

• map中回調函數中的第二個參數為：當前元素索引

• map中回調函數中的第三個參數為：原數組本身

3.使用說明

3.1 支持return返回值；

3.2 return是啥，相當于把數組中的這一項變為啥（并不影響原來的數組，只是相當于把原數組克隆一份，把克隆的這一份數組中的對應項改變了）

3.3 map只能對元素進行加工處理，產生一個新的數組對象。而不能用它來進行篩選（篩選用filter），為什么不能，看個例子就知道了：

4.例子

4.1 在字符串中使用

在一個String上使用map方法獲取字符串中每個字符所對應的ASCII碼組成的數組

var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值為[72,101,108,108,111,32,87,111,114,108,100]

5.易犯錯的點

5.1 很多時候，map給回調函數傳的是一個值，但是也有可能傳2個、3個值，例如下面的例子

var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值為[72,101,108,108,111,32,87,111,114,108,100]

為什么會這樣，因為parseInt就是一個函數，它就是作為map的一個回調函數，parseInt接收兩個參數，一個是String，一個是進制

上面的函數就可以化為：

["1","2","3"].map(parseInt(string, radix));

即

["1","2","3"].map(function(string, radix){return parseInt(string, radix)})
// 所以才返回結果為：[1, NaN, NaN]

6.與map相關

6.1 Map對象

es6提供一個對象Map，看看這個Map建的對象到底是啥東西

它是一個對象，size是它的屬性，里面的值封裝在[[Entries]]這個數組里面

myMap.set(1, "a"); // 相當于java的map.put();
myMap.set(2, "b");
myMap.set(3, "c");
myMap.size();
myMap.get(1);
myMap.get(2);
myMap.get(3);

二、Js自帶的forEach()方法

1.方法概述

forEach()方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組

2.格式說明

forEach方法中的function回調有三個參數，

• 第一個參數為：當前正在遍歷的元素

• 第二個參數為：當前元素索引

• 第三個參數為：原數組本身

[].forEach(function(value, index, array))

3.使用說明

3.1 這個方法沒有返回值，僅僅是遍歷數組中的每一項，不對原來數組進行修改
但是可以自己通過數組索引來修改原來的數組

3.2 forEach()不能遍歷對象，可以使用for in

4.缺點

4.1 您不能使用break語句中斷循環，也不能使用return語句返回到外層函數

4.2 ES5推出的，實際性能比for還弱

5.例子

5.1 通過數組索引改變原數組

var obj = [1,2,3,4,5,6]
var res = obj.forEach(function(item, index, arr) {
  arr[index] = item * 10;
})
console.log(res); // --> undefined
console.log(obj); // --> [10,20,30,40,50,60]

5.2 如果數組在迭代的時候被修改，則當前元素與前面的元素會跳過。因為forEach()不會在迭代之前創建數組的副本

var words = ['1', '2', '3', '4'];
words.forEach(function(word) {
  console.log(word);
  if (word === '2') {
    words.shift();
  }
});
// 1
// 2
// 4

6. 與forEach相關

6.1 $.each 與 for in

可遍歷數組，可遍歷對象

6.1.1遍歷數組

var arr = [1，2，3，4，5]
var res = $.each(arr, function(index, value){
  console.log(index, value);
})
console.log(res); // 返回值，被遍歷的函數

6.1.2遍歷對象

var obj = {name: "psg", age: 22, gender: "male"};
// for in 遍歷
for(var key in obj) {
  console.log(key, obj[key]);
}
// $.each 遍歷
$.each(obj, function(key, value) {
  console.log(key, value);
})

三、Js自帶的filter()方法

1.方法概述

filter()方法是對原數組進行過濾篩選，產生一個新的數組對象

2.注意事項

2.1 filter()不會對空數組進行檢測（如果對空數組進行篩選，返回值位undefined）

2.2 filter()不會改變原始數組

2.3 返回數組，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數組

3.格式說明

forEach方法中的function回調有三個參數，

• 第一個參數為：當前正在遍歷的元素

• 第二個參數為：當前元素索引

• 第三個參數為：原數組本身

[].filter(function(value, index, array)， thisValue)

4.例子

4.1 在一個Array中，刪除偶數，只保留奇數

var arr = [1, 2, 3, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function(x) {
  return x % 2 !== 0;
});
r; // [1，3，5，9，15]

4.2 把一個Array中的空字符串刪掉

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function(e) {
  return s && s.trim(); // 注意：IE9一下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']

4.3 巧妙去除Array的重復元素

var r, arr = ['A', 'B', 'C', 'D', 'B', 'A']
r = arr.filter(function(e, i, self) {
  return self.indexOf === i;
})
console.log(r); // --> ['A', 'B', 'C', 'D']

4.4 篩選素數

function get_primes(arr) {
  var i;
  return arr.filter(function (element) {
    var flag = true;
    if (element < 2) {
      flag = false;
    } else {
      for (var i = 2; i < element; i++) {
        if (element % i == 0) {
          flag = false;
          break;
        }
      }
    }
    return flag;
  })
}

以上就是JavaScript中有哪些遍歷數組的方式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。