代码编织梦想

在这里插入图片描述

前言

JavaScript中,我们可以分成两种类型:

  • 基本类型
  • 复杂类型

两种类型的区别是:存储位置不同

一、基本类型

基本类型主要为以下6种:

  • Number
  • String
  • Boolean
  • Undefined
  • null
  • symbol

Number

数值最常见的整数类型格式则为十进制,还可以设置八进制(零开头)、十六进制(0x开头)

let intNum = 55 // 10进制的55
let num1 = 070 // 8进制的56
let hexNum1 = 0xA //16进制的10

浮点类型则在数值汇总必须包含小数点,还可通过科学计数法表示

let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效,但不推荐
let floatNum = 3.125e7; // 等于 31250000

在数值类型中,存在一个特殊数值NaN,意为“不是数值”,用于表示本来要返回数值的操作失败了(而不是抛出错误)

console.log(0/0); // NaN
console.log(-0/+0); // NaN

Undefined

Undefined 类型只有一个值,就是特殊值 undefined。当使用 varlet声明了变量但没有初始化时,就相当于给变量赋予了 undefined

let message;
console.log(message == undefined); // true

包含undefined 值的变量跟未定义变量是有区别的

let message; // 这个变量被声明了,只是值为 undefined

console.log(message); // "undefined"
console.log(age); // 没有声明过这个变量,报错

String

字符串可以使用双引号(")、单引号(')或反引号(`)标示

let firstName = "John";
let lastName = 'Jacob';
let lastName = `Jingleheimerschmidt`

字符串是不可变的,意思是一旦创建,它们的值就不能变了

let lang = "Java";
lang = lang + "Script";  // 先销毁再创建

Null

Null类型同样只有一个值,即特殊值 null

逻辑上讲, null 值表示一个空对象指针,这也是给typeof传一个 null 会返回 "object" 的原因

let car = null;
console.log(typeof car); // "object"

undefined 值是由 null值派生而来

console.log(null == undefined); // true

只要变量要保存对象,而当时又没有那个对象可保存,就可用 null来填充该变量

Boolean

Boolean(布尔值)类型有两个字面值: truefalse

通过Boolean可以将其他类型的数据转化成布尔值

规则如下:

数据类型      				转换为 true 的值      				转换为 false 的值
 String        				非空字符串          					"" 
 Number 				    非零数值(包括无穷值)				0NaN 
 Object 					任意对象 							null
 Undefined 					N/A (不存在) 						undefined

Symbol

Symbol (符号)是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险

let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
console.log(genericSymbol == otherGenericSymbol); // false

let fooSymbol = Symbol('foo');
let otherFooSymbol = Symbol('foo');
console.log(fooSymbol == otherFooSymbol); // false

二、引用类型

复杂类型统称为Object,我们这里主要讲述下面三种:

  • Object
  • Array
  • Function

Object

创建object常用方式为对象字面量表示法,属性名可以是字符串或数值

let person = {
    name: "Nicholas",
    "age": 29,
    5: true
};

Array

JavaScript数组是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。并且,数组也是动态大小的,会随着数据添加而自动增长

let colors = ["red", 2, {age: 20 }]
colors.push(2)

Function

函数实际上是对象,每个函数都是 Function类型的实例,而 Function也有属性和方法,跟其他引用类型一样

函数存在三种常见的表达方式:

  • 函数声明
// 函数声明
function sum (num1, num2) {
    return num1 + num2;
}
  • 函数表达式
let sum = function(num1, num2) {
    return num1 + num2;
};
  • 箭头函数

函数声明和函数表达式两种方式

let sum = (num1, num2) => {
    return num1 + num2;
};

其他引用类型

除了上述说的三种之外,还包括DateRegExpMapSet等…

三、存储区别

基本数据类型和引用数据类型存储在内存中的位置不同:

  • 基本数据类型存储在栈中
  • 引用类型的对象存储于堆中

当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值

下面来举个例子

基本类型

let a = 10;
let b = a; // 赋值操作
b = 20;
console.log(a); // 10值

a的值为一个基本类型,是存储在栈中,将a的值赋给b,虽然两个变量的值相等,但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程:

在这里插入图片描述

引用类型

var obj1 = {}
var obj2 = obj1;
obj2.name = "Xxx";
console.log(obj1.name); // xxx

引用类型数据存放在堆中,每个堆内存对象都有对应的引用地址指向它,引用地址存放在栈中。

obj1是一个引用类型,在赋值操作过程汇总,实际是将堆内存对象在栈内存的引用地址复制了一份给了obj2,实际上他们共同指向了同一个堆内存对象,所以更改obj2会对obj1产生影响

下图演示这个引用类型赋值过程

在这里插入图片描述

小结

  • 声明变量时不同的内存地址分配:
    • 简单类型的值存放在栈中,在栈中存放的是对应的值
    • 引用类型对应的值存储在堆中,在栈中存放的是指向堆内存的地址
  • 不同的类型数据导致赋值变量时的不同:
    • 简单类型赋值,是生成相同的值,两个对象对应不同的地址
    • 复杂类型赋值,是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46862327/article/details/126983180

每日一练_liu xw的博客-爱代码爱编程

JSP 简答题 JSP 中动态 include 与静态 include 的区别? 动态INCLUDE在使用的时候,会先解析所要包含的页面(你例子中的included.jsp),解析后在和主页面放到一起显示; 静

java面试题(一)&100家大公司java笔试题汇总_自在强的博客-爱代码爱编程_publicclassx{publicxamethod(){returnthis;}}

Java考试题 一:单选题 —– 1.下列哪一种叙述是正确的(D ) A. abstract修饰符可修饰字段、方法和类 B. 抽象方法的body部分必须用一对大括号{ }包住 C. 声明抽象方法,大括号可有可无 D. 声明

2019史上最全java面试题题库大全800题含答案(面试宝典)-爱代码爱编程

1、 meta标签的作用是什么 2、 ReenTrantLock可重入锁(和synchronized的区别)总结 3、 Spring中的自动装配有哪些限制? 4、 什么是可变参数? 5、 什么是领域模型(domain mod

每日面试题总结day01-爱代码爱编程

1.介绍JavaScript的基本数据类型 String,Number,Boolean,Null,undefinedSymbol(es6新增)2.说说JavaScript的基本规范 知识点链接 3.JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗? 声明变量时不同的内存分配: 原始值:存储

替代 webpack?带你了解 snowpack 原理,你还学得动么-爱代码爱编程

作者:AlienZHOU 来源:https://zhuanlan.zhihu.com/p/149351900 近期,随着 vue3 的各种曝光,vite 的热度上升,与 vite 类似的 snowpack 的关注度也逐渐增加了。目前snowpack 在 Github 上已经超过 1w stars。 snowpack 的代码很轻量,本文会从实

JAVA面试题每日一练-爱代码爱编程

1.讲述一下GC: 参考答案: JAVA GC(Garbage Collection,垃圾回收)机制是区别C++的一个重要特征,C++需要开发者自己实现垃圾回收的逻辑,而JAVA开发者则只需要专注于业务开发,因为垃圾回收这件繁琐的事情JVM已经为我们代劳。根据JVM规范,JVM把内存划分成了如下几个区域: 方法区(Method Area)堆区(Hea

Java小白进击大厂千日冲刺每日八题【Day01】——Java基础知识篇(望眼欲穿)-爱代码爱编程

相信大家有很多人和本小白一样,虽然菜但是有一颗进击大厂的心,那么标题为千日冲刺就不难理解了,既然我们“先天条件”不足,那么就滴水穿石,二十几岁的年纪(你们可能更年轻),只要我们步履不停,那么我们一定可以成为自己想要成为的人。 1、说下什么是深拷贝和浅拷贝,以及它们的区别? 一句话概括:所谓的深拷贝和浅拷贝说白了其实就是一个对象A复制另一个对象B,如果A

在互联网上,没有人知道你是一条狗?-爱代码爱编程

1993 年,《纽约客》(The New Yorker)杂志刊登一则由彼得·施泰纳(Peter Steiner)创作的漫画:标题是【On the Internet, nobody knows you’re a dog.】 这则漫画中有两只狗:一只黑狗站在电脑椅上,爪子扶着键盘。它望向站在地上、表情迷茫的另一只狗,兴奋地说:「在互联网上,没人知道你是一条狗

2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---JavaScript篇-爱代码爱编程

★★ 介绍一下JS的内置类型有哪些? ★★★★ 介绍一下 typeof 区分类型的原理 ★★★ 介绍一下类型转换 ★★★★ 说说你对 JavaScript 的作用域的理解。什么是作用域链? ★★ 解释下 let 和 const 的块级作用域 ★★★★ 说说你对执行上下文的理解 ★★★ 对闭包的看法,为什么要用闭包?说一下闭包的原理以及应用场景?

前端基础知识点-每天一个基本知识点(100+个前端小知识,你是否都知道?)-爱代码爱编程

文章目录 前言第一回合一、知识点:cookie(21/09/06)二、知识点:节流和防抖(21/09/07)三、知识点:var和let以及const(21/09/08)四:知识点:深拷贝和浅拷贝(21/09/09)五、知识点:作用域和作用域链(21/09/10)六、知识点:从输入URL到页面展示这中间发生了什么(21/09/11)七、知识点:

js基础面试题-爱代码爱编程

js基础 Javascript的typeof返回哪些数据类型 Object number function boolean undefind js基本数据类型基本数据类型有 Number String Boolean Null Undefined Symbol(ES6新增数据类型) bigInt 引用数据类型统称为Object类型,细分的话有 O

一个正经的前端学习 开源 仓库(每日更新)-爱代码爱编程

低调务实优秀中国好青年 (简介) && 附加答案 中文 | English 一个 ☝️ 正经的前端学习 开源 仓库,启发来自 淘宝大佬 @冴羽 ,初心做一个真正能帮助到大家的仓库。一个人可以走的更快,但一群人才能走的更远。(非常口语化的,手写总结) 欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star (此仓

一个正经的前端学习 开源 仓库(每日更新)-爱代码爱编程

低调务实优秀中国好青年 (简介) && 附加答案 中文 | English 一个 ☝️ 正经的前端学习 开源 仓库,养成一个好习惯,遇见更好的 自己。一个人可能走得更快,但一群人会走得更远。(非常口语化的,手写总结) 欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star (此仓库每天都会准时更新)

【每日更新 question & answers】一个 正经的前端学习-爱代码爱编程

正经的前端学习 新增issues博客 中文 | English 一个 ☝️ 正经的前端学习 开源 仓库,每天进步一点!欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star (此仓库每天都会手动更新) 日志 正经的前端学习(在更)深入理解JS核心技术(在更)深入手写JS原生API(在更) 😃 对自己的寄

前端面试题-爱代码爱编程

基础部分 1.什么是HTML?(Hyper Text Mark Language超文本标记语言) HTML并不是真正的的程序语言,他是一种 标 记 语 言 ,用来结构化和含义化你想要放 在web 网站上的那些内容。它由一系列的元素(elements)所组成,这些元素可以用来 封装你的内容中担任不同工作的各部分和各个角色。 2.什么是CSS?(Ca

js-爱代码爱编程

前置条件:函数的调用者的担保 后置条件:保证函数调用的结果 partial(条件,结果) 和 compose(结果,结果) 1. partial import _ from 'underScore' impor