find();

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

  1. [1,2,3,4,5,6].find((n) => n < 5)
  2. //找出数组中第一个大于5 的成员
  3. //
  1. array.find(function(currentValue, index, arr),thisValue)
  2. currentValue 必需。当前元素
  3. index:可选。当前元素的索引值
  4. arr: 可选。当前元素所属的数组对象
  5. thisValue: 可选。 传递给函数的值一般用 "this" 值。
  6. 如果这个参数为空, "undefined" 会传递给 "this"

findIndex();

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

  1. [3,10,18,19].findIndex((n) => n >= 18)
  2. //返回符合条件的值的位置(索引)
  3. //
  1. array.findIndex(function(currentValue, index, arr),thisValue)
  2. currentValue 必需。当前元素
  3. index:可选。当前元素的索引值
  4. arr: 可选。当前元素所属的数组对象
  5. thisValue: 可选。 传递给函数的值一般用 "this" 值。
  6. 如果这个参数为空, "undefined" 会传递给 "this"

filter();

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。(返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。)

注意: filter() 不会改变原始数组。

注意: filter() 不会对空数组进行检测。

  1. var arr = [1,2,3,4,5,6,7]
  2. var newArr = arr.filter(item => item > 5);
  3. console.log(newArr); //[6, 7]
  1. array.filter(function(currentValue, index, arr),thisValue)
  2. currentValue 必需。当前元素
  3. index:可选。当前元素的索引值
  4. arr: 可选。当前元素所属的数组对象
  5. thisValue: 可选。 传递给函数的值一般用 "this" 值。
  6. 如果这个参数为空, "undefined" 会传递给 "this"
  1. //数组去重
  2. var arr = [1,2,2,3,4,4,5,6,6,7,8,8,9];
  3. var newArr = arr.filter((x, index,self)=>self.indexOf(x) === index)
  4. console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
  1. // 1.筛选出两个数组不同的元素
  2.  
  3. let list= [];
  4. list = this.array1.filter(item=>{
  5. return array2.indexOf(item) === -
  6. });
  7.  
  8. // 2.筛选出两个数组相同的元素
  9.  
  10. let list= [];
  11. list = this.array1.filter(item=>{
  12. return array2.indexOf(item) !== -
  13. })

indexOf();

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

注释:indexOf() 方法对大小写敏感!

注释:如果要检索的字符串值没有出现,则该方法返回 -1。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

  1. stringObject.indexOf(searchvalue,fromindex)
  2. 该方法将从头到尾地检索字符串 stringObject,看它是否含有子串
  3. searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没
  4. 有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue
  5. 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
  1. var str= "aaa456ac";
  2. console.log(arr.indexOf('b')); // -1 , 字符b第一次出现的位置,没有,返回-1;
  3. console.log(arr.indexOf('a')); // 0 , 字符a第一次出现的位置,是 0
  4. console.log(arr.indexOf('a', 3)); // 6, 从第四个字符位置开始往后继续查找,包含当前位置
  5. console.log(arr.indexOf('ac', 3)); // 6, 字符串ac第一次出现的位置
  1. console.log(arr.lastIndexOf('a')); // 6, 字符串a最后出现的位置
  1.  

some() ;

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

array.some(function(currentValue,index,arr),thisValue)

  1. var arr = [1,2,3,4,5,6,7]
  2. var isHas = arr.some(item => item > 5);
  3. console.log(isHas ); // true
  4. var isHas2 = arr.some(item => item > 7);
  5. console.log(isHas2 ); // false

every() ;

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

array.every(function(currentValue,index,arr), thisValue)

  1. var arr = [1,2,3,4,5,6,7]
  2. var isHas = arr.every(item => item > 5);
  3. console.log(isHas ); // false
  4. var isHas2 = arr.every(item => item < 8);
  5. console.log(isHas2 ); // true

JavaScript 循环

for - 多次遍历代码块

for/in - 遍历对象属性

while - 当指定条件为 true 时循环一段代码块

do/while - 当指定条件为 true 时循环一段代码块

  1. for (i = 0; i < 5; i++) {
  2. text += "数字是 " + i + "<br>";
  3. console.log(text); // 0,1,2,3,4
  4. }

For/In 循环

JavaScript for/in 语句遍历对象的属性:

for/in 遍历对象时, key表示对象的属性;

  1. var person = {fname:"Bill", lname:"Gates", age:62};
  2.  
  3. var text = "";for (var key in person) {
  4. text += person[key] + "-";
  5. }
  6. console.log(text); // Bill-Gates-62

for/in 遍历数组时, key表示数组的index索引;

  1. var arr = [20,40,50];
  2.  
  3. var text = "";
  4. for (var key in arr ) {
  5. text += arr[key] + "-";
  6. }
  7. console.log(text); // 20-40-50

For/Of 循环

for of 循环是 Es6 中新增的语句,用来替代 for in 和 forEach,它允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等

可迭代(Iterable data)的数据结构,注意它的兼容性。

  1. let arr = [1,2,3];
  2. for(let i of arr){
  3. console.log(i)
  4. }
  5. //
  6. //
  7. //

forEach();

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

array.forEach(function(currentValue, index, arr), thisValue)

  1. var arr = [1,2,3,4] ;
  2. arr.forEach(function(item,index, myarr){
  3. console.log(item);
  4. //
  5. //
  6. //
  7. //
  8. // myarr: [1,2,3,4]
  9. });

map();

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

array.map(function(currentValue,index,arr), thisValue)

  1. var numbers = [4, 9, 7, 5];
  2.  
  3. var newArr= numbers .map(function (item) { //接收新数组
  4. return item * 2;
  5. });
  6.  
  7. console.log(newArr); // [8, 18, 14, 10];

关于js查找和筛选和循环的几种方式的更多相关文章

  1. 盘点用jQuery框架实现“for循环”的四种方式!

    摘要:分享在jQuery高级开发中对元素标签体的遍历常用的几种方法. 本文分享自华为云社区<盘点用jQuery框架实现"for循环"的四种方式!>,原文作者:灰小猿 . ...

  2. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  3. js异步执行 按需加载 三种方式

    js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...

  4. JS 中对变量类型判断的几种方式

    文章整理搬运,出处不详,如有侵犯,请联系~   数据类型判断和数据类型转换代码工具 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boo ...

  5. React.js入门笔记 创建hello world 的6种方式

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...

  6. javascript(js)创建对象的模式与继承的几种方式

    1.js创建对象的几种方式 工厂模式 为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式. function createPerson(na ...

  7. php数组循环的三种方式

    PHP 的遍历数组的三种方式:for循环.foreach循环.while.list().each()组合循环 PHP当中数组分为:索引数组[转换成json是数组]和关联数组[转换成json是对象] f ...

  8. JS 循环的两种方式

    // 1.for循环 for (var i = 0; i <= 10; ++ i) { console.log(i); } // 2.while循环 var i = 0; while (i &l ...

  9. sql 循环语句几种方式

    --第一   declare @orderNum varchar(255) create table #ttableName(id int identity(1,1),Orders varchar(2 ...

随机推荐

  1. screen的安装使用

    安装 yum install -y screen [root@instance-- ~]# screen --help Use: screen [-opts] [cmd [args]] or: scr ...

  2. 51 Nod 1282 时钟 (循环中的最小表示+哈希)

    1282 时钟  题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有N个时钟,每个时钟有M个指针,P个刻度.时钟是圆形 ...

  3. CDOJ 1264 人民币的构造 区间问题+数论

    人民币的构造 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit Status ...

  4. git命令行指南

    Git 常用命令 git init here -- 创建本地仓库(repository),将会在文件夹下创建一个 .git 文件夹,.git 文件夹里存储了所有的版本信息.标记等内容 git remo ...

  5. ISO15765

    常用的缩略词 ISO15765网络层服务 协议功能 a)发送/接收最多4095个字节的数据信息: b)报告发送/接收完成状态. 网络层内部传输服务,CAN总线上的数据帧没帧只能传输8个字节,ISO 为 ...

  6. CodeForces 724C Ray Tracing(碰撞类,扩展gcd)

    又一次遇到了碰撞类的题目,还是扩展gcd和同余模方程.上次博客的链接在这:http://www.cnblogs.com/zzyDS/p/5874440.html. 现在干脆解同余模直接按照套路来吧,如 ...

  7. Hands-on ML and TF Chapter16 Reinforcement Learning

    Policy Granients import tensorflow as tf reset_graph() n_inputs = 4 n_hidden = 4 n_outputs = 1 learn ...

  8. 全链路跟踪skywalking简介

    该文章主要包括以下内容: skywalking的简介 skywalking的使用,支持多种调用中间件(httpclent,springmvc,dubbo,mysql等等) skywalking的tra ...

  9. 移动端隐藏scroll滚动条::-webkit-scrollbar

    ::-webkit-scrollbar {/*隐藏滚轮*/ display: none; } CSS3自定义滚动条样式 -webkit-scrollbar 前言 webkit支持拥有overflow属 ...

  10. LeetCode 147. 对链表进行插入排序(Insertion Sort List)

    题目描述 对链表进行插入排序. 插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链 ...