ES6 对象增强
对象字面量语法扩展:
1, 属性初始化语法简写:给一个属性赋一个变量值,如果变量名和属性名相同,可以省略变量名和冒号,直接写属性名,js引擎在执行代码的时候,自动查找 和属性命名相同的变量并赋值。

let x = 1, y = 2;
let object = {
x, // 属性名是x,变量名也是x, 两者一致,可以简写
y
};
console.log(object.x); //output "1"

2, 更为简洁 的方法属性定义:ES5的时候,把一个函数赋值给属性的时候,函数必须是一个完整的函数定义
let object = {
myFunction: function(){
console.log("Hello World")
}
}
但是在ES6中,可以把:function 这一部分去掉了,写法如下
let object = {
myFunction(){
console.log("Hello World")
}
}
语法确实简洁多了,不过要注意一个特殊情况,只有给属性赋值的是匿名函数的时候,才可以使用简洁语法,如果赋值的是一个有名字的函数,那么就不能使用匿名函数了。如下情况就不能
let object = {
myFunction: function hello(){
console.log("Hello World")
}
}
函数hello 赋值给属性myFunction, 你可能会问,为什么要给函数取一个hello 名字,最常见的一种情况是递归,自己调用自己,如果没有名字,怎么调用?还有就是程序debugger 的时候,有函数名字可以直接定位, you don't know js 的作者就强烈建议书写有名字的函数。
3, 计算属性名:ES5 的时候,对象字面量中的属性都是事先定义好的, 不能使用变量,从而在程序运行的时候动态生成属性,但在ES6中,这种情况改变了,对象字面量中可以存在动态生成的属性,不过语法就要稍微变一下了,需要把动态属性用[] 包括起来,这样在程序运行的时候可以对[] 中的内容进行计算
let object = {
["first" + "Name"]: "Eden",
}; //extract
console.log(object["first" + "Name"]); //Output "Eden"
4, 对重复属性名的处理: 在ES5 的时候,如果给一个对象赋值为相同的属性,它就会报错。但在ES6 下,它不会报错了,它会取最后一个相同属性的值。
let obj = {
name: 'Sam',
name: 'Jason'
};
console.log(obj.name) // 'jason'
新的方法
1, Object.is() 方法: 判断两个数是否相等。你可能有点差异,不是有 == 和 === 来判断相等了吗,怎么还需要判断相等的方法? 不用担心,Object.is() 是用来处理极端情况的,比如NaN. NaN 和任何数都不相等,包含它本身,没有办法直接比较,现在就可以调用Object.is() 方法了,他就接受俩个要比较相等的参数。Object.is(NaN, NaN); 还有+0和-0, 对于js 引擎来说,他们两个是不相等的,但是 用== 和=== 做判断的时候,他们是相等的,为了解决这种问题,就可以使用Object.is(+0, -0)
console.log(+ === -); // true
console.log(Object.is(+, -)); // false console.log(Object.is(NaN, NaN)); // false
对于Object.is () 来说,你可能发现,我们几乎用不到它, 它就是对=== 操作符在某些极端情况下的纠正,所以对于比较,我们还是用== 或===, 平常怎么用就怎么用,只有碰到极端情况再用Object.is() 方法。
2, Object.assign(): 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(target, ...sources),target 目标对象,sources: 源对象
const target = { a: , b: };
const source = { b: , c: }; const returnedTarget = Object.assign(target, source); console.log(target); // Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }
3, Object.setPrototypeOf(), 设置一个对象的原型对象,它接受两个参数,一个是对象,一个是对象要链接到的原型对象 。Object.setPrototypeOf(obj, prototypeObj).
let person = {
greeting() {
return "hello";
}
} let dog = {
greeting() {
return "woof";
}
} let obj = {}; // obj 链接到person
Object.setPrototypeOf(obj, person);
console.log(obj.greeting()); // "hello"
// obj 链接到dog
Object.setPrototypeOf(obj, dog);
console.log(obj.greeting()); // woof
通过Object.setPrototypeOf() 方法可以动态地改变一个对象的原型对象。这里简单说一下对象的原型,在js中没有所谓的类式继承,因为js中没有java 中的类, 那Js中有什么呢? 它只有对象,当我们把一个对象链接到原型对象上的时候,它是对象和对象之间的关系,就像上面中的代码一样, obj 就一个对象,它的原型对象无论是person, 还是dog, 也是普通的对象, 对象和对象的链接关系,就像火车的车厢
通过链条链接起来一样, 把每一个车厢想象成每一个对象。为什么把对象链接起来呢? 因为另外一个对象有我们想要的方法,比如上面的greeting 方法。我们刚刚声明了一个对象obj, 空对象,什么都没有,刚要给他声明一个greeting 方法,突然发现person 对象有这个方法,那就不要声明了,拿过来用就可以了,这不,这两个对象就有必要链接到一起了。但执行obj.greeting()的时候,发现obj对象上并没有这个方法,但是发现它链接到一个对象person, 那就顺着链条继续找吧,正好,person 对象上有这个方法,就调用了person 对象上的方法。就像火车上找人一样,你先从第一车厢开始,没有,因为第一车厢和第二车厢链接起来了,你就到第二车厢去找,还是没有,第二车厢又和第三车厢链接到一起,你就去第三车厢去找,找到了,如果没有找到,继续第四车厢,因为每一个车厢都是链接起来的。如果所有的车厢都找完了,还是没有,那就真没有了。
那我们还能不能在obj上面定义一个greeting 方法,因为有时候原型对象上的方法不能完全满足要求?可以,当我们在一个对象上定义一个方法的时候,它就不会就找原型链了,直接调用对象上面的方法。
let obj = {
greeting() {
return 'obj';
}
};
但有时候, 你发现,在obj 对象中定义的方法,可能使用到原型对象上的同名方法, 只要调用原型对象上面的方法再进行一下组装就可以达到要求了。ES6 提供了super 关键词,它就指向原型对象
let obj = {
greeting() {
return super.greeting() + 'obj';
}
};
这里要注意的是,对象方法的定义只能使用简洁的语法形式,否则报错。
super 是怎么实现的呢?在ES6 中,如果一个对象中定义了方法,这个方法自动获取到一个内置的属性[[HomeObject]], 来指向这个对象。super 呢,就是通过Object.getPrototypeOf([[HomeObject]]) 来获取到原型对象。obj.greeting() greeting() 方法中的[[HomeObject]] 就指向了obj. 那里面的super 就是Object.getPrototypeOf(obj), 那就是person 或dog 了,super.greeting() 就相当于person.greeting()了, 更为准确的说是 person.greeting.call(this). 因为如果person中的greenting有this, 我们还要给它指定this 指向, 不能让里面的this 指向别的对象, 只能让this 指向 obj 了。
ES6 对象增强的更多相关文章
- ES6 对象增强和结构赋值
The enhanced Object literals: ES6 has added some new syntax-based extensions to {} object literal fo ...
- es6对象字面量增强
相对于ES5,ES6的对象字面量得到了很大程度的增强.这些改进我们可以输入更少的代码同时语法更易于理解.那就一起来看看对象增强的功能.对象字面量简写(Object Literal Shorthand) ...
- 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对象的扩展
对象(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 ...
随机推荐
- windows系统dokuwiki安装部署设置 xampp环境配置
简单记录一次安装dokuwiki的过程 dokuwiki下载 dokuwiki下载地址 https://download.dokuwiki.org/ 下载前有一些可选项目,版本.语言.插件,可以按照需 ...
- TypeScript|Angular踩坑笔记
今天按照Angular官网玩了下demo程序,踩了个小坑,记录下. TypeScript可以将变量申明为自定义类型,同时也不对该类型进行检查(不像C#,如果没有这个类型会报错) 比如下面这样: 如果我 ...
- 使用 FFT 分析周期性数据
可以使用傅里叶变换来分析数据中的变化,例如一个时间段内的自然事件. 天文学家使用苏黎世太阳黑子相对数将几乎 300 年的太阳黑子的数量和大小制成表格.对大约 1700 至 2000 年间的苏黎世数绘图 ...
- 在嵌入式设备中使用 JavaScript 的前景
by Conmajia PC上的JavaScript已经发展到ECMAScript 6(ES6),马上ES10都快出来了(虽然还是草案),但是硬件上的JS却很少听说.这几年手持设备/可穿戴设备的发展非 ...
- JAVA_新建一个方法并且求三个数中的最大值
package wac.wev.as;//新建一个方法在求最大值import java.util.Scanner; public class MaxLian {public static void m ...
- 2018/1.6 Javascript 继承和克隆
这种写法不是对象克隆,就是把obj的内存地址赋给obj2 通过 for in 克隆 不管公有还是私有的都克隆成私有的. js提供了一个克隆方法 objct.create() var obj2=obje ...
- 第三次上机,ADO接口的使用
<html> <head> <title>Reg</title> </head> <body><center> &l ...
- Linux常用查找命令
第一种:grep命令 示例: 第二种:find命令 示例: 第三种:locate命令 示例: 第四种:whereis命令 示例: 第五种:which命令 示例:
- APICloud Studio2新建应用报错和检出错误
今天心血来潮,闲暇时间想做个移动应用app,听一哥们说APICloud开发app很方便,就查询了一下,看了之后简直就是热血沸腾,我感觉正是我一直要找的工具 信心满满的开始着手使用,看了一下介绍我选择了 ...
- Spark Streaming 快速入门
一.简介 1.便于使用 Spark Streaming将Apache Spark的 语言集成API 引入流处理,使您可以像编写批处理作业一样编写流式作业.它支持Java,Scala和Python. 2 ...