jQuery 过滤readonly js过滤filter

前言个人笔记

在前端开发过程中，对数组的数据进行处理也是比较常见的操作之一，而且对数组进行操作的频率远远大于对 对象进行操作，因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能，尤其是对于刚入行的前端开发者来说尤为重要，所以一定要掌握好相关技能。本篇博文来分享一下关于对数组里面的数据进行筛选的操作，那么就用到了JS中filter()方法使用。

filter()方法

1、定义

filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

2、语法

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

3、参数说明

具体参数描述，如下图所示：

返回值

4、用法

filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。

5、注意事项

（1）filter() 不会对空数组进行检测；

（2）filter() 不会改变原始数组。

6、使用实例

根据实际开发过程中的不同需求，把实战中比较常见的处理方式汇总出来，需求是做不完的，也不可能全部覆盖到，这里只分享一些比较常见的操作，方便有需要的开发者查阅使用，具体的实例如下所示。

1.返回数组array中所有元素都大于等于14的元素

eg:

var array = [14, 17, 18, 32, 33, 16, 40];
function checkItem(num) {    
  return num >= 14;
}
function numFunction() {    
 document.getElementById(“test”).innerHTML = array.filter(checkIte    m);  
 //显示结果：17, 18, 32, 33, 16, 40
 }

判断数组里面是否存在某个值：

var array = [14, 17, 18, 32, 33, 16, 40];
newarr.filter(item => item.num==14); //判断数组中是否有14
console.log(newarr.filter(item => item.num==14)) //true

2.数组去重操作：对数组array中所有相同的元素进行去重复操作

function merge(array) {  
  return array.filter(function(item, index, arr) 
  {    //当前元素，在原始数组中的第一个索引===当前索引值，否则返回当前元素   
   return array.indexOf(item, 0) === index;  
 });}
var array = [2,2,’a’,’a’,true,true,15,17];console.log(merge(array));    
// 输出结果：[2, “a”, true, 15 ,17]

数组去重的另一个实例：

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]        
var newArray = array.filter(function(item, i, arr) {            
let a = arr.indexOf(item)            
return arr.indexOf(item) === i;        });
console.log(newArray);   //输出结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.数组中保留奇数或者偶数

(1)保留数组中的偶数：

var array  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]       
   var newArray = array.filter((item, i, arr) => {            
     //函数自身返回的是一个布尔值，只当返回值为true时，当前元素才会存入新的数组中。   
     return item % 2 === 0;                                 
    })       
    console.log(newArr); //输出结果：[2, 4, 6, 8, 10]

(2)保留数组中的奇数：

var array  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]        
  var newArray = array.filter((item, i, arr) => {            
  //函数自身返回的是一个布尔值，只当返回值为true时，当前元素才会存入新的数组中。            
  return item % 2 !== 0;      
   })      
     console.log(newArr); //输出结果：[1, 3, 5, 7, 9]

4.去掉数组中的空字符串、undefined、null

(1)去掉数组中的undefined

var array = ['1','2',undefined, '3.png',undefined, ‘a’]
var newArray = arr.filter(item => item)
console.log(newArray)

(2)去掉数组中的null

var array = ['1','2',null, '3.png',null, ‘a’]
var newArray = arr.filter(item => item)
console.log(newArray)

(3)去掉数组中的空字符串，但是空字符串里面不能包含空格

var array  = ['1', '2', '', '3.png’, ’’, ‘a’]
var newArray = arr.filter(item => item)
console.log(newArray)

(4)另外一种去除空字符串的方法

var array = ['1','2',undefined, '3.png', ‘’, undefined, ‘a’, '  '];
let newArray=array.filter(i=>i && i.trim());     
// 注意：IE9以下的版本没有这个trim()方法
console.log(newArray);   //返回结果:['1','2', '3.png', ‘a’,]

5.把对象数组a中的某个属性值取出来存到数组b中

var arrayA = [{name:"a",type:"letter"},{name:”1”,type:"digital"},{name:”c”,type:"letter"},{name:”2”,type:"digital"},];
var arrayB = arrayA.filter(function(array){  
 //对arrayA数组对象过滤如果array.type === "letter"就return出去, 再用一个变量接收return array.type === "letter"
 });
 console.log(arrayB); 
 //输出结果：[{name:"a",type:"letter"},{name:”c”,type:"letter"},]

6.filter()和find()结合使用，实现从数组中查找想要的元素

projectDetail() {      
 if (this.value) {        
 return this.sourcedata.filter((item) => {           
 return [item.ProjectName, item.ProjectNewNo].find( (si) => { 
 //通过          item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元          素                         
 	return si.indexOf(this.value) != -1;  //根据是否输入来匹配            
 }   );   });   }      
 	return this.sourcedata; //最后返回想要的元素的数组    
 }

2.案例
它用于把Array的某些元素过滤掉，然后返回剩下的元素。

和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写

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

把一个Array中的空字符串删掉，可以这么写：

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

trim()函数去掉字符串首尾空白字符

回调函数

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

var arr = ['A', 'B', 'C'];
var 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;
});

利用filter，可以巧妙地去除Array的重复元素：

'use strict';
 
var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
 
    r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});

alert(r.toString());

indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素

练习

请尝试用filter()筛选出素数：

'use strict';
 
function get_primes(arr) {
var s = arr.filter(function(x){
   if(x<4)return x!=1;
   var i=2;
   for(;i<=x/2;++i)
   if(x%i==0)return false;
   return true;
});
return s;
}
 
// 测试:
var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    alert('测试通过!');
} else {
    alert('测试失败: ' + r.toString());
}