JS对象创建可以通过哪些几种方式实现,具体是怎样的
Admin 2022-06-18 群英技术资讯 639 次浏览
前言:
在 JavaScript
中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量、new
关键字 和Object.create()
函数来创建。
let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {" hel": "wold"} // 属性名如果有空格,可以用字符串字面量作为属性名
使用 new
关键字后面调用构造函数,创建一个新的对象
let o = new Object(); // 内置的构造函数 let m = new Math(); let a = new Array(); let d = new Date(); function Person(){ //自定义构造函数 } let person = new Person()
let o = Object.create({x:1, y:2}); console.log(o.x+o.y) //3
新对象o 将继承 {x:1, y:2}
,属性x和y称为继承属性, 如果传入的参数是null
,则这个对象不会继承任何对象。被继承的对象又称之为“原型”。
Object.create(null)
ES2018新增了扩展操作符...,将已有的对象属性复制到新的对象中
let foo = {x:1, y:2} let bar = {z:3} let zoo = {...foo, ...bar} console.log(zoo) // {x:1, y:2, z:3}
需要注意的几点:
assign
可以把一个对象的属性复制到另一个对象, assign
接收两个或多个参数,第一个参数为目标对象,第二个及后续参数为来源对象,函数将把来源对象的属性复制到目标对象,并返回目标对象。
let foo = {x:1, y:2} let bar = {z:3} let zoo = {} let obj = Object.assign(zoo, foo, bar) console.log(zoo) // {x:1, y:2, z:3} console.log(obj===zoo) // true
另外补充两个ES6
中新增的对象特性
如果想创建多个变量名和对应值组合成的对象,原来需要像传统对象字面量语法构建对象
let x=1, y =2; let o = {x:x, y:y} console.log(o) // {x:1, y:2}
ES6
之后可直接简写属性,省去分号和属性名
let o2 = {x, y} console.log(o2) // {x:1, y:2}
在对象中定义方法时,ES6
以前需要,定义方法时需要像定义普通属性一样,通过函数表达式定义方法
let point={ x:1, y:2, area: function(){ return this.x*this.y } } console.log(point.area()) //2
而ES6
之后可以省略冒号和function
关键字,以一种简单的方式来定义对象的方法。
let point2={ x:1, y:2, area(){ return this.x*this.y } } console.log(point2.area()) //2
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,下面这篇文章主要给大家介绍了关于vue如何通过点击事件实现页面跳转的相关资料,需要的朋友可以参考下
这篇文章主要介绍了React自定义视频全屏按钮实现全屏功能,通过绘制全屏按钮,并绑定点击事件,编写点击事件,通过实例代码给大家详细讲解,需要的朋友可以参考下
本篇文章给大家带来了关于javascript的相关知识,其中主要整理了引入的相关问题,Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,下面一起来看一下,希望对大家有帮助。
TypeScript团队发布了TypeScript 4.1,其中包括功能强大的模板字面量类型、映射类型的键重映射以及递归条件类型。下面本篇文章就来带大家了解一下TypeScript中的模板字面量类型,希望对大家有所帮助!
这篇文章给大家分享的是JavaScript如何清空文本框的值。在网页设计中,文本框的使用是很常见的,为了提供网页访问者的使用体验,一键清除文本框的内容很加分,那么这个效果怎样做呢?文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008