[JavaScript30] 📄 14. JavaScript References VS Copying

17479 ワード
JavaScript javascript30 テキストリンク

📄 14. JavaScript References VS Copying


Use JavaScripte References, Copying
イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS Reference VS Copy</title>
</head>
<body>

  <script>
    // start with strings, numbers and booleans
    // 문자열, 숫자 및 부울로 시작

    // Let's say we have an array
    // 배열이 있다고 가정 해 봅시다.
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

    // and we want to make a copy of it.
    // 복사본을 만들고 싶습니다.

    // You might think we can just do something like this:
    // 다음과 같이 할 수 있다고 생각할 수도 있습니다.

    // however what happens when we update that array?
    //

    // now here is the problem!
    // 이제 여기에 문제가 있습니다!

    // oh no - we have edited the original array too!
    // 아뇨-우리는 원래 배열도 편집했습니다!

    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
    // 왜? 그것은 배열 복사가 아니라 배열 참조이기 때문입니다. 둘 다 동일한 배열을 가리 킵니다!

    // So, how do we fix this? We take a copy instead!
    // 그래서 어떻게 고칠까요? 대신 복사합니다!

    // one way

    // or create a new array and concat the old one in
    // 또는 새 배열을 만들고 이전 배열을

    // or use the new ES6 Spread
    // 또는 새로운 ES6 스프레드 사용

    // now when we update it, the original one isn't changed
    // 이제 업데이트 할 때 원본은 변경되지 않습니다

    // The same thing goes for objects, let's say we have a person object
    // 객체도 마찬가지입니다. 사람 객체가 있다고 가정 해 보겠습니다.

    // with Objects
    const person = {
      name: 'Wes Bos',
      age: 80
    };

    // and think we make a copy:
    // 사본을 만든다고 생각합니다.

    // how do we take a copy instead?
    // 대신 복사하는 방법은 무엇입니까?

    // We will hopefully soon see the object ...spread
    // 우리는 곧 그 object를 보게 될 것입니다 ...

    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
    // 주목할 사항-이것은 배열과 객체 모두에 대해 1 레벨에 불과합니다. lodash에는 cloneDeep 메서드가 있지만 사용하기 전에 두 번 생각해야합니다.

  </script>

</body>
</html>

🌏 コード解析


👉 1.文字列、数値列、ブール型を宣言および変更する変数

// start with strings, numbers and booleans
// 문자열, 숫자 및 부울로 시작

let age = 100;
let age2 = age;
console.log(age, age2);
age = 200;
console.log(age, age2);

let name = 'wes';
let name2 = name;
console.log(name, name2);
name = 'wesley';
console.log(name, name2);
文字列.数値を開くと、変数に別の値が追加され、出力に変更されます.
結果

👉 2.配列時の変数の宣言と変更

// Let's say we have an array
// 배열이 있다고 가정 해 봅시다.
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// and we want to make a copy of it.
// 복사본을 만들고 싶습니다.
const team = players;
console.log(players, team);

team[3] = 'Lux';
console.log(players, team);
本当はチーム[3]でチームの並びを変えたかったのですが、結果的にプレイヤーと一緒に変わってしまいます.

解決策
① slice()
const team2 = players.slice();

② concat()
const tema3 = [].concat(players);
③ spread operator[...]
const team4 = [...players];
team4[3] = 'Heee Haaaa';
console.log(team4);
④ Array.from() 
const team5 = Array.from(players);

上記の4つの方法で新しい配列を作成し、既存の配列を変更せずに値を個別に変更できます.

👉 3.オブジェクトの宣言および変更時の変数

// with Objects
const person = {
    name: 'Wes Bos',
    age: 80
};

// and think we make a copy:
// 사본을 만든다고 생각합니다.
const captain = person;
captain.number = 99;
配列と同様に、元のオブジェクトも変更されます.
① Object.assign({},参照オブジェクト,追加する値)
 const capt2 = Object.assign({},person, {number: 99, age: 12});console.log(capt2);
② spread 
const capt3 = {...person};
上記の方法では、次のコードで社会のTwitterの内容を変更することはできませんので、JSONを使用すると次のようになります.
const wes = {    name: 'Wes',    age: 100,    social:{        twitter: '@wesbos',        facebook: 'wesbos.developer'    }}console.clear();console.log(wes);const dev = Object.assign({}, wes);const dev2 = JSON.parse(JSON.stringify(wes));


BOJ 10610 30
アルゴリズム/プログラマー/2018 KAKAO BLIND RECRUIMENT/level 2/さっきの歌(Python付き)