一个转换数据属性名的工具

clone-rename

English

深拷贝你的对象并且重命名属性。

开始

> npm install clone-rename

何时使用

前后端分离的情况下,后端返回数据的属性名称和前端独立开发时使用的属性名称不一样。

例子

后端返回数据的属性名称是 idname 但是 mock 数据时前端使用的是 goodsIDgoodsName

拷贝数组

import cloneRename from 'clone-rename';

const res = [
    {
        id: '001',
        name: 'apple'
    },
    {
        id: '002',
        name: 'banana'
    }
]

const filter = {
    id:'goodsID', // 将所有属性为 id 的 key 更改为 goodsID 。
    name: 'goodsName' // 将所有属性为 name 的 key 更改为 goodsName 。
}

const result = cloneRename(res,filter) // 默认是深拷贝

/*
result:
[
    {
        goodsID: '001',
        goodsName: 'apple'
    },
    {
        goodsID: '002',
        goodsName: 'banana'
    }
]
*/

拷贝对象

它还能拷贝对象


import cloneRename from 'clone-rename';

let project = {name:'JavaScript'}

let obj = {
    name:'PsChina',
    age:'25',
    like:[project]
}

const filter = {
    name:'babel' // 将所有属性名为 name 的 key 改名为 babel 。
}

const result1 = cloneRename(obj,filter) // 第三个参数不传递默认是开始深拷贝和深度更改键名。{deepCopy:true, deepRename:true}
/*
result1:
{
    babel:'PsChina',
    age:'25',
    like:[{babel:'JavaScript'}]
}
*/
result1.like[0] === project // false

浅层拷贝

const result2 = cloneRename(obj,filter,{deepCopy:false})

/*
result2:
{
    babel:'PsChina',
    age:'25',
    like:[{name:'JavaScript'}]
}
*/

result2.like[0] === project // true

浅层重命名

const result3 = cloneRename(obj,filter,{deepRename:false})

/*
result3:
{
    babel:'PsChina',
    age:'25',
    like:[{name:'JavaScript'}]
}
*/
result3.like[0] === project // false


拷贝

它还能拷贝 date 对象和 function 以及正则表达式

拷贝日期对象

let time = new Date();

let sameTime = cloneRename(time);

console.log(time, sameTime ,time===sameTime);
// <currentTime> <currentTime> false

拷贝函数

function sum(a, b){
    return a + b;
};

let sameSum = cloneRename(sum);

sum(1,2);
//3

sameSum(1,2);
//3

console.log(sum === sameSum);
//false

拷贝正则表达式

let numberRegObj = {reg:/[0-9]/};

let newRegObj = cloneRename(numberRegObj);

console.log(numberRegObj, newRegObj, numberRegObj.reg === newRegObj.reg);
// {reg:/[0-9]/} {reg:/[0-9]/} false
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,819评论 19 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,205评论 1 45
  • 我是一个不太自信的人,认为自己不够优秀,认为自己不够完美,但我身边总有一些看起来不完美但依旧自信的人。 自信就像微...
    魔女非非阅读 3,561评论 1 1
  • 每日推荐: 每日一歌――李宗盛《凡人歌》 每日一影――张国立《第601个电话》 开始记录的第一百一十八天。 ...
    萨拉芯雪阅读 1,585评论 0 1
  • 和人聊微信,说到“想想”两个字。想起另一个人说这两个字时的场景。问我想吃什么,想要什么。我一时想不出,他眼里带着笑...
    清平乐2017阅读 2,118评论 0 0

友情链接更多精彩内容