Array及JSON的操作

Array的操作

JavaScript的Array是non typed的,即每個成員可以type不一樣,跟Object一樣.
var list = [1,"2", [1,2,3]];

Array裡的單一元素操作, 其取出copy到另一變數時遵照一般的規則

var array = [{name:"apple"}, "map", "mop"];
var secondElement = array[1]; //copy of value type
secondElement = "abc";
console.log(array); // [{name:"apple"}, "map", "mop"]; same
var firstElement = array[1]; //copy of reference type
first.name = "abc";
console.log(array); // [{name:"abc"}, "map", "mop"]; change

移除第一個元素以及最後一個元素

// remove the fist one, using shift
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); //the length becomes 3
// remove the final one, using pop
fruits.pop(); //the length becomes 2

Array的copy (array本身是reference type)

array2等於array1, 透過array2改, 印出array1也被改到
// Array is reference case
var list1 = [1, 2, 3];
var list2 = list1; //把list1 assign給list2
list1[0] = 4;
console.log("list1:", list1); // [4, 2, 3]
console.log("list2:", list2); // [4, 2, 3]

Array的deep copy/clone/duplicate (copy each element)

// case 1, element為純type類型
var oldArray = ["mip", "map", "mop"];
var newArray = oldArray.slice();
newArray[1]="123"; // "mip", "123", "mop"
//oldArray keeps the same, "mip", "map", "mop"
// case 2, element有JSON object, 即結合Array跟JSON的複合型態, 新的array可以改到舊的array的key/value嗎? yes.
var oldArray = [{name:"apple"}, "map", "mop"];
var newArray = oldArray.slice();
newArray[0].name = "google"; //第一個element為物件類型.
//oldArray: [{name:"google"}, "map", "mop"], is google !!!
由以上兩個cases可看出, slice()產生新的array內部是對單一element的copy, follow value/reference的rule.
slice()另一用途: 用來取某一部份的array的值, e.g. slice(1,3), 從1取到2.

Array的 For-Loop

有兩種
  1. 1.
    Iterator, e.g. for student of students
  2. 2.
    for (var i=0; i< 100; i++)
ES5的array要用 int i = 0的方法.

遞迴(Recursion)

算是除了loop/iterationg以外另一種實現方式.
  1. 1.
    可練習
  2. 2.
    在很多語言裡是比較慢的. 有些語言可能較快. 可參考 http://stackoverflow.com/questions/2651112/is-recursion-ever-faster-than-looping

Array的high order function操作map, filter, reduce

建議若可以用這些語言內建的function, 盡量用, 因為本身通常都有優化過, 較快. 參考上面的Link http://stackoverflow.com/questions/2651112/is-recursion-ever-faster-than-looping
e.g.
var newList = [1, 2, 3].map(function(x) {
return x + 1;
}) // [2, 3, 4]
reducer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.

JSON的注意事項及常見處理

JSON (JavaScript Object Notation)為從JavaScript Object推廣而來的一種資料格式,JSON本身是代表JavaScript物件的標記方法,而JavaScript Object的簡化型 (無function,純value type) 就是對應到此種資料格式,故JSON同時有兩種意思。JSON在其他語言可能名字是Map/KeyValue/Dictionary. 跟Array一樣為兩大常見的資料形態.
var data = {
name: "apple", //key也可以為"name"有引號的形式
size: 1000
}
  1. 1.
    如何access其property對應到的值或物件:
    1. 1.
      data.name
    2. 2.
      data["name"]
    3. 3.
      var key="name"; data[key];
  2. 2.
    如何事先檢查property有無存在 (通常會在上述第1點前檢查), 如果不檢查則 var nameValue = data.name; //undefined,事後用可能exception或logic不符合
    1. 1.
      if(data.name){}如果物件沒有name這個property, 不會進去. 會連它的prototype都查, 若要知道prototype, 請詳閱ES5中的自訂物件類型-prototype一章,
    2. 2.
      data.hasOwnProperty(name), 介紹:https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty. 而根據 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain. 此方法不會查prototype chain, 所以在效能上比1.好,關於JavaScript的prototype可參考進階-再講prototype一章
  3. 3.
    for-in, https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/for...in 找出一個一個key, 然後就可以obj[key]列出每一個value做處理.
  4. 5.

常見case - Loop Array 或 JSON/Map/Dictionary 時要小心的事情

有一個常見的use case是: 一個Array要挑出某個特定的element, 然後把它從這array裡移除掉. How?
Copy link
On this page
Array的操作
Array裡的單一元素操作, 其取出copy到另一變數時遵照一般的規則
移除第一個元素以及最後一個元素
Array的copy (array本身是reference type)
Array的deep copy/clone/duplicate (copy each element)
Array的 For-Loop
遞迴(Recursion)
Array的high order function操作map, filter, reduce
JSON的注意事項及常見處理
常見case - Loop Array 或 JSON/Map/Dictionary 時要小心的事情