ECMAScript 5 新特性 vol.2 - Array

类型判断

Array.isArray方法能够判断目标是否为数组：

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

索引

ES5标准中，Array对象终于加入了indexOf与lastIndexOf方法，它们能找出元素所在下标值。国际惯例，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还添加了一系列迭代方法，以适应愈来愈多的数据处理需求，它们包括forEach、map、filter、every、some、reduce、reduceRight。

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' }

全部这些新加入的迭代方法，均可以拿到index、array参数，也能够绑定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相似“逻辑与”运算，用来判断全部元素是否都符合某个规则，只有每次迭代都返回true，every总体才返回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'

原创，自由转载，请署名，本人博客 kid-wumeng.me