js查找和筛选的几种方式

时间: 2019-11-29阅读: 506标签: 函数

find();

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

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

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

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

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

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


findIndex();

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

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

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

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

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

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


filter();

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

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

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

var arr = [1,2,3,4,5,6,7]
var newArr = arr.filter(item => item > 5);
console.log(newArr); //[6, 7]
array.filter(function(currentValue, index, arr),thisValue)
currentValue : 必需。当前元素
index:可选。当前元素的索引值
arr: 可选。当前元素所属的数组对象
thisValue: 可选。 传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值
//数组去重
var arr = [1,2,2,3,4,4,5,6,6,7,8,8,9];
var newArr = arr.filter((x, index,self)=>self.indexOf(x) === index)  
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]


indexOf();

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

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

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

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

stringObject.indexOf(searchvalue,fromindex)该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。  

var str= "aaa456ac";
console.log(arr.indexOf(‘b‘)); // -1 ,  字符b第一次出现的位置,没有,返回-1;
console.log(arr.indexOf(‘a‘)); // 0 ,  字符a第一次出现的位置,是 0
console.log(arr.indexOf(‘a‘, 3)); //  6,   从第四个字符位置开始往后继续查找,包含当前位置  
console.log(arr.indexOf(‘ac‘, 3)); //  6,   字符串ac第一次出现的位置
console.log(arr.lastIndexOf(‘a‘)); //  6,   字符串a最后出现的位置


some() ;

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

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

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

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

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

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

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


every() ;

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

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

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

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

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

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

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


JavaScript 循环

for - 多次遍历代码块

for/in - 遍历对象属性

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

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

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


For/In 循环

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

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

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";for (var key in person) {
    text += person[key] + "-";
}
console.log(text); // Bill-Gates-62

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

var arr = [20,40,50]; 

var text = "";
for (var key in arr ) {
    text += arr[key] + "-";
}
console.log(text); // 20-40-50


For/Of 循环

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

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

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


forEach();

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

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

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

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

map();

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

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

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

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

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

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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6690

JavaScript重构技巧-降低函数复杂度

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

JavaScript中的高阶函数

在 JavaScript 的学习过程中,我们可能或多或少地接触过高阶函数。那么,我们自己对此是否有一个明确的定义,或者说很熟练的掌握这些用法呢

工作中常用的 JavaScript 函数片段

查找数组最小,同上,不明白为什么要分成两个题目。Math.max 换成 Math.min,s>n?s:n 换成 s<n?s:n,(n,m)=>m-n 换成 (n,m)=>n-m,或者直接取最后一个元素

8个CSS函数的小技巧

CSS现在已经能实现比网站开发者预料到的更多的功能,并且随着时间的推移,样式表语言越来越强大,能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

你也许不知道的javascript高级函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter,Array.prototype.reduce 都是一些高阶函数。

Js中函数式编程

最近和做技术的朋友聊天的时候,发现自己居然不能将函数式编程思想讲清楚,于是做一次复习,常常都能听到这么一句话:在 JavaScript 中,函数是“一等公民”,这句话到底意味着什么?

理解与使用JavaScript中的回调函数

在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回。

JavaScript中的构造函数

ECMAScript 中,构造函数与其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过 new 操作符来调用

工作中常用的JavaScript函数片段

返回已 size 为长度的数组分割的原数组;检查数组中某元素出现的次数;扁平化数组默认 depth 全部展开;对比两个数组并且返回其中不同的元素

10个非常实用的Js工具函数

生成一周时间new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环,类型判断判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广