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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
vue解决跨域问题(推荐)
Nov 10 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
php生成随机数的三种方法
2014/09/10 PHP
PHP微信支付开发实例
2016/06/22 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
python检测服务器是否正常
2014/02/16 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python探索之创建二叉树
2017/10/25 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python中封包建立过程实例
2021/02/18 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
美国温暖商店:The Warming Store
2018/12/15 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
Delphi笔试题
2016/11/14 面试题
业务经理的岗位职责
2013/11/16 职场文书
个人评语大全
2014/05/04 职场文书
经营理念口号
2014/06/21 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
食品卫生管理制度
2015/08/06 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers