首页 > > 网页制作 > Javascript >

es6 对象的扩展

2018-06-24 01:04:06来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.属性的简洁表示法
　　　　function f(x,y) {
　　　　　　return {x,y};
　　　　}
　　　　// 等同于
　　　　function f(x,y){
　　　　　　return {x:x,y:y};
　　　　}
　　　　f(1,2) 　　// Object {x:1,y:2}
　　　　例如：
　　　　　　let birth = '2000/01/01';
　　　　　　const Person = {
　　　　　　　　name: '张三'，
　　　　　　　　　　// 等同于 birth: birth
　　　　　　　　birth,
　　　　　　　　　　// 等同于hello: function()...
　　　　　　　　hello() {console.log('我的名字'，this.name);}
　　　　　　};
　　　　例如：用于函数的返回值
　　　　function getPoint() {
　　　　　　　　const x = 1;
　　　　　　　　const y = 10;
　　　　　　　　return {x,y};
　　　　}
　　　　console.log(getPoint());
　　　　　　// {x:1,y:10}
 
　　2.属性名表达式
　　　　表达式作为对象的属性名
　　　　　　let obj = {
　　　　　　　　[propKey]: true,
　　　　　　　　['a' + 'bc']:123
　　　　　　};
　　　　　　console.log(obj[propKey]); // true
　　　　　　console.log(obj['abc']); // 123
　　　　例如：
　　　　　　let lastWord = 'last word';
　　　　　　const a = {
　　　　　　　　‘first word’: 'hello',
　　　　　　　　[lastWord]: 'world'
　　　　　　}
　　　　　　console.log(a['first word']); // "hello"
　　　　　　console.log(a[lastWord]); // "world"
　　　　　　console.log(a['last word']); // "world"
　　　　例如： 表达式可以用于定义方法名
　　　　　　let obj = {
　　　　　　　　['h'+'ello']() {
　　　　　　　　　　return 'hi';
　　　　　　　　}
　　　　　　};
　　　　　　console.log(obj.hello()); // 'hi'
　　3.方法的 name 属性
　　　　例如：函数的name 属性，返回函数名。
　　　　　　const person = {
　　　　　　　　sayName() {
　　　　　　　　console.log('hello');
　　　　　　　　}
　　　　　　}
　　　　　　console.log(person.sayName.name); // "sayName"
4.Object.is()
　　　　ES 比较两个值是否相等，只有两个运算符，相等运算符，相等运算符(==)
　　　　和严格相等运算符（===）
 
　　　　　　+0 === -0 // true
　　　　　　NaN === NaN // false
　　　　　　Object.is(+0,-0); // false
　　　　　　Object.is(NaN,NaN) // true
5.Object.assign()
　　　　Object.assign 方法用于对象的合并，将源对象的所有的可枚举属性，赋值到目标对象
　　　　例如;
　　　　　　const target = {a:1};
　　　　　　const source1 = {b:2};
　　　　　　const source2 = {c:2};
　　　　　　Object.assign(target,source1,source2);
　　　　　　console.log(target); // {a:1,b:2,c:3}
　　　　例如：同名属性的替换，当遇到同名属性的时候，处理方法是替换。
　　　　　　const target = {a:{b:'c',d:'e'}}
　　　　　　const source = {a: {b:'hello'}}
　　　　　　console.log(Object.assign(target,source))
　　　　　　　　// {a: {b:'hello'}}
　　　　例如： 数组的处理
　　　　　　Object.assign 可以用来出来数组，把数组作为对象看
　　　　　　Object.assign([1,2,3],[4,5])
　　　　　　　　// [4,5,3]
 
　　　　常见用途(1) 为对象添加属性
　　　　　　　　class Point {
　　　　　　　　　　constructor(x,y){
　　　　　　　　　　　　Object.assign(this,{x,y});
　　　　　　　　　　}
　　　　　　　　}
　　　　常见用途(2) 为对象添加方法
　　　　　　Object.assign(SomeClass.prototype,{
　　　　　　　　someMethod(arg1,arg2){
　　　　　　　　　　.....
　　　　　　　　}
　　　　　　anotherMethod(){
　　　　　　　　...
　　　　　　　　}
　　　　　　})
　　　　常见用途(3) 克隆对象
　　　　　　function clone (origin) {
　　　　　　　　return Object.assign({},origin);
　　　　　　}
6.属性的可枚举行和遍历
　　　　可枚举性
　　　　　　Object.getOwnProperDescriptor 方法可以获取该属性的描述对象
　　　　　　　　let obj = {foo:123};
　　　　　　Object.getOwnPropertyDescriptor(obj,'foo')
　　　　　　　　// {
　　　　　　　　　　value: 123,
　　　　　　　　　　writable: true,
　　　　　　　　　　enumerable: true,
　　　　　　　　　　configurable:true
　　　　　　　　}
　　　　描述对象的enumerable 属性，称为“可枚举属性” 如果该属性的值为false,
　　　　　　就表示会忽略当前属性。
　　　　目前有四个操作会忽略 enumerable 为false 属性。
　　　　　　for...in ， Object.keys(), JSON.stringify(), Object.assign();
　　　　　　ES6一共有5种方法可以遍历对象的属性
　　　　　　　　(1) for ... in
　　　　　　　　　　　　循环遍历对象自身的和继承的可枚举属性
　　　　　　　　(2) Object.keys(obj)
　　　　　　　　　　　　Object.keys 返回一个数组，包括对象自身的所有可枚举属性
　　　　　　　　(3) Object.getOwnPropertyNames(obj)
　　　　　　　　　　　　Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性
　　　　　　　　(4) Object.getOwnPropetrySymbols(obj)
　　　　　　　　　　　　Object.getOwnPropetrySymbols 返回一个数组，包含对象自身的所有
　　　　　　　　　　　　Symbol属性的键名。
　　　　　　　　(5) Reflect.ownKeys(Obj)
　　　　　　　　　　Reflect.ownKeys 返回一个数组，包含对象自身的所有键名。
8._proto_ 属性。
　　　　_proto_ 属性，用来读取和设置当前对象的protoype对象。
　　　　　　const obj = {
　　　　　　　　method: function(){
　　　　　　　　　　console.log(111)
　　　　　　　　}
　　　　　　}
　　　　obj._proto_= someOtherrObj;
　　　　Object.setPrototypeOf()
　　　　Object.setPrototypeOf 方法的作用与 _proto_ 相同，用来设置一个对象的prototype对象
　　　　　　返回参数对象本身，。
　　　　　　　　// 格式
　　　　　　Object.setPrototypeOf(object,prototype)
　　　　　　　　// 用法
　　　　　　const o = Object.setPrototypeOf({},null);
　　　　　　　　Object.getPrototypeOf()
　　　　　　　　该方法与Object.setPrototypeOf 方法配套，用于读取一个对象的原型对象。
　　　　　　　　　　　　Object.getPrototypeOf(obj);
9.super 关键字
　　　　this 关键字总是指向函数所在的当前对象，super 指向当前对象的原型对象。
　　　　　　const proto = {
　　　　　　　　foo: 'hello'
　　　　　　};
　　　　　　const obj = {
　　　　　　　　find(){
　　　　　　　　return super.foo;
　　　　　　　　}
　　　　　　}
　　　　　　Object.setPrototypeOf(obj,proto);
　　　　　　obj.find();
10.Object.keys() ,Object.values(),Object.entries()
　　　　let {keys,values,entries} = Object;
　　　　let object = {a:1,b:2,c:3};
　　　　for (let key of keys(obj)){
　　　　　　console.log(key); // 'a','b','c'
　　　　}
　　　　for(let key of keys(obj)){
　　　　　　console.log(key);// 'a','b','c'
　　　　}
　　　　for(let value of values(obj)){
　　　　　　console.log(key); // 1,2,3
　　　　　　}
　　　　for (let [key,value] of entries(obj)){
　　　　　　console.log([key,value]); // ['a',1],['b',2],['c',3]
　　　　}
11.对象的扩展运算
　　　　对象的结构赋值用于从一个对象取值，相当于将所有可遍历的，但尚未对齐的属性，
　　　　分配到指定的对象上面，所有的键和值他们的值，都会拷贝到新对象上面。
 
　　　　let {x,y,...z} = {x:1,y:2,a:3,b:4};
　　　　　　x // 1
　　　　　　y // 2
　　　　　　z // {a:3,b:4}
 
　　　　扩展运算
　　　　　　扩展运算符(...) 用于取出参数对象的多有可遍历属性，拷贝到当前对象之中。
　　　　　　　　let z = {a:3,b:4};
　　　　　　　　let n = {...z};
　　　　　　　　n // {a:3,b:4}
　　　　合并两个对象
　　　　　　let ab = {...a,...b};
　　　　　　　　// 等同于
　　　　　　let ab = Object.assign({},a,b)

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：string 归总

下一篇：调出js控制台可以在浏览器地址栏输入about:blank

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签