Day14 - JavaScript 引用和值拷貝

chanjarster 發布于2019-08-20 18:31 / 2621人閱讀

摘要：引用和值拷貝微信公眾號開發企業級產品全棧開發速成周末班首期班號正式開班，歡迎搶座作者黎躍春追時間的人簡介是推出的一個天挑戰。深拷貝與淺拷貝對比創建對象黎躍春淺拷貝深拷貝將對象轉換成字符串，打印時效果清晰。

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

全棧部落	區塊鏈部落

云服務器 GPU云服務器 javascript淺拷貝 javascript深拷貝 html引用javascript php鍵名和值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84616.html

前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0
引用傳遞和值傳遞(pass by value vs pass by reference)

摘要：字節碼驗證于是就寫了以下的類，用來驗證然后，然后，看字節碼如下圖。以上，就是整個關于引用傳遞和值傳遞的理解，有說的不對的，望指正。寫這個的原因主要是今天看到了知乎的一個問題，發現自己有些地方有點懵逼，寫下來記錄一下，知乎上排名第一的答案說的很清楚，不過看了以后依舊有點迷迷糊糊，所以自己寫了個幾行代碼測試。首先上一個，感覺比較對的結論：**Horstmann的《java核心技術》（中文...

longmon 2019-08-14 14:24 評論0 收藏0
JavaScript引用類型---Date

摘要：一創建實例對象依據系統設置的當前時間來創建一個對象參數代表自年月日世界標準時間起經過的毫秒數參數表示日期的字符串值。一、創建Date實例對象 1.new Date();依據系統設置的當前時間來創建一個Date對象 let today = new Date(); console.log(today); //Thu Jun 14 2018 14:51:00 GMT+080...

charles_paul 2019-08-23 12:25 評論0 收藏0