[D3] Arrays

JS Array Mutator Methods

  • array.reverse():將所有元素反轉過來:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.reverse();
    [5, 0, -2, 3, 5, 8, 13, 8, 5, 3]
    
  • array.shift():移除陣列中的第一個元素:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.shift();
    [5, 8, 13, 8, 5, 3, -2, 0, 5]
  • array.sort():陣列的排序:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.sort();
    [-2, 0, 13, 3, 3, 5, 5, 5, 8, 8]
    
  • array.splice():增加或移除陣列中的元素:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.splice(1, 2);
    [3, 13, 8, 5, 3, -2, 0, 5]
    
    easyArray.splice(1, 0, "Banana");
    [3, "Banana", 13, 8, 5, 3, -2, 0, 5]
    
    easyArray.splice(3, 2, "Sundae");
    [3, "Banana", 13, "Sundae", 3, -2, 0, 5]
    
  • array.unshift():增加1或多個元素在陣列的最前方:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.unshift(10, 11, 12);
    [10, 11, 12, 3, 5, 8, 13, 8, 5, 3, -2, 0, 5]
    

JS Array Accessor Methods

  • array.concat():某陣列與其它陣列或值合併:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    var tinyArray = [4, 5];
    easyArray.concat(tinyArray);
    不會影響原來的陣列,而是會回傳新的陣列:[3, 5, 8, 13, 8, 5, 3, -2, 0, 5, 4, 5]
    
  • array.join():將陣列的所有元素,合併轉成字串:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.join();
    不會影響原來的陣列,而是會回傳新的字串(預設以逗號分隔):"3,5,8,13,8,5,3,-2,0,5"
  • array.slice():取出陣列的某一部份元素:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.slice(1, 4);
    不會影響原來的陣列,而是會回傳新的陣列:[5, 8, 13]
    
    easyArray.slice(1);
    不會影響原來的陣列,而是會回傳新的陣列:[5, 8, 13, 8, 5, 3, -2, 0, 5]
  • array.indexOf():找某個值,然後只回傳第一個出現的該值的索引:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.indexOf(5);
    第一個出現5的位置為索引值:1
  • array.lastIndexOf():找某個值,然後只回傳最後出現的該值的索引:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    easyArray.lastIndexOf(5);
    最後出現5的位置為索引值:9

Basic D3 Array Utilities

  • d3.min(array):回傳自然整數中的最小值:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    d3.min(easyArray);
    -2
    
    // 若資料是陣列中存物件:
    var myData = [{"x": 05, "y": 30}, {"x": 75, "y": 30}];
    d3.min(mydata, function(d){ return d.x; });
    回傳 5
    
  • d3.max(array):回傳自然整數中的最大值:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    d3.max(easyArray);
    13
  • d3.extent(array):回傳一個陣列,包含自然整數中的最大值與最小值:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    d3.extent(easyArray);
    不會影響原來的陣列,而是回傳一個新的陣列:[-2, 13]
    
    // 若資料是陣列中存物件:
    var myData = [{"x": 05, "y": 30}, {"x": 75, "y": 30}];
    d3.extent(mydata, function(d){ return d.x; });
    回傳 [5, 190]
    
  • d3.sum(array):回傳全部加總的整數值:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    d3.sum(easyArray);
    48
  • d3.mean(array):回傳全部加總後的平均值:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    d3.mean(easyArray);
    4.8
  • d3.median(array):回傳陣列中的中位數:

    var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
    d3.median(easyArray);
    5

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of