一個轉換資料屬性名的工具

PsChina發表於2018-12-08

clone-rename

English

深拷貝你的物件並且重新命名屬性。

開始

> npm install clone-rename
複製程式碼

何時使用

前後端分離的情況下，後端返回資料的屬性名稱和前端獨立開發時使用的屬性名稱不一樣。

例子

後端返回資料的屬性名稱是 id 和 name 但是 mock 資料時前端使用的是 goodsID 和 goodsName。

拷貝陣列

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
複製程式碼

相關文章