js的Object.assign用法示例分析

  1. 简介

Object.assign 是 ES6 新增的一个API,能够将一个或多个源对象的属性复制到目标对象上。它的参数依次为目标对象和一个或多个源对象。如果源对象中的属性已经存在在目标对象中,那么源对象中的属性值将覆盖目标对象中的属性值。

  1. 语法
Object.assign(target, ...sources)

参数:

  • target (必须):要将源对象复制到的目标对象。
  • sources (必须):一个或多个源对象,该对象将被复制到目标对象。如果要复制多个源对象,请将它们放在逗号后面。

返回值:目标对象。

例如,如果需要将 obj2 和 obj3 中的属性分别复制到 obj1 中,可以这么调用:

Object.assign(obj1, obj2, obj3);
  1. 示例1:深拷贝一个对象
const source = {
  name: '小明',
  age: 18,
  address: {
    city: '北京',
    street: '海淀区',
    code: '100000',
  },
};

const target = Object.assign({}, source);

console.log(target);

结果:

{
  "name": "小明",
  "age": 18,
  "address": {
    "city": "北京",
    "street": "海淀区",
    "code": "100000"
  }
}

解释:在这个示例中,源对象是一个嵌套的对象,它包含一个内部对象,通过 Object.assign() 方法将其赋值给一个新的空对象,实现了深拷贝。

  1. 示例2:对象属性的合并
const target = {
  name: '小明',
  age: 18,
};

const source1 = {
  age: 19,
  address: '北京',
};

const source2 = {
  email: 'xiaoming@gmail.com',
};

Object.assign(target, source1, source2);

console.log(target);

结果:

{
  "name": "小明",
  "age": 19,
  "address": "北京",
  "email": "xiaoming@gmail.com"
}

解释:在这个示例中,目标对象有两个属性:name 和 age。源对象 1 有两个属性:age 和 address。源对象 2 有一个属性:email。通过 Object.assign() 方法将所有的源对象合并到目标对象的属性中,属性值按照顺序依次覆盖。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js的Object.assign用法示例分析 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JS 数组随机洗牌的实例代码

    让我来详细讲解一下“JS 数组随机洗牌的实例代码”的完整攻略。 什么是数组随机洗牌 数组随机洗牌是指将一个数组中的元素随机打乱顺序的过程。通常用于游戏场景、抽奖等场景。 实现数组随机洗牌的步骤 下面是一份 JS 数组随机洗牌的实例代码,接下来我会详细讲解它: function shuffle(arr) { var len = arr.length; for(…

    JavaScript 2023年5月27日
    00
  • 基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)

    下面我来详细讲解一下基于JavaScript实现根据手机定位获取当前具体位置的完整攻略。 准备工作 获取用户地理位置授权。在JavaScript中,我们可以通过navigator.geolocation.getCurrentPosition()方法获取用户的当前位置信息。但是在获取位置信息之前,需要向用户请求获取他们的位置授权。用于请求授权的代码如下: “…

    JavaScript 2023年6月11日
    00
  • input禁止键盘及中文输入,但可以点击

    要实现input禁止键盘及中文输入,但可以点击的效果,需要使用HTML标签和JavaScript语言。下面是具体的实现步骤: HTML标签部分 在HTML标签中,需要给input标签添加readonly和onfocus两个属性。readonly属性可以让input禁止键盘输入,onfocus属性可以在输入框被点击时触发相应的JavaScript函数。具体代码…

    JavaScript 2023年6月11日
    00
  • IP查询系统的异步回调案例

    IP查询系统的异步回调案例可以分为以下几个步骤: 1.向第三方IP查询系统发出请求,获取IP信息。 2.解析获取到的IP信息,提取需要的数据。 3.对提取到的数据进行存储和处理。 4.将处理完成后的数据通过异步回调的方式返回给用户。 以下是详细的攻略: 第一步:请求IP信息 在代码中,这一步可以使用HTTP请求库向第三方IP查询系统发起GET请求,获取用户输…

    JavaScript 2023年5月28日
    00
  • JavaScript lodash常见用法系列小结

    JavaScript Lodash 常见用法系列小结 简介 在 JavaScript 编程中,Lodash是一个非常实用的工具库。它提供了很多实用的方法,可以让我们更方便地进行数组、对象等各种数据操作。 本系列将以实际应用场景为导向,总结 Lodash 常用的功能和用法,并且给出详细的代码示例。 目录 数组操作 对象操作 字符串操作 集合操作 函数式编程 其…

    JavaScript 2023年5月28日
    00
  • JavaScript面向对象核心知识与概念归纳整理

    下面我将详细讲解“JavaScript面向对象核心知识与概念归纳整理”的完整攻略。 JavaScript面向对象核心知识与概念归纳整理 什么是面向对象编程? 面向对象编程是一种编程方法,将现实世界中的实体抽象成一种对象,然后通过不同对象之间的交互实现程序功能。面向对象的编程方式比面向过程编程更加灵活、可重复使用,模块化程度也更高。 在 JavaScript …

    JavaScript 2023年5月27日
    00
  • vue项目创建步骤及路由router

    当创建一个Vue项目时,需要使用Vue CLI工具。Vue CLI是一个标准化的、快速开发Vue.js应用程序的工具,具有零配置的现代Web开发工具。 以下是Vue项目创建步骤: 步骤一:安装Vue CLI 首先,需要安装Vue CLI。可以使用npm进行安装,命令如下: npm install -g @vue/cli 步骤二:创建Vue项目 使用Vue C…

    JavaScript 2023年6月11日
    00
  • 原生js的ajax和解决跨域的jsonp(实例讲解)

    关于原生JS的AJAX和JSONP的介绍和实例讲解,我将从以下三个部分来进行详细解答。 AJAX的介绍和使用方法 AJAX全称为Asynchronous JavaScript and XML(异步的JavaScript和XML),是一种前端常用数据交换技术,能够实现页面异步刷新,避免了页面重新刷新的效果,减轻服务器对请求的压力。使用AJAX技术可以更好的优化…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部