js篇-filter函数

716 阅读1分钟

filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为false,则该元素不保存到新数组中;原数组不发生改变。

  • 语法

array.filter(function(currentValue,index,arr), thisValue)

1366381-20190801164700157-1343079266.png

案例

1、数组中去除偶数,只保留奇数

let arr = [1,2,3,4,5,6,7,8]
let arr1 = arr.filter(item=>{
  return item % 2 !== 0
})
console.log(arr1);  // [1,3,5,7]

2、数组中存在空字符串,删除空字符串,保留其他元素

let arr = ['A', '', 'B', null, undefined, 'C', '  '];
let arr1 = arr.filter(item=>{
  return item  && item.trim()
})
console.log(arr1);  // ['A', 'B', 'C']

3、数组中去除重复元素

let arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
let r = arr.filter(function (element, index, self) {
  return self.indexOf(element) === index;
});
console.log(r.toString());// apple,strawberry,banana,pear,orange
console.log(r); // ['apple', 'strawberry', 'banana', 'pear', 'orange']

4、回调函数

filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

let arr = ['A', 'B', 'C'];
let r = arr.filter(function (element, index, self) {
  console.log(element); // 依次打印'A', 'B', 'C'
  console.log(index); // 依次打印0, 1, 2
  console.log(self); // self就是变量arr
  return true;
});