数组的添加和删除过滤方法总结es6 filter()

2023-11-12

es6 filter() 数组过滤方法总结

Array.every(x=>x)是每一个都要满足

Array.some(x=>x)是有一个满足。

Array.find(findIndex),返回符合条件的第一个值。

Array.filter(过滤成新的数组)

**数组的方法find和filter
var aa=[{id:1,name:‘张三’},{id:2,name:‘李四’},{id:3,name:‘王五’},{id:2,name:‘赵六’}]

aa.find( t=> t.id==‘2’) 结果:{id:2,name:‘李四’}

find只会返回第一个满足条件的 而且返回的是对象

aa.filter( t=> t.id==‘2’) 结果 [{id:2,name:‘李四’},{id:2,name:‘赵六’}]

filter会满足所有符合条件的 返回的还是数组**

数组的方法分为两类

1)改变原数组

push,pop,shift,unshift,sort,reverse,splice

2)不改变原数组concat,join–>

split,toStringpush:从数组最后一位开始加数据

pop:把数组最后一位剪切

shift:在数组最前一位剪切

unshift:在数组最前一位加数

reverse:把原数组逆转

splice:arr.splice(从第几位开始,截取多少长度,在切口处添加新数据)

concat :连接join:返回字符串

slice:截取arr.slice(从该为开始截取,截取到该为)

1.创建一个数组,判断数组中是否存在某个值
item是数组里面的每一项

var newarr = [
 { num: 1, val: 'ceshi', flag: 'aa' },
 { num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num===2 ))

2.也可以通过上面方法过滤掉num为2的留下num为1的

var newarr = [
 { num: 1, val: 'ceshi', flag: 'aa' },
 { num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num!=2 ))

3.去掉空数组空字符串、undefined、null

var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)
 
var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)
 
>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)

4.去掉数组中不符合项

var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40) 
console.log(newArr)

5.过滤不符合项

var arr = ['10','12','23','44','42']
var newArr = arr.filter(item => item.indexOf('2')<0) 
console.log(newArr)

6.数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index) 
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

7

/*
  有一个对象数组 a ,将a数中对象某个属性的值存储到B数组中
*/
var porducts = [
  {name:"cucumber",type:"vegetable"},
  {name:"banana",type:"fruit"},
  {name:"celery",type:"vegetable"},
  {name:"orange",type:"fruit"},
];
// es5
var filteredProducts = [];
for(var i = 0;i < porducts.length; i ++){
  if(porducts[i].type === "fruit"){
    // 如果条件满足就把当前的值推入
    filteredProducts.push(porducts[i])
  }
}
// console.log(filteredProducts)//0: {name: "banana", type: "fruit"}1: {name: "orange", type: "fruit"}length: 2__proto__: Array(0)
// ES6
 var filter2 = porducts.filter(function(porduct){//对porducts数组对象过滤如果porduct.type === "fruit"就return出去,再用一个变量接住
  return porduct.type === "fruit"
})
console.log(filter2)

8

/*
  需求二
  有一个对象数组A,过滤掉不满足以下条件对象
  条件:蔬菜 数量大于0 价格小于10
*/
var products = [
  {name:"cucumber",type:"vegetable",quantity:0,price:1},
  {name:"banana",type:"fruit",quantity:10,price:16},
  {name:"celery",type:"vegetable",quantity:30,price:8},
  {name:"orange",type:"fruit",quantity:3,price:6},
];
products = products.filter(function(product){
  return product.type === "vegetable"
  && product.quantity > 0
  && product.price < 10
})
console.log(products)//0: {name: "celery", type: "vegetable", quantity: 30, price: 8}name: "celery"price: 8quantity: 30type: "vegetable"__proto__: Objectlength: 1__proto__: Array(0)

9

/*
  需求三:
  有两个数组A,B,根据A中的ID值 ,过滤掉B数组不符合的数据
*/
var post = {id:4,title:"javascript"};
var comments = [
  {postId:4,content:'Angular4'},
  {postId:2,content:'VUE.js'},
  {postId:3,content:'Node.js'},
  {postId:4,content:'React.js'},
];
function commentsForPost(post,comments){
  return comments.filter(function(comment){
    return comment.postId === post.id;
  })
}
console.log(commentsForPost(post,comments))
// 0: {postId: 4, content: "Angular4"}1: {postId: 4, content: "React.js"}length: 2__proto__: Array(0)

10、Object.keys()传入对象,返回属性名

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

数组的添加和删除过滤方法总结es6 filter() 的相关文章

  • 常用运放电路计算与分析

    常用运放电路计算与分析 1 运放的符号表示 2 集成运算放大器的技术指标 1 开环差模电压放大倍数 开环增益 大 Ao Ad Vo V V 107 1012倍 2 共模抑制比高 KCMRR 100db以上 3 输入电阻大 ri gt 1MW
  • 第三节课总结之关于this指向,变量提升以及跨域的解决方案

    this 变量提升 关于继承 跨域解决方法 gt gt this指向 Js是静态作用域 是在定义阶段就决定好了的 而不是在执行阶段才决定的 参考资料 https developer mozilla org en US docs Web Ja
  • vue函数定义的多种写法

    vue定义方法 methods a e c alert aaa a e c alert aaa a function e c alert aaa 在JS中箭头函数根据是否书写大小括号可分为以下四种情况 不省略 const fun value
  • 数据库的安全性、完整性、并发控制和恢复

    数据库的安全性 完整性 并发控制和恢复from http bbs chinaunix net viewthread php tid 188100 为了保证数据库数据的安全可靠性和正确有效 DBMS必须提供统一的数据保护功能 数据保护也为数据
  • Merkle Patricia Tree (MPT) 以太坊merkle技术分析

    一 传统merkle树缺陷 我的这篇博客merkle tree 分析 详细解释了merkle树的原理和作用 然而传统的merkle树有他的局限性 以下对Vitalik blog原文的翻译可以很好的阐述 传统merkle树的一个特别的限制是
  • idea中git的简单使用及git分支

    这篇文章简单介绍了git 着重介绍了分支概念和idea中git的简单使用 提问题 git是啥 git的分支概念 idea中git的使用 git仓库 git命令 git安装 参考文章 git是个啥 分布式版本管理工具 git的前生今世 git
  • QTableView的表格项中加入图标的方法

    当在使用表格视图的时候 需要在表格每一行前面加入图标 应该怎么做呢 Qt中通过使用MVC的处理方式 很容易做到这一点 具体实现如下 先贴出图 让大家一睹为快 下面我就来介绍一下 上图的灯泡是怎么实现的 通过重载QAbstractTableM
  • 当了程序员才知道的事情

    坐在靠墙角的程序员王二狗 如果这哥们键盘敲的啪啪响 时不时面带笑容 很可能是在跟前台 测试 UI 美工 产品的小美眉聊今天又发现楼下新开的餐馆 如果嘴角带弧度 手不放在键盘上而是一直抓着鼠标擦滚轮且显示器角度靠内 那一定是摸鱼刷某乎 如果这
  • Cocos2d-x 3.x部署

    这是我第一次写技术文章 这里只是分享一下我的部署经验 请各位参考 谢谢 我简单的写写我的部署步骤 只参考了官方的readme 环境 win7 64位 1 打开控制台cmd 2 进入到cocos2d x引擎目录 键入setup py 键入的前
  • 释放技术的想象-解码腾讯云软件架构与应用

    欢迎大家前往腾讯云社区 获取更多腾讯海量技术实践干货哦 关于腾讯 你可能玩过 王者荣耀 你可能用过 微信 和它的 小程序 你可能看过 腾讯视频 并且曾为之付费 你可能已经是多年的 QQ 老手但还不知道什么是 MQ 作为成立多年的老牌互联网公
  • 不管人工智能发展如何 开发者都有必要了解 Linux 内核

    Linux内核在计算机世界的地位有目共睹 称它为计算机世界的基石也不为过 而且它还是全球最大的开源项目 几乎最知名的科技公司都参与其中 包括谷歌 Red Hat SUSE Intel Facebook 甲骨文和华为等 当然还包括Linux的
  • 腾讯云技术分享:MySQL AHI 实现解析

    MySQL 定位用户记录的过程可以描述为 打开索引 gt 根据索引键值逐层查找 B 树 branch 结点 gt 定位到叶子结点 将 cursor 定位到满足条件的 rec 上 如果树高为 N 则需要读取索引树上的 N 个结点并进行比较 如
  • 新手如何学习网络安全?

    每天都有新闻报道描述着新技术对人们的生活和工作方式带来的巨大乃至压倒性影响 与此同时有关网络攻击和数据泄露的头条新闻也是日益频繁 攻击者可谓无处不在 企业外部充斥着黑客 有组织的犯罪团体以及民族国家网络间谍 他们的能力和蛮横程度正日渐增长
  • [技术发展-28]:信息通信网大全、新的技术形态、信息通信行业高质量发展概览

    目录 前言 第1章 什么是信息与通信 第2章 为啥要编制信息与通信发展规划 第3章 信息与通信如何高质量发展 重点 3 0 发展目标 编辑 3 1 建设新型数字基础设施 3 1 1 移动通信网 无线接入层 1G到5G 3 1 2 固定宽带网
  • vue 软键盘弹起底部按钮顶起来的问题

    vue 软键盘弹起 底部按钮fixed固定定位的button按钮顶起来的问题 底部的button按钮被手机弹起的软键盘顶起来 影响页面美观 html的内容 div class hold div 现在data中定义一个记录高度的属性以及判断b
  • 新人如何快速高效的学习Java?

    如果是新人 不想通过培训班 想学java 那么我可以很认真的告诉你 如果你是因为兴趣学学 那么你怎么学都可以 建议你找一些零基础入门的视频来学习 先看一遍 认识一下Java是个什么东西 如果是想转行学习 靠这个来工作 那么你就要好好的制定一
  • tensorflow-gpu版本详细安装教程(Win10,Python3.7.9,cuda11.2,cudnn8.1.0)

    目录 cuda安装 cudnn安装 python安装 tensorflow安装 cuda安装下载 首先要注意自己的显卡支持cuda的版本 可以这样自查 可以看到适合自己的cuda版本 这里我选择了cuda11 2版本 cuda安装包下载链接
  • XSS & SQL injection

    作者 CyberPhreak XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX X Web Security XSS more X XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 介绍在这篇文章中我将说明所有关于X
  • 求最大公约数,和最小公倍数的规则

    求最大公约数 和最小公倍数的规则 最大公约数 Greatest Common Divisor 简称GCD 是指两个或多个整数共有约数中最大的一个 例如 12和18的最大公约数是6 因为12和18同时都能被6整除 求最大公约数的规则包括 辗转
  • 一致性哈希算法,hash(key)是负值时,会出现异常吗?

    一致性哈希算法 hash key 是负值时 会出现异常吗 一致性哈希算法中 哈希函数hash key 的返回值通常是一个非负整数 如果hash key 返回负值 则可能会出现一些问题 例如无法正确地映射对象到哈希环上的位置 或者无法正确地找

随机推荐

  • Kettle 文本文件输入 中文汉字乱码

    问题 今天 使用Kettle 的文本文件输入组件转换为Excel 输出组件时 由于转换文本中包含中文 执行转换时 查看excel 文件时内容出现了汉字乱码 实战 1 创建one txt 文本文件 我在电脑桌面上 创建一个txt文件 命名为o
  • Haxe: class, object, new and constructor

    haxe 类 对象 new 和 构造函数 package if neko import neko Lib import neko io File end class Thing public function new trace new f
  • Mysql 解析

    目录 1 索引 为什么需要索引 索引的类型有哪些 mysql使用的是哪种索引数据结构
  • 自定义flume拦截器-实现了多种功能

    1 自定义拦截器实现说明 1 实现interceptor接口 并实现其方法 接口完全限定名为 org apache flume interceptor Interceptor 2 自定义拦截器内部添加静态内部类 实现Builder接口 并实
  • 使用Jfreechart实现带热点的饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库 它完全使用JAVA语言编写 是为applications applets servlets 以及JSP等使用所设计 JFreeChart可生成饼图 pie charts 柱状图
  • 【优化求解】基于粒子群算法集合生物地理算法CPSOBBO求解MLP问题matlab代码

    1 简介 Biogeography Based Optimizer BBO is employed as a trainer for Multi Layer Perceptron MLP The current source codes a
  • 卷积网络训练太慢?Yann LeCun:已解决CIFAR-10,目标 ImageNet

    摘要 CIFAR 10竞赛之后 卷积网络之父Yann LeCun接受相关采访 他认为 卷积网络需要大数据和高性能计算机的支持 深层卷积网络的训练时间不是问题 运行时间才是关键 Yann LeCun还分享了他正在做的一些最新研究 Kaggle
  • Centos7.6 源码编译部署percona mysql 5.7.39-42

    Centos7 6 源码编译部署percona mysql 5 7 39 42 参考链接 mysql5 7 35源码编译安装部署 CentOS7 编译安装 Percona Server 5 7 percona Server for MySQ
  • 年薪100万和10万程序员的差距

    点击蓝字关注 回复 职场进阶 获取职场进阶精品资料一份 我们看武侠大片 经常有那种本来可以练就绝世武功的大虾 阴差阳错练的走火入魔 一开始还可以硬撑 还能打败一些虾兵蟹将 遇见真正的高手 这些大虾们立马就败下阵来 其实程序员的职业生涯 如同
  • jquery获取上级、同级和下级元素

    1 JQuery parent expr 找父亲节点 可以传入expr进行过滤 比如 parent parent 或者 parent parent child 2 JQuery parents expr 查找所有祖先元素 不限于父元素 3
  • SQL Server安装教程(2022年更新)

    很多朋友在安装SQL Server的过程中会碰到一些小状况 今天就以Microsoft SQL Server2019为例来聊聊SQL Server安装的相关问题 提示 若之前安装过SQL Server 务必保证在重装前将其卸载干净 目录 1
  • ODrive踩坑(一)windows下使用环境的搭建,odrivetool及USB驱动的安装

    最近有空玩玩无刷电机 早就听说ODrive的控制效果不凡 淘宝400买来玩玩 电机使用我以前囤的几个拆机DJI 3512 别看拆机 但悟的电机是针不戳 编码器使用TLE5012B E1000磁编码器 干回老本行画了张PCB 一方面连接编码器
  • JS异常: Uncaught RangeError: Maximum call stack size exceeded

    今天被一个bug弄得头大 找了无数资料 网上说是递归函数的原因 https blog csdn net qq 30100043 article details 72642205 还是未能解决问题 继续找 最后在 https blog csd
  • 【故障集合】综合架构rsync服务与nfs服务错误集合(持续补充中)

    一 rsync服务 1 1 not a regular file 不是普通文件 scp跟cp类型 默认只能复制普通文件 复制目录 加上 r参数即可 root backup scp etc 172 16 1 31 tmp root 172 1
  • 软件设计七大原则

    在软件开发中 为了提高软件系统的可维护性和可复用性 增加软件的可扩展性和灵活性 程序员要尽量根据 7 条原则来开发程序 从而提高软件开发效率 节约软件开发成本和维护成本 我来依次来总结这 7 条原则 这 7 种设计原则是软件设计模式必须尽量
  • uni-app 框架超详细新手入门

    什么是uni app 介绍 uni app 是一个使用 Vue js 开发跨平台应用的前端框架 开发者通过编写 Vue js 代码 uni app 将其编译到iOS Android 微信小程序等多个平台 保证其正确运行并达到优秀体验 uni
  • 公网远程访问宝塔面板和网页【内网穿透】

    1 ngrok 限制带宽 不限制流量 进入ngrok官网 Sunny Ngrok内网转发内网穿透 国内内网映射服务器 1 注册 2 开通隧道 3 穿透网页 1 配置ngrok 输入网页本地地址和端口号 2 运行ngrok sunny cli
  • IntelliJ IDEA下载安装教程(超详细图解)

    1 IDEA的下载 官网链接 https www jetbrains com idea l 1 点击上面链接进入官网 点击Developer Tools 再点击 Intellij IDEA 2 点击Download 进入IDEA下载界面 3
  • Vue:数据双向绑定和v-系列指令

    Vue js是当下最火的一款前端框架了 学习的时候要多动手实践以帮助理解 我是通过例子来学习的 这样记的快一些 目录 Vue js介绍 如何引入Vue 何为声明式渲染 如何实现 文本插值 message v html v bind 绑定元素
  • 数组的添加和删除过滤方法总结es6 filter()

    es6 filter 数组过滤方法总结 Array every x gt x 是每一个都要满足 Array some x gt x 是有一个满足 Array find findIndex 返回符合条件的第一个值 Array filter 过