1. 程式人生 > 實用技巧 >JavaScript中對陣列.map()、some()、every()、filter()、forEach的區別

JavaScript中對陣列.map()、some()、every()、filter()、forEach的區別

1、區別說明

共同點:

不會對原陣列發生修改,而是返回新的變數,用變數接收。

不同點:

1、some():返回一個Boolean型別變數,判斷是否有元素符合func條件

2、every():返回一個Boolean型別變數,判斷每個元素是否都符合func條件

3、filter():返回一個新陣列型別變數,陣列符合func條件,新陣列中的元素來源於原陣列,新陣列長度<=原陣列長度

4、map():返回一個新陣列型別變數,新陣列元素由每一次呼叫函式產生結果組成,新陣列中的元素與原陣列可完全不一樣

5、forEach():用法和map()相似,但是forEach()方法不返回值,forEach無法中斷執行,如果需要中斷需要改用for

2、用法例項

map()例項

如果fun只有一個引數,那麼引數是element。

var arr=[1, 2, 3]
var result=arr.map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

some()例項

如果fun只有一個引數,那麼引數是element。

var arr = [1, 2, 3, 4, 5];
var result=arr.some(function (elem, index, arr) {
  return elem >= 3;
});
//result: true

every()例項

如果fun只有一個引數,那麼引數是element。

var arr = [1, 2, 3, 4, 5];
var result=arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// result:false

filter()例項

如果fun只有一個引數,那麼引數是element。

var arr=[1, 2, 3, 4, 5]
var result=arr.filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

可接收第二個引數

var obj = { MAX: 3 };
var myFilter = function (item) {
  if (item > this.MAX) return true;
};
var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj) // [8, 4, 9]

forEach()例項

如果fun只有一個引數,那麼引數是element。

function log(element, index, array) {
  console.log('[' + index + '] = ' + element);
}

[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

可接收第二個引數

var out = [];
[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out);
out // [1, 4, 9]