JavaScript 陣列操作總整理


Posted by Andy Tsai on 2020-05-02

建立陣列的方法

  • 實字模式:var ary = [1,2,3,4,5];
  • 建構式:var ary = new Array(1,2,3,4,5);
  • 現在大多數都是用實字模式,簡潔且速度較快,推薦使用
  • 建構式效能較差,且其他地方有用到Array這個字時,也會出錯

1. some()

  • 回傳boolan
  • some表示任何一個,所以只要任何一個成立,就會回傳true
  • 都沒有成立,就會回傳false
    var ary = [1,2,3,4,5];
    ary.some(function(a){
    return a>=5 // true
    })
    // ES6 arrow function
    ary.some(a => a >= 5 ); // true
    

2. every()

  • 回傳一個boolan
  • every表示每一個,所以必須要每一個都成立,才會是ture
    var ary = [1,2,3,4,5];
    ary.every(function(a){
    return a >= 0 // true
    })
    // ES6 arrow function
    ary.every(a => a >= 0 ); // true
    

3. splice()

  • 兩種用法,1.插入資料 2.刪除資料
  • array.splice(start[, deleteCount[, item1[, item2[, …]]]]),
    • start表示你的索引位置,要從這個位置做什麼事情
    • deleteCount表示要刪除的數量 (選擇性)
    • 從 start 開始,要加入到陣列的元素 (選擇性)
  • 好記的方法:你要插在誰的前面
  • 插入資料
    var ary = [1,2,3,4,5];
    ary.splice(2,0,"f") 
    // 2表示索引數位置,0表示不刪除東西,f表示要插入的元素
    結果: [1, 2, "f", 3, 4, 5]
    
  • 刪除資料
    var ary = [1,2,3,4,5];
    ary.splice(2,2)  //把3、4刪掉,所以要從索引數2開始刪,刪除2個
    // [3, 4]
    

4. forEach()

  • 純粹把資料拿出來去跑迴圈,每個元素都跑
  • 跟for很像,只是寫法更簡潔
    var ary = ["a","b","c"]
    ary.forEach(function(a){
    console.log(a) // a b c
    })
    // ES6 arrow function
    ary.forEach(a => console.log(a))
    

5. unShift()

  • 把元素插到最前面,可以一次不只一個
    var ary = ["a","b"]
    ary.unshift("ff","asd")
    // ["ff", "asd", "a", "b"]
    

6. shift()

  • 拔出第一個元素
    var ary = ["q","ww"]
    ary.shift();
    // ["ww"]
    

7. pop()

  • 拔出最後的一個元素
    var ary = ["q","ww"]
    ary.pop();
    // ["q"]
    

8. length

  • 計算陣列長度
    var ary = ["q","ww"]
    ary.length;
    // 2
    

9. reduce()

  • 陣列裡面元素做累加,從左邊到右邊
  • 也可以做串接字串
  • 可想成把陣列摺疊起來
  • arr.reduce(callback[accumlator, currentValue, currentIndex, array], initialValue)

    • accumlator:累加器,前一個返回值
    • currentValue:當前的陣列元素
    • currentIndex:當前的陣列索引 (可選)
    • array:調用reduce的陣列 (可選)
    • initialValue:初始值 (可選)
  • 數字累加

    var ary = [10,20,30,40,50,60,70,80,90,100]
    ary.reduce(function(prev,next){
       return prev + next
    }, 0); //550
    /* 第一次時prev是0,next是10,0+10 回傳10,
    第二次 prev變10,next變20,10+20 會傳30
    ......以此類推
    最後總和會是550
    */
    // ES6 arrow function
    ary.reduce((prev,next) =>  prev + next) // 550
    
  • 串接字串
    var ary = ["q","w","s"]
    ary.reduce(function(prev,next){
       return prev + ":" + next
    });
    // "q:w:s"
    // ES6 arrow function
    ary.reduce((prev,next) =>  prev + ":" + next)
    

10. reduceRight()

  • 跟reduce一樣,只是反過來,由右到左
  • 數字沒差,但字串有差
    var ary = ["q","w","s"]
    ary.reduceRight(function(prev,next){
       return prev + ":" + next
    });
    // "s:w:q"
    

11. join()

  • 自定義串接符號
    var ary = ["q","ww"]
    ary.join("=");
    // "q=ww"
    

12. reverse()

  • 反轉陣列,顛倒過來
    var ary = [1,2,3,4,5,6,7,8,9,10]
    ary.reverse()
    // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
    

13. sort()

  • 將陣列排序
  • 如不帶值,預設是由小到大
  • 字串排序
    var ary = ["q","w","a","b"]
    ary.sort();
    // ["a", "b", "q", "w"]
    
  • 數字排序
      var ary = [1,3,2,50,12,60,40,23,12]
      ary.sort() 
      // [1, 12, 12, 2, 23, 3, 40, 50, 60]
    
    可以發現排序不如我們預期,這是因為sort()會把每個元素轉成字串做排序,所以在做數字排序會出錯。

要解決這個問題,我們可以自己寫個function去處理

var ary = [1,3,2,50,12,60,40,23,12]
var compare = function (a, b) {
     if(a > b){
         return 1
    }else{
         return -1
    }
}
ary.sort(compare) // [1, 2, 3, 12, 12, 23, 40, 50, 60]
// ES6 arrow function
var compare = (a, b) => a > b?  1: -1

14. push()

  • 把元素插在陣列最後面
  • 可以插多個
    var ary = ["a","b","c","d","e"];
    ary.push("f","g","h")
    console.log(ary); // ["a", "b", "c", "d", "e", "f", "g", "h"]
    

15. indexOf()

  • 找array裡面有沒有某一個元素,有就會回傳索引數,找不到就會回傳-1
    var ary = [1,2,3,4,5,6,7,8,9,10]
    ary.indexOf(7); // 6
    

16. lastIndexOf()

  • 找最後一個出現的
    var ary = [1,7,2,3,4,5,6,7,8,9,10,7]
    ary.lastIndexOf(7); // 11
    

17. includes()

  • 找有沒有包含特定元素
  • 回傳boolan
    const array1 = [1, 2, 3];
    console.log(array1.includes(2)); // true
    

18. find()

  • 回傳第一個滿足條件的元素,否則回傳undefined
    const array1 = [5, 12, 8, 130, 44];
    const found = array1.find(element => element > 10); 
    // 12
    

19. fill()

  • 把陣列中所有元素,替換為指定元素
  • arr.fill(value[, start[, end]])
    • value:欲指定替換的元素
    • start:起始的索引
    • end:結束的索引
      var arr = [1, 2, 3];
      arr.fill(4);               // [4, 4, 4]
      arr.fill(4, 1);            // [1, 4, 4]
      arr.fill(4, 1, 2);         // [1, 4, 3]
      

20. map()

  • var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
    }[,thisArg])
  • currentValue:目前處理中的元素
  • index:這個元素在這個陣列的索引數 (可選)
  • array:當前元素所屬的陣列 (可選)
  • thisArg:執行 callback 回呼函式的 this 值 (可選)
  • 記得要用變數接,不然會拿不到,因為是產生新陣列
    var ary = [1,2,3,4,5,6,7,8,9,10]
    ary.map( function(item){
       return item + 1;
    } ); 
    // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    // ES6 arrow function
    ary.map(item => item + 1)
    

21. filter()

  • 篩選、過濾
    var ary = [1,2,3,4,5,6,7,8,9,10]
    //篩出可以被2整除的數
    ary.filter(function(item){
       return item % 2 === 0;
    })
    // [2, 4, 6, 8, 10]
    // ES6 arrow function
    ary.filter(item => item % 2 === 0)
    

22. slice()

  • arr.slice([begin[, end]])
    • begin:起始值
    • end:到哪一個前停止擷取
  • 擷取陣列的某一個區段
  • 他也可以複製你的陣列,但僅能做淺層複製,稍微複雜如[{abc:1},{abc:2}]就沒辦法
  • 需做深層複製可參考 lodash deep clone array
  • 擷取區段

    var ary = [“a","b","c","d"];
    ary.slice(1,3)
    // ["b", "c"]
    
  • 複製陣列

    var ary1 = [1,2,3];
    var ary2 = ary1.slice();
    ary2.push(4)
    

你可能會好奇,這和一般的複製有什麼差別?

// 一般的複製
var ary1 = [1,2,3];
var ary2 = ary1;
ary2.push(4)

差別在,用一般的複製 push後ary1、ary2都會有4,因為共享參考的關係,
而用slice()就可以避免這個問題

23. concat()

  • 陣列的連接,把兩個或多個陣列串再一起
    var ary = [{key:1},{key:2},{key:3}];
    ary.concat([1,2,3], ["a","b","c"])
    // [{key:1},{key:2},{key:3}, 1, 2, 3, "a", "b", "c"]
    

懶人包整理

回傳 方法 意思
boolean some() 是否至少一個成立
boolean every() 是否每一個都成立
sub array splice() 藉由插入或刪除元素,改變陣列內容
undefined forEach() 遍歷每個元素
array的新長度 unShift() 把元素插到最前面
array的第一個元素 shift() 拔出第一個元素
array的最後一個元素 pop() 拔出最後一個元素
array的元素數量 length() 計算陣列長度
result reduce() 陣列元素累加(摺疊),從左到右
result reduceRight() 陣列元素累加(摺疊),從右到左
string join() 自定義串接符號
array reverse() 反轉陣列
array sort() 將陣列排序
array的新長度 push() 把元素插在陣列末端
index indexOf() 找第一個相同的元素
index lastIndexOf() 找最後一個相同的元素
boolean includes() 找有沒有包含特定元素
element find() 回傳第一個滿足條件的元素
undefined fill() 把陣列中的元素,替換為指定元素
new array map() 遍歷每個元素,回傳新陣列
new sub array filter() 篩選、過濾
new sub array slice() 擷取陣列的某一個區段
new array concat() 陣列的連接

Reference:
偷米騎巴哥 20180823 (圖解JavaScript陣列)
糙 code 出沒請小心!! 在 JavaScript 寫 for-loop


#javascript #Array #w3HexSchool







Related Posts

{ 鼠年全馬鐵人挑戰 ;} Week 02 - 做一個影片背景的網頁吧

{ 鼠年全馬鐵人挑戰 ;} Week 02 - 做一個影片背景的網頁吧

Python Table Manners - 測試 (二)

Python Table Manners - 測試 (二)

Day2 android UI實作+activity介紹!!

Day2 android UI實作+activity介紹!!



Comments