ES6对象属性名简洁表示法和表达式、对象新方法、属性的遍历 |
您所在的位置：网站首页 › 简洁两个字怎么写 › ES6对象属性名简洁表示法和表达式、对象新方法、属性的遍历 |
|
概览
对象属性的简洁表示法
ES6允许直接写入变量和函数作为对象的属性和方法。 ES6允许在对象中只写属性名，不写属性值。 let foo = 'bar'; let baz = {foo}; console.log(baz); // {foo:'bar'} // same as let baz1 = {foo:foo} console.log(baz1); // {foo:'bar'} let first = 'Jone'; let last = 'Doe'; let obj = {first,last}; console.log(obj); // {first: "Jone", last: "Doe"} // same as let obj1 = {first:first,last:last}; console.log(obj1); // {first: "Jone", last: "Doe"} const HELLO = { method(){ return 'hello' } } console.log(HELLO.method()); // 'hello' // same as const HELLO1 = { method:function(){ return 'hello' } } console.log(HELLO1.method()); // 'hello'实际运用中的一些例子： // 用于人物名称及行为的对象 let birth = '2000/01/01' const PERSON = { name: '张三', birth, // same as: birth:birth hello() {console.log('我的名字是', this.name);} // same as: hello:function(){...} } // 用于函数返回值 function getPoint(x = 1, y=10){ return {x, y} } console.log(getPoint()); // {x: 1, y: 10} console.log(getPoint(3,3)); // {x: 3, y: 3} console.log(getPoint(3)); // {x: 3, y: 10} // CommonJS模块输出变量 let 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}; // same as: module.exports = {getItem:getItem,setItem:setItem,clear:clear}; // 属性的赋值器和取值器 const CART = { _wheels: 4, get wheels(){ return this._wheels; }, set wheels(value){ if(value Object.is(x, NaN))); // 1 Object.assign(target,source_1,source_2,...)Object.assign()方法将源对象（source）所有可枚举的属性合并到目标对象（target）中:它修改target，首先将source_1的所有可枚举的自己的属性复制到target中，然后将source_2的所有自己的属性复制到target中，以此类推。最后，它返回target。 let target = {a:1}; let source_1 = {b:2}; let source_2 = {c:3}; Object.assign(target,source_1,source_2); console.log(target,source_1,source_2); // {a: 1, b: 2, c: 3} {b: 2} {c: 3}让我们更仔细看看Object.assign()是如何运作的： 两种类型的属性键：同时支持String、Symbel作为属性键； let v1 = 'abc'; let v2 = true; let v3 = 10; let v4 = {[Symbol('c')]: 'c'}; const obj = Object.assign({}, v1, v2, v3, v4); console.log(obj); // {0: "a", 1: "b", 2: "c", Symbol(c): "c"} 仅复制源对象可枚举的自身属性：不复制继承属性，也不复制不可枚举的属性； const obj = Object.assign({b: 'c'}, Object.defineProperty({}, 'invisible',{ enumerable:false, // enumerable属性称为‘可枚举性’ value:'hello' }) ) console.log(obj); // {b: "c"} 通过赋值复制：目标对象中的属性是通过赋值(内部操作[[Put]])创建的。这意味着，如果target拥有(自己的或继承的)setter，则在复制期间将调用这些setter。另一种方法是定义新的属性，这是一种总是创建新的自己的属性且从不调用setter的操作。最初有人建议使用Object.assign()的一个变体，它使用定义而不是赋值的方式。这个提议在ECMAScript 6中已经被拒绝了，但是在以后的版本中可能会被重新考虑。 let obj1 = {a: {b: 1}}; let obj2 = Object.assign({}, obj1); console.log(obj2); // {a: {b: 1}} // Object.assign()方法实行的是浅复制，而不是深复制。 let target = {a: { b: 'c', d: 'e' }}; let source = {a: { b: 'hello' }}; const obj = Object.assign(target, source); console.log(obj); // a: {b: "hello"} console.log(target); // a: {b: "hello"}常见用途： 为对象添加属性 class Point{ constructor(x, y){ Object.assign(this, {x, y}); } }为对象添加方法 function SomeClass(){ } Object.assign(SomeClass.prototype, { someMethod(arg1,arg2){ // ... }, anotherMethod(){ // ... } }) console.dir(SomeClass); // same as SomeClass.prototype.someMethod = function(arg1, arg2){ //... }; SomeClass.prototype.anotherMethod = function(){ //... }克隆对象 // 克隆原始对象自身的值 function clone1(origin){ return Object.assign({}, origin); } // 克隆原始对象继承的值（保持继承链） function clone2(params) { let paramsProto = Object.getPrototypeOf(params); return Object.assigin(Object.create(paramsProto), params) }合并多个对象 // 多个对象合并到target const merge1 = (target, ...sources) => Object.assign(target, ...sources); // 多对象合并返回新对象 const merge2 = (...sources) => Object.assign({}, ...sources);为属性指定默认值 const DEFAULTS = { logLevel: 0, output: 'html' }; function processContent(options){ options = Object.assign({},DEFAULTS,options); console.log(options); } processContent('abc'); // {0: "a", 1: "b", 2: "c", logLevel: 0, output: "html"} processContent({'abc':'abc'}); // {logLevel: 0, output: "html", abc: "abc"} 属性的遍历for...in、Object.keys(obj)、Object.getOwnPropertyNames(obj)、Object.getOwnPropertySymbels(obj)、Reflect.ownKeys(obj) function allObj(){ this.name = '张三'; // 自有属性 this.age = '12'; // 自有属性 this.invisible = { enumerable: false, value: 'hello' }, this.invisible = { enumerable: false, value: 'hello' } } allObj.prototype.disEnum = { enumerable: false, value: 'disEnum' } allObj.prototype.Enum = { enumerable: true, value: 'Enum' } let obj = new allObj Object.assign(obj, { a: '1', b: '2', c: '3', [Symbol('c')]: 'c', }) // let obj2 = Object.assign(obj1, // Object.defineProperty({}, ) // ) Object.assign(obj, Object.defineProperty({}, 'visible',{ enumerable: true, value: 'word' }) ) console.log(obj); // allObj {a: "1",age: "12",b: "2",c: "3",invisible: {enumerable: false,value: 'hello'},name: "张三",visible: "word",Symbol(c): "c",__proto__:Enum: {enumerable: true, value: "Enum"},disEnum: {enumerable: false, value: "disEnum"}} // for...in循环遍历对象自身的和继承的属性（不含Symbol属性） for(let key in obj){ console.log(key); // name // age // invisible // a // b // c // invisible // visible // disEnum // Enum } // Object.keys()返回一个数组，包括对象自身(不含继承的)的所有属性（不含Symbol属性） console.log(Object.keys(obj)); // ["name", "age", "invisible", "a", "b", "c", "visible"] // Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性 ） console.log(Object.getOwnPropertyNames(obj)); // ["name", "age", "invisible", "a", "b", "c", "visible"] // Object.getOwnPropertySymbols() 返回一个数组，包含所有对象自身的所有Symbol属性 console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(c)] // Reflect.ownKeys()返回一个数组，包含对象自身的所有属性，不管属性名是Symbol还是字符串，也不管是否可枚举 console.log(Reflect.ownKeys(obj)); // ["name", "age", "invisible", "a", "b", "c", "visible", Symbol(c)]ES6对象属性名简洁表示法和表达式、对象新方法、属性的遍历 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |