ES6笔记（ 五 ）- Object

目录:

1. 新增的对象字面量语法
   • 成员速写
   • 方法速写
   • 计算属性名
2. 新增的Object方法
   • Object.is
   • Object.assign
   • Object.setPrototypeOf
   • Object.keys, Object.values, Object.entries
3. Class
   • 【 扩展 】面向对象简介
   • 用class（类）来实现更好的面向对象支持
   • 类的其他书写方式
   • 类的继承

新增的对象字面量语法

成员速写

ES5在书写对象成员的一些问题

我们在开发中总是会遇到这样的逻辑, 用户输入了用户名和密码, 我们拿到密码提交给后端

// 这个方法就是提交给后端校验的方法, 我们在取得用户名和密码以后要调用该方法
function loginHandler( username, pwd ) {
   
    ajax('/login', {
   
        username: username,
        pwd: pwd
    })
}

loginHandler( 'admin', 123 ); 

一般都是这么写的吧, 后端肯定是接收一个对象, 我们会发现有一个怪异的地方

• 在ajax请求中, username和pwd被书写了两次, 因为第一个username和pwd是key名, 第二个是value值, 这本无伤大雅, 但是看着总觉得怪怪的

ES6的解决方案

ES6允许我们当对象的属性value来自于一个变量, 且该变量名和对象属性key名一致, 则可以进行成员速写来减少代码量

function loginHandler( username, pwd ) {
   
    ajax('/login', {
   
        username, // 因为key和value名字一致, 所以我们直接省略了value, 这样写等同于username: username
        pwd // 这样写等同于pwd: pwd
    })
}

loginHandler( 'admin', 123 ); 

方法速写

过去我在对象中书写方法

在过去中, 我们在对象中书写方法如下

const obj = {
   
    sayHello: function() {
   
        console.log('hello');
    }
}

ES6的简洁写法

ES6允许我们在对象字面量中书写方法时可以省略冒号和function关键字

const obj = {
   
    sayHello() {
   
        console.log('hello');
    }
}

计算属性名

在过去我们处理对象成员名来自一个表达式的状况如下

const prop1 = 'name';

const obj = {
   }; // 如果一个对象的key来自于一个变量, 那么我们就不能在初始化的时候将他放进字面量中

obj[prop1] = 'loki'; // 只能在后续这样处理

console.log(obj); // { name: 'loki' }

这样写其实也没什么问题, 但是从逻辑上来说这有一点不恰当, 因为属性初始化是我在一开始就可以做到的, 但是ES6之前就做不到

ES6的解决方案

ES6允许我们直接给对象字面量的key值用表达式, 只需要加上中括号即可

const prop1 = 'name';
const obj = {
   
    [prop1]: 'loki'
}

console.log(obj); // { name: 'loki' }

---

新增的Object方法

Object.is

用于判断两个数据是否相等

在过去我们判定两组数据相等的情况

ES6之前我们一般使用 == 做普通比较, 用 === 做严格比较, 但是在做严格比较的时候有一些问题

console.log( +0 === -0 ); // true
console.log( NaN === NaN ); // false

以上两点其实都不太合理, +0和-0其实一个为正一个为负, 虽然本质上来说他们没有太大的意义, 但是严格按照数学逻辑这两个值应该是不等于的, 第二个就更加离谱了, NaN竟然不等于NaN, 这就完全说不过去了吧

ES6的解决方案

所以ES6推出的 Object.is 帮助我们很好的解决了这个问题

// Object.is 的比较跟严格比较基本上一样, 除了以上笔者提到的两个 === 的问题, Object.is进行了修复
console.log( Object.is( +0, -0 ) ); // false
console.log( Object.is( NaN, NaN ) ); // true

Object.assgin

用于混合对象

过去我们遇到需要混合对象的情况

// 如果我们要将下面两个对象合并, 在ES6之前我们一般这么作
const obj1 = {
   
    name: 'loki',
    age: 18
}
const obj2 = {
   
    name: 'thor',
    age: 20
}

// 我们就来用用我们的收集运算符
function assign( ...objs ) {
   
    let lastObj = {
   };
    objs.forEach( it => {
   
        for( let prop in it ) {
   
            lastObj[prop] = it[prop];
        }
    } )
    return lastObj;
}

const lastObj = assign( obj1, obj2 );
console.log(lastObj);  // 输出  {name: "thor", age: 18, sex: "male"}

基本上我们都会自己封装一个方法来进行合并, 有时候会略显麻烦, 甚至其实我们自己写的方法可能性能不是很友好

ES6的解决方案

学习ES6以后, 我们之前有知道ES6可以使用扩展运算符进行对象的合并, 来回忆一下

const obj1 = {
   
    name: 'loki',
    age: 18
}
const obj2 = {
   
    name: 'thor',
    age: 20