JavaScript基础-03

最新推荐文章于 2024-05-01 11:05:38 发布

零陵上将军_xdr

最新推荐文章于 2024-05-01 11:05:38 发布

阅读量504

点赞数 2

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45771939/article/details/130044823

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文讲解一下JavaScript变量的数据类型

数据分类

数据分为：静态数据、动态数据。

静态数据

静态数据是指一些永久性的数据。一般是以文件的形式存储在硬盘上，比如文档、照片、视频等文件。
电脑关闭后，静态数据仍然还在。只要不主动删掉数据或者硬盘没损坏，这些数据就一直都在。

动态数据

动态数据是在程序运行过程中，动态产生的临时数据，这些数据可能随时发生变化。一般存储在内存中。
电脑关闭后，这些数据会被清除。
为何不把应用程序的动态数据加载到硬盘中执行呢？这主要是因为，内存的访问速度比硬盘快无数倍。

变量的数据类型

为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。
我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 var 去定义它。比如：

var a = 'hello word';

var b = 123;

为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。

JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的。而且，变量的数据类型是可以变化的。比如说：

var name = '邢道荣';

name = 123; // 强制将变量 name 修改为 数字类型

JS八种数据类型

基本数据类型（值类型）：String字符串、Number数值、BigInt大型数值、Boolean布尔值、Null空值、Undefined未定义、Symbol。
引用数据类型（引用类型）：Object对象。

注意：内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。也就是说，除了那七种基本数据类型之外，其他的，都称之为 Object 类型。
BigInt 和 Symbol 是ES6中新增的类型

数据类型之间最大的区别：

基本数据类型：参数赋值的时候，传数值
引用数据类型：参数赋值的时候，传地址

基本数据类型举例：

var a = 23;
var b = a;

a++;

console.log(a); // 打印结果：24
console.log(b); // 打印结果：23

上面的代码中：a 和 b 都是基本数据类型，让 b 等于 a，然后改变 a 的值之后，发现 b 的值并没有被改变。
但是在引用数据类型中，就不同了，我们来看一看。

引用数据类型举例：

var obj1 = new Object();
obj1.name = '诸葛亮';

// 让 obj2 等于 obj1
var obj2 = obj1;

// 修改 obj1 的 name 属性
obj1.name = '邢道荣';

console.log(obj1.name); // 打印结果：邢道荣
console.log(obj2.name); // 打印结果：邢道荣

上面的代码中：obj1 和 obj2 都是引用数据类型，让 obj2 等于 obj1，然后修改 obj1.name 的值之后，发现 obj2.name 的值也发生了改变。
从上面的例子中，可以反映出，基本数据类型和引用数据类型是有区别的。

栈内存和堆内存

我们首先记住一句话：JS 中，所有的变量都是保存在栈内存中的。

基本数据类型

基本数据类型的值，直接保存在栈内存中。值与值之间是独立存在，修改一个变量不会影响其他的变量。

引用数据类型

对象是保存到堆内存中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间；而变量保存了对象的内存地址（对象的引用），保存在栈内存当中。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。

String字符串

语法

字符串型可以是引号中的任意文本，其语法为：双引号 “” 或者单引号 ‘’。

var a = 'abcde';
var b = '邢道荣';
var c = '123123';
var d = '哈哈哈哈哈';
var e = ''; //空字符串

var f = haha; // 没使用引号，到这里会直接报错。因为会被认为是js代码，但是之前并没有定义haha。

console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);

控制台输出如下：

string
string
string
string
string

注意：

单引号和双引号不能混用。比如下面这样写是不可以的：

var str = 'hello";  // 报错：Uncaught SyntaxError: Invalid or unexpected token

同类引号不能嵌套：双引号里不能再放双引号，单引号里不能再放单引号。
单引号里可以嵌套双引号；双引号里可以嵌套单引号。

转义字符：

在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义。

" 表示 " 双引号
’ 表示 ’ 单引号
\ 表示\
\r 表示回车
\n 表示换行。n 的意思是 newline。
\t 表示缩进。t 的意思是 tab。
\b 表示空格。b 的意思是 blank。

举例：

var str1 = '我说:"今天\t天气真不错！"';
var str2 = '\\\\\\';

console.log(str1);
console.log(str2);

打印结果为：

我说:"今天        天气真不错！"
\\\

获取字符串的长度

字符串是由若干个字符组成的，这些字符的数量就是字符串的长度。我们可以通过字符串的 length 属性可以获取整个字符串的长度。

代码举例：

var str1 = '说出吾名吓汝一跳';
var str2 = "吾乃零陵上将军邢道荣 keep moving!";

console.log(str1.length);  //8
console.log(str2.length);  //23

由此可见，字符串的 length 属性，在判断字符串的长度时，会认为：

一个中文算一个字符，一个英文算一个字符
一个标点符号（包括中文标点、英文标点）算一个字符
一个空格算一个字符

字符串拼接

多个字符串之间可以使用加号 + 进行拼接
拼接语法：

字符串 + 任意数据类型 = 拼接之后的新字符串;

拼接规则：拼接前，会把与字符串相加的这个数据类型转成字符串，然后再拼接成一个新的字符串。
代码举例：（字符串与六大数据类型相加）

var str1 = '邢道荣' + '牛啊';
var str2 = '邢道荣' + 666;
var str3 = '邢道荣' + true;
var str4 = '邢道荣' + null;
var str5 = '邢道荣' + undefined;

var obj = { name: '邢道荣', age: 23 };
var str6 = '邢道荣' + obj;

console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);
console.log(str5);
console.log(str6);

打印结果：

邢道荣牛啊 
邢道荣666
邢道荣true 
邢道荣null 
邢道荣undefined
邢道荣[object Object]

模板字符串（模板字面量）

ES6 中引入了模板字符串，让我们省去了字符串拼接的烦恼。下面一起来看看它的特性。

在模板字符串中插入变量

以前，让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接）

var name = '邢道荣';
var age = '22';
console.log('name:' + name + ',age:' + age); //传统写法

现在，通过模板字符串，我们可以使用一种更优雅的方式来表示：

const a = 11;
const b = 25;
console.log(`this is ${a + b} andnot ${2 * a - b}.`);

打印结果：

this is 36 andnot -3.

模板字符串中可以换行

因为模板字符串支持换行，所以可以让代码写得非常美观。
代码举例：

const result = {
    name: '邢道荣',
    age: 22,
    sex: '男',
};

// 模板字符串支持换行
const html = `<div>
        <span>${result.name}</span>
        <span>${result.age}</span>
        <span>${result.sex}</span>
</div>`;

console.log(html); // 打印结果也会换行

打印结果：

<div>
        <span>邢道荣</span>
        <span>22</span>
        <span>男</span>
</div>

模板字符串中可以调用函数

模板字符串中可以调用函数。字符串中调用函数的位置，将会显示函数执行后的返回值。

function getUrl() {
    return 'baidu';
}

console.log(www.${getUrl()}.com); // 打印结果：www.baidu.com

模板字符串支持嵌套使用

const nameList = ['邢道荣', '诸葛亮', 'JavaScript'];

function myTemplate() {
    // join('') 的意思是，把数组里的内容合并成一个字符串
    return `<ul>
        ${nameList.map((item) => `<li>${item}</li>`).join('')}
        </ul>`;
}
document.body.innerHTML = myTemplate();

Boolean布尔值

布尔型有两个值：true 和 false。主要用来做逻辑判断： true 表示真，false 表示假。
布尔值直接使用就可以了，千万不要加引号。

var a = true;
console.log(typeof a);

控制台输出结果：

boolean

布尔型和数字型相加时， true 按 1 来算，false 按 0 来算。

Number数值型

在 JS 中所有的数值都是 Number 类型，包括整数和浮点数（小数）。

var a = 100; // 定义一个变量 a，并且赋值整数100
console.log(typeof a); // 输出变量 a 的类型

var b = 12.3; // 定义一个变量 b，并且赋值浮点数 12.3
console.log(typeof a);

上方代码的输出结果为：

number

number

再次补充：在 JS 中，只要是数，就是 Number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 Number 类型的。

数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值。

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为： 5e-324

如果使用 Number 表示的变量超过了最大值，则会返回 Infinity。

无穷大（正无穷）：Infinity
无穷小（负无穷）：-Infinity
注意：typeof Infinity的返回结果是 number。

NaN

Nan是一个特殊的数字，表示 Not a Number，非数值。在进行数值运算时，如果得不到正常结果，就会返回 NaN。

console.log('abc' / 18); //结果是NaN

console.log('abc' * 'abcd'); //按理说，字符串相乘是没有结果的，但如果你非要让JS去算，它就一定会给你一个结果，结果是NaN。

注意：

typeof NaN的返回结果是 number。
Undefined 和任何数值计算的结果为 NaN。NaN 与任何值都不相等，包括 NaN 本身。

连字符和加号的区别

键盘上的+可能是连字符，也可能是数字的加号。如下：
console.log("邢" + "道" + "荣");        //连字符，把三个独立的汉字，连接在一起了
console.log("邢+道+荣");                        //原样输出
console.log(1+2+3);                                //输出6

输出：

邢道荣
邢+到+荣
6

总结：如果加号两边都是 Number 类型，此时是数字相加。否则，就是连字符（用来连接字符串）。

举例：

var a = '1';
var b = 2;
console.log(a + b);

控制台输出：

隐式转换

我们知道，“2”+1得到的结果其实是字符串，但是"2"-1得到的结果却是数值 1，这是因为计算机自动帮我们进行了“隐式转换”。
也就是说，-、*、/、%这几个符号会自动进行隐式转换。例如：

var a = '4' + 3 - 6;
console.log(a);

输出结果：

虽然程序可以对-、*、/、%`这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。

浮点数的运算

运算精度问题

在 JS 中，整数的运算基本可以保证精确；但是小数的运算，可能会得到一个不精确的结果。所以，千万不要使用 JS 进行对精确度要求比较高的运算。

var a = 0.1 + 0.2;
console.log(a); //打印结果十分意外：0.30000000000000004

上方代码中，打印结果并不是 0.3，而是 0.30000000000000004。
这是因为，计算机在做运算时，所有的运算都要转换成二进制去计算。然而，有些数字转换成二进制之后，无法精确表示。比如说，0.1 和 0.2 转换成二进制之后，是无穷的，因此存在浮点数的计算不精确的问题。

处理数学运算的精度问题

如果只是一些简单的精度问题，可以使用 toFix() 方法进行小数的截取。
在实战开发中，关于浮点数计算的精度问题，往往比较复杂。市面上有很多针对数学运算的开源库，比如decimal.js、 Math.js。这些开源库都比较成熟，我们可以直接拿来用。

Math.js：属于很全面的运算库，文件很大，压缩后的文件就有 500kb。如果你的项目涉及到大型的复杂运算，可以使用 Math.js。
decimal.js：属于轻量的运算库，压缩后的文件只有 32kb。大多数项目的数学运算，使用 decimal.js 足够了。
在使用这几个开源库时，既可以用 cdn 的方式引入，也可以用 npm 包的方式引入。
比如说，通过 cdn 的方式引入 decimal.js 时，可以这样用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/decimal.js/10.2.0/decimal.min.js"></script>
        <script>
            console.log('加法：');
            var a = 0.1;
            var b = 0.2;
            console.log(a + b);
            console.log(new Decimal(a).add(new Decimal(b)).toNumber());

            console.log('减法：');
            var a = 1.0;
            var b = 0.7;
            console.log(a - b);
            console.log(new Decimal(a).sub(new Decimal(b)).toNumber());

            console.log('乘法：');
            var a = 1.01;
            var b = 1.003;
            console.log(a * b);
            console.log(new Decimal(a).mul(new Decimal(b)).toNumber());

            console.log('除法：');
            var a = 0.029;
            var b = 10;
            console.log(a / b);
            console.log(new Decimal(a).div(new Decimal(b)).toNumber());
        </script>
    </body>
</html>

打印结果：

加法：
0.30000000000000004
0.3

减法：
0.30000000000000004
0.3

乘法：
1.0130299999999999
1.01303

除法：
0.0029000000000000002
0.0029

变量值的传递（赋值）

语句：

a = b;

把 b 的值赋给 a，b 不变。
将等号右边的值，赋给左边的变量；等号右边的变量，值不变。
举例：

//a       b
var a = '1';
var b = 2; // "1"     2
a = a + b; // "12"    2
b = b + a; // "12"    "212"
console.log(a); // 输出12
console.log(b); // 输出212

Null空对象

null 专门用来定义一个空对象。例如：let a = null，又例如 Object.create(null).
如果你想定义一个变量用来保存引用类型，但是还没想好放什么内容，这个时候，可以在初始化时将其设置为 null。你可以把 null 理解为：null 虽然是一个单独的数据类型，但null 相当于是一个 object，只不过地址为空（空指针）而已。

let myObj = null;
cosole.log(typeof myObj); // 打印结果：object

补充：

Null 类型的值只有一个，就是 null。比如 let a = null。
从语义上讲，null表示一个空对象，所以使用 typeof 检查一个 null 值时，会返回 object。

undefined未定义类型

case1：变量已声明，未赋值时
声明了一个变量，但没有赋值，此时它的值就是 undefined。举例：

let name;
console.log(name); // 打印结果：undefined
console.log(typeof name); // 打印结果：undefined

补充：

Undefined 类型的值只有一个，就是 undefind。比如 let a = undefined。
使用 typeof 检查一个 undefined 值时，会返回 undefined。

case2：变量未声明（未定义）时
如果你从未声明一个变量，就去使用它，则会报错（这个大家都知道）；此时，如果用 typeof 检查这个变量时，会返回 undefined。举例：

console.log(typeof a); // undefined
console.log(a); // 打印结果：Uncaught ReferenceError: a is not defined

case3：函数无返回值时
如果一个函数没有返回值，那么，这个函数的返回值就是 undefined。
或者，也可以这样理解：在定义一个函数时，如果末尾没有 return 语句，那么，其实就是 return undefined。
举例：

function foo() {}

console.log(foo()); // 打印结果：undefined

case4：调用函数时，未传参
调用函数时，如果没有传参，那么，这个参数的值就是 undefined。
举例：

function foo(name) {
    console.log(name);
}

foo(); // 调用函数时，未传参。执行函数后的打印结果：undefined
undefined与null比较
undefined 实际上是由 null 衍生出来的，所以null == undefined的结果为 true。
但是 null === undefined 的结果是 false。它们虽然相似，但还是有区别的，其中一个区别是，和数字运算时：

10 + null 结果为 10。
10 + undefined 结果为 NaN。

规律总结：

任何值和 null 运算，null 可看做 0 运算。
任何数据类型和 undefined 运算都是 NaN。

零陵上将军_xdr

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础-03

case1：变量已声明，未赋值时声明了一个变量，但没有赋值，此时它的值就是 undefined。let name;// 打印结果：undefined console . log(typeof name);// 打印结果：undefinedUndefined 类型的值只有一个，就是 undefind。比如 let a = undefined。使用 typeof 检查一个 undefined 值时，会返回 undefined。case2：变量未声明（未定义）时。
复制链接

扫一扫