博客
关于我
① 浅谈JS的Array对象方法
阅读量:670 次
发布时间:2019-03-16

本文共 3183 字,大约阅读时间需要 10 分钟。

写在前面:

语法:`array.method(function(currentValue,index,arr),thisValue)`

每个数组元素都会调用function()函数,都会给function函数传入当前数组元素值、索引、当前数组,函数通过形参个数选择处理,当形参个数为0时,默认处理currentvalue

//两种写法://1将函数写在方法内部作为参数number.map(function(currentValue,index,arr){   return currentValue * currentValue});//2 将函数独立声明,然后在方法内部直接通过名字使用,原因见开篇第一句。function checkAdult(currentValue,index,arr) {       return currentValue>= document.getElementById("ageToCheck").value;} ages.filter(checkAdult);

3 方法的两个参数,第一个是函数,为必须参数。第二是thisValue,为可选参数。

在第一个必选参数的函数中,大部分为三个参数,第一个为必选项,是当前元素值,第二个是可选,为当前元素的索引,第三个为可选项,为当前元素所在数组。

function()函数必选    --> currentValue参数必选  为当前数组元素值                         -->  index 参数可选     为当前数组元素索引                         -->  arr参数可选        为当前元素所在数组    thisValue可选

1JavaScript Array map() 方法

语法:

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

参数说明:

见开头
返回一个新数组,数组中的元素为原始数组元素调用函数后的处理值.

//返回原始数组中的平方根 let number = [4,9,16,25];  function myFunction(){           x=document.getElementById("demo");        x.innerHTML = number.map(Math.sqrt);//function 函数为Math.sqrt,参数默认为数组元素值     // x.innerHTML = number.map(function(currentValue,index,arr){return currentValue * currentValue});结果同上    }

2 JavaScript Array forEach()方法

  • forEach()的时候传递的那个函数,会根据数组的长度执行
  • 数组的长度是多少,这个函数function()就会执行多少回
    语法
    array.forEach(function(currentValue,index,arr),thisValue);
    参数说明:
    见开头
    功能
    遍历数组以对数组元素进行处理
var arr = [1, 2, 3];// 使用 forEach 遍历数组arr.forEach(function (item, index, arr) {     // item 就是数组中的每一项  // index 就是数组的索引  // arr 就是原始数组  console.log('数组的第 ' + index + ' 项的值是 ' + item + ',原始数组是', arr)})

3 JavaScript Array filter()方法

功能:
和 map 的使用方式类似,按照我们的条件来筛选数组
把原始数组中满足条件的筛选出来,filter()方法创建一个新的数组,返回新的数组,并不改变原始数组
语法:

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

参数说明:

见开头
返回值:
返回数组,包含了符号条件的所有元素,若没有符合条件的则返回为空数组
代码示例:

点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。

最小年龄:

所有大于指定数组的元素有?

4 JavaScript Array find()方法

作用:查找数组中第一个满足条件的元素

语法: array.find(function(currentValue,index,arr),thisValue);

参数说明:
见开头

返回值:

当数组中的元素在测试条件时返回true时 find()返回符合条件的元素,之后的值不会再调用函数

当测试条件返回false find()返回undefined

代码示例:

var ages = [3,10,19,20];    function checkAdult(item,index,arr){               return item>=2;     } // find()方法返回通过测试的数组的第一个元素的值 //  find()方法 为数组中的每个元素都调用一次函数执行  function myFun(){       document.getElementById("demo").innerHTML = ages.find(checkAdult);    }

5 JavaScript Array findIndex()方法

作用:查找数组中第一个满足条件的元素下标

语法: array.findIndex(function(currentValue,index,arr),thisValue);

参数说明:
见开头

返回值:

当数组中的元素在测试条件时返回true时 find()返回符合条件的元素下标,之后的值不会再调用函数

当测试条件返回false find()返回-1

代码示例:

var ages = [3, 10, 18, 20];function checkAdult(item,index,arr){   	return item>=18;		}// 输出2function myFunction() {   document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);	}

6 JavaScript Array reduce()方法

语法: arr.reduce(function(total,item,index,arr),initalValue)

初次调用时,total是数组中第一个元素,item从数组下标1开始的数组元素值,index是从数组下标1开始的数组元素下标 ,arr是当前元素所在的数组

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

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

参数 描述

function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:
参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

转载地址:http://bzaqz.baihongyu.com/

你可能感兴趣的文章
mabatis 中出现< 以及> 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>