属性初始值的简写:

当一个对象的属性与本地变量同名时,不需要再写冒号和值,直接写属性名即可

let fullName = '杨三', age = 19;

let obj = {
fullName: fullName,
age: age
}; // 1. 当一个对象的属性与本地变量同名时,不需要再写冒号和值,直接写属性名即可。
let obj = {
fullName,
age
};

对象方法的简写:

// 在 ES 5 中,如果为对象添加方法,必须要通过指定名称并完整定义函数来实现。
let obj = {
fullName: '张三',
sayName: function () {
return this.fullName;
}
}; // 在 ES 6 中,语法更简洁,取消了冒号和 function 关键字。如下所示:
let obj = {
fullName: '张三',
sayName () {
return this.fullName;
}
};

可计算的属性名:

// 在对象字面量中使用方括号表示该属性名是可计算的,方括号中的内容会被计算求值,最终转化成一个字符串,该字符串就是最终的属性名。
let suffix = 'name'; let person = {
['first' + suffix]: '张三',
['last' + suffix]: '泰坦尼'
}; console.log(person)

新增的两个方法:

Object.is()             Object.assgin()

1 . 在有些情况下,即是全等运算符比较出来的结果也是不正确的。

  +0 和 -0 在 JS 解析引擎中被表示为两个完全不同的实体,而如果使用全等运算符(===)对两者进行比较,得到的结果是两者相等 。

console.log(+0 == -0);           // true
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

  NaN 和 NaN 在 JS 解析引擎中被表示为两个完全相同的实体,但是无论使用等于(==)还是全等于(===),得到的结果都是 false。

console.log(NaN == NaN);           // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

  在大多数情况下,Object.is()方法的比较结果与全等运算符完全相同,唯一的区别在于 +0 和 -0 会被识别为不相等,NaN 和 NaN 会被识别为相等。

------------------------------------------------------------------------------------------------------------------------------

2.  Object,assign()方法可以接收任意数量的源对象(obj2,obj3),并按照指定的顺序将属性复制到接收对象(obj1)。

如果多个源对象具有同名属性,则排位靠后的源对象会覆盖排外靠前的对象。

let obj1 = {
fullName: '陈世美',
sayName () {
return this.fullName;
}
}; let obj2 = {
fullName: '武大郎',
age: 20
}; let obj3 = {
fullName: '武则天',
gender: '女'
}; // 通过自定义方法实现了一个可以合并多个对象的方法,
function mixin(receiver, ...suppliers) {
suppliers.forEach(supplier => {
Object.keys(supplier).forEach(key => {
receiver[key] = supplier[key]
})
})
return receiver;
}
console.log(mixin(obj1, obj2, obj3)) // 使用 ES6 新增 Object.assgin() 方法将多个对象的属性合并到第一个对象中。
Object.assign(obj1, obj2, obj3); console.log(obj1)
console.log(obj2)
console.log(obj3)

重复的对象字面量属性:

// 对于每一组重复属性,都会选取最后一个取值。
let obj = {
fullName: '张三',
fullName: '李四',
age: 18,
age: 20
}; console.log(obj.fullName); // '李四'
console.log(obj.age); //

自有属性枚举属性:

ES5 中并没有定义对象属性的枚举顺序,有 JavaScript 引擎厂商自行决定。

ES6 中明确规定了对象的自有属性被枚举时的返回顺序。

自有属性枚举顺序的基本规则:

  1. 所有数字按升序

  2. 所有字符串按照它们被加入对象时顺序排序

let obj = {
a: 1,
0: 2,
c: 3,
2: 4,
b: 5,
1: 6
}; console.log(Object.getOwnPropertyNames(obj)); // ["0", "1", "2", "a", "c", "b"]

改变对象的原型:

let person = {
getGreeting () {
return 'Hello';
}
}; let dog = {
getGreeting () {
return 'woof';
}
}; // 使用 create() 方法将 person 对象作为原型对象
let friend = Object.create(person); // {}
console.log(friend.getGreeting()); // 'Hello'
console.log(Object.getPrototypeOf(friend) === person); // true // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting()); // 'Hello'
console.log(Object.getPrototypeOf(friend) === dog); // true

使用 super 关键字访问原型对象:

let person = {
getGreeting () {
return 'Hello';
}
}; let dog = {
getGreeting () {
return 'woof';
}
}; let friend = {
getGreeting () {
return Object.getPrototypeOf(this).getGreeting.call(this) + ', hi';
}
}; // ES 6 引入了 super 关键字,super 指向当前对象的原型对象,实际上也就是 Object.getPrototypeOf(this) 的值,于是,上面的代码可以简化成如下形式:
let friend = {
getGreeting () {
return super.getGreeting() + ', hi';
}
}; // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 person
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting()); // 'Hello'
console.log(Object.getPrototypeOf(friend) === person); // true // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting()); // 'Hello'
console.log(Object.getPrototypeOf(friend) === dog); // true

ES6对象的个人总结的更多相关文章

  1. ES6 对象解构

    ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...

  2. ES6对象扩展

    前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象 ...

  3. ES6对象及ES6对象简单拓展

    ES6对象和传统的JS比较起来支持简写,比如说属性简写方法简写,还支持name属性,可以通过他迅速得到函数属性名表达式(如果是用bind方法创造的函数name属性会返回bound加上原函数的名字,Fu ...

  4. es6对象字面量增强

    相对于ES5,ES6的对象字面量得到了很大程度的增强.这些改进我们可以输入更少的代码同时语法更易于理解.那就一起来看看对象增强的功能.对象字面量简写(Object Literal Shorthand) ...

  5. es6对象的扩展

    对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...

  6. ES5和ES6对象导出和导入(转载,待整理)

    1.import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) // ...

  7. es6对象内函数的两种写法

    es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...

  8. es6 对象浅拷贝的2种方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. ES6(对象扩展)

    ES6(对象(object)新增特性) 1.简介表示法 o,k 为属性:这种为无方法的情况. 这种为有方法. 2.属性表达式 ES6中,[a]就是 b . 3.新增API 1.数组也是引用类型 2.O ...

  10. ES6 对象拓展方法

    一,ES6 对象拓展方法 ES6为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.

随机推荐

  1. IDEA界面太丑??尝试一下这几个风格

    >>>>>>>>>>原文地址<<<<<<<<<< >>>> ...

  2. 不安全的验证码Insecure CAPTCHA

    没啥好讲的,当验证不合格时,通过burp抓包工具修改成符合要求的数据包.修改参数标志位.USER-AGENT之类的参数. 防御 加强验证,Anti-CSRF token机制防御CSRF攻击,利用PDO ...

  3. js函数(续)

    一.全局变量和局部变量全局变量:当前js页面中均可使用的变量[声明在函数外面的变量],整个js页面中均可以使用.局部变量:声明在函数内部的变量,只能在函数内部使用.eg: var a = 1; con ...

  4. 【MFC】在CHtmlView中在同一窗口显示新打开页面

    使用MFC的单文档,用IE核心做的简单浏览器.当打开一个新的链接时,IE核心会使用IE来打开一个新窗口显示打开的新页面.为了让新页面在本程序中显示,我试了如下方法,其中的问题一并列出: 方法1.重载C ...

  5. webpack练手项目之easySlide(一):初探webpack

    最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力.     webpack是一个前端的打包管理工具,大家可以前往:http:/ ...

  6. nginx-ingress之server-snippet用法

    apiVersion: extensions/v1beta1 kind: Ingress metadata: annotations: nginx.ingress.kubernetes.io/serv ...

  7. printf打印字节

    int i = 0; printf("buf:"); for(i = 0; i < sizeof(buf); i++) { printf("0x%x", ...

  8. iOS多线程GCD简介(二)

    在上一篇中,我们主要讲了Dispatch Queue相关的内容.这篇主要讲一下一些和实际相关的使用实例,Dispatch Groups和Dispatch Semaphore. dispatch_aft ...

  9. Windows上安装ElasticSearch7

    安装JDK1.8(包括)以上版本 安装ElasticSearch ElasticSearch下载地址: https://www.elastic.co/downloads/elasticsearch 双 ...

  10. 1M大概多少个字

    <?php echo strlen("你"); 保存文件为gbk 输出2 保存文件为utf-8 输出3 说明不同编码占用字节不同 1M=1024kB 1KB = 1024B ...