ES6对象扩展——部分新的方法和属性
1、Object.is方法返回布尔值,和全等于===差不多,除了参数是+0和-0,以及NaN时
//Object.is,返回布尔值,和全等于===差不多,除了+0和-0,以及NaN
console.log(Object.is(+0,-0)); //false
console.log(+0 === -0); //true
console.log(Object.is(NaN,NaN)); //true
console.log(NaN === NaN); //false console.log(Object.is(true,false)); //false
console.log(Object.is(true,true)); //true
2、Object.assign方法返回一个对象,在复制或者合并一个对象时很常用到。
该方法用起来和扩展运算符很相似,属性名相同时,后面的会覆盖前面的。并且也是浅拷贝。
assgin(a,b)是将b对象中所有可枚举属性的值复制到目标对象a, 如果存在相同的属性,就将b对象中属性对应的值替换a对象的属性值。
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法:Object.assign(target, ...sources)
参数:
target:目标对象。
sources:源对象。
返回值:目标对象。
//Object.assign,在复制或者合并一个对象时很常用到
const obj = Object.assign({a:1},{b:2},{c:3},{d:4,e:5})
console.log(obj); //{a:1,b:2,c:3,d:4,e:5}
//用起来跟扩展运算符很相似,属性名相同时,后面的会覆盖前面的。并且也是浅拷贝
const obj11 = {
a:1,
b:{
c:2
}
};
let newObj1 = Object.assign({a:3},obj11); //{a:1,b:2,c:3,d:4,e:5}
console.log(newObj1.b.c); //2
newObj1.b.c = 100;
console.log(obj11.b.c); //100
3、Object.keys返回自身可枚举属性的所有key所组成的数组
Object.values返回自身可枚举属性的所有value所组成的数组
Object.entries返回每一对可枚举的key value所组成数组的数组
//Object.keys Object.values Object.entries
const obj22 = {
a:1,
b:2,
c:3,
d:4
}
//Object.keys返回自身可枚举属性的所有key所组成的数组
console.log(Object.keys(obj22)); //["a","b","c","d"]
//Object.values返回自身可枚举属性的所有value所组成的数组
console.log(Object.values(obj22)); //[1,2,3,4]
//Object.entries返回每一对可枚举的key value所组成数组的数组
console.log(Object.entries(obj22)); //[Array(2),Array(2),Array(2),Array(2)]
三个方法返回的都是自身可枚举的属性,也就是说使用for-of进行遍历的时候不需要像for-in一样使用hasOwnProperty()去判断是不是自身的,而不是原型上的属性
//代码接上
//三个方法返回的都是自身可枚举的属性,也就是说使用for-of进行遍历的时候不需要像for-in一样使用hasOwnProperty()去判断是不是自身的,而不是原型上的属性
for (let key of Object.keys(obj22)){
console.log(key); //打印结果是四行,分别是a b c d
}
for(let [k,v] of Object.entries(obj22)){
console.log(k,v); //打印结果是四行,分别是a 1,b 2,c 3,d 4
}
4、__proto__属性这个属性代表当前对象的原型
//__proto__这个属性代表当前对象的原型
//该属性位于在es6标准的附录中,在实际编码的时候尽量不要用到,调试编码的时候看看就好
const obj = {
a:1
}
console.log(obj.__proto__); //Object
5、Object.setPrototypeOf(要修改原型的对象,新原型 )方法可以用来修改一个对象的原型。
但是性能有些低下,建议不要使用。setPrototypeOf()方法性能低的原因是:设置原型可能会降低有权访问其原型已发生改变的所有 JavaScript 代码的性能。建议使用OBject.create()。
setPrototypeOf() 作用:Object.setPrototypeOf() 方法是设置一个指定的对象的原型到另一个对象 用法:Object.setPrototypeOf(obj, prototype)
第一个参数是要设置其原型的对象;第二个参数是要作为新的原型的对象
//Object.setPrototypeOf(要修改原型的对象,新原型 )方法可以用来修改一个对象的原型
const obj1 = {
a:1
};
const obj2 = {
b:1
}
const obj = Object.create(obj1); //create方法是创建一个对象的时候指定它的原型
console.log(obj.__proto__); //{a:1}
Object.setPrototypeOf(obj,obj2); //这个方法性能有点低下,建议不要使用
console.log(obj.__proto__); //{b:1}
6、Object.getPrototypeOf(对象名)方法读取对象的原型(跟__proto__相比起来,更推荐使用getPrototypeOf)
//Object.getPrototypeOf方法读取对象的原型
const obj1 = {a:1};
const obj = Object.create(obj1); console.log(obj.__proto__); //{a:1}
console.log(Object.getPrototypeOf(obj)); //{a:1}
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); //true
PS:推荐使用Object.create和getPrototypeO方法去操作对象的原型
7、super关键字,它可以访问到原型对象上的属性和方法(但是只有在使用简洁表示法的的时候才生效)
作用:是访问到对象的原型;可以访问和调用一个对象的父对象上的函数;
//super关键字,它可以访问到原型对象上的属性和方法
//要注意的是,对象只有使用简洁表示法的时候super关键字才能访问原型属性
const obj = {name:'xiaoming'};
const cObj = {
//如果写成say:function(){}或者箭头函数say:()=>{}是不能使用super的,会报错
say(){
console.log(`My name is ${super.name}`);
}
}
Object.setPrototypeOf(cObj,obj);
cObj.say();
this关键字是指向函数所在的当前对象, ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。
ES6对象扩展——部分新的方法和属性的更多相关文章
- ES6对象扩展
前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象 ...
- ES6(对象扩展)
ES6(对象(object)新增特性) 1.简介表示法 o,k 为属性:这种为无方法的情况. 这种为有方法. 2.属性表达式 ES6中,[a]就是 b . 3.新增API 1.数组也是引用类型 2.O ...
- es6 对象浅拷贝的2种方法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Easyui扩展或者重载(方法和属性)
1: 使用$.fn.datagrid.defaults.editors重载默认值. 每个编辑器都有以下方法: 名称 属性 描述 init container, options 初始化编辑器并返回目标对 ...
- ES6 - 对象扩展(增强字面量)
/** * 对象的扩展 * * 增强对象字面量 * * 解决问题:缩减代码 */ { /** * 1.属性简表示法 * 变量foo直接写在大括号里面.这时,属性名就是变量名, 属性值就是变量值 */ ...
- ES6 对象扩展
1.属性和变量可以简写 let birth = '2000/01/01'; const Person = { name: '张三', //等同于birth: birth birth, // 等同于he ...
- ES6对象扩展——扩展运算符
1.复制对象:使用扩展运算符复制对象时是浅拷贝 //复制对象:使用扩展运算符复制对象时是浅拷贝 const obj1 = { a:1, b:2, d:{ aa:1, bb:2 } } const ob ...
- 当调用对象中不存的方法、属性时,__getattr__的应用场景
一.Python中创建类和实例的调用顺序 new(cls) 创建对象前调用,如果类中没定义,会一直向父类找,直到object的 new 方法创建类.cls代表类本身 init(self) 创建类实例后 ...
- ES6中数组的新方法
数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...
随机推荐
- 【系统学习ES6】新专题发布
我要发免费专题了,向下看 公众号和博客都有一阵没更新了,丢了一些粉儿,但是也很庆幸,时时还会有人关注.我并不是什么专业讲师,文章都是利用业余时间手工原创.在这里非常感谢各位的支持和厚爱. 这个月开始, ...
- vue知识点---element el-date-picker 插件默认时间属性default-value怎么赋值?
参考网址: http://www.imooc.com/wenda/detail/509359 默认值,你放到 v-model里面就好. v-model="time" data(){ ...
- vue、gulp、webpack踩过的坑和笔记
1.监听流错误 stream-combiner2 2.热更新Browsersync与element冲突,换成gulp-connect 3.gulp-uglify压缩js不能压缩es6 4.使用vue- ...
- Spring WebFlow 远程代码执行漏洞(CVE-2017-4971)
影响版本 Spring WebFlow 2.4.0 - 2.4.4 访问id为1的酒店http:/ :8080/hotels/1,点击预订按钮"Book Hotel",填写相关信息 ...
- 表单验证插件jquery-validation以及案例
表单验证插件jquery-validation以及案例 1,获取并引入: (1)获取:官网:https://jqueryvalidation.org/ [home]->[files]->[ ...
- CCS box-flex属性
box-flex==按比例分配父标签的宽度or高度空间 1.非固定分配 eg.一块地总150平方分配给三孩子,按照2:1:1分 #老大 { 房子-分配: 2; } = 75平 #老二 { 房子-分配: ...
- 线性代数期末大总结I
行列式 n阶行列式的计算: \[\left|\begin{matrix}a_{11} & a_{12} & \cdots & a_{1n} \\a_{21} & a_{ ...
- XV6学习笔记(1) : 启动与加载
XV6学习笔记(1) 1. 启动与加载 首先我们先来分析pc的启动.其实这个都是老生常谈了,但是还是很重要的(也不知道面试官考不考这玩意), 1. 启动的第一件事-bios 首先启动的第一件事就是运行 ...
- 绿色djvu阅读软件
官方的djvu viewer都需要安装,总算找到一个绿色版的,名为STDU Viewer,可以阅读的格式包括DjVu, PDF, TIFF, XPS, FB2等,版本为1.6.2.
- Python实现AI图像识别-身份证识别
图像识别说白了就是把一张照片上面的文字进行提取,提供工作效率 需求分析 身份证识别主要是把一张身份证照片上面的文字信息进行提取,不用再使用人工去手动抄写了,下面给大家说的这个身份识别主要是使用pyth ...