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为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.
随机推荐
- [转帖]nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
nginx学习,看这一篇就够了:下载.安装.使用:正向代理.反向代理.负载均衡.常用命令和配置文件 2019-10-09 15:53:47 冯insist 阅读数 7285 文章标签: nginx学习 ...
- JQuery高级(二)
3. 事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数): * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为. * 表单对象.submit();//让表单提 ...
- 《学渣Linux笔记》——关于.bashrc与profile(涉及交互式与非交互式、登录与非登录shell)
<学渣Linux笔记>--关于.bashrc与profile(涉及交互式与非交互式.登录与非登录shell) 1.基本概念(个人理解) 交互式shell:等待用户输入,并执行相应操作的sh ...
- Java 函数式编程和Lambda表达式
1.Java 8最重要的新特性 Lambda表达式.接口改进(默认方法)和批数据处理. 2.函数式编程 本质上来说,编程关注两个维度:数据和数据上的操作. 面向对象的编程泛型强调让操作围绕数据,这样可 ...
- MOOC 数据库笔记(三):关系模型之基本概念
关系模型的基本概念 关系模型简述 1.最早由E.F.Codd在1970年提出. 2.是从表(Table)及表的处理方式中抽象出来的,是在对传统表及其操作进行数学化严格定义的基础上,引入集合理论与逻辑学 ...
- global position
观察, GestureDetector( child: CustomPaint(painter: StudyPaint(points: _points)), onPanEnd: (DragEndDet ...
- docker安装mysql笔记
首先 查找镜像 docker search mysql 拉取镜像 : docker pull mysql 拉取成功后,查看本地镜像: docker images 可以看到本地有两个镜像(redis是我 ...
- 【转载】C#使用ToList()将数组快速转换为List集合
在C#的编程中,数组和List集合是比较常用的两个集合类,有时候因为业务需要,需要将数组集合转换为List集合,此时就可以使用C#中的Linq的扩展方法ToList方法来实现,只需要简单的一条语句即可 ...
- css3 text-fill-color属性
text-fill-color是什么意思呢?单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.如果同时设置text-fill-color和colo ...
- 【BBED】编译及基本命令(1)
[BBED]编译及基本命令(1) 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你 ...