【JS】物件與陣列

物件實字、建構物件、傳值、傳參考、淺層複製、深層複製、陣列、JSON

 發表於 2021-03-03  |  4 分鐘  |  680 個字

【JS】物件與陣列

物件實字、建構物件、傳值、傳參考、淺層複製、深層複製、陣列、JSON

 發表於 2021-03-03  |  4 分鐘  |  680 個字

物件實字(Object Literals)

  • 直接撰寫 var obj1 = {…} 物件。(範例一)

建構物件(Constructor Object)

  • 使用 new Object() 包裹方式建立。(範例二)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/** 範例一 **/
var obj1 = {
  name:"蘋果",
  amount: 100
}

/** 範例二 **/
var obj1 = new Object();
obj1.name = "蘋果";
obj1.amount = 100;

物件的基本應用方法 :

  • 取值。(範例一)

  • 新增屬性。(範例二)

  • 刪除屬性。(範例三)

  • 新增物件。(範例四)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var a ={
  name:"蘋果",
  amount: 100
}

/** 範例一 **/
console.log(a.name);  //蘋果
console.log(a["amount"]);  //100

/** 範例二 **/
a.price = 25;
a["prod"] = "USA";
console.log(a);  //{name: "蘋果",amount: 100, price: 25,prod: "USA"}

/** 範例三 **/
delete a.price;
delete a["prod"];
console.log(a);  //{name: "蘋果",amount: 100}

/** 範例四 **/
a.sell = {
  JPN: 2000
}
console.log(a);  //{name: "蘋果",amount: 100,sell:{JPN: 2000}}

變數無法被刪除，屬性才可以 :

1
2
3
4
5
6
7

var a = 1;
delete a;
console.log(window.a);  //1

window.b = 2;
delete b;
console.log(window.b);  //underfined

全域環境下賦予的值是window的屬性

純值不能新增屬性，物件才可以 :

1
2
3
4
5
6
7

var a = {};
a.name = "蘋果";
console.log(a);  //{name: "蘋果"}

var b = 1;
b.name = "香蕉";
console.log(b);  //1

傳值(Call by Value)

  • 純值的傳值方式是複製，傳完後無任何關聯。(範例一)

傳參考(Call by Reference)

  • 物件是以傳參考方式指向它，若修改會一起變更。(範例二)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//* 範例一 *//
var a = "蘋果";
var b = a;  //b複製a的值，兩者無關聯
b = "香蕉";
console.log(a);  //蘋果
console.log(a === b);  //false

//* 範例二 *//
var a = {name: "蘋果"};
var b = a;  //b指向a物件，兩者指向同一物件
b.name = "香蕉";
console.log(a);  //{name: "香蕉"}
console.log(a === b);  //true

//* 進階範例一 *//
var a = {name: "蘋果"};
a.amount = a;
console.log(a);
//Object{
//  name:"蘋果",
//  amount:[circular object]  //循環物件
//};

//* 進階範例二 *//
var a = {name: "蘋果"};
var b = a;
a.amount = a = {name: "蘋果"};
//上述這段是"同時"進行
//左邊:a.amount找不到a物件裡有amount屬性，所以undefined
//右邊:a = {name: "蘋果"}是a指向新的物件實字，所以無關原本a物件
console.log(a.amount);  //undefined
console.log(b);  //{name: "蘋果"}

只要出現{物件實字}就是新增的物件

淺層複製(Shallow Copy)

  • 只能複製第一層屬性。。

    • 使用 for in… 。( javascript )

    • 使用 jQuery.extend() 。( jQuery )

    • 使用 Object.assign() 。( ES6 )

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/** javascript **/
var a = {
  name:"蘋果",
  amount:{
    sell: 100,
  }
};
var b = {};
for(var i in a){
  console.log(i);   //name  //amount
  console.log(a[i]);    //蘋果  //{sell: 100}
  b[i] = a[i];
}
b.name = "香蕉";
console.log(b.name,a.name);  //香蕉  //蘋果
//當改動第一層屬性時，無任何關聯。
b.amount.sell = 300;
console.log(b.amount.sell,a.amount.sell);  //300  //300
//當改動第二層屬性時，卻會一起變更。

/** jQuery **/
var b = jQuery.extend({},a);

/** ES6 **/
var b = Object.assign({},a);

深層複製(Deep Copy)

  • 可以複製整個物件。

    1. 使用 JSON.stringify() 將物件轉為字串 (JSON) 。

    2. 使用 JSON.parse() 將字串 (JSON) 轉為物件 (JSON) 。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var a = {
  name:"蘋果",
  amount:{
    sell: 100,
  }
};
var b = {};
var aStr = JSON.stringify(a);  //將a物件轉為JSON字串
console.log(aStr);  //"{'name':'蘋果','amount':{'sell':100}}"
var aPar = JSON.parse(aStr);  //將JSON字串，解析成JSON物件
console.log(aPar);  //{name:"蘋果",amount: {sell: 100}}
b = aPar;
b.name = "香蕉";
console.log(b.name,a.name);  //香蕉  //蘋果
b.amount.sell = 300;
console.log(b.amount.sell,a.amount.sell);  //300  //100
//當改動第一層和第二層屬性時，都無任何關聯。

陣列(Array)

  • 是以數列方式排列的物件。

  • 第一個是從 0 開始。

  • 陣列的基本應用方法 :

    • 使用 [] 方式取值。(範例一)

    • 使用 push() 新增純值、物件、函式。(範例二)

    • 使用 delete 刪除值，若陣列為空，會自動補上(undefined)。(範例三)

    • 使用 for迴圈 複製陣列，與原陣列無任何關聯。 (範例四)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var a = ["蘋果","香蕉","鳳梨"];

/** 範例一 **/
console.log(a[0]);  //蘋果
console.log(a[1]);  //香蕉
console.log(a[2]);  //鳳梨

/** 範例二 **/
color.push("芭樂");  
console.log(a[3]);  //芭樂
color.push({name: "蓮霧"});  
console.log(color[4]);  //{name: "蓮霧"}
var fn1 = function(){...};
color.push(fn1);
console.log(color[5]);  //function(){...}

/** 範例三 **/ 
delete color[2];
console.log(color[2]);  //undefined

/** 範例四 **/
var b =[];
for(var i=0 ; i<a.length ; i++){  //.length可以取得陣列總長度
  console.log(i);  //0  //1  //2
  console.log(a[i]);  //蘋果  //香蕉  //鳳梨
  b[i] = a[i];
}
console.log(b);  //["蘋果", "香蕉", "鳳梨"]

JSON(JavaScript Object Notation)

  • 是一種輕量級的資料交換語言。

  • 只有屬性，沒有函式。

  • 所有屬性都是字串型別，且一律都只用雙引號 "" 。

  • 基本的取得方式 :

    • 使用 new XMLHttpRequest() 。( javascript )

    • 使用 $.ajax({}) 。( jQuery )

  • 打開Chrome→Network→Response，可查看回傳的資料。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/** javascript **/
var xhr = new XMLHttpRequest();
xhr.addEventListener("load",function(){
  var data = JSON.parse(this.response)
});
xhr.open("GET","網址.json");
xhr.send();

/** jQuery **/
$.ajax({
  url: "網址.json",
}).done(function(data){
  console.log(data);
};)

框架會自動轉換JSON格式

javaScript 

其他相關