Javascript自學筆記 (6)

Web開發 Javascript
1

JSON

用JavaScript物件所表示的電子交換格式，格式官網：https://www.json.org/json-en.html，屬於輕量級的資料交換語言，

JSON 物件包含了解析、或是轉換為 JavaScript Object Notation（JSON）格式的方法。這物件不能被呼叫或建構；而除了它的兩個方法屬性以外，本身也沒有特別的功能。

JSON 是序列物件、陣列、數字、字串、布林值、還有 null 的語法。它建基、但不同於 JavaScript：有些 JavaScript 不是 JSON、而有些 JSON 不是 JavaScript。

基本型別複製

基本型別：Number, String, Boolean

var num1 = 123;
var num2 = num1;
num1 = 456;
console.log(num2); //123
// 修改num1時並不會修改到num2

淺複製 (shallow copy)

陣列的淺複製

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]
arr[1] = 5;
console.log(arr2); // [1, 5, 3, 4]
// 修改arr1但連arr2也㇐起被修改到

兩個變數指定到同一個記憶體位置

物件的淺複製

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = obj1;
obj2.b = 40;
console.log(obj1); // { a: 10, b: 40, c: 30 }
// 修改obj2卻連obj1也㇐起被修改到
// 事實上obj2是複製obj1的記憶體空間位置，這個記憶體位置儲存的
// 值就是{ a: 10, b: 20, c: 30 }，所以這兩者才會互相影響

深複製 (deep copy)

完全複製㇐份全新的物件或陣列，雙方的記憶體位置都不相同

手動複製

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1); //{ a: 10, b: 20, c: 30 }沒被改到
console.log(obj2); //{ a: 10, b: 100, c: 30 }

使用迴圈複製

var a = [1,2,3,4];
var b = [];
for(var i = 0; i < a.length; i++) { b.push(a[i]) }
console.log(b); //[1,2,3,4]

編輯JSON檔

JSON.parse()方法

把㇐個JSON字串轉換成JavaScript的數值或是物件
server > browser
字串 > 物件

語法

JSON.parse(text[, reviver])

reviver 為選擇性的參數，用來描述JSON字串中的值該如何被轉換並回傳
的函式(function)

JSON.parse('{"p" : 5, "i" : "x"}', function (k, v) {
    if (typeof v === 'number') { //如果value是數字的話
        return v * 2; //回傳值就乘2
    }
    else return v; //不然就是回傳原本的值
});
// { p: 10, i: "x"}

範例

JSON.parse('{}'); //{}
JSON.parse('true'); //true
JSON.parse(' "foo" '); //"foo"
JSON.parse('[1, 5, "false"]'); //[1, 5, "false"]
JSON.parse('null'); //null

JSON.stringify()方法

把㇐個JavaScript的數值或是物件轉換成JSON字串
broswer > server
物件 > 字串

語法

JSON.stringify(value[, replacer [, space]])
  • replacer 為 function 時，物件中將被序列化的屬性都會經過此 function轉換和處理。
  • space控制序列化後字串的縮排(最多 10 個空格)

範例

JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // ' "foo" '
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'

JSON的深複製