博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端那些事之javascript上---数组
阅读量:5796 次
发布时间:2019-06-18

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

hot3.png

数组中的API

map()

  • map ()方法会迭代数组中的每一个元素,并根据回调函数来处理每一个元素,最后返回一个新数组。注意,这个方法不会改变原始数组
var timesFour = oldArray.map(function(val){  return val * 4;});例如:使用 map 方法来为 oldArray 中的每一项增加3,并且在 newArray 中保存它们。 oldArray 不应该被改变。var oldArray = [1,2,3,4,5];var newArray = oldArray.map(function(val){          return val+3;   });
  • 易犯错误

    通常情况下,map 方法中的 callback 函数只需要接受一个参数(很多时候,自定义的函数形参只有一个),就是正在被遍历的数组元素本身。

    但这并不意味着 map 只给 callback 传了一个参数(会传递3个参数)。这个思维惯性可能会让我们犯一个很容易犯的错误。

// 下面的语句返回什么呢:["1", "2", "3"].map(parseInt);// 你可能觉的会是[1, 2, 3]// 但实际的结果是 [1, NaN, NaN]// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN./*//应该使用如下的用户函数returnIntfunction returnInt(element){  return parseInt(element,10);}["1", "2", "3"].map(returnInt);// 返回[1,2,3]*/

reduce()

  • reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少。正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码。?var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10

reduce()接受一个函数,函数有四个参数,分别是

  • 上一次的值;
  • 当前值;
  • 当前值的索引;
  • 数组;
例如:让数组中的每一项相加或者是相减[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue;//让数组的每一项相加 return previousValue - currentValue;//让数组的每一项相减});return value:10//相加其中:index为1,2,3,4array:【0,1,2,3,4】

reduce 方法有一个可选的第二参数,它可以被用来设置累加器的初始值。如果没有在这定义初始值,那么初始值将变成数组中的第一项,而 currentVal 将从数组的第二项开始。

var singleVal = array.reduce(function(previousVal, currentVal) {  return previousVal - currentVal;}, 0);例如:[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue;},5);其中:上一次的值previousValue:5,0,1,3,6当前值currentValue:0,1,2,3,4index:0,1,2,3,4array:0,1,2,3,4return value:5,6,8,11,15//最后结果是15

reduce()除了累加,还有扁平化一个二维数组:

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b);}, []);// flattened == [0, 1, 2, 3, 4, 5]

filter()过滤

  • filter 方法用来迭代一个数组,并且按给出的条件过滤出符合的元素。
  • filter 方法传入一个回调函数,这个回调函数会携带一个参数,参数为当前迭代的项(我们叫它 val )。
  • 回调函数返回 true 的项会保留在数组中,返回 false 的项会被过滤出数组。
使用 filter 来创建一个新数组,新数组的值是 oldArray 中值小于6的元素。不许改变原数组 oldArrayvar oldArray = [1,2,3,4,5,6,7,8,9,10];var newArray = oldArray.filter(function(val){  return  val<6;});

sort()

  • 使用 sort 方法,你可以很容易的按字母顺序或数字顺序对数组中的元素进行排序。
  • 数把元素按照从小到大的顺序进行排列:
var array = [1, 12, 21, 2];array.sort(function(a, b) {  return a - b;});
  • 数把元素按照从大到小的顺序进行排列:
var array = [1, 12, 21, 2];array.sort(function(a,b){  return -a + b;});

reverse()使用 reverse 方法来翻转数组。

var array = [1,2,3,4,5,6,7];var newArray = [];newArray = array.reverse();

concat()

  • concat 方法可以用来把两个数组的内容合并到一个数组中。
  • concat 方法的参数应该是一个数组。参数中的数组会拼接在原数组的后面,并作为一个新数组返回。
var oldArray = [1,2,3];var newArray = [];var concatMe = [4,5,6];newArray = oldArray.concat(concatMe);

split 方法按指定分隔符将字符串分割为数组

  • 给 split 方法传递一个参数,这个参数将会作为一个分隔符。
split 方法来把字符串 string 分割为数组 arrayvar string = "Split me into an array";var array = [];array = string.split(" ");

join() 方法来把数组转换成字符串

var joinMe = ["Split","me","into","an","array"];var joinedString = '';joinedString = joinMe.join(' ');

转载于:https://my.oschina.net/yongxinke/blog/817278

你可能感兴趣的文章
ACM-ICPC 2018 徐州赛区网络预赛 D. Easy Math
查看>>
软件测试作业3
查看>>
用php做省份的三级联动 附带数据库
查看>>
css 实现圆形头像
查看>>
webpack4 系列教程(七): SCSS提取和懒加载
查看>>
mysql中给表添加字段
查看>>
Wormholes
查看>>
uva 11181 Probability|Given
查看>>
ajax 分页 步骤和代码
查看>>
Java IO(二)
查看>>
java 小结3 hashcode和equals I/o问题
查看>>
BZOJ 1036 树的统计
查看>>
4、加载:Loading
查看>>
Program to Print Pascal Triangle
查看>>
matlab 标识符查找过程
查看>>
知识点(杂)
查看>>
netstat 查看本机开放端口
查看>>
串口编程-485
查看>>
Shell函数参数
查看>>
讯为iTop4412嵌入式开发板学习之-------前言
查看>>