当前位置:首页 > JavaScript

js实现automapper

2026-01-31 22:14:07JavaScript

实现 JavaScript 的 AutoMapper

在 JavaScript 中实现类似 AutoMapper 的功能可以通过多种方式完成。AutoMapper 主要用于对象之间的属性映射,简化数据传输对象(DTO)与领域模型之间的转换。以下是几种实现方法:

使用自定义映射函数

创建一个简单的映射函数,手动定义属性映射规则:

function map(source, mapping) {
    const target = {};
    for (const key in mapping) {
        if (source.hasOwnProperty(mapping[key])) {
            target[key] = source[mapping[key]];
        }
    }
    return target;
}

// 示例用法
const source = { firstName: 'John', lastName: 'Doe' };
const mapping = { first: 'firstName', last: 'lastName' };
const result = map(source, mapping);
console.log(result); // { first: 'John', last: 'Doe' }

使用第三方库

一些现成的库可以简化对象映射:

  • object-mapper: 提供灵活的映射规则。
  • map-factory: 支持复杂映射和条件映射。
  • automapper-ts: TypeScript 版本的 AutoMapper。

安装 object-mapper

npm install object-mapper

示例代码:

const objectMapper = require('object-mapper');

const source = { firstName: 'John', lastName: 'Doe' };
const map = {
  firstName: 'first',
  lastName: 'last'
};

const result = objectMapper(source, map);
console.log(result); // { first: 'John', last: 'Doe' }

使用 ES6 解构和展开运算符

对于简单映射,可以使用 ES6 语法:

const source = { firstName: 'John', lastName: 'Doe' };
const target = {
  first: source.firstName,
  last: source.lastName
};

console.log(target); // { first: 'John', last: 'Doe' }

动态映射函数

如果需要动态生成映射规则,可以使用以下方法:

function dynamicMap(source, fieldMappings) {
    return fieldMappings.reduce((acc, { sourceField, targetField }) => {
        acc[targetField] = source[sourceField];
        return acc;
    }, {});
}

// 示例用法
const source = { firstName: 'John', lastName: 'Doe' };
const fieldMappings = [
    { sourceField: 'firstName', targetField: 'first' },
    { sourceField: 'lastName', targetField: 'last' }
];
const result = dynamicMap(source, fieldMappings);
console.log(result); // { first: 'John', last: 'Doe' }

使用类封装

对于更复杂的场景,可以封装一个映射器类:

class Mapper {
    constructor() {
        this.mappings = {};
    }

    addMapping(sourceType, targetType, mapping) {
        const key = `${sourceType}-${targetType}`;
        this.mappings[key] = mapping;
    }

    map(source, sourceType, targetType) {
        const key = `${sourceType}-${targetType}`;
        const mapping = this.mappings[key];
        if (!mapping) throw new Error('Mapping not found');

        const target = {};
        for (const [targetProp, sourceProp] of Object.entries(mapping)) {
            target[targetProp] = source[sourceProp];
        }
        return target;
    }
}

// 示例用法
const mapper = new Mapper();
mapper.addMapping('User', 'UserDto', {
    'firstName': 'first',
    'lastName': 'last'
});

const user = { firstName: 'John', lastName: 'Doe' };
const userDto = mapper.map(user, 'User', 'UserDto');
console.log(userDto); // { first: 'John', last: 'Doe' }

使用 Proxy 实现自动映射

对于高级场景,可以使用 Proxy 拦截属性访问:

js实现automapper

function createAutoMapper(source, mapping) {
    return new Proxy({}, {
        get(target, prop) {
            if (prop in mapping) {
                return source[mapping[prop]];
            }
            return undefined;
        }
    });
}

// 示例用法
const source = { firstName: 'John', lastName: 'Doe' };
const mapping = { first: 'firstName', last: 'lastName' };
const proxy = createAutoMapper(source, mapping);

console.log(proxy.first); // 'John'
console.log(proxy.last); // 'Doe'

以上方法可以根据需求选择适合的方案。对于简单映射,自定义函数或 ES6 语法足够;对于复杂场景,建议使用第三方库或封装类。

标签: jsautomapper
分享给朋友:

相关文章

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…