Javascript：sliceの後に重複した配列が正しくなく、keyValueが追加されています

Question

配列に新しいageキー：値のペアが含まれている理由がわかりません。
私はそれをスライスして（したがって、独立したコピーを作成することによって）私はnewArrayで単独で働くことができ、それにageを追加することができました...しかし、personsも更新しているようですね??事前に
おかげ

const persons = [ 
 
    { first: 'Albert', last: 'Einstein', birthYear: 1879, deathYear: 1955 }, 
 
    { first: 'Isaac', last: 'Newton', birthYear: 1643, deathYear: 1727 }, 
 
    { first: 'Galileo', last: 'Galilei', birthYear: 1564, deathYear: 1642 }, 
 
    ]; 
 

 
function appendAge(originalArray) { 
 
    var newArray = originalArray.slice(0); 
 

 
    newArray.forEach(item => { 
 
    item['age'] = item.deathYear - item.birthYear; 
 
    }) 
 
    return newArray 
 
} 
 
console.info(persons) 
 
var newPersons = appendAge(persons) 
 
console.info(newPersons)

Answer 1

sliceはコピーのみ参照を含む値の最上位レベルを、それを意味する、シャローコピーを行い、そして実際に参照値そのものをコピーしません。

これは、両方の配列の各Personオブジェクトが同じオブジェクトであることを意味します。

あなたの人物オブジェクトのカスタムコピー機能を作成し、それをmapと一緒に使用して配列をコピーするのが簡単な解決策です。

const people = [ 
 
    { first: 'Albert', last: 'Einstein', birthYear: 1879, deathYear: 1955 }, 
 
    { first: 'Isaac', last: 'Newton', birthYear: 1643, deathYear: 1727 }, 
 
    { first: 'Galileo', last: 'Galilei', birthYear: 1564, deathYear: 1642 }, 
 
    ]; 
 

 
function copyPerson(person) { 
 
    return Object.assign({}, person); 
 
} 
 

 
function copyPeople(people) { 
 
    return people.map(copyPerson); 
 
} 
 

 
function appendAge(people) { 
 
    const newArray = copyPeople(people); 
 

 
    newArray.forEach(item => { 
 
    item['age'] = item.deathYear - item.birthYear; 
 
    }); 
 

 
    return newArray; 
 
} 
 

 
console.info('----------------------------------------'); 
 
console.info('Old People'); 
 
console.log(people) 
 
console.info('----------------------------------------'); 
 
console.info('New People'); 
 
console.log(appendAge(people));

また、他のソリューションのためのHow do I correctly clone an object in JavaScriptをチェックアウトすることができます。

Answer 2

personsアレイのコピーを作成しました。オリジナルのオブジェクトへの参照を含み、それらのオブジェクトのコピーは含まれません。完全なコピーを作成するには、オブジェクトも複製する必要があります。

Object#assignはオブジェクトのトップレベルプロパティのみをコピーするので、オブジェクトはdeep cloneにする必要があります。

const persons = [ 
 
    { first: 'Albert', last: 'Einstein', birthYear: 1879, deathYear: 1955 }, 
 
    { first: 'Isaac', last: 'Newton', birthYear: 1643, deathYear: 1727 }, 
 
    { first: 'Galileo', last: 'Galilei', birthYear: 1564, deathYear: 1642 }, 
 
    ]; 
 

 
function appendAge(originalArray) { 
 
    return originalArray.map((item) => Object.assign({}, item, { 
 
    age: item.deathYear - item.birthYear 
 
    })); 
 
} 
 

 
var newPersons = appendAge(persons); 
 
console.info(newPersons); 
 
console.info(persons); // persons haven't changed

Answer 3

あなた.forEachループは配列ではなく、スライスを更新しているもの、実際にあります。スライスはコピーを作成していますが、渡すとforEachループに入ります。だからあなたがコピーと思っているものにあなたのアイテムを追加しているとき、オリジナルに追加しています。