走進JavaScript——重拾對象

創建對象

Object構造器的參數如果為空或null、undefined將返回一個空的Object對象，如果為其他值則調用相應的構造器，如

new Object()
// Object {}
new Object(null)
// Object {}
new Object(undefined)
// Object {}
new Object(1)
// Number {[[PrimitiveValue]]: 1}
new Object("a")
// String {0: "a", length: 1, [[PrimitiveValue]]: "a"}
new Object({})
// Object {}
new Object([1,2,3])
// [1, 2, 3]
new Object(function(){})
// function (){}

如果傳遞多個參數取第一個，由於使用構造器來創建對象需要判斷參數所以一般比我們直接使用字面量{}創建對象要慢一些。

我們也可以自己定義一個構造器來創建對象，如下

function CreateObj(){}
var obj = new CreateObj();
obj.a = 10;
// 10

這些方法創建的對象都不是一個真正乾凈的對象，如果希望創建一個沒有原型繼承的空對象則可以使用Object.create方法

Object.create(null)
// Object {} No Properties

對象直接量

var obj = {
    title: '晴天',
    content: '....'
};

key可以以字元串形式來寫也可以按標識符來寫，一般我們會以標識符來寫，當遇到需要使用一些不合法的標識符時我們會以字元串的形式來寫，如：

{1:2};
{.l:1};

由於以上對象屬性名是不合法的，因此我們需要使用字元串的形式來寫。

{'1':2};
{'.l':1};

如果key和value名一樣，value值可以不寫

var a = 1;
var obj = {a};
console.log(obj);
// Object {a: 1}

如果希望key是一個變數，我們可以這樣

var a = 'hello';
console.log({[a]:a});
Object {hello: "hello"}

在一個對象中不能有多個同名屬性，如果相同最後一個將覆蓋之前的

{
    a:123,
    a:456
}
// Object {a: 456}

對象不能有多個同名屬性的特性，我們可以使用它來實現數組過濾重覆項

var arr = [1,3,3,2,1,1],
    obj = {};
arr.forEach((item)=>obj[item] = item);
console.log(obj)
// Object {1: 1, 2: 2, 3: 3}

但由於對象的儲存並不是按照我們填寫的順序來的，因此對於有順序要求的我們就不能使用上面的方式來實現了。

對象和數組在某些方面非常相似，因此只需要我們按照數組的格式來寫就可以將對象轉換成一個數組

Array.from({
    '0':'hello',
    '1':'world',
    'length':2
})
// ["hello", "world"]

遍歷對象

for in

var obj = {html:111,javascript:222};
for(let key in obj){
    console.log(obj[key]);
}
// 111
// 222

for in會將原型繼承中的值也迴圈出來，因此我們需要過濾一下

// 沒過濾之前
Object.prototype.a = '搗亂的';
var obj = {html:111,javascript:222};
for(let key in obj){
    console.log(obj[key]);
}
// 111
// 222
// 搗亂的

// 過濾之後
Object.prototype.a = '搗亂的';
var obj = {html:111,javascript:222};
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key]);
    }
}
// 111
// 222

我們也可以用for來迴圈對象，不過我們得先使用Object.keys來取對象的key

Object.prototype.a = '搗亂的';
var obj = {html:111,javascript:222};
var arr = Object.keys(obj);
for(let i = 0; i < arr.length; i++){
    console.log(obj[arr[i]]);
}
// 111
// 222

for of

Object.prototype.a = '搗亂的';
var obj = {html:111,javascript:222};
for(let key of Object.keys(obj)){
    console.log(obj[key]);
}
// 111
// 222

對象與其他值的運算

和對象、function相加會轉換成字元串拼接，如果是其他值則會轉換為數字

{} + null
// 0
{} + undefined
// NaN
{} + 'a'
// NaN
{} + '111'
// 111
{} + {}
// "[object Object][object Object]"
{} + [2]
// 2
{} + function(){}
// "[object Object]function (){}"

如果是相減則會將對象轉換為-0（註意是-0），如果是對象減對象則是NaN

{} - ''
// -0
{} - []
// -0
{} - null
// -0
{} - undefined
// NaN
{} - {}
// NaN
{} - function(){}
// NaN
{} - 2
// -2

為什麼說對象被轉換成負0而不是0呢，我們用一個例子來證明

0 - 0
// 0
-0 - 0
// -0

所以說對象被轉換成-0而不是0