ES6--物件
阿新 • • 發佈:2019-01-29
屬性的簡潔表示法
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)。