Falsy Bouncer（第二种解决方式）

<-- 要求说明 -->

过滤数组假值

（真假美猴王）

删除数组中的所有假值。

在JavaScript中，假值有false、null、0、""、undefined 和 NaN。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

这是一些对你有帮助的资源:

Boolean Objects

Array.filter()

<-- 自己理解 -->

这里的Boolean()是新知识点，先学习了一下Boolean()方法：

new Boolean(value) // value可选

如果value值不是布尔值，则会将其转换为布尔值。如果省略value，或者value的值为0，-0，null，false，NaN，undefined或者空字符串（“”），则生产的Boolean对象的值为false。如果传入的参数是 DOM 对象 document.all，也会生成值为 false 的 Boolean 对象。任何其他的值，包括值为 "false" 的字符串和任何对象，都会创建一个值为 true 的 Boolean 对象。

注意：不要将基本类型中的 布尔值true和false 与 值为true和false的Boolean对象 弄混了。

当Boolean对象用于条件语句的时候（直接应用月条件语句），任何不是undefined和null的对象，包括值为false的Boolean对象，都会被当做true来对待，如下面代码：

var x = new Boolean(false);
if(x){// 这里的代码会被执行
}

基本类型的布尔值不受此规则影响，如下面代码：

var x = false;
if(x){//  这里的代码不会被执行
}

不要用创建Boolean对象的方式将一个非布尔值转化成布尔值，直接将Boolean当做转换函数来使用即可，如下面代码：

var x = Boolean (expression );          // 推荐
var x = new Boolean( expression )   // 不太好

如果在条件判断语句中直接使用Boolean作为转换函数，代码如下：

var x = Boolean( false );
if(x){//  这里的代码不会被执行
}

该实例中可以使用Boolean对象将数组中的所有元素进行判断，Boolean对象返回false即为数组中的价值。

使用for循环进行遍历，将数组中的每一个值依次传入Boolean函数，返回false则对该值进行删除操作。

delete和splice()都可以实现数组删除的操作，但是delete仅将值设为undefined，数组的length不变，这里需要使用splice()。

<-- 遇到的问题 -->

无论使用for循环还是使用filter()都不会得到正确结果，恍然大悟，使用splice()删除后，数组长度发生变化，再次回到for循环或filter中，整个遍历的会受到影响，会存在删除一个后就会跳过一个值，是遍历造成混乱。

<-- 代码实现 -->

解决方法一：

遇到的问题主要是删除前面的数组元素后，后面的索引值会前移，导致遍历混乱，如果从后面开始遍历，那么对前面的索引值就不会产生影响。代码如下：

function bouncer( item ){for( var i=arr.length-1; i>=0; i-- ){if( Boolean( arr[i] ) == false ){arr.splice( i, 1 );}}return arr;
}

解决方法二：

filter()为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。

可以将数组每个值传递给Boolean，返回的true或false再作为filter()的callback的参数，返回false不处理，返回true则将所对应的值存入一个数组中，最后遍历结束，将所有真值传递到一个数组中并return，等同于将价值删除。

代码实现：

function bouncer( arr ){return arr.filter( function( item, index, array ){return Boolean( item );})
}

<-- 知识点总结 -->

Boolean()

filter()

delete和splice()删除数组

转载于:https://www.cnblogs.com/daleizi147/p/8445840.html

Falsy Bouncer（第二种解决方式）相关推荐

redis连接不上，两种解决方式
今天某个项目的redis连不上了,将自己用到的两个解决办法写篇记录(实际使用时方法二选一即可). redis连接不上,两种解决方式一.首先排查本地redis连接有没有问题 1. 在服务器上查看red ...
JS 跨域问题常见的五种解决方式
JS 跨域问题常见的五种解决方式一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来 ...
chrome拦截弹窗问题的两种解决方式
chrome拦截弹窗问题的两种解决方式参考文章: (1)chrome拦截弹窗问题的两种解决方式 (2)https://www.cnblogs.com/CaiDaili/p/9228455.html ...
java方法生命周期_Java线程的第二种实现方式以及生命周期
上篇中我们了解了Java线程的第一种实现方式,主要分两步,第一步是继承java.lang.Thread; 第二步是重写run()方法.接下来我们来看Java线程的第二种实现方式,也是分为两步,第一步, ...
Docker学习总结（44）——Docker容器时间与主机时间不一致的三种解决方式
分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来!点击浏览教程问题我们在使用docker时发现Docker容器时间与主机时间经常出现不一致的情况 ...
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):的三种解决方式
在使用mybatis-plus自定义SQL的时候,没有使用注解方式,而是将SQL语句写在mappper.xml文件中,就报了这个错:org.apache.ibatis.binding.BindingE ...
html设置背景颜色无效,设置背景颜色无效果（第二种实现方式背景颜色设置不起作用）...
body{ /* 第一种实现方式 background-color:#C0C0C0; /* 设置背景颜色为黑色 */ background-image:url('PHPCHINA.png'); / ...
Eclipse SVN 冲突的介绍及四种解决方式
1.为什么会出现冲突 <1>两个开发人员,Harry和Sally,分别从服务器端下载了文件A. <2>Harry修改之后,A变成了A',Sally修改之后,A变成了A" ...
开灯关灯问题的两种解决方式（数学建模线性代数的应用和编程实现）
开灯关灯问题的两种解决方式 1.问题介绍 2.编程实现算法及其代码(详细) 3.就该题进行数学建模–体验线性代数的使用 1.问题介绍有一个按钮组成的矩阵,其中每行有5个按钮,共5行.每个按钮旁边有一 ...

Falsy Bouncer（第二种解决方式）

Falsy Bouncer（第二种解决方式）相关推荐

最新文章

热门文章