Array的Filter方法詳解

一、數組的filter方法怎麼用

首先來了解一下filter方法的基本使用方法。簡單說，filter方法是用來篩選數組中滿足條件的元素並返回一個新的數組。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(num) {
  return num > 3;
});

console.log(newArr); // [4, 5]

在上面的例子中，我們先聲明了一個數組arr，然後使用filter方法篩選出大於3的元素並返回一個新的數組newArr。通過console.log方法輸出newArr可以看到，不滿足條件的元素被過濾掉了，只保留了大於3的兩個元素。

二、數組filter方法的返回undefine

如果沒有指定回調函數或者回調函數返回值為undefined，那麼filter方法將無法完成任何篩選操作，返回的就是原數組本身。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter();

console.log(newArr); // [1, 2, 3, 4, 5]

在上面的例子中，我們沒有傳遞任何參數給filter方法，此時filter方法將無法完成篩選操作，直接返回原數組。上面的代碼輸出的是[1, 2, 3, 4, 5]。

三、數組的filter方法返回值

filter方法返回的是符合條件的元素組成的新數組，該數組的長度可以為0。新數組的元素順序與原數組相同。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(num) {
  return num % 2 === 0;
});

console.log(newArr); // [2, 4]

在上面的例子中，我們使用filter方法篩選出原數組中的偶數元素並返回新數組newArr。console.log方法輸出的是[2, 4]。

四、數組的filter方法返回什麼

當沒有滿足條件的元素或者篩選條件是空數組時，filter方法返回一個空數組。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(num) {
  return num > 5;
});

console.log(newArr); // []

在上面的例子中，我們試圖篩選出大於5的元素，但是由於原數組中沒有大於5的元素，所以filter方法返回一個空數組。console.log方法輸出的是[]。

五、數組的方法filter

除了filter方法，數組還提供了其他一些類似的方法。比如：map、every、some等。這些方法都很類似，只是根據不同的返回值類型執行不同的操作。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(num) {
  return num * 2;
});

console.log(newArr); // [2, 4, 6, 8, 10]

在上面的例子中，我們使用map方法將數組中的每個元素都乘以2並返回新數組newArr。console.log方法輸出的是[2, 4, 6, 8, 10]。

六、數組filter方法去重

filter方法也可以用來去重，只需在回調函數中判斷該元素是否已經在新數組中出現過即可。

var arr = [1, 2, 2, 3, 3, 4, 5, 5];
var newArr = arr.filter(function(num, index, arr) {
  return arr.indexOf(num) === index;
});

console.log(newArr); // [1, 2, 3, 4, 5]

在上面的例子中，我們使用filter方法去除重複元素，並將結果保存到新數組newArr中。console.log方法輸出的是[1, 2, 3, 4, 5]。

七、數組filter函數的用法

filter函數可以接收兩個參數：回調函數和this值。回調函數用來篩選元素，this值用來指定回調函數中的this。

例如，我們可以使用bind方法來改變回調函數中的this指向：

var arr = [1, 2, 3, 4, 5];
var newObj = {
  num: 3
};

var newArr = arr.filter(function(num) {
  return num > this.num;
}.bind(newObj));

console.log(newArr); // [4, 5]

在上面的例子中，我們使用bind方法將回調函數中的this指向newObj對象。filter方法篩選出大於3的元素，並將結果保存到新數組newArr中。console.log方法輸出的是[4, 5]。

八、用filter方法過濾數組

利用filter方法，我們可以過濾數組中的複雜數據。

var students = [
  {name: '小明', age: 18, gender: '男'},
  {name: '小紅', age: 17, gender: '女'},
  {name: '小王', age: 16, gender: '男'},
  {name: '小李', age: 19, gender: '女'}
];

var boys = students.filter(function(student) {
  return student.gender === '男';
});

console.log(boys); 
/* 
[ 
  { name: '小明', age: 18, gender: '男' },
  { name: '小王', age: 16, gender: '男' }
] 
*/

在上面的例子中，我們使用filter方法篩選出男性學生，並將結果保存到新數組boys中。console.log方法輸出的是符合條件的兩個學生對象。

九、js數組filter

我們不僅可以使用filter方法來操作普通數組，也可以使用它來操作TypedArray和數組對象下的方法。

var nums = new Int16Array([1, 2, 3, 4, 5]);
var newArr = Array.prototype.filter.call(nums, function(num) {
  return num > 3;
});

console.log(newArr); // [4, 5]

在上面的例子中，我們使用filter方法來操作Int16Array類型的數組。注意，由於該類型的數組沒有filter方法，我們需要使用Array.prototype.filter.call方法來執行filter方法。

結語

本文詳細介紹了數組的filter方法，從基本使用方法、返回值類型、其他類似方法的使用、去重方法和在操作複雜數據時的應用等多個方面進行了闡述。希望本文能夠為讀者提供一些幫助。