属性的简介表示法
var foo = 'bar';
var baz = {foo};
console.log(baz); //{ foo: 'bar' }
function f(x, y) {
return {x, y};
}
console.log(f(1, 2)); //{ x: 1, y: 2 }
var o = {
method() {
return 'Hello';
}
};
//等同于
var o = {
method: function () {
return 'Hello';
}
};
console.log(o.method()); //Hello
function getPoint() {
var x = 1;
var y = 10;
return {x,y};
}
console.log(getPoint()); //{ x: 1, y: 10 }
# CommJS模块输出变量就非常适合使用简介写法
var ms = {};
function getItem(key) {
return key in ms ? ms[key] : null
}
function setItem(key, value) {
ms[key] = value;
}
function clear() {
ms = {}
}
module.exports = {getItem,setItem, clear};
//等同于
module.exports = {
getItem:getItem(),
setItem: setItem(),
clear: clear()
}
ps: 以上属性的赋值器和取值器都采用了属性简写的方法
属性名表达式
JS语言定义对象的属性有两种方法。
1、用标识符定义属性(ES5)
2、用表达式作为属性名(ES6)
// ES5 标识符作属性名
var obj = {
foo:true,
abc: 123
}
// ES6 表达式作为属性名
let propKey = 'foo';
let obj = {
[propKey]: true,
['a'+'bc']:123
}
let lastWord = 'last word';
var a = {
'first word':'hello',
[lastWord]:'world'
}
console.log(a['first word']);
console.log(a[lastWord]);
console.log(a['last word']);
注意
:属性名表达式和简介表示法不能同时使用
var foo = 'bar';
var bar = 'abc';
var baz = {[foo]}; // 绝壁报错
var foo = 'bar';
var baz = {[foo]: 'abc'}; // 正确写法
方法的name属性
var person = {
sayName(){
console.log(this.name);
},
get firstName(){
return 'Loyal';
}
}
console.log(person.sayName.name); //亲测:sayName
console.log(person.firstName.name); //亲测:undefined 书本答案为: get firstName
注意
: 有两种特殊情况,1、bind方法
创造的函数,name返回“bound”+原函数名字;2、Function构造函数
创造的函数,name属性返回“anonymous”
console.log((new Function()).name); //anonymous
var doSomething = function () {
// ....
}
console.log(doSomething.bind().name); //bound doSomething
Object.is() 用来比较两个值是否严格相等,它与严格比较运算符的欣慰基本一致
console.log(Object.is('foo', 'foo')); //true
console.log(Object.is({}, {})); //false
# 略有不同
console.log(+0 === -0); //true
console.log(NaN === NaN); //false
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true
ps: ES5中可以使用以下代码来实现Object.is功能
Object.defineProperty(Object, 'is', {
value: function(x,y){
if(x === y) {
return x !== 0 || 1/x === 1/y;
}
return x !== x && y !== y;
},
configurable: true,
enumerable: false,
writable: true
})
Object.assign() 用来将源对象的所有可枚举属性复制到目标对象,需要至少两个对象作为参数,第一个参数为目标对象,后面的参数为源对象,只要有一个不是对象,就会抛出TypeError错误
var target = {a: 11};
var source1 = {b:2};
var source2 = {c:3};
console.log(Object.assign(target, source1, source2)); //{ a: 11, b: 2, c: 3 }
# 注意,目标对象和源对象有同名属性,或多个源对象有同名属性,则后面属性会覆盖前面的属性
var target = {a: 11, b:3};
var source1 = {b:2};
var source2 = {c:3};
console.log(Object.assign(target, source1, source2)); //{ a: 11, b: 2, c: 3 }
# 嵌套的对象,Object.assign的处理方法是替换而不是添加
var target = {a:{b:{c:5,d:6}} };
var source1 = {a:{b:'hello'}};
console.log(Object.assign(target, source1)); //{ a: { b: 'hello' } }
# 处理数组,但会将其视为对象,进行替换
console.log(Object.assign([1, 2, 3], [4, 5])); //[ 4, 5, 3 ]
- 为对象添加属性
Class Point{
constructor(x,y){
Object.assign(this, {x,y})
}
}
- 为对象添加方法
Object.assign(SomeClass.prototype, {
someMethod(arg1,arf2){
},
anotherMethod(){
}
})
//等同于
SomeClass.prototype.someMethod = function (arg1,arf2){
//...
}
SomeClass.prototype.anotherMethod = function () {
//...
}
- 克隆对象
function clone(origin){
return Object.assign({}, origin);
}
以上将院士对象复制到一个控对象,就得到了运势对象的克隆
只能克隆原始对象自身的值,不能克隆他继承的值想要保持继承链,可以试用以下代码
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
- 合并多个对象
const merge = (target,...source) => Object.assign(target,...source);
const merge = (...source) => Object.assign({}, ...source);
- 为属性指定默认值
const DEFAUlTS = {
logLEvel: 0,
ouputFormat: 'html'
}
function processContent(options) {
let options = Object.assign({}, DEFAUlTS, options);
}