原生js实现复制对象、扩展对象 类似jquery中的extend()方法

实现复制对象可以使用Object.assign()方法或者扩展运算符(...);实现扩展对象可以自己实现一个extend()方法。

复制对象

使用Object.assign()方法

Object.assign()方法可以将源对象的属性,复制到目标对象中。

语法

Object.assign(target, ...sources)

参数

  • target:目标对象,在这个对象上复制源对象的属性。如果不提供目标对象,则以空对象{}为默认值。
  • sources:一个或多个源对象。这些对象的属性将被复制到目标对象中。

示例

// 复制对象
const obj1 = {a: 1, b: 2};
const obj2 = Object.assign({}, obj1);
console.log(obj2); //{a: 1, b: 2}

// 修改目标对象
const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); //{a: 1, b: 3, c: 4}

使用扩展运算符(...)

扩展运算符(...)可以用来展开数组或对象。在对象中使用时,相当于将一个对象的属性“拍扁”到目标对象中。

示例

// 复制对象
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1};
console.log(obj2); //{a: 1, b: 2}

// 修改目标对象
const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = {...obj1, ...obj2};
console.log(obj3); //{a: 1, b: 3, c: 4}

扩展对象

实现一个extend()方法

自己实现一个extend()方法可以用来扩展一个对象。这个方法接收任意数量的对象作为参数,将它们的属性合并到第一个参数对象中,并返回合并后的对象。

示例

function extend(target, ...sources) {
  sources.forEach(source => {
    Object.keys(source).forEach(key => {
      target[key] = source[key];
    });
  });
  return target;
}

// 扩展对象
const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = extend({}, obj1, obj2);
console.log(obj3); //{a: 1, b: 3, c: 4}

以上就是原生js实现复制对象、扩展对象的完整攻略,使用Object.assign()方法、扩展运算符(...)或者自己实现一个extend()方法都可以实现这个功能。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现复制对象、扩展对象 类似jquery中的extend()方法 - Python技术站

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

相关文章

  • js判断是否按下了Shift键的方法

    要判断JavaScript代码中是否按下了Shift键,可以借助事件对象来实现该功能。以下是实现该功能的详细攻略: 获取事件对象 在JavaScript中,事件对象会在触发事件的时候自动创建,可以通过事件处理函数的第一个参数来获取。要获取键盘事件的事件对象,可以绑定键盘事件,例如keydown或keyup事件,并传入event作为事件处理函数的第一个参数,获…

    JavaScript 2023年6月11日
    00
  • 页面js遇到乱码问题的解决方法是和无法转码的情况

    解决页面js遇到乱码问题的方法: UTF-8编码 UTF-8(8-bit Unicode Transformation Format)是一种多字节编码格式,可以表示Unicode标准中所有的字符,也是现代Web开发中常用的一种编码方式。在编写代码时可以选择使用UTF-8编码,以确保文本在传递过程中不会出现乱码。在HTML文件中指定文档编码方式: <!D…

    JavaScript 2023年5月20日
    00
  • 微信小程序+腾讯地图开发实现路径规划绘制

    下面我将详细讲解“微信小程序+腾讯地图开发实现路径规划绘制”的完整攻略。 前提准备 在开始之前,需要完成以下几个步骤: 申请腾讯地图开发者账号,并获取开发者密钥 创建微信小程序项目,并在项目中引入腾讯地图SDK 实现步骤 1. 获取用户位置 在前往目的地前,需要获取用户的当前位置。可以通过微信小程序的 wx.getLocation 接口获取用户当前的经纬度信…

    JavaScript 2023年6月11日
    00
  • 浅谈 Webpack 如何处理图片(开发、打包、优化)

    浅谈 Webpack 如何处理图片(开发、打包、优化) 在Web开发中,图片作为Web页面重要的组成部分,在Webpack中如何处理图片是一个必须要掌握的技能。常见的处理方式包括以下几种: 1. 在代码中使用 import 或 require 导入图片 Webpack支持将图片(包括PNG、JPG、GIF、SVG等格式)作为模块来处理,并通过模块化的方式导入…

    JavaScript 2023年5月19日
    00
  • 原生javascript实现图片轮播切换效果

    下面进入主题,讲解如何用原生 JavaScript 实现图片轮播切换效果。 准备 在开始实现之前,我们需要先准备好以下内容: 图片资源 一个用于显示轮播图片的HTML元素 CSS样式 JavaScript代码 HTML 我们先来看一下 HTML 部分的代码。我们需要一个 div 元素作为图片轮播的容器,用于显示待切换的图片。 <div id=&quot…

    JavaScript 2023年6月10日
    00
  • window.location.href的用法(动态输出跳转)

    关于window.location.href的用法,先来介绍一下它的基本概念。 window.location.href是一个引用当前页面的URL字符串,它可以动态地改变页面的路径,实现页面的跳转。通过设置window.location.href的值,可以让当前页面跳转到指定的URL地址。 以下是window.location.href的一些常见应用场景: …

    JavaScript 2023年6月11日
    00
  • Javascript Worker子线程代码实例

    Javascript Worker子线程代码实例完整攻略 在前端开发中,为了避免一些复杂的计算或者耗时操作影响到UI的性能,我们可以使用Web Worker来创建一个新的线程来执行这些计算。 Worker的特点 Web Worker是一种实现了多线程的JavaScript。它可以使得浏览器在后台运行独立的脚本线程,将一些需要较长时间才能运行完成的任务交给这些…

    JavaScript 2023年5月28日
    00
  • js页面跳转常用的几种方式

    下面是关于“js页面跳转常用的几种方式”的完整攻略。 一、背景 在web应用中,页面跳转是非常常见的操作。而在前端开发中,我们通常使用JavaScript来实现页面的跳转功能。本文将介绍js页面跳转的常用几种方式。 二、常用的几种方式 1.通过window.location.href实现页面跳转 代码形式如下: window.location.href = …

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