Day14 - JavaScript 引用和值拷貝

Day14 - JavaScript 引用和值拷貝

(Node+Vue+微信公衆號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座)

做者：©黎躍春-追時間的人
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。如今你看到的是這系列指南的第 14 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

項目效果

按值操做

基本類型由值操做。如下類型在JavaScript中被視爲基本類型：

• String

• Number

• Boolean

• Null

• Undefined

基本數據類型賦值你能夠理解成值拷貝，從深拷貝和淺拷貝的角度去思考的話，你能夠理解成深拷貝，當你修改一個變量的值時，不會影響其餘變量的值。

實例

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

let name = 'liyuechun';
let name2 = name;
console.log(name, name2);
name = 'liyc';
console.log(name, name2);

因而可知，基本類型，按值操做，新建的變量會將值複製給新的變量，各自的改變不會互相影響。

經過引用操做

對象Object類型是按引用操做的，若是它不是基本類型中的一個，那麼它就是對象，這裏若是咱們細究的話，JavaScript中每個東西均可以當作對象，甚至是基本的類型（不包括null和undefined），但咱們儘可能不要鑽這個牛角尖。

一些JavaScript中的對象：

Object

Function

Array

Set

Map

淺拷貝

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// 引用拷貝
const team = players;

console.log(`players: ${players}`, `team:${team}`);

// 咱們作以下操做：
team[3] = 'Lux';

console.log(`players: ${players}`, `team:${team}`);

const team2 = players.slice();

console.log(`players: ${players}`, `team:${team}`, `team2:${team2}`);

由上效果顯示，淺拷貝拷貝的是指針，當你去操做一個指針時，其實全部指針指向的同一個對象的值都會發生變化。

深拷貝

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// 建立新數組而且將原來的數組拼接到新數組中
const team3 = [].concat(players);

// ES6 Spread語法
const team4 = [...players];
team4[3] = 'heeee hawww';
console.log(`team4:${team4}`);

const team5 = Array.from(players);
console.log(`team5:${team5}`);

由上面的效果顯示，但咱們修改team4時，players並無發生任何變化，上面的contact,...,Array.from都屬於深拷貝，會將原來的內容從新拷貝一份，因此當你操做一個指針時不會影響原對象。

深拷貝 與 淺拷貝對比

//建立object對象
const person = {
 name: '黎躍春',
 age: 29
};

// 淺拷貝
console.log(`person:${JSON.stringify(person)}`);
const captain = person;
captain.number = 99;
console.log(`person:${JSON.stringify(person)}`);
console.log(`captain:${JSON.stringify(captain)}`);

// 深拷貝
const cap2 = Object.assign({}, person, {
 number: 99,
 age: 12
});
console.log(`cap2:${JSON.stringify(cap2)}`);
console.log(`person:${JSON.stringify(person)}`);

• JSON.stringify將對象轉換成字符串，打印時效果清晰。

• captain = person屬於淺拷貝

• Object.assign的三個參數中，第一個參數屬於初始值，它最終的值是第二個和第三個參數的並集，若是第二個、第三個參數有相同的屬性，那個第三個參數會覆蓋第二個參數裏面的值。

採用JSON字符串

// 對象的嵌套
const liyc = {
 name: '黎躍春',
 age: 100,
 social: {
   sina: '黎躍春-追時間的人',
   facebook: '黎躍春'
 }
};

console.log(`liyc:${liyc}`);

const dev = Object.assign({}, liyc);
console.log(`dev:${dev}`);

const dev2 = JSON.stringify(liyc);
console.log(`dev2:${dev2}`);

const dev3 = JSON.parse(JSON.stringify(liyc));
console.log(`dev3:${dev3}`);

首先調用JSON.stringify()方法將對象解析爲字符串，再調用JSON.parse()方法，將字符串解析爲對象，這是一個小技巧，在處理對象的複製時頗有用。

Github Source Code

全棧部落	區塊鏈部落