JavaScript学习（1）书写位置，变量、数据类型、运算符

🔥keyipatience:个人主页

🎬作者简介：C/C++后端开发学习者

🌟专栏传送门：《c++》《linux》《c++高阶数据结构》《c++数据结构与算法》《前端学习》

⭐️patience is key in life

初识JavaScript（简称 JS）

属于脚本语言，解释器直接运行，不用提前编译。
原本浏览器客户端 运行；有了 Node.js 之后，可以在服务器端跑。
诞生初衷：网页表单校验（简单验证输入是否合法），现在是全栈通用语言。

JS 能干啥

网页：动画、交互特效
网页小游戏
后端服务（Node.js）
桌面软件（Electron，VSCode 就是 Electron 写的）
手机 App 开发

易混：JavaScript 和 Java 完全是两门语言！名字长得像而已，没有从属关系。

JavaScript 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨)

CSS: 网页的表现(皮)

JavaScript: 网页的行为(魂)

JS 运行流程

、

代码文件存在硬盘
打开 html，浏览器把文件读到内存（硬盘 → 内存）
JS 引擎（解释器）把 JS 翻译成二进制指令
CPU 执行二进制指令（内存 → CPU）

浏览器两大引擎

渲染引擎：解析 HTML + CSS，画页面
JS 引擎：解析执行 JS 代码，Chrome 是 V8 引擎

JavaScript 三大组成

ECMAScript（ES） ：JS语法本身（变量、循环、函数... 纯逻辑，不能操作页面）
DOM 文档对象模型 ：操作页面元素（增删改标签、文字样式）
BOM 浏览器对象模型 ：操作浏览器窗口（弹窗、页面跳转、获取窗口大小）

ECMAScript：是一套标准规范，所有 JS 引擎都要遵守这个标准实现 JavaScript。

JS 三种书写位置

① 内嵌式（内部 JS）

JS 写在<script>标签里面，直接写在 html 文件

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <script>
        // 内嵌JS代码
        alert("我是内嵌式JS");
        console.log("控制台输出内嵌代码");
    </script>
</body>
</html>

② 外部式（项目推荐）

分两个文件：文件 1：demo.js（单独 js 文件，注意这里不要写 script 标签）

复制代码

alert("外部JS文件执行了");
console.log("外部js的打印");

文件 2：index.html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <!-- src引入外部js文件 -->
    <script src="demo.js"></script>
</body>
</html>

注意：<script src="demo.js"> 这里面写代码无效！</script> 带 src 的 script 标签，中间不能写 JS。

复制代码

<!-- 错误示范！里面alert不会跑 -->
<script src="demo.js">
    alert("这里代码不执行！");
</script>

③ 行内式（不推荐，了解即可）

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>
    <!-- onclick 里面就是行内JS -->
    <button onclick="alert('行内JS，点击才弹出')">点我</button>
</body>
</html>

JS 输入输出

3 个：alert、prompt、console.log

1. alert () 弹窗输出（给用户看）

弹出提示框，只有文字 + 确定按钮

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<body>
<script>
alert("这是alert弹窗");
</script>
</body>
</html>

2. prompt () 输入框（接收用户输入）

弹出输入框，可以让用户打字；返回字符串，点取消返回null

复制代码

<!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>
// 接收用户输入，存到name变量
let name = prompt("请输入你的名字");
alert(name); // 把输入的内容弹出来
</script>
</body>
</html>

3. console.log () 控制台打印（给程序员调试用，用户看不见）

按 F12 打开浏览器控制台查看

复制代码

<!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>
        console.log("控制台输出内容，用户看不到，F12控制台查看");
        let num = 100;
        console.log(num);
    </script>
</body>
</html>

JS 变量

3 个关键字：var / let / const

1. var（老写法，现在不推荐）

复制代码

var age = 18;

特点：

1.普通大括号{}关不住 var，只有函数可以；

复制代码

if (true) {
  var a = 10; // 在if的{}里面定义var
}
console.log(a); //✅  输出10！外面能拿到，{}关不住var

// 只有函数的{}可以限制var
function fn() {
  var b = 20;
}
fn();
console.log(b); //❌  报错！函数外面访问不到

2.同一个范围可以多次var 同名变量，不会报错；

复制代码

var name = "张三";
var name = "李四"; // ✅ 合法，不会报错！直接覆盖
console.log(name); // 李四

3.变量声明会提前，没赋值前去读取得到undefined；

变量提升：JS 执行时，会把 var / let / const 的声明提前到当前作用域最顶部，但赋值不会提前。

复制代码

console.log(x); // 👉 undefined，不是报错！
var x = 100;

JS 实际是这样理解执行：
var x; // 声明被提升到顶部，此时x默认是undefined
console.log(x);
x = 100; // 赋值还在原来位置

对比 let：也会提升，但是有暂时性死区，提前访问直接报错，不会返回 undefined。
console.log(y); // ❌ 报错
let y = 200;

2. let（现代，可变变量，推荐）

复制代码

let name = "小明";

特点（对比var理解）：

块级作用域 ，只在 {} 里面生效（if、for、大括号）
同一个作用域不能重复声明，会报错
有变量提升，但存在暂时性死区，声明前直接使用会报错

3. const

复制代码

const PI = 3.14;
PI = 99; // ❌ 报错！不能重新赋值

特点：

块级作用域，和 let 一样
声明时必须赋值，后面不能重新赋值

注意：如果 const 存的是对象 / 数组，里面内容可以改，只是变量不能换指向：

复制代码

存数组
const arr = [10, 20];

// ✅ 修改数组内部内容：允许！地址没变
arr[0] = 99;
arr.push(30);
console.log(arr); // [99,20,30]

// ❌ 报错！这是让arr指向一个全新数组，更换了指向
arr = [1,2,3]; 



存对象
const user = { name: "张三" };

// ✅ 修改对象里面的属性，允许，地址不变
user.name = "李四";
user.age = 18;
console.log(user); // {name:'李四',age:18}

// ❌ 报错！指向全新对象，换地址
user = { name: "王五" };

选择口诀：优先 const；只有后续需要修改这个变量值的时候，才用 let；尽量不用 var

JS 动态类型

JS 变量本身没有固定类型，是「值」有类型；变量可以随时装不同类型的数据。

两条要点

1.变量的类型，运行代码的时候才确定

复制代码

let a = 10;    // 运行到这一行，a里面存数字number
let b = "hehe";// 运行到这一行，b里面存字符串string

JS 声明变量（var/let）不用提前写类型。不像 Java/C，写变量就要指定是整数还是字符串。

2.同一个变量，可以随时换成别的类型的值

复制代码

let a = 10;   // 现在a是数字
a = "hehe";   // 直接改成字符串！合法，不报错

简单理解a只是一个盒子，这次放数字，下次直接放文字，盒子本身不用改。

对比：静态类型（C / Java / C++）

静态语言：变量创建时就固定类型，一辈子只能存同一种类型数据

复制代码

// Java例子
int a = 10; // 声明就规定a只能存整数
a = "hehe"; // ❌ 直接编译报错，不能把字符串放进int变量

JS 5 种基本数据类型

1. number 数字类型

JS不区分整数、小数（浮点数），全部统一叫 number

复制代码

let a = 10;    // 整数，也是number
let b = 3.14;  // 小数，也是number

额外特殊值（都属于 number）

Infinity 无穷大
-Infinity 负无穷
NaN：Not a Number，不是一个数字（但类型依旧是 number）

console.log("zzz"-1); // NaN

console.log(10/0);//Infinity

console.log(-10/0);//-Infinity;

2. string 字符串类型

必须用英文单引号' ' / 双引号" " / 反引号`````包裹

复制代码

let str1 = "hello";
let str2 = 'JS学习';

JS的'(单引号）和"（双引号）

共同点基础功能完全一样，都用来包裹字符串

差别：引号嵌套

外层用双引号，里面可以直接写单引号
复制代码
let msg = "他说：'好好学习JS'";
console.log(msg); // 他说：'好好学习JS'
外层用单引号，里面也可以直接写双引号
复制代码
let msg = '他说："好好学习JS"';
console.log(msg); // 他说："好好学习JS"
不能同号嵌套
复制代码
// 错误！双引号里面直接写双引号，会提前结束字符串
let msg = "他说："好好学习JS""; // 报错！

let msg = "他说：\"好好学习JS\""; // \" 代表字符串里的"
let msg2 = '他说：\'好好学习JS\''; // \' 代表字符串里的'

//转义字符`\`开头，`\n`换行，`\'`单引号，`\"`双引号，`\\`反斜杠
' 和 " 基础用法完全相同，只是为了方便嵌套另一种引号；项目里选一种，保持统一。

求字符串长度 .length

语法：字符串.length，返回字符个数（中文、英文都算 1 个字符）

length 是属性，不加括号！不是 length ()

复制代码

let a = 'hehe';
console.log(a.length); // 4，4个英文字母

let b = '哈哈';
console.log(b.length); // 2，2个汉字

字符串拼接：+

+ 有两种身份：

两边都是数字 ：+ 是加法运算
只要任意一边是字符串 ：+ 变成字符串拼接，把内容拼成一段文字

let a = "my name is ";
let b = "zhangsan";
console.log(a + b); // my name is zhangsan

// 数字 + 字符串 → 拼接
let c = "my score is ";
let d = 100;
console.log(c + d); // my score is 100

//经典对比
console.log(100 + 100); // 200，两边都是数字 → 数学加法
console.log('100' + 100); // "100100"，有字符串 → 拼接

3. boolean 布尔类型

只有 2 个值：true（真） / false（假），用来做判断

复制代码

let flag1 = true;
let flag2 = false;

4. undefined

只有唯一一个值：undefined 含义：变量只声明、没有赋值，默认就是 undefined

复制代码

let x;
console.log(x); // undefined
console.log(typeof x); // 'undefined'

5. null

只有唯一一个值：null 含义：空值，人为手动赋值，表示 "什么都没有"

复制代码

let y = null;
console.log(y); // null

undefined 和 null 的简单区分（考试常考）

undefined：自动产生 ，声明变量没赋值，系统默认给的。代表「未定义」
null：手动写出来赋值，人为设置为空。代表「空、无对象」

let a; // a = undefined（系统自动）
let b = null; // 自己手动赋值为空

typeof 检测类型

复制代码

typeof 10          // 'number'
typeof "hehe"      // 'string'
typeof true        // 'boolean'
typeof undefined   // 'undefined'
typeof null        // 'object' 历史bug！记住这个坑

总结：

类型	含义	例子
number	数字（整数 / 小数不分）	`10`，`3.14`，`NaN`
string	字符串文本	`"abc"`，`'123'`
boolean	布尔真假	`true` / `false`
undefined	未定义，声明未赋值	`let x; x`
null	手动设置空值	`let x = null`

JS 运算符

JavaScript 中的运算符和C语言用法基本相同. 此处不做详细介绍了.

重点说一些不一样的：

/除（JS 除法会得到小数，不是整数除法）

运算符	名称	是否类型转换	特点	示例	结果
`==`	相等	隐式转换	只比较值，不管类型	`'10'==10`	`true`
`!=`	不相等	隐式转换	值不同则 true	`'10'!=10`	`false`
`===`	全等	不转换	值和类型都必须一样才 true，开发推荐	`'10'===10`	`false`
`!==`	不全等	不转换	值不一样或类型不一样就 true	`'10'!==10`	`true`

JS语句

if / else if，三元表达式，switch，while，do while，for和C语言几乎一样这里也不过多介绍了