iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
0
自我挑戰組

前端工程師的30份套餐系列 第 13

Day13-ES6物件(ㄧ)

  • 分享至 

  • xImage
  •  

1.屬性的簡單表示法

ES6允許在物件中直接寫變數,這時候屬性名為變數名,屬性值為變數的值,有點像是在繞口令,來先看看例子:

function test (x,y) {
    return {x,y}
}
//等於
function test(x,y) {
    return {x:x,y:y}
}
test(1,2); //Object {x:1,y:2}
//來個實際的例子吧
let name = 'joyce';
const person = {
    等同於 name:name
    name  //name:'joyce'
}

簡單來說是只有寫屬性名,同時表示為屬性名和值。
這樣的寫法可以用在函式的return值,會非常方便:

function getNumber() {
    const a = 5;
    const b = 10;
    return {x,y}
}
getNumber() //{a:5,y:10}

除了屬性簡寫,方法也可以簡寫

const a = {
    method() {
        return "Hello";
    }
}
//等於
const a = {
    method: function(){
        return "Hello";
    }
}

2.屬性名表達式

JavaScript 定義物件的屬性有兩種方法

//方法一:直接用標示符當作屬姓名
obj.food = true;
//方法二:用表達式當作屬性名,這時要把表達式放在方括號內
obj['num'+'ber'] = 100;

如果使用宣告方式定義物件(使用大括號)
在ES5只能使用上述的方法一(標示符)來定義屬性:

var obj = {
    food: true,
    number:100
}

而在ES6則允許在物件宣告定義物件時,用方法二(表達式)作為物件的屬性名。

let obj = {
  ['a' + 'bc']: 123
}; 
console.log(obj['a' + 'bc']) //123

表達式還可以用於定義方法名:

const obj = {
    ['f' + 'ood']() {
        return '好吃'
    }
}
obj.food() //好吃

3.Object.is()

ES5比較兩個值是否相等,只有兩種運算符:
(1)相等運算符 ==
(2)嚴格相等運算符 ===
而第三種就是ES6新增用來比較兩個值是否相等的方法,與===類似,是加強版的嚴格運算符
(3)Object.is()

//Object.is() 與 === 的差異有
+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

註:寫程式很少會直接動用 NaN。通常是在 Math 函式計算失敗(Math.sqrt(-1))或函式解析數字失敗後才會回傳。


上一篇
Day12 - Object.keys()、Object.values()
下一篇
Day14-ES6物件(二)
系列文
前端工程師的30份套餐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言