今天来总结一下es6的对象扩展,最近一直在看es6, 感觉es6真的很好用,不过也看到过网上一些反面语言,可能因人而异,es6 的发展前景让我们拭目以待。
一、对象属性和方法
1.简写
// 属性简写
var a = "first";
var b = {a};
console.log(b) // {a:"first"}
//方法简写
var obj = {
method (){
retrun "hello world";
}
}
//等同于
var obj = {
method: function (){
retrun "hello world";
}
}
2.属性名表达式
let propName = "value";
let obj = {
[propName]:true,
["one"+"child"]:1323
}
obj[propName] // true
obj[onechild] // 1323
重点内容
① 如果属性名表达式不能与简洁表示法同时使用。否则会报错
② 属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串,如果有多个属性名对象会产生覆盖。
二、Object.is()方法和 Object.assign() 方法
1.Object.is() 用于比较两个值是否严格相等。
在ES5 中严格相等有比较运算符(===
),但是全等号有两问题:
① -0 === +0 // true
② NaN === NaN // false
而Object.is() 解决了上边两个问题,其他的行为和===
行为一致。
Object.is({},{}); // false
Object.is(+0,-0); // false
Object.is(NaN,NaN); // true
2.Object.assign() 方法用于合并对象
Object.assign() 用于合并对象,有利于我们去封装函数。它的使用方法和jq 的 $.extend()
方法类似
let objOne = {a:1};
let objTwo = {b:2};
let objThree = {b:4,c:5};
let obj = Object.assign(objOne,objTwo,objThree);
console.log(obj) // {a:1,b:4,c:5}
由结果可以看出,合并后的对象,如果出现同名属性,后边的会覆盖前边的。
重点内容
①如果只有一个参数,Object.assign() 会直接返回该参数
Object.assign({a:"new"}) //{a:"new"}
②如果该参数不是对象,会将该参数转化为对象,
typeof Object.assign(0) // "object"
③undefined 和 null 作为首参数会报错,不为首参时也不会报错
Object.assign(undefined) // 报错 Cannot convert undefined or null to object
Object.assign({},undefined) // 空对象 {}
④字符串会以数组形式拷贝到目标对象,而数值和布尔值等不会产生效果
var one = 'one';
var num = 10;
var bool = true;
var last = Object.assign({},bool,num,one)
console.log(last) // {0: "o", 1: "n", 2: "e"}
console.log(last[1]) // n
⑤Object.assign 只拷贝源对象的自身属性(不会拷贝继承属性),也不会拷贝不可枚举的属性。
var persion = {};
Object.defineProperties(persion,{
name:{
enumerable:true,
value:"name"
},
age:{
enumerable:false,
value:"age"
}
})
Object.assign({a:"a"},persion); // {a: "a", name: "name"}
⑥属性为 Symbol 值得属性,也会被其拷贝。
* 用途 *
①为对象添加属性
②为对象添加方法
③克隆对象
④合并多个对象
⑤为属性指定默认值
三、属性的遍历
(1)for…in
for…in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
(2)Object.keys(obj)
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举。
遍历排序是这样的:数字属性>字符串属性>Symbol值属性
四、__proto__
属性 和Object.setPrototypeOf()
, Object.getPrototypeOf()
ES6 为我们提供了__proto__
属性。不过目前还是建议使用Object.setPrototypeOf()
, Object.getPrototypeOf()
1.Object.setPrototypeOf()
Object.setPrototypeOf方法的作用与__proto__
相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。
let objFirst = {a:"a"}
let objLast = {b:"b",c:"c"}
Object.setPrototypeOf(objFirst,objLast);
console.log(objFirst.b) // b
console.log(objFirst.b === objLast.b) // true
上边的代码相当于:
function(objFirst,objLast){
objFirst.__proto__ = objLast;
return objFirst;
}
2.Object.getPrototypeOf()
该方法用于读取一个对象的原型对象
function newOne(){
}
var newObj = new newOne();
console.log(Object.getPrototypeOf(newObj) === newOne.prototype);