JavaScript-陣列(Array)

為什麼需要有陣列資料型態?

因為一次只傳一個字串或數字太沒有效率,弄個集合包裝把所有資料放到裡面在一次傳過去。

在 JavaScript 可以放不同種類的資料型態,但其他語言程式不一定。

建立陣列使用陣列

    const list = ["a", "b","c", 1, 2, 3];
    console.log(list[0]); //索引值都是從0開始計算,例如:要拿到資料字串"a"。
    console.log(list.length) //6,陣列裡有6個元素
    list[1] = "x"; //把x值指定給list[1],js會依據索引值把x送進去並修改成[ 'a', 'x', 'c', 1, 2, 3 ]


    const list = ["a", "b","c", 1, 2, 3, "d"];
    console.log(list[list.length - 1]);  //無論加多少資料進去,我都可以拿到最後一筆資料

何謂二維陣列、三維陣列

在陣列中又包陣列

    let data = [
        ["a","b","c"],
        [1,2,3,4],
        ["f","h"]
        ]
    console.log(data[1][1]); //2

陣列中可使用的方法

以下只會說明一些,詳請參考MDN 上的說明

  1. 新增、刪除陣列方法
    1. 從陣列後方加上新的元素,使用方法push()
    2. 從陣列前方加上新的元素,使用方法unshift()
    3. 從陣列後方刪除元素,使用方法pop()
    4. 從陣列前方刪除元素,使用方法shift()
        新增:
        const data = ["a", "b", "c", "d", "e"];
        data.push(1);
        console.log(data); //[ 'a', 'b', 'c', 'd', 'e', 1 ]
        data.unshift(2)
        console.log(data); //[2, 'a', 'b', 'c', 'd', 'e', 1 ]
    
        刪除
        const data = ["a", "b", "c", "d", "e"];
        data.pop();
        console.log(data);  //[ 'a', 'b', 'c', 'd' ]
        data.shift();
        console.log(data);   //[ 'b', 'c', 'd' ]
    
  2. map()方法對原陣列中每個元素做動作,會回傳一個新陣列
        const list = [ 1, 2, 3, 4, 5];
        let result = list.map(function(x){
            return x * 2 ;
        });
        console.log(result);  //[ 2, 4, 6, 8, 10 ]
    
  3. forEach()方法對原陣列中每個元素做動作

    與 map()差在 forEach()不會回傳新的陣列

        const list = [1,2,3,4,5];
        list.forEach(function(el){
            console.log(el*2);
        });
        //2
        //4
        //6
        //8
        //10
    
  4. filter()過濾器只要條件滿足就留下該元素
        const list = [1, 2, 3, 4, 5, 6, 7];
        const result = list.filter(function(x){
            return x % 2 == 1 ;
        });
        console.log(result);  //[ 1, 3, 5, 7 ]
    
  5. splice()該方法通過刪除或替換現有元素或在適當位置添加新元素來更改數組的內容。
       const data = ["a", "b", "c", "d", "e"];
        data.splice(2,3)      //從索引值2開始,刪掉3個元素
        console.log(data);    //["a","b"]
    
        const data = ["a", "b", "c", "d", "e"];
        data.splice(2,2,"x");
        console.log(data);    //[ 'a', 'b', 'x', 'e' ]
    
        const data = ["a", "b", "c", "d", "e"];
        data.splice(3,0,"x");  //從索引值3開始,刪除0個,並往前加入一個x
        console.log(data);    //[ 'a', 'b', 'c', 'x', 'd', 'e' ]
    
        function myPush(arr, elm) {
            arr.splice(arr.length,0,elm)
            return arr
        }
        const data = ["a", "b", "c"]
        const result = myPush(data, "x")
        console.log(result) // ["a", "b", "c", "x"]
    
  6. reduce()將一個累加器及陣列中每項元素(由左至右)傳入回呼函式,將陣列化為單一值
       const list = [1, 2, 3, 4, 5, 6, 7];
        const total = list.reduce(function(sum,num){
            return sum + num;
        },0); //0是初始值
        console.log(total); //28
        ------------------------------
    
        const list = [1, 4, 3, 9, 2, 6, 7, 8];
        const total = list.reduce(function (acc, cv) {
        if (cv > acc) {
            return cv;
        } else {
            return acc;
            }
        })
        console.log(total);  //比大小最後cv會是9
    
comments powered by Disqus