前端基础之JavaScript学习——变量、数据类型、类型转换

大家好，我是来自CSDN的博主PleaSure乐事，今天我们开始有关JS的学习，希望有所帮助并巩固有关前端的知识。

我使用的编译器为vscode，浏览器使用为谷歌浏览器，使用webstorm或其他环境效果几乎一样，使用系统自带的默认浏览器效果可能会有偏差，但是问题不大，都可以使用。

JavaScript介绍

JS简介

JS书写位置

内部JS

外部JS

JS注释

结束符

输入输出语法

输出

document.write

编辑

console.log

alert

输入

字面量

JavaScript变量

定义

基本使用

变量的声明

变量的赋值

变量的更新与变量值的交换

命名规则与规范

规则

规范

let和var关键字的区别

作用域

变量提升

重复声明

全局属性

JavaScript数组

JavaScript常量

JavaScript数据类型

基本数据类型

number数字类型

string字符串类型

字符串基本定义

字符串拼接

boolean布尔型

undefined未定义型

null空类型

复杂数据类型

JavaScript类型转换

隐式转换

编辑

显示转换

结语

JavaScript介绍

JS简介

JS是一种客户端（浏览器）编程语言，主要用于监听、表单验证、数据交互、服务端编程（node.js）等方面，由ECMAScript和Web APIs两部分组成，其中Web APIs包含DOM文档操作和BOM操作浏览器两方面。

JS书写位置

内部JS

内部JS主要写在body内，但是要在</body>上方，即整个body最后，目的是为了操作上面的html元素。内部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>
    <h1>PleaSure乐事</h1>
    <script>alert('我是来自CSDN的PleaSure 希望我的博客对你有帮助')</script>
</body>
</html>

作为内部JS，也可以直接在html按键中直接书写需要的JS代码，但是注意在vue中会使用这样的方法，尽量避免使用这样的写法，例如：

<button onclick="alert('hello world')">点击生效</button>

外部JS

外部JS是在目标html文件外部建立一个以.js结尾的文件，并在目标html文件中在script中使用其路径进行引入，在.js文件中直接写需要的js内容。但是一定要注意的是在引用需要的js文件后<script></script>中不能写其他的代码，否则会自动忽略。例如：

//test.html
<body>
    <h1>PleaSure乐事</h1>
    <script src="test.js"></script>
</body>

//test.js
alert('我是来自CSDN的PleaSure 希望我的博客对你有帮助')

JS注释

JS的注释和C++、Java等类似，也分为单行注释和块注释两类，书写格式同样为两个左斜杆和斜杠+星号比如：

//注释
/*注释*/

结束符

CSS中需要「封号」来判断结束，但是JS中可以不写，一般跟着团队需求和开发规范来写。

输入输出语法

输出

document.write

输出语法的第一个为document.write，可以结合h1等标签进行书写。具体使用方法如下：

<body>
    <h1>PleaSure乐事</h1>
    <script>
        document.write('小黑子')
    </script>
</body>

console.log

第二种输出语法是console.log控制台输出，主要供程序员调试时使用，在页面当中不显示，但是控制台中会出现。控制台的调用方法为右键浏览器-检查页面元素即可调出。

alert

第三种输出方式则为使用页面弹出警示框alert（同内部JS中出现的alert），即为在用户进行操作前会进行提示。这一个输出已经在上面的JS书写位置部分已经讲解，就不再阐述。

输入

在JS当中，输入主要就一种：prompt，可以由此获得用户输入的内容。其中prompt括号中的前半部分应当输入提示信息，后半部分输入“输入框”中的默认信息。代码及效果如下：

<body>
    <script>
        var userInput = prompt("请输入你的请求", "学费了");
        if (userInput != "学费了") {
            document.write("你输入的请求是：" + userInput);
        }
        else{
            document.write("已学费，还要努力");
        }
    </script>
</body>

PS：这里如果输入其他内容，则会输出if语句当中的内容，这里就不再做展示。

字面量

在JS当中字面量是一种表示特定值的语法形式，它直接在源代码中表示数据本身。字面量不是变量，而是在代码中直接写出的实际数据。当你读取或编写代码时，你看到的就是它的实际值，即“所见即所得”。JS当中的字面量主要包含以下几种：

数字字面量：直接写出数字，可以是整数或浮点数。例如：114514, 3.14。
字符串字面量：由引号包围的一系列字符，可以使用单引号或双引号。例如：'hello', "world"。
布尔字面量：只有两个可能的值，true 或 false。
空字面量：null 表示一个空值或不存在的对象引用。
未定义字面量：undefined 表示一个变量已经被声明，但是还没有被赋值。
对象字面量：使用大括号 {} 包围的一组键值对。例如：{key: 'value'}。
数组字面量：使用方括号 [] 包围的一系列值。例如：[1, 2, 3]。
模板字面量：使用反引号 ` 包围的字符串，可以嵌入变量和表达式。例如：`Hello, ${name}!`。
正则表达式字面量：由斜杠 / 包围的模式，用于字符串匹配。例如：/abc/gi。

JavaScript变量

定义

变量是存储数据的容器，当不是数据本身。本质是程序在内存中申请的一块用来存储数据的小空间。需要注意的是如果变量过大或者其他情况可能会导致内存溢出的情况。

基本使用

变量的声明

变量的声明由两部分构成：声明关键字和变量名（也称标识）。声明的关键字为let，即提供的声明变量的词语。语法为：关键字+变量，例：let xiaoheizi。可以在一句let语句中同时定义多个变量，例如let age，name…… 。不过为了更好的可读性，一般分开写，不写在同一行。

变量的赋值

赋值与Java等一致，可以使用alert或者documen.write在页面中进行输出。注意，变量在声明的时候可以直接赋值（即初始化）。

<body>
    <script>
        let age
        age = 18
        document.write(age)
    </script>
</body>

也可以和上面的prompt一起使用。

变量的更新与变量值的交换

变量可以重新进行赋值，但是不可以重复定义。

多个变量可以使用一个中间变量进行交换，冒泡排序就是基于中间变量进行交换的。

命名规则与规范

规则

变量命名不能使用关键字如var，let等作为变量名，只能使用下划线，数字等，且数字不能打头，并严格区分大小写。

规范

变量命名应当做到命名有意义，见名知其意，并使用驼峰命名，比如使用pleaSureCsdn就是一个典型的驼峰命名，且见名知意。

let和var关键字的区别

作用域

声明的变量具有函数作用域。在一个函数内部使用 var 声明一个变量，那么这个变量在整个函数体中都可见。如果在全局作用域中声明，那么它将成为一个全局变量。

let 声明的变量具有块作用域。这意味着在 { } 内部声明的变量只在该代码块内可见。

变量提升

var 声明的变量会被提升至作用域的顶部，即我们可以在声明之前访问这些变量，虽然其值会是 undefined。

let 声明的变量不会被提升。在声明之前访问这些变量会导致一个引用错误。

重复声明

var 允许在同一作用域内重复声明同一个变量名，后面的声明会覆盖前面的声明。

let 不允许在同一个作用域内重复声明同一个变量名。尝试这样做会抛出一个语法错误。

全局属性

当你在全局作用域中使用 var 声明变量时，该变量会自动成为 window 对象的一个属性。

使用 let 声明的变量不会成为 window 对象的属性，即使它是在全局作用域中声明的。

JavaScript数组

数组就是数据的组合，将一组数据存储在单个变量名下。声明方式为：关键字let 数组名arr = 数组字面量[] 也可以用new array构造函数声明。

数组中每个数据按照顺序保存，都有编号（也称为索引号、下标），从0开始，和Java、C++等相似，但是不同的地方是，在JavaScript当中数组可以存储不同类型数据，即在同一个数组当中存储整数，字符串等。

<script>
    let age = [114514,123123,145678];
    let name = ["jack","tom","lily"];
    console.log(age);
    console.log(name);
    document.write(age);
    document.write("<br>");
    document.write(name);
</script>

JavaScript常量

JS当中使用const声明的变量叫常量。

声明方式：关键字const 变量名 = 数值例：const PI = 3.1415926

使用场景：某个变量永远不会改变，使用const定义，不用let或var定义。需要特别注意的是const定义的时候一定要初始化，切不可修改，用let定义的时候可以先不赋值。

JavaScript数据类型

JavaScript中的数据类型都是弱数据类型，赋值后才知道它的数据类型。强数据类型就是赋值之前就已经知道类型，比如Java中会先用int定义一个变量名，此时我们已经知道了数据类型，那么就知道该变量的类型就称为强数据类型。PS：需要留意undefined和null二者的区别。

基本数据类型

number数字类型

该类型包含整数、浮点数（小数），可以进行加减乘除这四种基本的运算，以及取模运算。但是需要注意运算之间的需要注意优先级。

此时我们引入一个概念：NaN。NaN代表一个计算错误，表示一个不正确为未被定义的数学操作的到的结果。NaN是粘性的，任何跟NaN的操作都会返回NaN。就像以下输出都会是NaN：

let result = Number("Hello World");
console.log(result);
let result = 0 / 0;
console.log(result);
let result = Infinity - Infinity;
console.log(result);
let result = "123abc" * 2;
console.log(result);

string字符串类型

字符串基本定义

字符串常用单引号、双引号、反引号套起来使用，单引号和双引号基本没有区别，一般推荐使用单引号，引号中没有内容就称为空字符串，但是需要注意哪怕只有一个空格都不是空字符串。

<script>
    let name = 'jack'
    let age = 18
    let gender = '男'
    let hobby = ['唱','跳','rap','篮球']
    let phone = '123456'
</script>

单双引号可以相互嵌套，外单内双或者外双内单，必要时可以使用转义符\来输出单双引号

字符串拼接

字符串拼接可以直接用加号进行，比如数字字符拼接 ‘giegie’ + 18 + ’nb‘、字符相连：‘哥哥’ + ‘giegie’。另外还有一种字符串叫模版字符串，即外面用反引号包裹，里面用${变量名}替代，可以参考python中的输出形式例：document.write(‘我今年${age}了’}。

<script>
    let name = "PleaSure";
    let age = 30;
    let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
    console.log(greeting);
</script>

boolean布尔型

只有两个固定的值：true和false

undefined未定义型

表示未赋值的变量，即已经定义了变量，但是还没有初始化。

null空类型

表示赋值了，但内容为空，即一个尚未创建的对象，已经创建了一个对象，但是还处于没准备好的阶段

复杂数据类型

复杂数据类型也常被称为复合数据类型或引用数据类型，是指那些由简单数据类型（原始类型）组合而成的数据结构。这些类型通常需要更多的内存空间，并且它们的值存储在堆内存中，而变量本身只存储指向这些值的引用（指针）。当变量被赋值为复杂数据类型时，实际上存储的是指向数据所在位置的内存地址，而非数据本身

主要包含数组、对象、函数、Map和Set、TypedArray 和 DataView等。

JavaScript类型转换

JS当中的转换原因：表单、prompt获得的数据默认为字符串而非其他类型，故不能直接进行相加所以我们需要把数据类型进行类型转换后再进行我们需要的操作。

隐式转换

隐式转换是系统内部自动进行类型转换，如果+号两边只要有一个字符串们就会把另一个也转换成字符串但是除了+意外，-*/都自动转换为数字类型。

<script>
    console.log(1 + 1)
    console.log(1 + 'pleasure')
    console.log(1 + 2)
    console.log(1 + '2')
    console.log(1 - 2)
    console.log(1 - '2')
    console.log(+12)
    console.log(+'12')
</script>