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