博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECMAScript 5 新特性 vol.2 - Array
阅读量:6682 次
发布时间:2019-06-25

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

类型判断

Array.isArray方法可以判断目标是否为数组:

var result = Array.isArray( [1, 2, 3] )  console.log(result)  // true

索引

ES5标准中,Array对象终于加入了indexOflastIndexOf方法,它们能找出元素所在下标值。国际惯例,indexOf从前往后找,lastIndexOf从后往前找:

var array = ['a','b','c','d','a','b','c','d']  array.indexOf('c')      // -> 2  array.lastIndexOf('c')  // -> 6  array.indexOf('c', 5)      // -> 6,从array[5]的'a'开始往后找  array.lastIndexOf('c', 5)  // -> 2,从array[5]的'a'开始往前找

迭代

Array还添加了一系列迭代方法,以适应越来越多的数据处理需求,它们包括forEachmapfiltereverysomereducereduceRight

forEach

forEach遍历数组中每个元素,无返回值,是for( var i = 0; i < array.length; i++ )的简洁版,可读性更强:

var array = ['a','b','c','d','e']  array.forEach(function(value, index, array){    console.log('value: ' + value + ' | index: ' + index)  })    // -> value: a | index: 0  // -> value: b | index: 1  // -> value: c | index: 2  // -> value: d | index: 3  // -> value: e | index: 4

被迭代的数组会作为回调的第三个参数传入。

还可以传入thisObj来绑定回调的this

var array = ['a', 'b', 'c', 'd', 'e']  var thisObj = { name: 'kid' }  array.forEach(function(value){    console.log(this)  }, thisObj )    // -> Object { name: 'kid' }  // -> Object { name: 'kid' }  // -> Object { name: 'kid' }  // -> Object { name: 'kid' }  // -> Object { name: 'kid' }

所有这些新加入的迭代方法,都可以拿到indexarray参数,也可以绑定this,所以之后不再赘述。

map

map将数组映射为一个新数组:

var array = ['a','b','c','d','e']  var new_array = array.map(function(value){    return value + '!'  })  console.log(array)  // -> ['a','b','c','d','e']  console.log(new_array)  // -> ['a!','b!','c!','d!','e!']

最终会返回一个新数组,原数组保持不变。

filter

filter设置关卡、过滤元素:

var array = ['a','b','c','d','e']  var new_array = array.filter(function(value){    if( value !== 'b' && value !== 'd' ){      // 返回true表示通关      return true    }  })  console.log(array)  // -> ['a','b','c','d','e']    console.log(new_array)  // -> ['a','c','e']

最终会返回一个新数组,由原数组中通关的元素构成。

every

every类似“逻辑与”运算,用来判断所有元素是否都符合某个规则,只有每次迭代都返回trueevery整体才返回true,比如检查数组中是否都为奇数:

function isOdd(value){    return value % 2 === 1  }  var result_1 = [1,3,5].every( isOdd )  // -> true  var result_2 = [1,3,6].every( isOdd )  // -> false

注意,every从性能上考虑而支持逻辑短路,当发现某次迭代返回了false,就不会继续之后的迭代了。

some

some类似“逻辑或”运算,只要至少有一次迭代返回true,那么some整体就返回true,比如我们想检查水果数组中是否包含苹果:

function isApple(value){    return value === 'Apple'  }  var result_1 = ['Apple','Orange','Banana'].some( isApple )  // -> true  var result_2 = ['Lemon','Orange','Banana'].some( isApple )  // -> false

some也支持短路,比如在上面的例子中,第一个数组的首个元素就是Apple,那么仅仅将执行一次迭代。

reduce / reduceRight

reduce对数组求值,从第二个元素(下标1)开始迭代,为了解释明白,我们先将回调的参数打印出来看看:

var array = ['a','b','c','d','e']  array.reduce(function( prev_return, value ){    console.log( prev_return, value )    return prev_return + value  })  // -> 'a b'  // -> 'ab c'  // -> 'abc d'  // -> 'abcd e'

其中,prev_return是上一次迭代的返回值,第一次迭代的prev_return为第一个元素"a"

如果你了解MapReduce算法的过程,那么就能理解reduce在收敛求值方面的作用,一个没什么实际价值的小例子:

var array = ['a','b','c','d','e']  var result = array.reduce(function( prev_return, value ){    return prev_return + value  })  console.log( result )  // -> 'abcde'

reduceRight则正好相反,从后向前迭代:

var array = ['a','b','c','d','e']var result = array.reduceRight(function( prev_return, value ){  return prev_return + value})console.log(result)  // -> 'edcba'

我们还可以显式指定第一次迭代的prev_return值:

var array = ['a','b','c','d','e']var result = array.reduce(function( prev_return, value ){  return prev_return + value}, 'word: ')console.log(result)  // -> 'word: abcde'

原创,自由转载,请署名,

你可能感兴趣的文章
day1作业--登录接口
查看>>
python基础之函数基础
查看>>
计算机软件基础-(软件开发过程管理)
查看>>
正则表达式匹配非需要匹配的字符串(标题自己都绕晕了)
查看>>
今天Rails都学到了啥
查看>>
nrm使用webpack使用
查看>>
OC 线程操作 - GCD队列组
查看>>
一致性hash算法及其java实现
查看>>
Arraylist和linkedlist的区别(JDK源码阅读)
查看>>
PHP常见的加密技术
查看>>
Asp.net读取AD域信息的方法(一)
查看>>
两道题学习动态规划
查看>>
mysql实战31 | 误删数据后除了跑路,还能怎么办?
查看>>
ASP.NET MVC Razor
查看>>
Subscribe的第四个参数用法
查看>>
零值比较--BOOL,int,float,指针变量与零值比较的if语句
查看>>
vue-cli的项目加入骨架屏
查看>>
c#获取电脑硬件信息参数说明(硬盘篇 Win32_DiskDrive)
查看>>
3.SOAP和WSDL的一些必要知识
查看>>
使用element中的table组件,如何单击某一行数据时选中对应的复选框
查看>>