程式碼學習不歸路

1. 回傳object 更簡易

傳統做法

let radius =5;
let circle = buildCircle(radius);
console.log (circle.circumference);
console.log (circle.area);

function buildCircle(radius){
  const pi = 3.14159;
  let circumference = radius*2*pi;
  let area = Math.pow(radius, 2)*pi;
  return {circumference:circumference, area:area };
}

ES2015: 回傳屬性即為變數名稱

let radius =5;
let circle = buildCircle(radius);
console.log (circle.circumference);
console.log (circle.area);

function buildCircle(radius){
  const pi = 3.14159;
  let circumference = radius*2*pi;
  let area = Math.pow(radius, 2)*pi;
  return {circumference, area };
}

2. Object Destruction

沿用上例，我們可以不必在接收一個Object之後再去一一解析他的屬性

但名稱一定要一致，因為ES2015並不是以順序來決定要給哪個變數，而是以名稱來對應的

ES2015的精神: 懶，還要更懶

let radius =5;
let {circumference, area} = buildCircle(radius);
console.log (circumference);
console.log (area);

function buildCircle(radius){
  const pi = 3.14159;
  let circumference = radius*2*pi;
  let area = Math.pow(radius, 2)*pi;
  return {circumference, area };
}

 3. Template String

以往要把字串想加，通常會寫成 'Your input ' + variable1 + ......

在維護上其實很容易打錯，找了老半天才發現犯了最蠢的錯誤，以及若是要加入強迫斷行…等等的

Template String的出現讓這些變的更容易，且讓你的程式碼可讀性更佳

有兩點需要注意

(1) Template String是以 ` 這個為前後包住字串，並不是單引號

(2) Template String裡若要用到變數，需以${}包住你的變數

以下是沿用上例所完成的多行字串串接，並有更好的可讀性

let radius =5;
let {circumference, area, message} = buildCircle(radius);
console.log (circumference);
console.log (area);
console.log (message);

function buildCircle(radius){
  const pi = 3.14159;
  let circumference = radius*2*pi;
  let area = Math.pow(radius, 2)*pi;
  let message = `Radius: ${radius}, 
  area: ${area}, 
  circumference: ${circumference}`;
  return {circumference, area, message };
}

4. Object Assign

這個功能是我看到目前為止最酷的功能了

這個語法可以把兩個不同的物件的屬性整併在一起

但有兩件事要注意

(1) 如果有同樣的屬性名稱，後面的物件將會覆寫前面的物件，後面的參數可以無限延展 Object.assign( {}, para1, para2, para3...)

(2) Object.assign 的第一個參數為輸出參數，意思就是如果你把你要整併的物件放在第一個，那麼你原本的物件會被更改
所有的參數我們都希望是唯讀的，不希望被更改，所以第一個參數會放一個空的物件 {}

下面的例子展示的是

我們會建造出一個半徑為5的圓形物件

然後我們有一個default 形狀是長方形，長 15

我們要加這兩個件物合併起來，你可以想像會長成什麼樣子嗎？應該是挺怪異的吧

let radius =5;
let circle = buildCircle(radius);
let weirdShape = buildWeirdShape(circle);

function buildCircle(radius){
  const pi = 3.14159;
  let circumference = radius*2*pi;
  let area = Math.pow(radius, 2)*pi;
  return {circumference, area, shapeName: "Circle" };
}

function buildWeirdShape( shape ={}){
	let defaultShape = {shapeName: "Rectangle", length: 15}
	let combinedShaped = Object.assign({}, defaultShape, shape);	
	console.log(combinedShaped);
	return combinedShaped;
}

輸出

Object {shapeName: "Circle", length: 15, circumference: 31.4159, area: 78.53975}

shapeName因為defaultShape  跟shape都有同一個屬性，所以後蓋前做合併

length則是defaultShape才有的屬性，會被保留下來

circumference, area則是shape才有的屬性，也被保留下來

最後defaultShape 與shape在合併過程並沒有任何物件被更改，天下太平