ES6对象的个人总结
属性初始值的简写:
当一个对象的属性与本地变量同名时,不需要再写冒号和值,直接写属性名即可
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对象的个人总结的更多相关文章
- ES6 对象解构
ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...
- ES6对象扩展
前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象 ...
- ES6对象及ES6对象简单拓展
ES6对象和传统的JS比较起来支持简写,比如说属性简写方法简写,还支持name属性,可以通过他迅速得到函数属性名表达式(如果是用bind方法创造的函数name属性会返回bound加上原函数的名字,Fu ...
- es6对象字面量增强
相对于ES5,ES6的对象字面量得到了很大程度的增强.这些改进我们可以输入更少的代码同时语法更易于理解.那就一起来看看对象增强的功能.对象字面量简写(Object Literal Shorthand) ...
- es6对象的扩展
对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...
- ES5和ES6对象导出和导入(转载,待整理)
1.import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) // ...
- es6对象内函数的两种写法
es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...
- es6 对象浅拷贝的2种方法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- ES6(对象扩展)
ES6(对象(object)新增特性) 1.简介表示法 o,k 为属性:这种为无方法的情况. 这种为有方法. 2.属性表达式 ES6中,[a]就是 b . 3.新增API 1.数组也是引用类型 2.O ...
- ES6 对象拓展方法
一,ES6 对象拓展方法 ES6为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.
随机推荐
- 【转】ISE——完整工程的建立
FPGA公司主要是两个Xilinx和Altera(现intel PSG),我们目前用的ISE是Xilinx的开发套件,现在ISE更新到14.7已经不更新了,换成了另一款开发套件Vivado,也是Xil ...
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
- git 学习笔记 ---解决冲突
人生不如意之事十之八九,合并分支往往也不是一帆风顺的. 准备新的feature1分支,继续我们的新分支开发: $ git checkout -b feature1 Switched to a new ...
- 2019 同程旅游java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.同程等公司offer,岗位是Java后端开发,因为发展原因最终选择去了同程,入职一年时间了,之前面试了很多家公 ...
- Java之路---Day02
2019-10-17-20:21:22 顺序结构: 概述:顺序执行,根据编写的顺序,从上到下执行语句 判断语句1-if: if语句第一种格式: if(关系表达式){ 语句体; } 执行流程: 1.首先 ...
- 【转载】C#使用Newtonsoft.Json组件来序列化对象
在Asp.Net网站开发的过程中,很多时候会遇到对象的序列化和反序列化操作,Newtonsoft.Json组件是专门用来序列化和反序列化操作的一个功能组件,引入这个DLL组件后,就可使用JsonCon ...
- Function.prototype.call.apply作用详解
关于call()和apply()基本用法可以参阅如下两篇文章: (1).call方法参阅JavaScript call()一章节. (2).apply方法参阅JavaScript apply()一章节 ...
- vue辅助函数mapStates与mapGetters
状态管理器 <!-- store.js: --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export de ...
- 英语eschaunge交易所
eschaunge Eschaunge是一个外文单词,名词译为交易所,交易,交换,兑换(率),动词译为兑换, 交换,互换,交换,调换.是Exchange的替代形式 中文名:交易所,交易,交换 外文 ...
- 查找单链表中倒数第k个结点
本文转自:程序员面试题6--查找链表中倒数第k个结点 题目:输入一个单向链表,输出该链表中倒数第k个结点.链表的倒数第0个结点为链表的尾指针.链表结点定义如下: struct ListNode { i ...