JavaScript 学习笔记 Day 1 变量

最新推荐文章于 2025-08-05 15:28:01 发布

小喾苦xkk01

最新推荐文章于 2025-08-05 15:28:01 发布

阅读量769

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 学习前端

CC BY-NC-SA 署名-非商业性使用-相同方式共享

本文链接：https://blog.youkuaiyun.com/qq_55207049/article/details/129341284

本文介绍了JavaScript的基础知识，包括变量的使用和命名规范，数据类型的分类如Number、String、Boolean，以及数据类型转换的方法。此外，还讲解了JavaScript在浏览器中的执行机制、组成（ECMAScript、DOM、BOM）以及JS代码的书写位置和注释方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS Day 1 变量

JS学习笔记 by 小喾苦

初识 JavaScript

实现业务逻辑和页面控制(决定功能)，相当于人的各种动作

浏览器执行 JS 简介

浏览器分成两部分:渲染引擎和JS引擎

渲染引擎︰用来解析 HTML 与 CSS，俗称内核，比如 chrome 浏览器的 blink，老版本的 webkit
JS 引擎︰也称为 JS 解释器。用来读取网页中的 JavaScript 代码，对其处理后运行，比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎（解释器）来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

JS 的组成

$\text{JavaScript} \begin{cases} \text{ECMAScript}&\text{JavaScript语法}\\ \text{DOM}&\text{页面文档模型}\\ \text{BOM}&\text{浏览器对象模型} \end{cases}$

ECMAScript：ECMAScript 是由 ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。ECMAScript 规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM——文档对象模型：文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口.通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM——浏览器对象模型：BOM（Browser Object Model，简称 BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS 书写位置

JS有3种书写位置，分别为行内、内嵌和外部。

行内式 直接写到元素的内部
```
<html>
    <head></head>
    <body>
        <input type="button" valve="按钮" onclick="alert('已点击')" />
    </body>
</html>
```
- 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在 HTML 中我们推荐使用双引号，JS 中我们推荐使用单引号
- 可读性差，在 html 中编写 JS 大量代码时，不方便阅读
- 引号易错，引号多层嵌套匹配时，非常容易弄混
- 特殊情况下使用

内嵌式

<html>
    <head>
        <script>
            alert('Hello World!');
        </script>
    </head>
    <body></body>
</html>

可以将多行 JS 代码写到 <script> 标签中
内嵌JS是学习时常用的方式

外部文件 双标签
```
<html>
    <head>
        <script src="my.js"></script>
    </head>
    <body></body>
</html>
```
- 利于 HTML 页面代码结构化，把大段 JS 代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
- 引用外部 JS 文件的 <script> 标签中间不可以写代码
- 适合于 JS 代码量比较大的情况

JS 注释

单行注释

// 单行注释

多行注释

/* 多行注释
   VS Code 默认的快捷键 shift + alt +a
*/

JS 输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
`alert(msg)`	浏览器弹出警示框	浏览器
`console.log(msg)`	浏览器控制台打印输出信息	浏览器
`prompt(info)`	浏览器弹出输入框，用户可以输入	浏览器

变量

变量概述

白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。我们通过 变量名 获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。

变量的使用

变量在使用时分为两步：

声明变量
```
// 声明变量
var age; // 声明一个名称为 age 的变量 
```
- var 是一个 JS 关键字，用来声明变量（variable 变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
- age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
赋值把值存入变量中
```
age = 10; // 给 age 这个变量赋值为 10
```
- = 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
变量的初始化
```
var age = 18; // 声明变量同时赋值为 18
```
声明一个变量并赋值，我们称之为变量的初始化

// 1．用户输入姓名存储到一个 myname 的变量里面
var myname = prompt('请输入您的名字');
// 2．输出这个用户名
alert(myname);

变量语法扩展

更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
声明多个变量
同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。
```
var myname = 'xkk',
    age = 18;
```
声明变量特殊情况

情况说明结果
var age;console.log(age); 只声明，赋值 undefind
console.log(age) 不声明、赋值，直接使用报错
age = 10;console.log(age) 不声明，只赋值 10

情况	说明	结果
`var age;console.log(age);`	只声明，赋值	`undefind`
`console.log(age)`	不声明、赋值，直接使用	报错
`age = 10;console.log(age)`	不声明，只赋值	`10`

变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：usrAge， num01，_name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

数据类型

数据类型简介

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。**JavaScript是一种弱类型或者说动态语言。**这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = '是的' // 这是一个字符串

在代码运行时，变量的数据类型是由 JS 引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

var x = 6; // x 为数字
var x = 'xkk' // x 为字符串

简单数据类型

JavaScript中的简单数据类型及其说明如下∶

简单数据类型	说明	默认值
`Number`	数字型，包含整型值和浮点型值，如 `21`、`0.21`	`0`
`Boolean`	布尔值类型，如 `true` 、`false`，等价于 `1` 和 `0`	`false`
`String`	字符串类型，如 `"张三”` 注意 js 里面，字符串都带引号	`""`
`Undefind`	`var a;` 声明了变量 `a` 但没有给值，此时 `a = Undefind`	`Undefind`
`Null`	`var a = null;` 声明了变量 `a` 为空值	`null`

数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数)。

var age = 18; // 整数
var PI = 3.14; // 小数

数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

var num1 = 017; // 八进制，对应十进制15
var num2 = 018; // 十进制18
var num3 = 0xF; // 十六进制，对应十进制15

数字型范围

JavaScript 中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

数字型三个特殊值

alert(Infinity); // 代表无穷大，大于任何值
alert(-Infinity); // 代表无穷小，小于任何值
alert(NaN); // Not a Number，代表一个非数值

isNaN()

isNaN() 这个方法用来判断非数字并且返回一个值
如果是数字返回的是 false
如果不是数字返回的是 true

字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号 ''

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

var name = "xkk";
var url = 'https://xkk1.github.io';

字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

var strMsg = '我是"高富帅"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高富帅'程序猿"; // 可以用""包含''

字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
`\n`	换行符，n 是 newline 的意思
`\\`	反斜杠 \
`\'`	单引号 ’
`\"`	双引号 "
`\t`	tab 缩进
`\b`	空格，b 是 blank 的意思

字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串＋任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

+ 号总结口诀：数值相加，字符相连

布尔型 Boolean

布尔类型有两个值 : true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined （如果进行相连或者相加时，注意结果）

var variable;
console.log(variable) // undefind
console.log("你好" + variable) // 你好undefind
console.log(123 + variable) // NaN
console.log(true + variable) // NaN

获取变量的数据类型

获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

var num = 10;
console.log(typeof num); // number
var str = 'xkk';
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefind;
console.log(typeof vari); // undefind
var timer = null;
console.log(typeof timer); // object

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字自变量：8，9，10
字符串字面量：'程序员'，"前端"
布尔字面量：true，false

数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

转换为字符串类型

方式	说明	案例
`toString()`	转成字符串	`var num = 1; alert(num.toString());`
`String()` 强制转换	转成字符串	`var num = 1; alert(String(num));`
加号拼接字符串	和字符串拼接的结果都是字符串	`var num = 1; alert(num + "");`

转换为教字型（重点）

方式	说明	案例
`parseInt(string)` 函数	将 `string` 类型转成整数数值型	`parseInt("18")`
`parseFloat(string)` 函数	将 `string` 类型转成浮点数数值型	`parseFloat("3.14")`
`Number()` 强制转换函数	将 `string` 类型转换为数值型	`Number("123")`
js 隐式转换（`-` `*` `/`）	利用算术运算隐式转换为数值型	`"12" - 0`

parseInt("3.94"); // 3 取整
parseInt("120px"); // 120 会去掉这个px单位
parseInt("rem120px"); // NaN

parseFloat("120px"); // 120 会去掉这个px单位
parseFloat("rem120px"); // NaN

"12" - 0; // 12
"123" - "120"; // 3
"123" * 1; // 123