被Arr Object遗忘的孩子：Arr.filter()

前言
前两天有天不在公司，项目测试中的优化需求被老司机接了招，我通过手机看到需求内容：当所有设备属性为不在线时，显示一条提示出来。很简单的一个小优化，我惯性的思路只是想到了将接口取得的数据——一个数组，其中有多个对象元素，来进行循环，事先准备一个变量，赋个初始值true,在循环中判断 online 属性值是否为true，只要有为true的，就改变变量的值，如果执行完整个 $.ench() , 变量值还未被改变说明没有在线设备，也就是全部离线。

类似如下代码：（项目使用了angular , jQuery）

var arr = [{ // 模拟接口数据
    name:'111',
    online:'false'
},{
    name:'222',
    online:'false'
},{
    name:'333',
    online:'false'
}];

var $scope.allOffline = true;   //提示元素 ng-if = "allOffline"
$.each(arr,function(i,o){
    if(o.online == "true"){  //只要有一个在线的，就变为false
        $scope.allOffline = false;
    }
});
// 如果整个each走完，allOffline值还为true，那么说明没走if,也就是全部离线

貌似是行得通的，具体实现不再细究。如有问题欢迎大家讨论~

第二天来到公司，看到老司机的代码，正是使用了数组对象的 filter() 方法。我不知道什么原因，w3c School 里
数组对象手册中，完全找不到 Arr.filter() 方法 ，于是我对它的认识还比较陌生。现在就来掌握它吧！

初识 Arr.filter()：这个”孩子“有什么用？
filter() 是数组对象的方法，顾名思义，它可以根据条件筛选（或过滤）出符合条件的数组元素，并将筛选出的元素放到一个新的数组中，且把这个新的数组（其中的元素是符合筛选条件的元素）返回。

举个栗子：

var arr = [12,45,85,64,90,37];
var result = arr.filter(function(n){
    return n>=50;
});
console.log(result);  // [85, 64, 90]

使用 Arr.filter()：这个”孩子“怎么使用？
Arr.filter() 方法接收一个必须的参数，这个参数是一个函数，数组中的每个元素都会执行这个函数。此函数参数可以接收 3 个参数：
第1个：代表调用 filter() 方法的数组元素中的每一个元素；
第2个：代表这个数组元素在原数组中的索引值；
第3个：代表调用 filter() 方法的数组对象本身；
再举个栗子：

var arr = [12,45,85,64,90,37];
var result = arr.filter(function(n,i,arr){
    console.log(n);  // n 代表数组中的每个元素
    console.log(i);  // i 代表每个元素的索引
    console.log(arr); // arr 代表调用 filter() 方法的数组本身
    return n>=50;
});
输出：
12
0
[12, 45, 85, 64, 90, 37]
45
1
[12, 45, 85, 64, 90, 37]
85
2
[12, 45, 85, 64, 90, 37]
……

老司机的代码
看看老司机是怎么使用 Arr.filter() 的，是不是比我最初的思路高明多了？

var offlineDevices=$scope.data.filter(function(device){
    return !device.online;
});
if(offlines&&offlines.length==$scope.devices.length){
    $scope.isAllOffline=true;
}else{
    $scope.isAllOffline=false;
}

时刻记得这个“被遗忘的孩子”
个人感觉 Arr.filter() 方法还是很好用的，在一些适合使用的情境下会发挥淋漓尽致的作用，所以时刻记得它吧！更多关于 Arr.filter() 的资源，可以参考：
1.菜鸟网站JavaScript Array filter() 方法
http://www.runoob.com/jsref/jsref-filter.html
2.数组的filter方法
http://www.cnblogs.com/luxiaoxiao/p/6067125.html

后记絮语
通过 ng-if 将变量和元素的创建/销毁联系在一起，也就是由变量来决定DOM元素的创建或销毁，这在angular中是很基础的知识。但细微处见真功夫，
如果是我写代码，基本就这样写了：

<span ng-if="isAllOffline">全部设备不在线</span>

再看老司机的代码：

<span ng-if="isAllOffline&&devices&&devices.length>0">全部设备不在线</span>

devices 代表所有设备，这就排除了设备数为0的情况，考虑很周到，值得学习。