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为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.
随机推荐
- poj1458公共子序列 C语言
/*Common SubsequenceTime Limit: 1000MS Memory Limit: 10000KTotal Submissions: 56416 Accepted: 23516D ...
- go开发环境
1.go 下载地址 https://studygolang.com/dl 根据操作系统 下载相应的安装包 2.设置环境变量 goroot gopath path 增加%goroot%\bin 3.开发 ...
- golang(二)
基本结构和基本数据类型 指针 不像 Java 和 .NET,Go 语言为程序员提供了控制数据结构的指针的能力:但是,你不能进行指针运算.通过给予程序员基本内存布局,Go 语言允许你控制特定集合的数据结 ...
- C++编译器会对没有构造函数的类生成默认构造函数吗?(有必要的时候才生成,要看情况。有反汇编验证)
之前在上C++的课的时候,印象中有那么一句话:如果一个类没有任何构造函数,那么编译器会生成一个默认的构造函数 今天在看<深度探索C++对象模型>的第二章:“构造函数语意学”的时候发现之前听 ...
- Parameter 0 of method sqlSessionTemplate in org.mybatis.spring.boot.autoconfigure.MybatisAutoConfiguration required a single bean, but 2 were found:
Parameter 0 of method orderSqlSessionFactory in com.config.MultipleDBConfig required a single bean, ...
- Tomcat组件梳理--Server
Tomcat组件梳理--Server 1.Server组件的定义和功能概述 定义: Server组件用于描述一个启动的Tomcat实例,一个Tocmat被启动,在操作系统中占用一个进程号,提供web服 ...
- RHEL6搭建网络yum源软件仓库
RHEL的更新包只对注册用户生效,所以需要自己手动改成Centos的更新包 一.查看rhel本身的yum安装包 rpm -qa | grep yum 二.卸载这些软件包 rpm -qa | grep ...
- Vue-webpack-hbuilderx 开发前端基本命令
--创建Vue 项目 pc 需要装 node 环境 ,安装完之后,就可以在cmd中使用npm 命令了 1:npm install -g vue-cli //电脑端需要安装vue 脚手架模板,电脑端一 ...
- Django:内置组件Content-Type
12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...
- JS-练习题
1.foo()结果 function foo() { bar.apply(null, arguments); } function bar(){ console.log(arguments); } f ...