ES5 中的数组有这个方法:Array.prototype.filter ,具体使用参考MDN,这里讲一个特殊应用:

回顾下语法:

new_array = arr.filter(callback[, thisArg]);

callback
用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素(通过测试),false则不保留。

逻辑上很简单, callback 返回 true 就保留,否则不保留,但是有的时候还可以这么用,如图:

Array.prototype.filter(Boolean)

仔细想想逻辑上没有问题,应该等价于

然后,发现一个新的应用,把下面这个转成数组:

const    medicineEntities = { 1: { name: '' }, 2: { name: '' }, 3: { name: '' }, ids: [1, 2], invalidIds: [3] ;

有一种解法:

medicines = Object.assign([], medicineEntities).filter(Boolean);

仔细理解没问题!

下面分析:

Object.assign 把 medicineEntities 的属性赋值给了 [],这样的结果就是,

因为数组本身也是对象,所以

1、属性名为数字的属性赋值成功,计入 length

2、属性名不为数字的赋值成功,不计入 length

3、因为没有 0 属性,所以 0 属性为 undefined

最终,数字属性成为数组的下标,值为数组的值,第一项为 undefined ,所以被 filter(Boolean) 过滤掉了,后面的非数值型属性变成了数组的属性,不过不计入下标和 length

Array.prototype.filter(Boolean)的更多相关文章

  1. Array.prototype.filter()的实现

    来源 今年某前端笔试的一道题,大概就是实现一遍filter,包括一个可以改变上下文的要求,其实就是改变this啦,跟原生的filter一样的功能跟参数. 解析 filter的功能就是过滤,传入一个函数 ...

  2. JavaScript的Array.prototype.filter()详解

    摘抄与:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter 概述 ...

  3. Array.prototype.filter()

    1. filter() 方法:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 ——filter() 不会对空数组进行检测 ——filter() 不会改变原始数组 2. 语法: ...

  4. 数组的方法之(Array.prototype.filter() 方法)

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.     注意: filter() 不会对空数组进行检测.     注意: filter() 不会改变原始 ...

  5. javascript替代Array.prototype.some操作

    Array.prototype.some在低版本浏览器好像不太兼容,下列是替代方法 一. for 循环 const initIds: any[] = [1,2,3]; const Ids: any[] ...

  6. 数组方法 Array.prototype

    Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者 ...

  7. 来自数组原型 Array.prototype 的遍历函数

    1. Array.prototype.forEach() forEach() 是一个专为遍历数组而生的方法,它没有返回值,也不会改变原数组,只是简单粗暴的将数组遍历一次  参数: callback() ...

  8. Array.prototype

    Array.prototype  属性表示 Array 构造函数的原型,并允许您向所有Array对象添加新的属性和方法. /* 如果JavaScript本身不提供 first() 方法, 添加一个返回 ...

  9. JavaScript笔记Array.filter(Boolean)

    ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素  (false, null, undefined, 0, NaN or an empt ...

随机推荐

  1. 使用VS2012遇到的问题

    问题1:VS2012 编译程序时:无法查找或打开PDB文件 解决方法:调试-选项-符号-Microsoft符号服务器打钩,然后确定,就OK了. 问题2:按F5运行.c程序,dos窗口闪退 解决方法:C ...

  2. CentOS 删除桌面环境

    帮客户买了一个vps, 结果里面装了一堆没用的软件,所以全部删掉 CentOS 桌面安装大多都是 以软件包的 形式安装 所以 最好是设置好 国内的yum 源, 然后执行: >yum groupl ...

  3. 何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可 ...

  4. 浅谈I2C总线

    I2C总线概述 I2C(Inter-Integrated Circuit)总线是一种由PHILIPS公司在80年代开发的两线式串行总线,用于连接微控制器及其外围设备.I2C总线最主要的优点是其简单性和 ...

  5. C#实现麦克风採集与播放

    在网络聊天系统中.採集麦克风的声音并将其播放出来.是最基础的模块之中的一个.本文我们就介绍怎样高速地实现这个基础模块. 一. 基础知识 有几个与声音採集和播放相关的专业术语必需要先了解一下,否则.后面 ...

  6. angular学习疑问总结

    服务里返回的数据是不是只能传给控制器,而不能传给指令呢?如果是的话那么指令只能通过配置scope属性来访问控制器里的数据

  7. android.graphics(2) - Path, drawPath, moveTo, lineTo, addRect, addCircle, addOval, addArc, drawText, drawTextOnPath

    一.创建路径 canvas中绘制路径利用: void drawPath (Path path, Paint paint) 1.直线路径 void moveTo (float x1, float y1) ...

  8. Google 商店:您的应用静态链接到的 OpenSSL 版本有多个安全漏洞。建议您尽快更新 OpenSSL

    安全提醒 您的应用静态链接到的 OpenSSL 版本有多个安全漏洞.建议您尽快更新 OpenSSL. 在开头为 1.0.1h.1.0.0m和 0.9.8za的 OpenSSL 版本中这些漏洞已得到修复 ...

  9. 如何找到文件的家-打开文件对话框openFileDialog

    private void button1_Click(object sender, EventArgs e) { openFileDialog1.Filter = "*.txt|*.txt& ...

  10. 扩展RBAC用户角色权限设计方案<转>

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...