1. 程式人生 > >ES6--物件

ES6--物件

屬性的簡潔表示法

ES6允許直接寫入變數和函式,作為物件的屬性和方法
function f( x, y ) {
  return { x, y };
}
// 等同於
function f( x, y ) {
  return { x: x, y: y };
}

var Person = {
            name: '張三',
            birth:'1990-01-01',

            // 等同於hello: function ()...
            hello() { 
                document.write('我的名字是'
, this.name); } }; Person.hello(); =========================== function getPoint() { var x = 1; var y = 10; return {x, y}; //直接返回變數,變為物件的屬性 } getPoint() // {x:1, y:10}

屬性名錶達式
表示式作為屬性名,這時要將表示式放在方括號之內。
使用字面量方式定義物件(使用大括號)

let obj = {};
// 方法一
obj.foo = true;
// 方法二
obj['a'
+'bc'] = 123; document.write(obj); //屬性名錶達式 var obj = { foo: true, abc: 123 }; ES6允許字面量定義物件時,用方法二(表示式)作為物件的屬性名,即把表示式放在方括號內。 let propKey = 'foo'; let obj = { [propKey]: true, ['a'+'bc']: 123 };

比較兩個值是否嚴格相等
Object.is()用來比較兩個值是否嚴格相等。它與嚴格比較運算子(===)的行為基本一致,不同之處只有兩
個:一是+0不等於-0,二是NaN等於自身。

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

源物件的所有可列舉屬性,複製到目標物件
Object.assign方法用來將源物件(source)的所有可列舉屬性,複製到目標物件(target)。它至少需要兩
個物件作為引數,第一個引數是目標物件,後面的引數都是源物件。只要有一個引數不是物件,就會丟擲
TypeError錯誤。

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

proto屬性
proto屬性,用來讀取或設定當前物件的prototype物件

// es6的寫法

var obj = {
  __proto__: someOtherObj,
  method: function() { ... }
}

// es5的寫法

var obj = Object.create(someOtherObj);
obj.method = function() { ... }

Symbol型別
ES6引入了一種新的原始資料型別Symbol,表示獨一無二的ID。凡是屬性名屬於Symbol型別,就都是獨一
無二的,可以保證不會與其他屬性名產生衝突。

let s = Symbol();

typeof s
// "symbol"

Symbol函式前不能使用new命令,否則會報錯。這是因為生成的Symbol是一個原始型別的值,不是物件。
Symbol型別的值不能與其他型別的值進行運算,會報錯。
var sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

但是,Symbol型別的值可以轉為字串
var sym = Symbol('My symbol');

String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

內建代理

Proxy 內建的一個代理工具,使用他可以在物件處理上加一層屏障:
S6原生提供Proxy建構函式,用來生成Proxy例項。

var proxy = new Proxy(target, handler)

new Proxy()表示生成一個Proxy例項,它的target引數表示所要攔截的目標物件,handler引數也是一個物件,用
來定製攔截行為。
var plain = {
    name : "hubwiz"
};
var proxy = new Proxy(plain, {
    get: function(target, property) {
        return property in target ? target[property] : "匯智網";
    }
});

//讀取物件時,如果物件屬性存在,則返回屬性的值,
//如果讀取物件屬性不存在,則返回指定的值 
proxy.name // "hubwiz"
proxy.title // "匯智網"

get(target, propKey, receiver):攔截物件屬性的讀取,比如proxy.foo和proxy['foo'],返回型別不限。最後一個引數receiver可選,當target物件設定了propKey屬性的get函式時,receiver物件會繫結get函式的this物件。

set(target, propKey, value, receiver):攔截物件屬性的設定,比如proxy.foo = v或proxy['foo'] = v,返回一個布林值。

has(target, propKey):攔截propKey in proxy的操作,返回一個布林值。

deleteProperty(target, propKey) :攔截delete proxy[propKey]的操作,返回一個布林值。

enumerate(target):攔截for (var x in proxy),返回一個遍歷器。

hasOwn(target, propKey):攔截proxy.hasOwnProperty('foo'),返回一個布林值。

ownKeys(target):攔截Object.getOwnPropertyNames(proxy)、
Object.getOwnPropertySymbols(proxy)、Object.keys(proxy),返回一個數組。該方法返回物件所有自身的屬性,而Object.keys()僅返回物件可遍歷的屬性。

getOwnPropertyDescriptor(target, propKey) :攔截Object.getOwnPropertyDescriptor(proxy, propKey),返回屬性的描述物件。

defineProperty(target, propKey, propDesc):攔截Object.defineProperty(proxy, propKey, 
propDesc)、Object.defineProperties(proxy, propDescs),返回一個布林值。

preventExtensions(target):攔截Object.preventExtensions(proxy),返回一個布林值。

getPrototypeOf(target) :攔截Object.getPrototypeOf(proxy),返回一個物件。

isExtensible(target):攔截Object.isExtensible(proxy),返回一個布林值。

setPrototypeOf(target, proto):攔截Object.setPrototypeOf(proxy, proto),返回一個布林值。

如果目標物件是函式,那麼還有兩種額外操作可以攔截。
apply(target, object, args):攔截Proxy例項作為函式呼叫的操作,比如proxy(...args)、
proxy.call(object, ...args)、proxy.apply(...)。

construct(target, args, proxy):攔截Proxy例項作為建構函式呼叫的操作,比如new proxy(...args)。