js中的数据

简介: 本文主要介绍js中的数据

网络异常,图片无法展示
|


数据类型


基本数据类型:number、string、null、boolean、undefined

引用类型:Object、Function、Array

在此不做过多阐释。


null与undefined


undefined代表定义未赋值。

null代表定义并赋值,且值为null。


使用null的情况


1、null是基本类型,但是使用typeof null是object。一个值的特殊类型,表示一个空对象引用。可以这么理解:将变量初始值赋为null,表示将要赋值的值为对象。

let b = null
console.log(typeof b, b) // object null
b = { name: 'clying' }
console.log(b) // { name: 'clying' }


2、释放垃圾对象


b = { name: 'clying' }
b = null


让b执行的对象成为垃圾对象,被浏览器回收。


数据、内存、变量


数据:以二进制形式存储在内存中,代表一定信息的数字。


内存:内存条通电后产生的存储空间。内存又分为栈内存和堆内存。栈内存中存放的是全局变量或局部变量。而堆内存中存放的是对象。


变量:可变化的量,由变量名和变量值组成。每个变量都对应的一块小内存,变量名用来查找对应的内存,变量值就是保存在内存中的数据。


关系:内存是用来存储数据的空间,而变量是内存的标识。


引用变量赋值


变量修改


多个引用变量指向同一个对象,通过一个变量修改对象内部数据,其他所有的变量看到的是修改之后的数据。


let obj = { name: 'clying' }
let obj1 = obj
obj.name = '修改了'
obj1.age = 12
console.log(obj, obj1)
// { name: '修改了', age: 12 } { name: '修改了', age: 12 }


obj变量保存了{ name: 'clying' }的地址值,而obj1保存了obj内容,只是obj中的内容是{ name: 'clying' }的地址值。 在未修改属性之前,内存中的obj、obj1,都指向同一个地址。

网络异常,图片无法展示
|

在修改obj的name属性变量时,直接修改的就是它所指向的地址值。将name属性的值改为'修改了'。


同理,给obj1添加age属性变量,是在obj1指向内存对应的地方添加age属性。

网络异常,图片无法展示
|
所以,输出obj、obj1的值一样,均为{ name: '修改了', age: 12 }。


变量与函数


let obj = { name: 'clying' }
let obj1 = obj
obj.age = 22
function fun(o) {
  o.age = 12
}
fun(obj)
console.log(obj, obj1)
// { name: 'clying', age: 12 } { name: 'clying', age: 12 }


执行fun(obj),将obj的值赋值给o。函数内部,修改o变量的age属性,就等同于修改了obj中age的属性。


引用变量修改


多个引用变量指向同一个对象,让其中一个引用变量指向另一个对象,另一引用变量依然指向前一个对象。


let obj = { name: 'clying' }
let obj1 = obj
obj = { name: 'dengdeng', age: 22 }
console.log(obj, obj1)
// { name: 'dengdeng', age: 22 } { name: 'clying' }


在obj未修改之前,依旧是obj、obj1均指向同一地址值。

网络异常,图片无法展示
|


此时,将obj修改成{ name: 'dengdeng', age: 22 },即obj指向的是{ name: 'dengdeng', age: 22 }的地址值。obj1依然指向前一个对象,即{ name: 'clying' }

网络异常,图片无法展示
|


所以输出的obj、obj1两者指向的地址值不同,所以两者输出不同。


引用变量与函数


再看一个例子:

let obj = { name: 'clying' }
let obj1 = obj
obj = { name: 'dengdeng', age: 22 }
function fun(o) {
  o = { age: 12 }
}
fun(obj)
console.log(obj, obj1)
// { name: 'dengdeng', age: 22 } { name: 'clying' }


对于obj1,依然指向前一个对象,输出{ name: 'clying' }。而obj在第一次修改后,obj指向{ name: 'dengdeng', age: 22 }的地址值。执行fun函数,将obj的值拷贝一份,赋值给变量o。此时,o变量存储的是{ name: 'dengdeng', age: 22 }的地址值,而且obj的值并未发生改变!

网络异常,图片无法展示
|
然后执行函数内部,变量o又被重新指向了 { age: 12 }的地址值。

网络异常,图片无法展示
|
实际指向如上图。而存在与fun函数内部的o变量,变成了垃圾对象,根本无法使用。


比较

可能会有一些疑惑:变量与函数中,修改了obj的值,为什么在引用变量与函数中,obj的值没有被修改?

首先需要明白,js函数传递变量参数时,是值传递(个人理解:传递的是变量的值)。执行函数fun,只是将obj的地址值赋值给o变量。

变量与函数中,o是直接被修改,修改的直接是obj内部age的属性变量。

引用变量与函数中, o存放的是obj的值,即:o内部是{ name: 'dengdeng', age: 22 }的地址值。函数内部,又将o指向了另一个对象,即{ age: 12 }的地址值。但是指向另一个对象时,obj依旧指向的是前一个对象。

目录
相关文章
|
3月前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
118 59
|
3月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
60 0
|
14天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
1月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
32 7
|
1月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
46 4
|
2月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
86 11
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
23 0
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
2月前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
3月前
|
JSON JavaScript 数据格式
js实现更新数据
js实现更新数据
53 1