点击刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js对象的set和get 以及关于控制台打印的几种快捷效果</title> </head> <body> <script type="text/javascript"> // JavaScript对象之get/set方法 let obj = { name: 'bob', job: '程序员', set age(val) { console.log(new Date().getFullYear(), val, 'val') // 2021 30 "val" }, get age() { return new Date().getFullYear() - 1993 } } // 对象初始化之后添加属性 方式一 obj.__defineGetter__('sex', function() { return sex }); obj.__defineSetter__('sex', function(val) { sex = val }); // 对象初始化之后添加属性 方式二 Object.defineProperty定义的属性默认是不可配置的，即 writable=false,configuarble=false // 解决方法是给当前对象定义一个可配置的属性 {writable:true, configuarble:true, enumerable:true, value: xxx} // 对象的四个特性 // 值（value）：对象可以通过.访问其属性值 // 可写性（writable）：控制值(value)是否可修改,默认是true可修改的 // 可枚举性（enumerable）：控制是否可用for in遍历到默认是true,即使不能for in，用"."也能访问 【控制台灰色的标识不可枚举加上此属性即可变为可枚举】 // 可配置性（configurable）：控制是否可以修改其他特性，是否可以删除属性，修改不可逆转默认是true； Object.defineProperty(obj, 'desc', { enumerable: true, set: function(val) { console.log('desc被赋值：', val); desc = val }, get: function() { console.log('desc被取出：', desc) return desc } }) // 如果有set 和 get 就会覆盖 writable 但是依旧可以使用 configurable 和 enumerable Object.defineProperty(obj, 'info', { writable: true, configuarble: true, enumerable: true, value: '描述信息' }) console.log(obj.age) // 28 obj.sex = 'man' obj.desc = '新增属性' obj.age = 30 console.log(obj.age) // 28 console.log(obj.desc) console.log(obj) console.log(obj.info, '更改前') // 描述信息 更改前 obj.info = '更改描述信息成功' console.log(obj.info, '更改后') // 更改描述信息成功 更改后 console.info({ ...obj }) // 关于打印 let arr = [{ id: 1, name: 'bob' }, { id: 2, name: 'lala' }, { id: 3, name: 'coco' }] console.log(1) // 值 console.info(1) // 信息 console.debug(1) // 调试信息 console.warn(1) // 警告信息 console.dir(obj) // 以列表形式输出一个对象的所有属性 console.table(obj) console.table(arr) // 以表格形式展示数组 console.table(arr, ['id']) // 只看id那一列 </script> </body> </html>
自己整理，请勿随意转载！！！！
© 著作权归作者所有
举报
发表评论
0/200
