JS对象创建可以通过哪些几种方式实现,具体是怎样的
Admin 2022-06-18 群英技术资讯 1354 次浏览
这篇文章主要介绍“JS对象创建可以通过哪些几种方式实现,具体是怎样的”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JS对象创建可以通过哪些几种方式实现,具体是怎样的”文章能帮助大家解决问题。前言:
在 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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要为大家详细介绍了JS、CSS和HTML实现注册页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要介绍了nuxt.js 多环境变量配置,一般在香米开发中会有三个环境开发环境也叫测试环境(test) 、RC环境也叫预发布环境(rc) 、线上环境(production) 下面来看看文章内容的详细介绍,需要的朋友可以参考一下
JavaScript 函数提供两个接口实现与外界的交互,其中参数作为入口,接收外界信息;返回值作为出口,把运算结果反馈给外界。下面本篇文章带大家了解一下JavaScript函数返回值,浅析下return语句的用法,希望对大家有所帮助!
本篇文章带大家聊聊Redux Hooks的使用细节,有不少朋友对此感兴趣,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。
Vue的方法和属性案例详解。Vue 实例提供了一些有用的实例属性与方法,下面我们来看看。对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇文章能帮助大家。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008