第十二节：ES6之Object详解(属性简洁法、高频函数的使用)
一. 属性简洁法
属性简洁表示法：也叫字面量增强写法
1. 属性名简写
2. 方法简写
3. 属性名表达式
代码分享：
{ let name1 = "ypf1"; let name2 = "ypf2"; let age1 = 20; let name3 = "ypf3"; let obj = { //旧写法 name1: name1, //1. 属性新写法 name2, age1, //2. 方法新写法 test1() { console.log(this); }, //3. 属性名表达式 [name3]: "lmr", }; //调用 console.log(obj.ypf3); //lmr }
二. 高频方法
前置对象：
let userInfo = { name: "ypf", age: 18, height: 1.82, };
1. 对象的遍历
(1). for-in 遍历整个对象
(2). Object.keys() 用于返回对象所有key组成的数组。
Object.getOwnPropertyNames() 用于返回对象所有key组成的数组。
Reflect.ownKeys() 用于返回对象所有key组成的数组。
(3). Object.values() 用于返回对象所有value组成的数组。 【ES8】
(4). Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组 【ES8】
代码分享：
{ // 1.1 for-in 遍历整个对象 for (const key in userInfo) { console.log(key, userInfo[key]); } //1.2 Object.keys() 用于返回对象所有key组成的数组。 console.log(Object.keys(userInfo)); //[ 'name', 'age', 'height' ] //1.3 Object.getOwnPropertyNames()用于返回对象所有key组成的数组。 console.log(Object.getOwnPropertyNames(userInfo)); //[ 'name', 'age', 'height' ] //1.4 Reflect.ownKeys()用于返回对象所有key组成的数组。 console.log(Reflect.ownKeys(userInfo)); //[ 'name', 'age', 'height' ] //1.5 上述1.2-1.4 均可以配合foreach进行整个对象key-value的遍历 Object.keys(userInfo).forEach(key => console.log(key, userInfo[key])); //1.6 Object.values() 用于返回对象所有value组成的数组。 【ES8】 console.log(Object.values(userInfo)); // [ 'ypf', 18, 1.82 ] // 1.7 Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组 【ES8】 console.log(Object.entries(userInfo)); //[ [ 'name', 'ypf' ], [ 'age', 18 ], [ 'height', 1.82 ] ] for (const [key, value] of Object.entries(userInfo)) { console.log(key, value); } }
2. hasOwnProperty
{ userInfo.__proto__.myAge = 20; console.log(userInfo.hasOwnProperty("name")); //true console.log(userInfo.hasOwnProperty("age")); //true console.log(userInfo.hasOwnProperty("myAge")); //false }
3. in 操作符
{ userInfo.__proto__.myAge = 20; //原型上的属性 console.log("name" in userInfo); //true console.log("age" in userInfo); //true console.log("myAge" in userInfo); //true 原型上的属性 }
(1).用法：Object.assign(target, ...sources)
用于对象的合并，将一个或多个源对象(source)的所有可枚举属性，复制到目标对象上，后面覆盖前面的，返回目标对象,并且target本身也发生变化。
【实际上： Object.assign()的返回值其实就是目标对象】
特殊情况：
A. 如果只有一个参数，Object.assign()会直接返回该参数。
B. 如果该参数不是对象，则会先转成对象，然后返回。
C. 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。
//6.1 普通用法，用于合并 { let target1 = { a: 1, b: 2 }; let source1 = { a: 11, c: 12, d: 13 }; let source2 = { d: 23, e: 24 }; const finalTarget1 = Object.assign(target1, source1); console.log(finalTarget1); //{ a: 11, b: 2, c: 12, d: 13 } console.log(target1); //{ a: 11, b: 2, c: 12, d: 13 } console.log(finalTarget1 === target1); //true } { let target1 = { a: 1, b: 2 }; let source1 = { a: 11, c: 12, d: 13 }; let source2 = { d: 23, e: 24 }; // 多个对象的合并 const finalTarget1 = Object.assign(target1, source1, source2); console.log(finalTarget1); //{ a: 11, b: 2, c: 12, d: 23, e: 24 } console.log(target1); //{ a: 11, b: 2, c: 12, d: 23, e: 24 } console.log(finalTarget1 === target1); //true } // 6.2 特殊情况 { // A. 如果只有一个参数，Object.assign()会直接返回该参数。 const obj = { a: 1, b: 2 }; console.log(Object.assign(obj) === obj); //true // B. 如果该参数不是对象，则会先转成对象，然后返回。 console.log(typeof Object.assign(123)); //object // C. 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。 Object.assign(undefined); // 报错 Object.assign(null); // 报错 // 如果`undefined`和`null`不在首参数，就不会报错。 let obj2 = { a: 1 }; Object.assign(obj2, undefined) === obj2; // true Object.assign(obj2, null) === obj2; // true }
(2). 为对象添加属性
【this 指向创建出来的实例，这里是将 x,y属性添加到Poin类的对象实例】
class Point { constructor(x, y) { Object.assign(this, { x, y }); } //等价于 // constructor(x, y) { // this.x=x; // this.y=y; // } }
(3). 为对象添加方法
{ Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) {}, anotherMethod() {}, }); // 等同于下面的写法 SomeClass.prototype.someMethod = function (arg1, arg2) {}; SomeClass.prototype.anotherMethod = function () {}; }
(4). 克隆对象，注意：这里是浅拷贝哦！！
(扩展：深拷贝和浅拷贝，https://www.cnblogs.com/yaopengfei/p/15261698.html https://juejin.cn/post/6981272992923795486)
function clone(obj) { return Object.assign({}, obj); }
(5). 合并多个对象
{ //将多个对象合并到某一个对象上 const merge1 = (target, ...sources) => Object.assign(target, ...sources); // 将多个对象合并成一个新对象 const merge2 = (...sources) => Object.assign({}, ...sources); }
(6). 为属性指定默认值
【DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign()方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则options的属性值会覆盖DEFAULTS的属性值】
const DEFAULTS = { logLevel: 0, outputFormat: "html", }; function processContent(options) { options = Object.assign({}, DEFAULTS, options); console.log(options); }
(1) 背景
ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。
它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
(2). Object.is(value1,value2) 用途
A. 比较两个普通类型的值是否相等
注意： 和== ===不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
B. 比较两个对象是否相等
只有两个对象的引用地址相同，返回结果才为true； 所有key-value相同，引用地址不同，一样为false！！
{ // 7.1 普通类型 let s1 = "1"; let s2 = "1"; console.log(Object.is("1", "1")); //true // 7.2 和== ===不同之处只有两个 console.log(NaN === NaN); // false console.log(0 === -0); // true console.log(Object.is(NaN, NaN)); // true console.log(Object.is(+0, -0)); // false // 7.3 对象的比较 let obj1 = { name: "ypf1", age: 18, }; let obj2 = { name: "ypf1", age: 18, }; let obj3 = obj1; //栈中存放的引用地址相同，指向堆空间同一个位置 console.log(Object.is(obj1, obj2)); //false console.log(Object.is(obj1, obj3)); //true }
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
