自學日記

學習程式相關知識及學習法

0%

JS 物件與陣列

發表於 更新於

JS 物件與陣列

介紹陣列與物件及基礎forEach介紹

物件

物件相對於陣列，像是更進一步將各個值依各屬性不同各自整理起來，值可以是字串、陣列…等等。
以下示範:

1
2
3
4
5
6
7
 var house = {
//  屬性 值
"room": 3,
"park": false,
"name": "Tom",
"son" : ["Bob","Kevin","Cindy"]
 }

物件起手式，同樣可以宣告一個空的物件，再依需求”賦予”，EX.

1
2
var house = {};
house.person = "Tom";//house {person: "Tom"}

陣列

陣列介紹

1
2
3
4
arr = [ 'cat', 'dog', 'tiger' ]
console.log(arr)
// 第一行一般應該是列為: anmials = [ 'cat', 'dog', 'tiger' ]
// 取得 cat 時，animals[0]
  • 以上範例，取得 cat 時，animals[0]，:point_right:表示陣列從0開始
  • 陣列裡的內容皆是相同的(字串與字串、數字與數字)
  • 圖解:

陣列中的基礎操作

  • push (放入):
    將值推入陣列最後一個
    圖示範例:

通常我們陣列起手式，可以先宣告一個空的陣列，再依需求放入，EX.

1
2
var colors = [];
colors.push("blue")

  • pop (取出):
    從陣列中取出值
    圖示範例:

  • 替換元素
    輸入欲替換的索引位置(從0計算)，進而輸入欲更改的值
    圖示範例1

    圖示範例2
    輸入索引位置7(由0起算)，使得最後一個數字由'empty'改為123，lenth為8

取得最後一個元素

  • 索引與lenth不同，前者起算為0，後者起算為1，所以欲取得最後一個數字，
    使用arr[arr.lenth-1]取得。

陣列處理方法forEach()

陣列處理方法其實有很多:

  • forEach()
  • filter()
  • find()
  • map()
  • every()
  • some()
  • reduce()

這裡先介紹相對單純的forEach ，不會額外回傳值，只單純執行每個陣列內的物件或值。
以下經由code舉例來觀察forEach的形式:

1
2
3
4
5
6
7
var A = [1];
// 參數部分，可自己命名，但是需要記得是什麼:
// function(數的值,第幾個,陣列)
A.forEach(function(item,index,array){
console.log(item,index,array);
});
//印出1 0 [1]

1
2
3
4
5
6
7
// 如陣列放進兩個參數
var A = [1,2];

A.forEach(function(item,index,array){
console.log(item,index,array);
});
// 印出結果如下圖

由上圖示例可知，function內容跑完 第一個值印出後再run第二個，
將陣列參數改成其他亦然:

1
2
3
4
5
6
var colors = ["blue", "red"]

colors.forEach(function(item,index){
console.log(item);//blue，red
console.log(index);//blue，0，red，1
})

平時陣列如要計算累加，最直覺方式為:

1
2
3
var num = [1,2,3,4,5];

console.log(num[0]+num[1]+num[2]+num[3]+num[4])//15

但假若陣列是大量資料，有幾百幾千筆，這時使用forEach就可以設置累加:

1
2
3
4
5
6
7
8
9
10
var num = [1,2,3,4,5];
// 設置變數total給予值(此處設置0代表從0計算)
var total = 0;

num.forEach(function(item){
total+=item;//total = item +total
})

console.log(total);
// 15

以forEach進行篩選並形成新的陣列:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 假如計算陣列中有幾個偶數
var num = [1,2,3,4,5];

var total = 0;
// 欲創造新陣列，先創造變數並賦予空的陣列
var newNum = [];

num.forEach(function(item){
    if (item%2 ===0){
    total+=1;
//         此時偶數已被篩出，依序push上newNum
        newNum.push(item);
    }
})
console.log(newNum);//依計算出的結果，顯示新的陣列
console.log(total);//在陣列中有幾個偶數
// 結果如下圖計算

以forEach陣列讀取物件資料

forEach陣列不只可以讀取數字，也可以讀取布林值、字串，當然連物件也可以讀取:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var data = [
    {
    name: "Shawn",
    age: 28,
    },
    {
    name: "Amy",
    age: 27,  
    }
];

data.forEach(function(item){
    console.log(item);
    });

印出結果為兩個物件:

那麼如何取物件內個別資料，以下方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var data = [
    {
    name: "Shawn",
    age: 28,
    },
    {
    name: "Amy",
    age: 27,  
    }
];
// 在item後面加".""，進而取出個別資料
data.forEach(function(item){
    console.log(item.age);
    });

綜合以上介紹，確定forEach可用來做大筆資料累加及參數可以是物件，那麼結合起來，forEach可用來篩選json資料的各資料的總數。

比如實例上，篩選json資料男女總數，可以此去撰寫:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let total = {
//     也可以是[]陣列
    female: 0,
    male: 0,
}
data.forEach(function(item){
    // console.log(item.sex);
        if (item.sex == "女性"){
    total.female+=1;
    }else if (item.sex == "男性")
    total.male+=1;
    });

console.log (`女性總共有$(total.female)人`);
console.log (`男性總共有$(total.male)人`);

假如需要再結合創新的陣列:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let total = {
//     依實例目的去做設定
    female: [],
    male: [],
}
data.forEach(function(item){
    // console.log(item.sex);
        if (item.sex == "女性"){
    total.female.push(item);
    }else if (item.sex == "男性")
    total.male.push(item);
    });

console.log (`女性總共有$(total.female.length)人`);
console.log (`男性總共有$(total.male.length)人`);