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为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.
随机推荐
- kafka web端管理工具 kafka-manager【转发】
1,下载与安装 $ git clone https://github.com/yahoo/kafka-manager.git $ cd kafka-manager $ ./sbt clean dist ...
- JVM堆内存参数优化,让性能飞起来
堆内存是Java进程的重要组成部分,几乎所有与应用相关的内存空间都和堆有关.现在主要介绍与堆内存相关的参数设置,这些参数对Java虚拟机中非常重要的,也是对程序性能有着重要的影响.让你彻底脱离OOM内 ...
- SAS学习笔记1
数据采样 简单随机抽样,从sashelp数据集中air数据文件中选取30个数 数据探索 数字特征的探索:均值.频数.最大值.最小值.众数.中位数.方差.标准差 数字分布的探索:是否服从正态分布 连续型 ...
- elasticsearch插件
bigdisk安装: 1.下载地址http://bigdesk.org/,注意和elasticsearch的版本对应关系 2.将文件上传到服务器elasticsearch的plugin目录下,解压 3 ...
- 架构 MVC MVP MVVM 简介 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- lsb_release -a linux查看版本未找到命令
解决方案 yum install -y redhat-lsb 安装完后
- C# 对象集合初始化
一.自动实现的属性 public class Person { // C# 3之前我们定义属性时,一般会像下面这样去定义 // 首先会先定义私有字段,再定义属性来对字段进行访问 //private s ...
- C# vb .net实现像素化效果滤镜打马赛克
在.net中,如何简单快捷地实现Photoshop滤镜组中的像素化效果打马赛克呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授 ...
- C# vb .net实现负片特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的负片特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- python day 15: IO多路复用,socketserver源码培析,
目录 python day 15 1. IO多路复用 2. socketserver源码分析 python day 15 2019/10/20 学习资料来自老男孩教育 1. IO多路复用 ''' I/ ...