<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script>

        // What you have

        var officers = [

            {id:1,name:'andy',age:15,weight:60},

            {id:2,name:'sam',age:20,weight:50},

            {id:3,name:'julia',age:15,weight:40},

            {id:4,name:'tom',age:25,weight:30}

        ]

        // What you need

        // [1,2,3,4]

        // forEach()

        // var officersIds = [];

        // officers.forEach(val => {

        //     console.log(val)

        //     officersIds.push(val.id)

        // })

        // console.log(officersIds)

        // map

        const officersIds = officers.map(val=>val.id)

        // console.log(officersIds)

        // filter

        const teenager = officers.filter(officers => officers.age < 18)

        console.log(teenager)

        // {id: 1, name: "andy", age: 15, weight: 60}

       // {id: 3, name: "julia", age: 15, weight: 40}

        const adult = officers.filter(officers => officers.age > 18)

        console.log(adult)

        // {id: 2, name: "sam", age: 20, weight: 50}

        // {id: 4, name: "tom", age: 25, weight: 30}

        // reduce  可以直观的返回数组里面指定的一个值或者对象

        // 所有职员的体重

        const totalWeight = officers.reduce((param1,param2) => param1+param2.weight,0)

        console.log(totalWeight) //

    </script>

</head>

<body>

</body>

</html>

js数组includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于 ES7 ，但 Babel 转码器已经支持。

[1, 2, 3].includes(2); // true

[1, 2, 3].includes(4); // false

[1, 2, NaN].includes(NaN); // true

该方法的第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4 ，但数组长度为 3 ），则会重置为从 0 开始。

[1, 2, 3].includes(3, 3); // false

[1, 2, 3].includes(3, -1); // true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {

// ...

}

indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1 ，表达起来不够直观。二是，它内部使用严格相当运算符（ === ）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)

// -1

includes使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN)

// true

JS中map()/some()/every()/filter()的区别

js的Array对象有map、some、every、filter几个方法都能对数组中的每个对象进行处理，但是他们之间的功能又各有差别，所以在记下。

map()：通过指定函数处理数组的每个元素，并返回处理后的数组。

1 var numbers = [4, 9, 16, 25];

2

3 function myFunction() {

4      console.log(numbers.map(Math.sqrt));

5 }

输出结果为：

2,3,4,5

map() 方法会将数组中元素依次传入方法中，并将方法的返回结果组成新数组返回。

传入的function可以有自己的三个形参，currentValue, index,arr分别代表当前元素，元素索引，元素所属数组对象；其中currentValue是必须的。

注意：map不会改变原数组，map不会检查空数组

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

var ages = [3, 10, 18, 20];

function checkAdult(age) {

    return age >= 18;

}

function myFunction() {

    console.log(ages.some(checkAdult));

}

写成简单的es6的方式：

        var ages = [3,10,18,20]

        const need = ages.some(age=>age>=18)

        console.log(need) // true

输出为：true

some方法会依次执行数组的每个元素；

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

注意：some不会改变原数组，some不会检查空数组

every：用于检测数组所有元素是否都符合指定条件（通过函数提供）

var ages = [32, 33, 16, 40];

function checkAdult(age) {

    return age >= 18;

}

function myFunction() {

    console.log(ages.every(checkAdult));

}

写成简单的es6方式：

        var ages = [3,10,18,20]

        const need2 = ages.every(age=>age>=18)

        console.log(need2)// false

输出结果：false

every和some正好相反：

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

注意：some不会改变原数组，some不会检查空数组

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

var ages = [32, 33, 16, 40];

function checkAdult(age) {

    return age >= 18;

}

function myFunction() {

    console.log(ages.filter(checkAdult));

}

写成简单的es6形式：

        var ages = [3,10,18,20]

        const need2 = ages.filter(age=>age>=18)

        console.log(need2)// [18,20]

filter会根据函数中的筛选条件将返回的结果组成一个新的数组并返回

.map() .filter() .reduce() .includes() .some() .every()的用法的更多相关文章

  1. python 内置函数 map filter reduce lambda

    map(函数名,可遍历迭代的对象) # 列组元素全加 10 # map(需要做什么的函数,遍历迭代对象)函数 map()遍历序列得到一个列表,列表的序号和个数和原来一样 l = [2,3,4,5,6, ...

  2. 数组的高阶方法map filter reduce的使用

    数组中常用的高阶方法: foreach    map    filter    reduce    some    every 在这些方法中都是对数组中每一个元素进行遍历操作,只有foreach是没有 ...

  3. 如何在python3.3用 map filter reduce

    在3.3里,如果直接使用map(), filter(), reduce(), 会出现 >>> def f(x): return x % 2 != 0 and x % 3 != 0  ...

  4. Swift map filter reduce 使用指南

    转载:https://useyourloaf.com/blog/swift-guide-to-map-filter-reduce/ Using map, filter or reduce to ope ...

  5. python常用函数进阶(2)之map,filter,reduce,zip

    Basic Python : Map, Filter, Reduce, Zip 1-Map() 1.1 Syntax # fun : a function applying to the iterab ...

  6. Python map filter reduce enumerate zip 的用法

    map map(func, list) 把list中的数字,一个一个运用到func中,常和lambda一起用. nums = [1, 2, 3, 4, 5] [*map(lambda x: x**2, ...

  7. lambda,map,filter,reduce

    lambda 编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数.返回一个函数对象. func = lambda x,y:x+y fu ...

  8. Python3中高阶函数lambda，filter，map，reduce，zip的详细用法

    在Python里有五大高阶函数,他们分别是lambda()匿名函数,filter()筛选函数,map()函数,reduce()函数,zip()函数.下面就让我们来详细的了解一下这五种函数的具体用法吧. ...

  9. 07 Python中zip(),map(),filter(),reduce()用法

    一. zip() zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 ...

随机推荐

  1. 【JZOJ4894】【NOIP2016提高A组集训第16场11.15】SJR的直线

    题目描述 数据范围 解法 考虑逐次加入每一条直线. 对于当前已加入的直线集合L,现在要新加入一条直线l. 那么它产生的贡献,与平行线有关. 对于任意三条直线,如果其中任意两条平行,那么将不做贡献. 所 ...

  2. Hibernate 数据库方言配置；no dialect mapping for jdbc type:-9；生僻字

    最近因为生僻字在界面上显示为?: 主要原因是该字段在数据库中就是varchar类型,显示的就是?:如䶮(yan):现把varchar类型改为nvarchar类型:数据中能够正常显示: 但是Spring ...

  3. hdu3917 最大权闭合图

    题意:有N个城市,M个公司.现在需要建立交通是获得的利益最大.如果2个公司A,B, A修的路为Xa->Ya,B的路为Xb->Yb,如果Ya==Xb,那么这2个公司有关系. 对于每个公司都有 ...

  4. Directx教程(27) 简单的光照模型(6)

    原文:Directx教程(27) 简单的光照模型(6)      从myTutorialD3D11_15到myTutorialD3D11_19的工程中,我们都只有一个光源,光源的位置在LightCla ...

  5. nodeJs学习-11 multer中间件，解析post文件，上传文件

    const express=require('express'); const bodyParser=require('body-parser'); const multer=require('mul ...

  6. core文件相关

    1:当一个程序崩溃时,在进程当前工作目录的core文件中复制了该进程的存储图像.core文件仅仅是一个内存映象(同时加上调试信息),主要是用来调试的. 当程序接收到以下UNIX信号会产生core文件: ...

  7. 不撞南墙不回头———深度优先搜索（DFS）Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  8. 二维数组初始化 遍历 动态赋值 内存图 Day08

    package com.sxt.arraytest3; /* * 二维数组 */ public class TestArray { public static void main(String[] a ...

  9. qt 中画线时如何设置笔的颜色和填充

    在上一次介绍中已经实现了自定义控件,并把Widget 放入了主界面中,画了一个圆,具体可参考“QT 自定义窗口” 下面我们介绍一下如何设置画笔颜色和所画图形的填充颜色. 画笔颜色: void Circ ...

  10. 20190528-JavaScriptの打怪升级旅行 { 语句 [ 赋值 ，数据 ] }

    写在前面的乱七八糟:今天考了试,emmm很基础的题,还是Mrs房的面试题让人绝望啊┓( ´∀` )┏,补了很多知识,很综合的题,坑也很多,总的来说,查漏补缺,其实是啥都缺~ 今天打的小BOSS主要是数 ...