当前位置：首页 > 资讯 > 技术文档

ES6学习教程之对象的扩展详解

时间：2020-12-10 12:19 编辑：来源：阅读：
扫一扫，手机访问

摘要：ES6学习教程之对象的扩展详解

[b]一、属性的简洁表示法[/b] ES6允许直接写入变量和函数作为对象的属性和方法。意思就是说允许在对象中只写属性名，不用写属性值。这时，属性值等于属性名称所代表的变量。下面分别举一个例子来说明： [b]属性：[/b]

function getPoint(){
 var x = 1 ;
 var y = 2;
 return {x,y}
}

等同于

fucntion getPoint(x,y){
 var x = 1 ;
 var y = 2;
 return {x:x,y:y}
}

测试：

getPoint();//{x:1,y:10}

[b]函数：[/b]

var obj = {
 fun(){
 return "simply function";
 }
};

等同于

var obj = {
 fun: function(){
 return "simply function";
 }
}

测试：

obj.fun();//simply function

[b]二、属性名表达式[/b] ES6里允许定义对象的时候用表达式作为对象的属性名或者方法名，即把表达式放在方括号里。 [b]属性[/b]

let propKey = 'foo';

let obj = {
 [propKey] : true,
 ['a'+'bc'] : 123
}

测试：

obj.foo; //true
obj.abc ; //123

[b]方法[/b]

let obj = {
 ['h'+'ello'](){
 return "hello world";
 }
}

测试：

obj.hello();//hello world

[b]注意：[/b] 属性名表达式与简介表达式不能同时使用。

//错误的
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

//正确
var foo = 'bar';
var baz = { [foo] : 'abc'}

[b]三、方法的name属性[/b] 这个比较容易理解，直接阐述文字。函数的name属性返回函数名。对象方法也是函数，因此也有函数名。 [list] [*]一般情况方法的name属性返回函数名[/*] [*]如果是取值函数会在函数名前加”get”[/*] [*]如果是存值函数会在函数名前加”set”[/*] [*]如果bind方法创建的函数会在函数名前加”bound”[/*] [*]如果是Function构造函数创建的函数，会在函数名前加”anonymous”[/*] [*]如果对象的方法是一个Symbol值，那么name属性返回的是这个Symbol值的描述* [/*] [/list] [b]四、Oject.is()[/b] [code]Object.is()[/code]用来比较两个值yan'ge严格相等。与严格比价运算符（===）的行为基本一致。不同之处只有两个：一是 +0 不等于 -0 ，二是NaN等于自身

+0 === -0 //true
NaN === NaN //false

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

[b]五、Oject.assign()[/b] [code]Object.assign()[/code]方法是用于将源对象的可枚举属性复制到目标对象。它至少需要两个参数，第一是目标对象，后面的全是源对象。 [b]注意：[/b] [list] [*]每个参数必须是对象，否则会报TypeError错误。[/*] [*]如果目标对象与源对象有同名属性，或多个源对象有同名的属性，则后面的属性会覆盖前面的属性[/*] [*][code]Object.assign[/code]只复制自身属性，不可枚举的属性和继承属性不会被复制[/*] [*]属性名为Symbol值的属性，也会被Object。assign复制。 [/*] [/list] [b]demo：[/b]

var target = {a:1,b:2};

var source1 = {a:2,c:5};
var source2 = {a:3,d:6};

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

[code]Object.assign[/code]可用于处理数组，但是会将其视为对象

Object.assign([1,2,3],[4,5]);
//[4,5,3]

[b]其他用处[/b] [list] [*]为对象添加属性[/*] [*]为对象添加方法[/*] [*]克隆对象[/*] [*]合并多个对象[/*] [*]为属性指定默认值 [/*] [/list] [b]六、属性的可枚举性[/b] 对象的没个属性都有一个描述对象(Descriptor)，可通过[code]Object.getOwnPropertyDescriptor(object,prop)[/code] ,object表示对象，prop表示对象的里的一个属性，用的时候需要加上引号。描述对象里面有个enumerable（可枚举性）属性，来描述该属性是否可枚举。 [b]ES5中会忽略enumerable为false的属性[/b] [list] [*][code]for…in[/code]循环：只遍历对象自身和继承的可枚举属性（包含继承）[/*] [*][code]Object.keys()[/code] :返回对象自身的所有可枚举属性的键名[/*] [*][code]Json.stringify()[/code] :只串行化对象自身的可枚举属性 [/*] [/list] [b]ES6新增的操作[/b] [list] [*][code]Object.assign()[/code] : 只复制对象自身的可枚举属性[/*] [*][code]Reflect.enumerate()[/code] : 返回所有[code]for…in[/code]循环会遍历的属性（包含继承） [/*] [/list] [b]7. 属性的遍历[/b] [b]ES6中一共有6种方法可以遍历对象的属性。[/b] [list] [*][code]for…in[/code]循环遍历对象自身和继承的可枚举的属性（不含Symbol属性）[/*] [*][code]Object.keys(obj)[/code]返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性，但是包含不可枚举属性）[/*] [*][code]Object.getOwnPropertySymbols(obj)[/code]返回一个数组，包含对象自身的所有Symbol属性。[/*] [*][code]Relect.ownKeys(obj)[/code]返回一个数组，包含对象的所有属性，包含属性名是Symbol或者字符串，也不管是否可枚举。[/*] [*][code]Reflect.enumerate(obj)[/code]返回一个Iterator对象，遍历对象自身的和继承的所有可枚举属性（不含Symbol）,与for…in相同[/*] [/list] [b]以上6种方法遍历对象的属性遵守同样的属性遍历次序规则[/b] [list] [*]首先遍历所有属性名为数值的属性，按照数字排序[/*] [*]其次遍历所有属性名为字符串的属性，按照生成时间排序[/*] [*]最后遍历所有属性名为Symbol值的属性，按照生成时间排序[/*] [/list]

Reflect.ownkeys({[Symbol()]:0,b:0,10:0,2:0,a:0})
//[‘2','10','b','a',Symbol()]

[b]八、 proto 属性，Object.setPrototypeOf(),Object.getPrototypeOf()[/b] [b]proto 属性[/b] （前后应该有两个下划线，这里没显示出来）。用来读取或者设置当前对象的prototype对象。但是一般不直接对这个属性进行操作，而是通过[code]Object.setProtortypeOf() [/code]（写操作）、[code]Object.getPrototypeOf()[/code] （读操作）或者[code]Object.create() [/code]（生成操作）代替。 [code]Object.setProtortypeOf()[/code]

let proto = {};
let obj = { x : 10};
Object.setProtortypeOf(obj,proto);

proto.y = 20;
proto.z = 40;

obj.x //10
obj.y //20
obj.z //40

[code]Object.getProtortypeOf()[/code]

function Rectangle(){}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangele.prototype // true

[b]9. 对象的扩展运算符[/b] ES7中提案，将rest参数/扩展运算符（…）引入对象。 [b]Rest参数[/b] Rest参数用于从一个对象取值，相当于将所有可遍历尚未被读取的属性，分配到制定的对象上。所有的键及其值都会复制到新对象上。需要注意的是rest参数的复制是浅复制，并且也不会复制继承自原型对象的属性。简单的demo

 let {x,y,...k} = {x:2, y:3,z:4,a:5};
x //2
y //3
k //{z:4,a:5}

[b]扩展运算符[/b] 扩展运算符用于取出参数对象的所有可遍历属性，复制到当前对象中。

let z = {a:3 ,b:4};
let n = {...z};
n //{a:3,b:4}

扩展运算符还可以合并两个对象。

let a = { c:5,d:6 };
let b = { e:7,f:8 };
let ab = {...a,...b};
ab //{c:5,d:6,e:7,f:7}

扩展运算符还可以自定义属性，会在新对象中覆盖掉原有参数。

let a = {x:1,y:2};
let aWithOverides = {...a,x:3,y:4};
aWithOverides //{x:4,y:4}

[b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：详述JavaScript实现继承的几种方式(推荐)
下一篇：JavaScript移除数组内重复元素的方法

资讯排行榜
更多>>