iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
2
Modern Web

從0.5開始的JavaScript系列 第 12

Day12 工具包: 物件(3) - 解構賦值、縮寫、For...in

今日就來把物件常見的用法介紹完吧,GoGo~

物件

解構賦值

取出物件某值

用法: 在 {} 中宣告某物件中的屬性名稱,即可取出該值。

var grade = {
  chinese: 85,
  math: 90
};

var { chinese } = grade;
console.log(chinese); // 85

承上,也可以連 math 一起

var { chinese, math } = grade;
console.log(chinese, math); // 85 90

如果想要將取出的值放到不同名稱的變數上,可以這樣用

var grade = {
  chinese: 85,
  math: 90
};

var { chinese: myChinese } = grade;
console.log(myChinese); // 85

結合陣列

請問 Q1 是什麼?

var { fruit: [, Q1] } = {
    fruit: ['apple', 'banana', 'orange']
}

console.log(Q1); // Q1=?

都知道答案了嗎?

Ps. 忘記的話可以參考 Day9

答案是,
Ans:
Q1 = banana

縮寫

  1. 屬性的名稱一樣,則可省略後者
var a = 123;
var b = {
    a: a
};

// 可縮寫為
var b = {
    a
}
  1. 函數也可以縮寫
var a = {
    sayHi: function(){
        console.log("Hi");
    }
}

// 可縮寫為
var a = {
    sayHi () {
        console.log("Hi");
    }
}

搭配縮寫與延展的深拷貝

Ps. 關於較詳細的介紹可以看 Day11

var a = {
    age: 18
}
var b = {
    ...a
}

b.age = 20;

console.log(a.age); // 18
console.log(b.age); // 20

For in 取值

var myObj = {
  name: "Ray",
  age: 18
};

for(var key in myObj){
  console.log("key: " + key + " value: " + myObj[key]);
}
// key: name value: Ray
// key: age value: 18

那物件中的物件呢...?
可以這樣用,

var myObj = {
  class1: {
    num: 30
  },
  class2: {
    num: 35
  }
}

for(var key in myObj){
  console.log("key: " + key + " value: " + myObj[key].num);
}
// key: class1 value: 30
// key: class2 value: 35

那今日的分享就到這,我們明天見/images/emoticon/emoticon51.gif


上一篇
Day11 工具包: 物件(2) - 深拷貝vs淺拷貝
下一篇
Day13 工具包: 字串
系列文
從0.5開始的JavaScript30

尚未有邦友留言

立即登入留言