当前位置:首页 > JavaScript

js 实现extend

2026-03-14 09:46:27JavaScript

实现 extend 功能

在 JavaScript 中,extend 通常用于将一个对象的属性复制到另一个对象中。可以通过多种方式实现这一功能。

使用 Object.assign

Object.assign 是 ES6 提供的方法,用于将一个或多个源对象的可枚举属性复制到目标对象中。

const extend = (target, ...sources) => {
  return Object.assign(target, ...sources);
};

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const result = extend(obj1, obj2);
console.log(result); // { a: 1, b: 2 }

手动实现 extend

如果不使用 Object.assign,可以手动遍历源对象的属性并复制到目标对象中。

const extend = (target, ...sources) => {
  sources.forEach(source => {
    for (const key in source) {
      if (source.hasOwnProperty(key)) {
        target[key] = source[key];
      }
    }
  });
  return target;
};

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const result = extend(obj1, obj2);
console.log(result); // { a: 1, b: 2 }

深拷贝实现

如果需要深拷贝(嵌套对象的属性也被复制),可以使用递归的方式实现。

const extendDeep = (target, source) => {
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      if (typeof source[key] === 'object' && source[key] !== null) {
        target[key] = Array.isArray(source[key]) ? [] : {};
        extendDeep(target[key], source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
};

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const result = extendDeep(obj1, obj2);
console.log(result); // { a: { b: 1, c: 2 } }

使用 lodash 的 extend

如果项目中已经使用了 lodash,可以直接使用 _.extend_.assign 方法。

js 实现extend

const _ = require('lodash');
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const result = _.extend(obj1, obj2);
console.log(result); // { a: 1, b: 2 }

注意事项

  • Object.assign 和手动实现的 extend 都是浅拷贝,只会复制对象的顶层属性。
  • 深拷贝实现会递归复制嵌套对象,但可能会遇到循环引用的问题。
  • 使用 lodash 的 _.extend_.assign 可以更方便地实现功能,但需要引入额外的库。

标签: jsextend
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…