JS数组方法some、every和find的使用详情

目录
  • 1、some
  • 2、every
  • 3、find

1、some

在MDN中这样定义：some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

简而言之就是：它对数组中的每一项进行校验，只要有一项通过了就是true。

  • 它只会返回true或false
  • 它会对数组中的每一项进行检测，千万不要在some里面进行if else操作
  • 不要在return后面写true或false，return后面跟的是你的条件

最近做后台管理系统遇到一个需求：弹出一个Dialog，只要这个Dialog里面的input有一个有值，就可以；否则提示至少要有一个值。

数据结构如下，使用some

let arr = [
    { value: "apple" },
    { value: "" },
    { value: "banana" },
    { value: "orange" },
    { value: "" },
]
let res = arr.some(item=>{
    return item.value !== ""
})
console.log(res);

在这里，只要有值，res就为true，所以我们可以在res为true时进行下一步操作。

if (res) {
    console.log("数组有值");
} else {
    console.log("至少输入一个值");
}

2、every

every的使用方法和some一样。 在MDN中：every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

简而言之就是：它对数组中的每一项进行校验，只要有一项不通过它就是false。
注意事项与some一样。 如果要求每一个输入框中都必须有值时，

let arr2 = [
    { value: "apple" },
    { value: "" },
    { value: "banana" },
    { value: "orange" },
    { value: "er" },
]

var res2 = arr2.every(item => {
    return item.value !== ""
})
console.log(res2);

在这里，只要有一项没有值，res2就为false。

if (!res2) {
    //res2为真，则走else；为假，则走if
    console.log("输入框有空值");
} else {
    console.log("输入框没空值");
    console.log("进行下步操作");
}

3、find

在MDN中，find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
注意：find()和上面两个不一样，它返回的是值，而且是第一个满足条件的值

let arr3 = [
    { value: "" },
    { value: "" },
    { value: "" },
    { value: "" },
    { value: "apple" },
]
var res3 = arr3.find(item => {
    return item.value !== ""
})
console.log(res3);

可以根据find的返回值是否为undefined来判断item中value，

if (res3) {
    //res3有值，在这里进行下一步操作。
    console.log("数组中至少有一个值");
} else {
    //res3为undefined
    console.log("数组为空！");
}

到此这篇关于JS数组方法some、every和find的使用详情的文章就介绍到这了,更多相关JS数组方法some、every和find的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js 数组 find,some,filter,reduce区别详解

    区分清楚Array中filter.find.some.reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中. Array.find Array.find 返回一个对象(第一个满足条件的对象)后停止遍历 const arrTest = [ { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "b" }, { id: 4, name: "c" }

  • 详解JavaScript中的every()方法

    JavaScript 数组中的每个方法测试数组中的所有元素是否经过所提供的函数来实现测试. 语法 array.every(callback[, thisObject]); 下面是参数的详细信息: callback : 函数用来测试每个元素 thisObject : 对象作为该执行回调时使用 返回值: 返回true,如果此数组中的每个元素满足所提供的测试函数. 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚

  • 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

    1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { return d * 2; }); console.log(other); // print: [2, 4, 6, 8, 10] 2.filter 有返回值,返回一个符合func条件的元素数组 let list = [1, 2, 3, 4, 5]; let other = list.filter((d,

  • jquery.fileEveryWhere.js 一个跨浏览器的file显示插件

    jquery.fileEveryWhere.js 一个跨浏览器的file显示插件

    先来看看input type="file"在chrome,ie,firefox这三个浏览器下表情各异吧. chrome像是button+label组合,看起差异最大. ff和ie,是text+button的组合,就外形来看,firefox更标准,事实上firefox存在两个潜在问题: 1,firefox对type="file" 的input的width定义目前是不支持的(但是FF支持size属性,可以给size设置一个值,来控制上传框的大小,至于这个size到底是多

  • js数组方法reduce经典用法代码分享

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要单挑reduce方法,一个原因是我对这个方法掌握不够,不能够用到随心所欲.另一个方面,我也感觉到了这个方法的庞大魅力,在许多的场景中发挥着神奇的作用. 理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. a

  • JS数组方法concat()用法实例分析

    JS数组方法concat()用法实例分析

    本文实例讲述了JS数组方法concat()用法.分享给大家供大家参考,具体如下: 数组方法concat() concat()可以基于当前数组中的所有项创建一个新数组.即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组. 没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本. 如果传递的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中 如果传递的值是不是数组,这些值会被简单的添加到数组的末尾 注意:该方法不会改变先后的数

  • JS数组方法reverse()用法实例分析

    JS数组方法reverse()用法实例分析

    本文实例讲述了JS数组方法reverse()用法.分享给大家供大家参考,具体如下: reverse()方法 定义:反转数组项的顺序 语法: arr.reverse() 参数:/ 返回值:返回该数组的引用. 代码如下: var arr1 = [1, 2, 3, 4, 5, 6]; var arr2 = ['A', 'B', 'C']; var arr3 = ['AAA', 'BBB', 'CCC']; var arr4 = ['Hello', 'World']; Array.prototype.c

  • JS数组方法shift()、unshift()用法实例分析

    JS数组方法shift()、unshift()用法实例分析

    本文实例讲述了JS数组方法shift().unshift()用法.分享给大家供大家参考,具体如下: shift()方法 1. 定义:从数组中删除第一个元素,并返回该元素的值.此方法更改数组的长度. 2. 语法: arr.shift() 3. 参数:/ 4. 返回值:从数组中删除的元素(当数组为空时返回undefined). 代码如下: 方法一: var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; var arr2 = []; Array.prototype.copyS

  • JS数组方法push()、pop()用法实例分析

    JS数组方法push()、pop()用法实例分析

    本文实例讲述了JS数组方法push().pop()用法.分享给大家供大家参考,具体如下: push()方法 1. 定义:向数组的末尾添加一个或更多元素,并返回新的长度. 2. 语法: arr.push(element1, ..., elementN) 3. 参数:可以接收任意个数量的参数 4. 返回值:返回修改后数组的长度. var arr1 = [1, 2, 3, 4]; var arr2 = ["C", "B", "A"]; Array.pr

  • JS数组方法join()用法实例分析

    JS数组方法join()用法实例分析

    本文实例讲述了JS数组方法join()用法.分享给大家供大家参考,具体如下: join()方法 定义和用法: join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. 语法:arrayObject.join(separator) 参数:可选,指定要使用的分隔符. 注:不给join()方法传入任何值,或者给它传入undefined,则使用逗号作为分隔符. IE7及更早版本会错误的使用字符串"undefined"作为分隔符. 数组中的某一项是null或u

  • JS数组方法slice()用法实例分析

    JS数组方法slice()用法实例分析

    本文实例讲述了JS数组方法slice()用法.分享给大家供大家参考,具体如下: slice()方法 slice(),它能基于当前数组中的一个或多个创建一个新数组.可以接受一或两个参数,即要返回的起始和结束位置. 一个参数:slice()方法返回从该参数指定位置开始到当前数组末尾的所有项. 两个参数:该方法返回起始和结束位置之间的项(但不包括结束位置的项). slice不会影响原始数组. 结束位置小于起始位置,返回空数组. 可以接受负数,用数组长度加上该负数来确定相应位置. var arr = [

  • JS数组方法reduce的用法实例分析

    本文实例讲述了JS数组方法reduce的用法.分享给大家供大家参考,具体如下: 数组方法 reduce 用来迭代一个数组,并且把它累积到一个值中. 使用 reduce 方法时,你要传入一个回调函数,这个回调函数的参数是一个 累加器 (比如例子中的 previousVal) 和当前值 (currentVal). reduce 方法有一个可选的第二参数,它可以被用来设置累加器的初始值.如果没有在这定义初始值,那么初始值将变成数组中的第一项,而 currentVal 将从数组的第二项开始. 使用 re

  • JS数组方法some、every和find的使用详情

    JS数组方法some、every和find的使用详情

    目录 1.some 2.every 3.find 1.some 在MDN中这样定义:some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试.它返回的是一个Boolean类型的值. 简而言之就是:它对数组中的每一项进行校验,只要有一项通过了就是true. 它只会返回true或false 它会对数组中的每一项进行检测,千万不要在some里面进行if else操作 不要在return后面写true或false,return后面跟的是你的条件 最近做后台管理系统遇到一个需求:弹出一个Dia

  • 详解JS数组方法

    目录 一.会修改原数组 1.push(): 2.pop(): 3.shift(): 4.unshift(): 5.splice(): 6.sort(): 7.reverse(): 二.不修改原数组 1.toString(): 2.join(): 3.concat(): 4.slice() : 5.map(): 6.forEach(): 7.filter(): 8.every(): 9.some(): 10.reduce(): 总结 一.会修改原数组 1.push(): (在数组结尾处)向数组添加

随机推荐