JavaScript 对象创建的3种方法


Posted in Javascript onNovember 17, 2021

前言:

JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量、new 关键字 和Object.create()函数来创建。

1、对象字面量

let obj = {}  // 空对象
let obj2 = {a:1, b:2}

let obj3 = {" hel": "wold"}  // 属性名如果有空格,可以用字符串字面量作为属性名

2、new 关键字创建对象

使用 new 关键字后面调用构造函数,创建一个新的对象

let o = new Object(); // 内置的构造函数

let m = new Math();

let a = new Array();

let d = new Date();

function Person(){  //自定义构造函数

}
let person = new Person()

3、使用 Object.create() 创建对象

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)

4、 使用扩展操作符:...

ES2018新增了扩展操作符...,将已有的对象属性复制到新的对象中

let foo  = {x:1, y:2}
let bar  = {z:3}

let zoo = {...foo, ...bar}

console.log(zoo) // {x:1, y:2, z:3}

需要注意的几点:

  • 扩展操作符只扩展对象的自有属性,继承属性不支持扩展
  • 如果扩展对象和被扩展的对象有相同名字的属性,属性的值由后面的对象决定

5、使用Object.assign()方法

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中新增的对象特性

6、简写属性

如果想创建多个变量名和对应值组合成的对象,原来需要像传统对象字面量语法构建对象

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}

7、简写方法

在对象中定义方法时,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

到此这篇关于JavaScript 对象创建的3种方法的文章就介绍到这了,更多相关JavaScript 对象创建方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
angular select 默认值设置方法
Jun 23 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 #Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 #Javascript
JavaScript高级程序设计之变量与作用域
javascript对象3个属性特征
详细聊聊浏览器是如何看闭包的
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
react 路由Link配置详解
Nov 11 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jquery中radio checked问题
2015/03/16 Javascript
js运动应用实例解析
2015/12/28 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python中的闭包实例详解
2014/08/29 Python
让Python代码更快运行的5种方法
2015/06/21 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python实现简单飞行棋
2020/02/06 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
市场营销管理制度
2014/01/29 职场文书
生产厂长岗位职责
2014/02/21 职场文书
党员领导干部承诺书
2014/05/28 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
建议书范文
2015/02/05 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技