Array和經常使用API

什麼是數組

在阮一峯的《JavaScript 標準參考教程(alpha)》中的解釋是:
數組(array)是按次序排列的一組值。每一個值的位置都有編號(從0開始),整個數組用方括號表示。
JS的本質理解是:
數組(array)就是原型鏈中有 Array.prototype 的對象算法

基本用法

var a = Array(3) // {length:3}
var a = new Array(3) // {length:3}

若是輸入只有一個數字,那麼建立的數組就是length爲3,而且三個數的值都爲undefinde。new加不加效果都同樣數組

var b = Array(3,3) // [3,3] 
var b = new Array(3,3) // [3,3]

若是輸入的值超過一個,那麼建立的就是一個value等於輸入值的數組。new加不加效果都同樣函數

var a = [,,,]//{length:3},值爲undefined
var a = [3,3]//[3,3]

建立數組也能夠像這樣直接建立,只有逗號的話表明的就是有下標可是值爲undefined的數。學習

僞數組

  1. 有 0,1,2,3,4,5...n,length 這些 key 的對象
  2. 原型鏈中沒有 Array.prototype

這樣的對象就是僞數組測試


目前學習到的僞數組例如:this

  1. arguments 對象
  2. document.querySelectAll('div') 返回的對象

數組的API

Array.prototype.forEach()

forEach()接收一個函數,而且forEach()方法對數組的每一個元素執行一次提供的函數。prototype

array.forEach(callback(currentValue, index, array){
    //do something
})

array.forEach(callback())
  • callback:爲數組中每一個元素執行的函數,該函數接收三個參數
  • currentValue(當前值):數組中正在處理的當前元素。
  • index(索引):數組中正在處理的當前元素的索引。
  • array:forEach()方法正在操做的數組。
  • 返回值:undefined

自寫一下forEach函數code

function forEach(array, x){
    for(let i = 0;i < array.length; i++){
        x(array[i],i)
    }
}

這就是一個簡單的forEach()自寫的一個函數,array表明操做的數組,x表明用來操做數組的函數,傳入數組和函數。對象

var obj = []

obj.forEach = function(x){
    for(let i = 0; i < this.length; i++){
        x(this[i], i)
    }
}

this就是指代obj這個數組排序

Array.prototype.sort()

sort() 方法用就地( in-place )的算法對數組的元素進行排序,並返回數組。 sort 排序不必定是穩定的。默認排序順序是根據字符串Unicode碼點。

arr.sort() 
arr.sort(compareFunction)
  • compareFunction:可選。用來指定按某種順序進行排列的函數。若是省略,元素按照轉換爲的字符串的各個字符的Unicode位點進行排序。
  • 返回值:返回排序後的數組。原數組已經被排序後的數組代替。

若是沒有指明 compareFunction ,那麼元素會按照轉換爲的字符串的諸個字符的Unicode位點進行排序。例如 "Banana" 會被排列到 "cherry" 以前。當數字按由小到大排序時,9 出如今 80 以前,但由於(沒有指明 compareFunction),比較的數字會先被轉換爲字符串,因此在Unicode順序上 "80" 要比 "9" 要靠前。

若是是數字想升序排列,sort()中輸入:

function compareNumbers(a, b) {
  return a - b;
}//也能夠(a,b) => a-b

若是是數字想倒序排列,sort()中輸入:

function compareNumbers(a, b) {
  return b - a;
}//也能夠(a,b) => b-a

對象能夠按照某個屬性排列:

var students = ['小明','小紅','小花'] 
var scores = { 小明: 59, 小紅: 99, 小花: 80 } 
students.sort(function(x, y){
         return scores[y] - scores[x]
})

另外sort()是一個比較特殊的API,由於它改變了自身數組,這是爲了節省內存。

Array.prototype.join()

join() 方法將一個數組(或一個類數組對象)的全部元素鏈接成一個字符串並返回這個字符串。

str = arr.join(separator)
// 分隔符
  • separator:
    指定一個字符串來分隔數組的每一個元素。
    若是須要(separator),將分隔符轉換爲字符串。
    若是省略(),數組元素用逗號分隔。默認爲 ","。
    若是separator是空字符串(""),則全部元素之間都沒有任何字符。
  • 返回值:一個全部數組元素鏈接的字符串。若是 arr.length 爲0,則返回空字符串

var a = ['a','s','d']
a.join()//"a,s,d"
a.join('')//"asd"
a.join('f')//"afsfd"

全部的數組元素被轉換成字符串,再用一個分隔符將這些字符串鏈接起來。若是元素是undefined 或者null, 則會轉化成空字符串。

Array.prototype.concat()

concat() 方法用於合併兩個或多個數組。此方法不會更改現有數組,而是返回一個新數組。

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
  • valueN:將數組和/或值鏈接成新數組。
  • 返回值:新的 Array 實例。

var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

將兩個數組鏈接起來生成一個新的數組。

var alpha = ['a', 'b', 'c'];

var alphaNumeric = alpha.concat(1, [2, 3]);
//['a', 'b', 'c', 1, 2, 3]

能夠直接將值鏈接到數組,生成一個新的數組。

var a = [1,2,3]
var b = a.concat()//[1, 2, 3]
b === a//false

concat()能夠建立一個相同值的數組,可是是新建立的一個對象。

Array.prototype.map()

map() 方法建立一個新數組,其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。
map()和forEach()很像,可是forEach()返回undefined,而map()返回一個對數組內每一個數處理的數組。

let new_array = arr.map(function callback(value, key, array) { 
    // Return element for new_array 
})
  • callback:生成新數組元素的函數,使用三個參數。
  • value:callback 的第一個參數,數組中正在處理的當前元素。
  • key:callback 的第二個參數,數組中正在處理的當前元素的下標。
  • array:callback 的第三個參數,map 方法被調用的數組。
  • 返回值:一個新數組,每一個元素都是回調函數的結果。

var a = [1,2,3]
a.map(function(value,key){
      return value *value
})//[1,4,9]

map()能夠對數組的每一個值進行操做,和forEach是基本同樣的,可是,map()返回一個新的數組,而forEach返回的是undefined。

Array.prototype.filter()

filter() 方法建立一個新數組, 其包含經過所提供函數實現的測試的全部元素。

array.filter(function(value, key, array){})
  • value:當前在數組中處理的元素
  • key:正在處理元素在數組中的下標(索引)
  • array:調用了filter篩選器的數組
  • 返回值:返回的是一個布爾值,來判斷篩選條件

var a = [1,2,3,4,5,6,7,8,9,10]
a.filter(function(value){
    return value > 5
})//[6, 7, 8, 9, 10]

進行篩選,返回一個篩選以後的數組,不改變原數組

Array.prototype.reduce()

reduce() 方法對累加器和數組中的每一個元素(從左到右)應用一個函數,將其減小爲單個值。

a.reduce(callback(prev, value),initial)
  • callback:執行數組中每一個值的函數
  • prev:累加器累加回調的返回值; 它是上一次調用回調時返回的累積值
  • value:數組中正在處理的元素
  • initial:累加時的初始值

var a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(sum,n){
        return sum + n
},0)//55

對數組的內容累計處理,reduce能夠變換實現map()和filter()

var a = [1,2,3]
a.reduce(function(arr,n){
    arr.push(n*2)
    return arr
},[])//[2, 4, 6]

這就是reduce()實現map()的過程

var a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(arr,n){
   if(n%2===0){
       arr.push(n) 
   }
   return arr
},[])//[2, 4, 6, 8, 10]

這是reduce()實現filter()的過程

相關文章
相關標籤/搜索