JavaScript 对象创建的3种方法

目录
  • 1、对象字面量
  • 2、new 关键字创建对象
  • 3、使用 Object.create() 创建对象
  • 4、 使用扩展操作符：...
  • 5、使用Object.assign()方法
  • 6、简写属性
  • 7、简写方法

前言：

在 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 对象创建方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS自定义对象创建与简单使用方法示例

    JS自定义对象创建与简单使用方法示例

    本文实例讲述了JS自定义对象创建与简单使用方法.分享给大家供大家参考,具体如下: <html> <head> <title>js自定义函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> //创建自定义对象 //方法一: // var obj=new Object(); //方法二 var obj={}; obj.n

  • js 创建对象的多种方式与优缺点小结

    目录 早期创建方式 工厂模式 构造函数模式 构造函数模式优化 原型模式 构造函数和原型模式组合 动态原型模式 寄生构造函数模式 稳妥构造函数模式 早期创建方式 var obj = new Object() obj.name ='xxx' obj.age = 18 或使用对象字面量 var o1 = { name: 'xxx', say: () => {} } var o2 = { name: 'xxx', say: () => {} } 缺点:使用同一个接口创建很多对象,会产生大量重复代码 工

  • JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】

    本文实例讲述了JavaScript 面向对象程序设计.分享给大家供大家参考,具体如下: 类的创建于实例对象 工厂模型创建对象 function CreatePerson ( name,sex,age ) { var obj = new Object(); obj.name = name; obj.sex = sex; obj.age = age; obj.sayName = function () { console.log( this.name ); } return obj; } var p

  • JS创建自定义对象的六种方法总结

    JS创建自定义对象的六种方法总结

    1.创建一个 Object 实例 var person = new Object(); person.name = "rose"; person.age = 18; person.job = "actor"; person.sayName = function () { console.log(this.name); }; console.log(person); 2.对象字面量 var person = { name: "rose", age:

  • JS 创建对象的模式实例小结

    本文实例总结了JS 创建对象的模式.分享给大家供大家参考,具体如下: 1.工厂模式 抽象了创建具体对象的过程,创建了一种函数,封装特定的接口创建对象的细节. 新建一个对象 定义属性和方法 return刚新建的对象 function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHi = function() { congsol

  • 详解 javascript对象创建模式

    详解 javascript对象创建模式

    创建模式 在javascript中,主要有以下几种创建模式: 工厂模式 构造函数模式 原型模式 组合模式 动态原型模式 寄生构造函数模式 稳妥构造模式 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式.javascript实现方式: function createPerson(name, obj, job) { var o = new Object(); o.name = name; o.obj = obj; o.job = job; o.sayName = function() { al

  • JavaScript创建对象的四种常用模式实例分析

    本文实例讲述了JavaScript创建对象的四种常用模式.分享给大家供大家参考,具体如下: 这里介绍了javascript中创建对象常用的几种模式,包括:工厂模式,构造函数模式,原型模式,组合构造函数与原型的模式,动态原型模式. 一.工厂模式 看如下代码: function getMySon(name,sex){ var o={}; o.name=name; o.sex=sex; o.sayName = function(){ alert(this.name); } return o; } so

  • 详解js创建对象的几种方式和对象方法

    这篇文章是看js红宝书第8章,记的关于对象的笔记(第二篇). 创建对象的几种模式: 工厂模式: 工厂是函数的意思.工厂模式核心是定义一个返回全新对象的函数. function getObj(name, age) { let obj = {} obj.name = name obj.age = age return obj } let person1 = getObj("cc", 31) 缺点:不知道新创建的对象是什么类型 构造函数模式: 通过一个构造函数,得到一个对象实例. 构造函数和

  • 原生JavaScript创建不可变对象的方法简单示例

    本文实例讲述了原生JavaScript创建不可变对象的方法.分享给大家供大家参考,具体如下: Javascript是一种灵活的语言,你可以重新定义任何东西,但是当项目变得复杂时,我们会发现可变数据结构的问题.随着JavaScript的最新版本的发布这种情况发生了改变.现在可以创建不可变的对象了.本文介绍如何用三种不同的方法来做. 对象的不变性意味着我们不希望对象在创建后即以任何方式更改(将它们设置为只读类型). 假设我们需要定义一个 car 对象,并在整个项目中使用它的属性来执行操作.我们不能允

  • JavaScript 对象创建的3种方法

    目录 1.对象字面量 2.new 关键字创建对象 3.使用 Object.create() 创建对象 4. 使用扩展操作符:... 5.使用Object.assign()方法 6.简写属性 7.简写方法 前言: 在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量.new 关键字 和Object.create()函数来创建. 1.对象字面量 let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {"

  • JavaScript对象封装的简单实现方法(3种方法)

    本文实例讲述了JavaScript对象封装的简单实现方法.分享给大家供大家参考,具体如下: Javascript在HTML中变得越来越强大,富客户端,HTML5中的WebGL等.但是我们书写Javascript的时候往往很随意,使用对象的封装是极好的.这里介绍Javascipt三种创建对象的方法. 1. 使用关键字new创建对象 function Person(name, age) { this.name = name; this.age = age; } var p = new Person(

  • JavaScript获取对象key的几种方法和区别

    JavaScript获取对象key的几种方法和区别

    目录 1.Object.keys()遍历自身可以枚举属性 2.Ojbect.values() /Ojject.entries() 3.for-in 遍历可枚举属性prototype 属性 4.hasOwnProperty 遍历可枚举属性 5.getOwnPropertyNames() 返回可枚举属性和不可枚举属性 6.getOwnPropertySymbols() 返回symbol类型的key属性, 7.对象对key的获取方法 8.对象声明/对象赋值 9.对象扩展 1.Object.keys()

  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢. 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要

  • JavaScript对象创建模式实例汇总

    本文实例总结了JavaScript对象创建模式.分享给大家供大家参考,具体如下: 在JavaScript中创建对象是很容易的,可以使用对象字面量或者构造函数.常用的创建对象的模式有以下几种: 一. 工厂模式 工厂模式抽象了具体对象的过程,用函数来封装以特ing接口创建对象的细节. 如下: function createAnimal(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayName = function

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

  • JavaScript中数组的22种方法必学(推荐)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

  • JavaScript遍历数组的三种方法map、forEach与filter实例详解

    本文实例讲述了JavaScript遍历数组的三种方法map.forEach与filter.分享给大家供大家参考,具体如下: 前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法,分别为:map.forEach.filter,在讲解知识点的同时,会类比相识的函数进行对比,这样会有助于思考方法的利与弊. 一.Js自带的map()

  • JavaScript判断数据类型有几种方法及区别介绍

    有五种数据判断类型方法typeof .instanceof.constructor.Object.prototype.toString.call().jquery.type() 一.typeof方法 typeof是个操作符,可以判断基本数据类型(返回的结果只能是number,string,boolean,null,symbol,function,object) 返回值分以下几种 对于基本类型.除了null值返回object以外,其他均返回正确的结果 对于引用值来说,除了function返回fun

随机推荐