Day14 - JavaScript 引用和值拷贝

chanjarster 发布于2019-08-20 18:31 / 2520人阅读

摘要：引用和值拷贝微信公众号开发企业级产品全栈开发速成周末班首期班号正式开班，欢迎抢座作者黎跃春追时间的人简介是推出的一个天挑战。深拷贝与浅拷贝对比创建对象黎跃春浅拷贝深拷贝将对象转换成字符串，打印时效果清晰。

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键名和值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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