ECMAScript 6 学习系列课程 (ES6 对象的最新用法)

23 篇文章 0 订阅

这里写图片描述

由于面向对象编程风格的普及,我们对对象已经有一定的认识了,对于ES6这样一个新的标准,又有那些新的特性,值得我们追捧呢?

对象的属性和方法

ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁:

const name = 'Richard';
let person = {name};
console.log(person); // {name: 'Richard'}

同样我们也可定义个function去返回一个对象,比如下面这段代码:

function formatPerson(name, age) {
    return { name, age };
}
console.log(formatPerson('Richard', 25)); // { name: 'Richard', age: 25 }

我们再来定义一个func和属性, 看一下代码:

let person = {
    name: 'Richard',
    age: 25,
    printName() {
        console.log(this.name);
    }
};

属性的赋值,我们也可以使用getter 和 setter 方法,我们具体看一下代码:

let person = {
    name: 'Richard',
    set name(value) {
        this.name = value;
    },
    get name() {
        return this.name;
    }
};

这个使用的不是特别多,我暂且只做个了解。

Object.is()

在ES5版本中,我们如果要判断两个对象是否相等, 尝尝用== 或者===来判断,但是都有一定的缺陷,前者会发生类型转化,后者在NaN的问题上也有缺陷。

对于ES6我们可以使用Obejct.is()进行判断:

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

Object.assign()

这是一个常用的方法,可以将对象进行合并, 第一个参数是目标对象,也就是产生的结果,后几个是数据源对象,这其中会把所有的属性,复制到目标对象,如果其中存在相同的属性名字,后面的源对象会逐一覆盖掉。

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.keys(), Object.values(),Object.entries()

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

扩展运算符

扩展运算符(…)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天外野草

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值