广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript数组filter方法
  • 207
分享到

JavaScript数组filter方法

js数组filterjs数组filter方法 2022-12-08 20:12:43 207人浏览 泡泡鱼
摘要

目录1、定义2、语法3、参数说明4、用法5、注意事项6、使用实例1、定义   filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元

1、定义

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

2、语法

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

3、参数说明

返回

4、用法

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

5、注意事项

1、filter() 不会对空数组进行检测;

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

6、使用实例

1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。

const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]
 
// 查找某个值-------------------------
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num == 14)
console.log(newArr);//打印 [14]
 
//返回大于某个值和小于某个值的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14 && num < 33)
console.log(newArr);//打印 [17, 18, 32, 16]

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

const array = [2, 2, 'a', 'a', true, true, 15, 17]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);//打印 [2, 'a', true, 15, 17]
 
//-------------------------------------------------------------------------
 
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]

3、数组中保留奇数或者偶数。

//保留偶数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
      return item % 2 === 0
    })
console.log(newArr);// 打印 [2, 4, 6, 8, 10]
 
//保留奇数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
      return item % 2 !== 0
    })
console.log(newArr);// 打印 [1, 3, 5, 7, 9]

4、去掉数组中的假值,比如:空字符串、undefined、null、0、false。

const array = [
      { id: 3 },
      { id: 4 },
      { id: null },
      { id: undefined },
      { id: '' },
      { id: 0 },
      { id: false }
     ]
const newArr = array.filter(({ id }) => id)
console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }]
 
//-------------------------------------------------------------------
 
const array = [undefined, null, 3, 5, 'a', false, 0]
const newArr = array.filter(item => item)
console.log(newArr);// 打印 [3, 5, 'a']

5、把对象数组array中的某个属性值取出来存到数组newArr中。

const array = [
  { name: "a", type: "letter" },
  { name: '1', type: "digital" },
  { name: 'c', type: "letter" },
  { name: '2', type: "digital" },
];
const newArr = array.filter((item, i, arr) => {
  return item.type === "letter"
})
console.log(newArr);
// 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]

6、filter结合find方法,实现两个数组的补集的解决方法,oldArr的元素newArr中都有,在newArr中去掉所有的oldArr。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素,那么就会返回两个数组元素相等的值,这里取反就返回不相等的值, 不取反的时候因为30的元素不符合,所以不返回30的值。

const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40]
const oldArr = [32, 33, 16, 40, 30]
function myfunction() {
  const result = array.filter(item1 => {
    //此处取反去掉,将变换元素状态
    return !oldArr.find(item2 => {
      return item1 === item2
    })
  })
  return result
}
const newArr = myfunction()
console.log(newArr);
// 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43]
// 不取反打印 [32, 16, 33, 40]   此处30的元素不符合,所以不返回30的值

到此这篇关于javascript数组filter方法的文章就介绍到这了,更多相关js数组filter内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript数组filter方法

本文链接: https://www.lsjlt.com/news/174475.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript数组filter方法
    目录1、定义2、语法3、参数说明4、用法5、注意事项6、使用实例1、定义   filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元...
    99+
    2022-12-08
    js数组filter js数组filter方法
  • JavaScript 数组方法filter与reduce
    目录前言filterreduce数组求和筛选首字母是否是含有b字母结语前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter...
    99+
    2022-11-13
  • javascript数组中的map方法和filter方法
    目录一、map方法1编辑器2代码部分3运行结果二、filter方法 1编辑器2代码3运行结果一、map方法 1编辑器 编辑器搞出来 一起研究研究数组中的map方法: 2代...
    99+
    2022-11-13
  • JavaScript如何使用reduce实现数组filter方法
    这篇文章主要为大家展示了“JavaScript如何使用reduce实现数组filter方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何...
    99+
    2022-10-19
  • 如何在JavaScript中使用filter方法过滤数组
    本篇文章给大家分享的是有关如何在JavaScript中使用filter方法过滤数组,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScript是什么JavaScript是...
    99+
    2023-06-14
  • ES5如何实现数组filter方法
    这篇文章给大家分享的是有关ES5如何实现数组filter方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。ES5 实现数组 filter 方法感谢各位的阅读!关于“ES5如何实现...
    99+
    2022-10-19
  • 如何使用filter方法过滤数组
    要使用`filter`方法过滤数组,可以按照以下步骤进行操作:1. 创建一个数组;2. 使用`filter`方法对数组进行过滤;3....
    99+
    2023-10-09
    filter
  • JS数组中filter方法的使用实例
    目录1、定义2、语法3、参数说明4、用法5、注意事项6、使用实例附:多条件单数据筛选总结1、定义   filter()创建一个新的数组,新数组中的元素是通过检查指...
    99+
    2022-11-13
  • javascript中filter会改变原数组吗
    这篇文章主要介绍了javascript中filter会改变原数组吗,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript的特点1.JavaScript主要用来向H...
    99+
    2023-06-14
  • JavaScript中filter()方法有什么用
    小编给大家分享一下JavaScript中filter()方法有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!filter(...
    99+
    2022-10-19
  • JavaScript数组reduce()方法
    将某个值减去数组中的每个元素: var items = [5, 10, 15]; var reducer = function minus(minusSum, item) {    ...
    99+
    2022-11-12
  • 怎么用filter方法对数组元素进行过滤
    本篇内容介绍了“怎么用filter方法对数组元素进行过滤”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • JavaScript中find()和 filter()方法的区别小结
    目录前言JavaScript find() 方法JavaScript filter() 方法find() 和 filter() 的区别与共点直接上代码总结前言 JavaScript ...
    99+
    2022-11-12
  • JavaScript中如何使用 .map()、.reduce() 和 .filter()方法
    这篇文章主要为大家展示了“JavaScript中如何使用 .map()、.reduce() 和 .filter()方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何使用...
    99+
    2023-06-02
  • javascript数组中的findIndex方法
    目录1findIndex()简单介绍2编辑器3代码部分4运行结果5总结1findIndex()简单介绍 findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元...
    99+
    2022-11-13
  • JavaScript 数组迭代的方法
    这篇文章主要介绍“JavaScript 数组迭代的方法”,在日常操作中,相信很多人在JavaScript 数组迭代的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java...
    99+
    2022-10-19
  • JavaScript数组迭代的方法
    今天小编给大家分享一下JavaScript数组迭代的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2022-10-19
  • javascript数组去重的方法
    今天小编给大家分享一下javascript数组去重的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2022-10-19
  • JavaScript数组创建的方法
    这篇“JavaScript数组创建的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Ja...
    99+
    2022-10-19
  • 常用的JavaScript数组方法
    目录1、filter()2、forEach()3、some()4、every()5、reduce()6、合并数组1、filter() 语法: array.filter(functi...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作