자바 스크립트 : Object Rename Key

자바 스크립트 : Object Rename Key

---

자바 스크립트 객체에서 키의 이름을 바꾸는 영리한 (즉 최적화 된) 방법이 있습니까?

최적화되지 않은 방법은 다음과 같습니다.

o[ new_key ] = o[ old_key ];
delete o[ old_key ];

---

가장 완벽하고 정확한 방법은 다음과 같습니다.

if (old_key !== new_key) {
    Object.defineProperty(o, new_key,
        Object.getOwnPropertyDescriptor(o, old_key));
    delete o[old_key];
}

이 방법을 사용하면 이름이 바뀐 속성 이 원래 속성 과 동일하게 동작합니다 .

또한, 이것을 함수 / 메소드로 감싸서 넣을 가능성 Object.prototype은 귀하의 질문과 관련이없는 것 같습니다.

---

작품을 함수로 감싸서 Object프로토 타입에 할당 할 수 있습니다. 유창한 인터페이스 스타일을 사용하여 여러 이름 바꾸기 흐름을 만들 수 있습니다.

Object.prototype.renameProperty = function (oldName, newName) {
     // Do nothing if the names are the same
     if (oldName === newName) {
         return this;
     }
    // Check for the old property name to avoid a ReferenceError in strict mode.
    if (this.hasOwnProperty(oldName)) {
        this[newName] = this[oldName];
        delete this[oldName];
    }
    return this;
};

ECMAScript 5 특정

구문이 그렇게 복잡하지는 않았지만 더 많은 제어 기능을 갖는 것이 좋습니다.

Object.defineProperty(
    Object.prototype, 
    'renameProperty',
    {
        writable : false, // Cannot alter this property
        enumerable : false, // Will not show up in a for-in loop.
        configurable : false, // Cannot be deleted via the delete operator
        value : function (oldName, newName) {
            // Do nothing if the names are the same
            if (oldName === newName) {
                return this;
            }
            // Check for the old property name to 
            // avoid a ReferenceError in strict mode.
            if (this.hasOwnProperty(oldName)) {
                this[newName] = this[oldName];
                delete this[oldName];
            }
            return this;
        }
    }
);

---

소스 객체를 변경하는 경우 ES6에서 한 줄로 수행 할 수 있습니다.

delete Object.assign(o, {[newKey]: o[oldKey] })[oldKey];

또는 새 객체를 만들려는 경우 두 줄입니다.

const newObject = {};
delete Object.assign(newObject, o, {[newKey]: o[oldKey] })[oldKey];

---

누군가 속성 목록의 이름을 바꿔야 할 경우 :

function renameKeys(obj, newKeys) {
  const keyValues = Object.keys(obj).map(key => {
    const newKey = newKeys[key] || key;
    return { [newKey]: obj[key] };
  });
  return Object.assign({}, ...keyValues);
}

용법:

const obj = { a: "1", b: "2" };
const newKeys = { a: "A", c: "C" };
const renamedObj = renameKeys(obj, newKeys);
console.log(renamedObj);
// {A:"1", b:"2"}

---

그냥 ES6(ES2015)길을 사용하고 싶습니다 !

우리는 시대를 따라야합니다!

const old_obj = {
    k1: `111`,
    k2: `222`,
    k3: `333`
};
console.log(`old_obj =\n`, old_obj);
// {k1: "111", k2: "222", k3: "333"}


/**
 * @author xgqfrms
 * @description ES6 ...spread & Destructuring Assignment
 */

const {
    k1: kA, 
    k2: kB, 
    k3: kC,
} = {...old_obj}

console.log(`kA = ${kA},`, `kB = ${kB},`, `kC = ${kC}\n`);
// kA = 111, kB = 222, kC = 333

const new_obj = Object.assign(
    {},
    {
        kA,
        kB,
        kC
    }
);

console.log(`new_obj =\n`, new_obj);
// {kA: "111", kB: "222", kC: "333"}

---

데이터를 변경하지 않으려면이 기능을 고려하십시오.

renameProp = (oldProp, newProp, {[oldProp]:old, ...others}) => ({
    [newProp]: old,
    ...others
})

Yazeed Bzadough의 철저한 설명 https://medium.com/front-end-hacking/immutably-rename-object-keys-in-javascript-5f6353c7b6dd

---

---

객체 파괴 및 확산 연산자를 사용한 변형 :

    const old_obj = {
        k1: `111`,
        k2: `222`,
        k3: `333`
    };


// destructuring, with renaming. The variable rest will hold those values not assigned to kA, kB, or kC.
    const {
        k1: kA, 
        k2: kB, 
        k3: kC,
        ...rest
    } = old_obj;


// now create a new object, with shorthand properties **kA, kB, kC**; 
// spread the remaining properties in the **rest** variable
const newObj = {kA, kB, kC, ...rest};

---

lodash를 시도 할 수 있습니다 _.mapKeys.

var user = {
  name: "Andrew",
  id: 25,
  reported: false
};

var renamed = _.mapKeys(user, function(value, key) {
  return key + "_" + user.id;
});

console.log(renamed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

---

나는 이런 식으로 할 것입니다 :

function renameKeys(dict, keyMap) {
  return _.reduce(dict, function(newDict, val, oldKey) {
    var newKey = keyMap[oldKey] || oldKey
    newDict[newKey] = val 
    return newDict
  }, {})
}

---

여기에있는 대부분의 답변은 JS 객체 키-값 쌍 순서를 유지하지 못합니다. 예를 들어 수정하려는 화면에 객체 키-값 쌍의 형태가있는 경우 객체 항목의 순서를 유지하는 것이 중요합니다.

JS 객체를 반복하고 키-값 쌍을 수정 된 키 이름을 가진 새 쌍으로 바꾸는 ES6 방법은 다음과 같습니다.

let newWordsObject = {};

Object.keys(oldObject).forEach(key => {
  if (key === oldKey) {
    let newPair = { [newKey]: oldObject[oldKey] };
    newWordsObject = { ...newWordsObject, ...newPair }
  } else {
    newWordsObject = { ...newWordsObject, [key]: oldObject[key] }
  }
});

솔루션은 이전 항목 대신 새 항목을 추가하여 항목 순서를 유지합니다.

---

개념적 관점에서 오래된 객체 (웹 서비스의 객체)를 그대로두고 새 객체에 필요한 값을 넣는 것이 좋습니다. 클라이언트가 아니라면 적어도 서버에서 특정 지점을 다른 지점에서 추출한다고 가정합니다. 웹 서비스의 필드 이름과 동일한 필드 이름을 소문자로 사용하기로 한 사실은 실제로 이것을 변경하지 않습니다. 따라서 다음과 같은 작업을 수행하는 것이 좋습니다.

var myObj = {
    field1: theirObj.FIELD1, 
    field2: theirObj.FIELD2,
    (etc)
}

물론, 나는 여기서 모든 종류의 가정을하고 있습니다. 이것이 당신에게 적용되지 않거나 너무 느리다면 (그렇지 않습니까? 테스트하지 않았지만 필드 수가 증가함에 따라 차이가 작아지는 것을 상상해보십시오.)이 모든 것을 무시하십시오 :)

이 작업을 원하지 않고 특정 브라우저 만 지원해야하는 경우 새 getter를 사용하여 "uppercase (field)"도 반환 할 수 있습니다. http://robertnyman.com/2009/05/28 자세한 내용은 / getters-and-setters-with-javascript-code-samples-and-demos / 및 해당 페이지의 링크를 참조하십시오.

편집하다:

놀랍게도, 이것은 적어도 직장에서의 FF3.5에서 거의 두 배 빠릅니다. 참조 : http://jsperf.com/spiny001

---

이것이 키 이름을 바꾸는 데 더 나은 솔루션을 제공하지는 않지만 객체에 포함 된 데이터를 변경하지 않고 객체의 모든 키 이름을 빠르고 쉽게 바꿀 수있는 ES6 방법을 제공합니다.

let b = {a: ["1"], b:["2"]};
Object.keys(b).map(id => {
  b[`root_${id}`] = [...b[id]];
  delete b[id];
});
console.log(b);

---

이 페이지에 나열된 일부 솔루션에는 몇 가지 부작용이 있습니다.

1. 객체의 키 위치에 영향을 미치고 맨 아래에 추가하십시오 (중요한 경우)
2. IE9 +에서는 작동하지 않습니다 (다시 중요합니다)

다음은 같은 위치에 키 위치를 유지하고 IE9 +와 호환되지만 새 개체를 만들어야하며 가장 빠른 솔루션이 아닌 솔루션입니다.

function renameObjectKey(oldObj, oldName, newName) {
    const newObj = {};

    Object.keys(oldObj).forEach(key => {
        const value = oldObj[key];

        if (key === oldName) {
            newObj[newName] = value;
        } else {
            newObj[key] = value;
        }
    });

    return newObj;
}

참고 : IE9는 엄격 모드에서 각 기능을 지원하지 않을 수 있습니다

---

개인적으로 무거운 플러그인과 휠을 추가로 구현하지 않고 객체의 키 이름을 바꾸는 가장 효과적인 방법은 다음과 같습니다.

var str = JSON.stringify(object);
str = str.replace(/oldKey/g, 'newKey');
str = str.replace(/oldKey2/g, 'newKey2');

object = JSON.parse(str);

try-catch객체의 구조가 유효하지 않은 경우 래핑 할 수도 있습니다 . 완벽하게 작동합니다 :)

---

다음은 이름이 바뀐 키로 새 객체를 만드는 예입니다.

let x = { id: "checkout", name: "git checkout", description: "checkout repository" };

let renamed = Object.entries(x).reduce((u, [n, v]) => {
  u[`__${n}`] = v;
  return u;
}, {});

---

이것은 내가 pomber의 기능에 대한 작은 수정입니다. 객체 대신 객체 배열을 사용할 수 있고 색인을 활성화 할 수 있습니다. 또한 "키"는 배열에 의해 할당 될 수 있습니다

function renameKeys(arrayObject, newKeys, index = false) {
    let newArray = [];
    arrayObject.forEach((obj,item)=>{
        const keyValues = Object.keys(obj).map((key,i) => {
            return {[newKeys[i] || key]:obj[key]}
        });
        let id = (index) ? {'ID':item} : {}; 
        newArray.push(Object.assign(id, ...keyValues));
    });
    return newArray;
}

테스트

const obj = [{ a: "1", b: "2" }, { a: "5", b: "4" } ,{ a: "3", b: "0" }];
const newKeys = ["A","C"];
const renamedObj = renameKeys(obj, newKeys);
console.log(renamedObj);

---

내 의견으로는 당신의 방식은 최적화되어 있습니다. 그러나 재정렬 된 키로 끝납니다. 새로 생성 된 키가 끝에 추가됩니다. 나는 키 순서에 의존해서는 안된다는 것을 알고 있지만, 그것을 유지 해야하는 경우 모든 키를 거치고 새 객체를 하나씩 생성해야하며 해당 프로세스 중에 해당 키를 교체해야합니다.

이처럼 :

var new_o={};
for (var i in o)
{
   if (i==old_key) new_o[new_key]=o[old_key];
   else new_o[i]=o[i];
}
o=new_o;

참고 URL : https://stackoverflow.com/questions/4647817/javascript-object-rename-key