JavaScript初相识与数据类型Number、String、Boolean
前言
本文是一份超详细的JavaScript入门笔记，涵盖了从计算机语言基础、JS简介、代码书写位置、变量声明到各种数据类型的完整知识点。适合刚接触前端、想系统梳理JS基础的同学收藏学习。
一、JavaScript基本概念
1. 计算机语言基础
计算机语言：人与计算机交流的媒介。
计算机组成：硬件 + 软件。
数据存储单位：bit（比特）、Byte（字节）、KB、MB、GB等。
2. JavaScript简介
JavaScript是什么：一种面向对象的脚本语言。
创始公司&创始人：Netscape Communications Corporation（网景公司），Brendan Eich（布兰登·艾奇）。
JavaScript能做什么：
网页交互（表单校验、网页特效）
桌面程序、服务端开发（Node.js）
App、物联网、游戏开发
微信小程序、插件扩展、刷浏览量等
浏览器如何执行JS：
浏览器本身不执行JS，而是通过内置的JavaScript引擎（解释器） 逐行解释执行源码，将其转为机器语言。
渲染引擎：解析HTML和CSS（俗称内核）。
JS引擎：读取并执行JS代码（如Chrome的V8引擎）。
3. JavaScript三大组成部分
组成部分 | 说明 |
|---|---|
ECMAScript | 核心语法规范（变量、循环、判断、数组、数据类型等） |
DOM（文档对象模型） | 操作HTML文档的接口，即操作网页 |
BOM（浏览器对象模型） | 操作浏览器的接口 |
二、JavaScript代码书写位置（4种方式）
<!-- 1. 事件属性：写在HTML元素中 --> <button onclick="alert('点击事件')">按钮</button> <!-- 2. body内的script标签 --> <body> <script>console.log('页面脚本');</script> </body> <!-- 3. head内的script标签 --> <head> <script>console.log('头部脚本');</script> </head> <!-- 4. 外部JS文件引入 --> <script src="filename.js"></script>注意：引入外部JS文件的<script>标签内不能再写其他代码。
三、JavaScript注释
类型 | 写法 | 快捷键 | 用途 |
|---|---|---|---|
单行注释 |
| Ctrl + / | 对当前行生效 |
多行注释 |
| Shift + Alt + A | 常用于函数、类说明 |
注释的作用：
代码说明与解释
调试代码
养成良好编码习惯
四、输入输出语句
1. 输出语句
alert(123); // 弹出警告框 console.log(234); // 控制台输出 document.write('hello'); // 页面输出 document.writeln('内容'); // 页面输出并换行2. 输入语句
prompt('请输入姓名'); // 弹出输入框 confirm('确定删除吗？'); // 确认对话框（确定返回true，取消返回false）3. 组合使用
console.log(prompt('请输入姓名')); // 输入内容输出到控制台 alert(prompt('请输入年龄')); // 输入内容弹出显示五、JavaScript基本语法
1. 语法规则
严格区分大小写
语句以分号结尾（推荐显式添加）
自动忽略多余空格和换行（可用于代码格式化）
2. 执行顺序
从上到下，逐行执行。
六、字面量与变量
1. 字面量
字面量是源代码中一个固定值的表示法，例如数字123、字符串"hello"等。字面量可以直接使用，但通常不会直接使用，而是存入变量中。
2. 变量
变量是程序在内存中申请的一块用来存放数据（字面量）的空间。
三种声明方式
// 1. var（ES5） var myname = prompt('请输入名字'); var num = 123; num = 234; // 可修改 // 2. let（ES6） let num = 1; num = 2; // 可修改 // 3. const（ES6） const num = 666; // num = 888; // 报错！不可修改变量操作
// 定义不赋值 let num2; // 定义多个变量 let num1 = 1, num2 = 2, num3 = 3; // 更新变量 num1 = 10;3. var、let、const区别（面试常考）
特性 | var | let | const |
|---|---|---|---|
重复声明 | 允许 | 不允许 | 不允许 |
变量修改 | 允许 | 允许 | 不允许 |
作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
变量提升 | 存在 | 不存在 | 不存在 |
暂时性死区 | 无 | 有 | 有 |
必须初始化 | 否 | 否 | 是 |
开发建议：优先使用let和const，不变的值用const。
七、标识符命名规则
1. 必须遵守的规则
由数字、字母、下划线（
_）、美元符（$）组成不能以数字开头
不能是JavaScript关键字（如
if、for等）
2. 建议遵守的规范
不建议使用中文
多个单词采用小驼峰（
myName）或下划线连接（my_name）见名知义
3. 合法示例
let num1 = 1; let num_1 = 2; let num$2 = 666; let myName = 'jack'; let my_name = 'jack';八、数据类型
1. 为什么需要数据类型？
不同数据占用的存储空间不同，定义数据类型可以充分利用存储空间。
2. 变量的数据类型
JS是弱类型或动态语言，变量的数据类型根据等号右边的值自动确定，同一变量可被赋予不同类型的数据。
3. 数据类型分类
分类 | 包含 |
|---|---|
简单数据类型（基本类型） | Number、String、Boolean、Undefined、Null、Symbol、BigInt |
复杂数据类型（引用类型） | Object、Function、Array、Date、RegExp、Math、包装类（Number、String、Boolean） |
九、数字型（Number）
1. 数值表示
let integer = 123; // 整数 let floatNum = 2.1; // 浮点数2. 数值范围
Number.MAX_VALUE; // 1.7976931348623157e+308（最大值） Number.MIN_VALUE; // 5e-324（大于0的最小值）超过最大值返回Infinity（正无穷），typeof Infinity返回"number"。
3. 特殊值：NaN
NaN：Not a Number，非数值
typeof NaN返回"number"检测方法：
isNaN()，例如isNaN('hello')返回true
4. 数字型计算注意事项
var c = 1 + 2; console.log(c); // 3（整数运算精确） var d = 0.1 + 0.2; console.log(d); // 0.30000000000000004（浮点数运算可能不精确）5. 数据类型检测
typeof 123; // "number" typeof typeof 123; // "string"（typeof返回的是字符串）6. 数字进制
let decimal = 10; // 十进制 let hex = 0xA; // 十六进制（0x开头） let octal = 012; // 八进制（0开头） let binary = 0b1010; // 二进制（0b开头）十、字符串型（String）
1. 字符串表示
'单引号' "双引号" `反引号` // ES6模板字符串嵌套使用："It's a string"或'He said "Hello"'
2. 转义字符
符号 | 含义 |
|---|---|
| 换行 |
| 制表符（Tab） |
| 单引号 |
| 双引号 |
| 反斜杠 |
3. 字符串属性：length
let str = 'hello'; str.length; // 54. 字符串拼接
'字符串' + 任意类型; // 结果为字符串 '我今年' + 18 + '岁了'; // "我今年18岁了"5. 字符串拼接变量
let age = 18; '你好' + age + 'hello'; // 变量不能写在引号里，用加号拼接十一、布尔型（Boolean）
1. 布尔值
let isTrue = true; let isFalse = false;2. 类型检测
typeof true; // "boolean"3. 数值计算
true + 1; // 2（true转为1） false + 1; // 1（false转为0）总结
本文从计算机语言基础出发，详细讲解了JavaScript的诞生背景、三大组成部分、四种代码书写方式、变量声明的三种方式及其区别、标识符命名规则，以及Number、String、Boolean三种基本数据类型的关键知识点。
掌握这些基础，你就迈出了前端学习的第一步。后续还会继续分享更多进阶内容，欢迎关注收藏！