ES6中对象的扩展

1. 属性的简洁表示法

可以直接写入变量和函数作为对象的属性和方法。在对象中只写属性名,不写属性值,代表属性值等于和属性名相同的的变量的值。

属性的简写


let foo = 'bar';
let baz = {foo}; // { foo: 'bar' }
// 等同于
let baz = { foo: foo}

方法的简写

let o = {method: function() {return 'hello';}
}let o = {method() {return 'hello';}
}

好处:

  • 函数返回会很方便
  • 书写很方法
  • CommonJS输出变量会很方便

如果某个方法的值是一个Generator函数,则前面需要加上星号。

const obj = {* m() {yield 'hello world';	}
}

2. 属性名表达式

在js之前对象定义属性名可以使用标识符或者表达式。但是如果使用字面量定义对象(大括号),只能使用标识符定义,不能使用表达式。

之前写法

// 标识符定义
obj.foo = true;
// 表达式定义
obj['a'+ 'b'] = 123;

在ES6中在定义对象时表达式可以定义属性名、方法名。

但是属性名表达式不能与简洁表示法一起使用,否则会报错。

// 定义在对象中
let propKey = 'foo';
let obj = {[propKey]: true,['a' + 'b']: 123,
}// 定义在方法
let a = {'first word': 'hello',['a'+'b'](){return 'hi';	}
}// 不能与简洁表示法一块使用
let foo = 'bar';
let baz = { [foo] }; // 会报错
// 可以这样写
let baz = { [foo]: foo }

注意:如果属性表达式是一个对象,默认情况下会自动转为字符串[object Object],这样就要特别注意!

const keyA = { a: 1};
const keyB = { b: 2};
const myObject = {[keyA]: 'valueA',[keyB]: 'valueB',
}
console.log(myObject);  // [object Object]: 'valueB'

这是因为这两个属性名都是对象,都转成同一个属性名[object Object],所以就把上面的属性自动覆盖掉了,不能有相同名称的属性名。

3. 方法的name属性

函数的name属性返回函数名,方法也是函数,也有name属性并返回函数名即方法名。

const person = {sayName() {console.log('hello');	}
}
person.sayName.name // 'sayName'

对于方法使用了get、set函数,则name属性不在该方法上。则在方法属性的描述对象的get和set属性上,返回值会在方法名前加上get和set。

如何操作获取含有get、set的方法名?

  1. 首先可以使用Object.getOwnPropertyDescriptor()方法,获取该属性的描述对象。
  2. 然后在使用`name`属性获取方法名。
const obj = {get foo() {},set foo(x) {}
}
obj.foo.name; // 会报错const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name; // 'get foo'
descriptor.set.name; // 'get foo'

特殊情况!bind方法创造的函数,name属性返回值会在函数名的前面加上bound;Function构造函数创造的函数,name属性返回anonymous

(new Function()).name // 'anonymous'const doSomething = function(){}
doSomething.bind().name // 'bound doSomething'

如果对象的方法是一个Symbol值,那么属性返回的是这个Symbol值的描述。

4. Object.is()

用来比较两个值是否严格相等,与严格相等运算符(===)的行为一致。返回布尔类型

两个不同的是,+0不等于-0,NaN等于自身

Object.is('foo', 'foo'); // trueObject.is(NaN, NaN); // true
Object.is(+0, -0); // false

为什么ES6要提供Object.is方法?

因为在ES5中比较两个值是否相等,只有相等运算符()和严格相等运算符(=)两种,但他们有个缺点,前者在比较时会自动转换数据类型,后者在比较时,NaN不等于自身,+0等于-0,造成js中缺少一种运算,就是在所有环境中,只要两个值是一样的,它们就应该相等。所有在ES6中提出了Same-value equality(同值相等)算法来解决这个问题。

如何在ES5中模拟Object.is

Object.defineProperty(Object, 'is', {value: function(x, y) {if(x === y) {// 针对+0 不等于-0的情况return x !== 0 || 1 / x === 1 /y; }// 针对NaN的情况return x !== x && y !== y;},configurable: true,enumerable: false,writable: true
})

5. Object.assign()

用于将源对象的所有可枚举属性复制到目标对象。

第一个参数:目标对象。后面的参数都是源对象,后面的参数可以为多个。

let target = { a: 1};
let source1 = { b: 2};
let source2 = { c: 3};
Object.assign(target, source1, source2);
target // { a: 1, b: 2, c: 3 }

注意点

  • 如果目标对象中与源对象有同名属性,则后面的属性会覆盖前面的属性。
  • 如果只有一个参数,也就是目标对象,Object.assgin会直接返回该参数。如果不是对象,会先转成对象,然后返回。由于undefined和null无法转成对象,所以会报错
typeof Object.assign(2); // 'object'
Object.assign(undefined); // 报错
  • 如果非对象出现在源对象的位置,会先转对象,无法转的会先跳过,这意味着undefined和null不会报错。
let obj = {a: 1};
Object.assign(obj, undefined) === obj; // true
  • 数值、字符串和布尔值在源对象中,不会报错,字符串会以数组形式复制到目标对象中,其他值直接跳过
const obj = Object.assign({}, 12, true, 'ab'); // {'0': 'a', '1': 'b'}

可以看出转成对象后,它们的原始值都会包装在对象的内部属性[[PrimitiveValue]]上面,这个属性是不会被Object.assign复制的。只有字符串的包装对象会产生可枚举的实义属性,才会被拷贝

  • Object.assign只会对源对象自身属性拷贝,不会复制继承过来的属性,也不会复制不可枚举的属性。
  • 属性名也Symbol值的属性也会被复制
Object.assign({a: 'b'}, {[Symbol('c')]: 'd'});
// { a: 'b', Symbol(c): 'd'}
  • 复制是浅拷贝不是深拷贝

用途

  • 为对象添加属性
  • 为对象添加方法
  • 克隆对象

把一个原始对象复制到一个空对象中

  • 合并多个对象
  • 为属性指定默认值

6. 属性的可枚举性

对象的每一个属性都具有一个描述对象,用来控制属性的行为,使用Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj);
/**{value: 123,writable: true,enumerable: true,configurable: true}*/

enumerable属性称为可枚举性,若属性值为true,则可以枚举,为false则不能,遍历时会忽略。

会忽略enumerable为false属性的操作,在ES5中有3个,ES6又新增了一个。

  • for…in循环:只遍历对象自身和继承过来的可枚举属性
  • Object.keys():返回对象自身可枚举属性的键名
  • JSON.stringify():只串行化对象自身的可枚举属性
  • Object.assign():遍历对象自身可枚举的属性

7. 属性的遍历

共有5中方法

  • for … in

只遍历对象自身和继承过来的可枚举属性

  • Object.keys(obj)

返回一个数组,包括对象自身可枚举属性的键名

  • Object.getOwnPropertyNames(obj)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/124602.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将3D MAX设计模型导入NX1988

将3D MAX设计模型导入NX1988 概述导入流程导出喜欢的模型对模型进行修改模型贴图 概述 一般家装设计都不会用NX之类的产品设计软件,也没有通用的文件格式可以互相转换,本文的目的是将从网上下载的一些设计较好的3D MAX模型导入到NX软件中借用&#xff0…

Ultralytics(YoloV8)开发环境配置,训练,模型转换,部署全流程测试记录

关键词:windows docker tensorRT Ultralytics YoloV8 配置开发环境的方法: 1.Windows的虚拟机上配置: Python3.10 使用Ultralytics 可以得到pt onnx,但无法转为engine,找不到GPU,手动转也不行&#xff0…

5.Vectors Transformation Rules

在上节,有个问题:向量分量的转换方式 与 新旧基底的转换方式相反 用例子来感受一下, 空间中一向量V,即该空间的一个基底:e1、e2 v e1 e2 现把基底 e1 、 e2 放大两倍。变成 基向量放大了两倍, 但对于…

微信小程序template界面模板导入

我们有些时候 会有一些比较大但并不复杂的界面结构 这个时候 你可以试试这种导入模板的形式 我们在根目录创建一个 template 目录 然后下面创建一个 text文件夹下面创建一个 test.wxml 参考代码如下 <template name"textIndex"><text class "testw&…

深度学习笔记之微积分及绘图

深度学习笔记之微积分及绘图 学习资料来源&#xff1a;微积分 %matplotlib inline from matplotlib_inline import backend_inline from mxnet import np, npx from d2l import mxnet as d2lnpx.set_np()def f(x):return 3 * x ** 2 - 4 * xdef numerical_lim(f, x, h):retur…

React18入门(第一篇)——JSX、TSX语法详解

文章目录 一、JSX 语法简介二、和 HTML 标签的几点不同三、JSX 属性四、JSX 事件4.1 简单点击事件4.2 类型限制4.3 带参数&#xff0c;箭头函数 五、插入 JS 变量六、JSX 中使用条件判断七、循环 一、JSX 语法简介 JSX - 是 JS 的扩展&#xff0c;写在 JS 代码里面&#xff0c…

云安全之HTTP协议介绍

HTTP的基本概念 什么是网络协议 网络协议是计算机之间为了实现网络通信而达成的一种“约定”或者”规则“&#xff0c;有了这种”约定不同厂商生产的设备&#xff0c;以及不同操作系统组成的计算机之间&#xff0c;就可以实现通信。 网络协议由三个要素构成&#xff1a;1、语…

【Unity2022】Unity实现在两个物体之间连出一条线

文章目录 Line Renderer组件添加Line Renderer组件重要属性Positions&#xff08;位置&#xff09;Width &#xff08;宽度&#xff09;Material&#xff08;材质&#xff09;其他属性 使用脚本绘制直线绳子运行结果其他文章 Line Renderer组件 我们可以使用LineRenderer组件来…

百度交易中台之内容分润结算系统架构浅析

作者 | 交易中台团队 导读 随着公司内容生态的蓬勃发展&#xff0c;内容产出方和流量提供方最关注的“收益结算”的工作&#xff0c;也就成为重中之重。本文基于内容分润结算业务为入口&#xff0c;介绍了实现过程中的重难点&#xff0c;比如千万级和百万级数据量下的技术选型和…

基于SSM的健身房管理系统

基于SSM的健身房管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 角色&#xff1a;管理员、用户 查看健身课程列表、新闻公告查看、推荐课程、购买…

LIMS实验室信息管理系统源码 基于计算机的数据处理技术、数据存储技术、网络传输技术、自动化仪器分析技术于一体

LIMS 是一个集现代化管理思想与基于计算机的数据处理技术、数据存储技术、网络传输技术、自动化仪器分析技术于一体&#xff0c;以实验室业务和管理工作为核心&#xff0c;遵循实验室管理国际规范&#xff0c;实现对实验室全方位管理的信息管理系统。 LIMS将样品管理、数据管理…

[CSCCTF 2019 Qual]FlaskLight 过滤 url_for globals 绕过globals过滤

目录 subprocess.Popen FILE warnings.catch_warnings site._Printer 这题很明显就是 SSTI了 源代码 我们试试看 {{7*7}} 然后我们就开始吧 原本我的想法是直接{{url_for.__globals__}} 但是回显是直接500 猜测过滤 我们正常来吧 {{"".__class__}} 查看当前…