JavaScript 零基础入门笔记：核心概念与语法详解

强子感冒了2026-02-17 11:43

Javascript是一门可以由浏览器解释运行的脚本语言。Javascript与Java看起来很像，Javascript与Java的关系就像雷锋和雷峰塔，没有半毛钱关系。

引入JS代码

HTML引入JS代码与CSS相似，有引入外部JS代码和在HTML内部编写JS代码两种方式。

方式一：在HTML内写JS代码。在HTML的<head>内使用<script>标签内直接书写JS代码，与CSS在<style>标签内写CSS代码相似。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 引入JS方式1：内部JS
        alert("hello world");
    </script>
    <style>
        body{
            background-color: pink;
        }
    </style>
</head>
<body>

</body>
</html>

方式二：引入外部JS代码。在HTML的<head>内使用<script>标签引入外部JS代码。需要注意，CSS是用<link>标签引入的，而JS不是。实际开发中，为了提升页面加载速度，<script> 标签通常放在 </body> 之前，但是不放在 <head> 也是可以的。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入JS方式2：外部JS -->
    <script src="js/hello.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>

</body>
</html>

流程控制

JS中的流程控制（分支结构、循环结构）基本语法与Java类型相似。

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        // 定义变量，使用var关键字  
        let a = 10;  
        let b = 20;  
  
        // 分支结构，与java中的if-else语句类似  
        if (a > b) {  
            console.log("a大于b");  
        } else {  
            console.log("a不大于b");  
        }  
  
        // 循环结构,与java中的for循环语句类似  
        for (let i = 0; i < 10; i++) {  
            console.log(i);  
        }  
    </script>  
</head>  
<body>  
  
</body>  
</html>

注释

JS支持单行注释和多行注释，与Java相同，使用//做单行注释，多行注释以/*开头，以*/结束。

js 复制代码 
"use strict";  
// 单行注释  
/*  
多行注释  
多行注释  
 */

标识符

JS中的标识符规则与Java类似，包括：

  • 大小写敏感，即my和My是两个不同的标识符。
  • 标识符只能包含英文字母、数字、下划线和美元符号，但是不能以数字开头，比如："0my"是非法的标识符。
  • 不能使用关键字，比如"let"是非法的标识符。
js 复制代码 
"use strict";  
// 标志符，与java中的变量命名规则类似  
let my = 10;  
let MY = 20;  
console.log(my);  
// 标志符，不能以数字开头  
// let 0my = 3;  
// 标志符，不能使用保留字  
// let let = 4;

数据类型

JS在定义变量时，无需声明数据类型，但是JS也有数据类型，具体来说分为原始类型和引用类型。

原始类型

  1. undefined:只有一个值undefined，表示变量声明了但是未赋值。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        "use strict";
        // 声明一个变量但是未赋值，打印到控制台
        let a;
        console.log(a);
    </script>
</head>
<body>

</body>
</html>
console 复制代码 
undefined

需要注意。当我们在输出一个未被申明的变量时，浏览器控制台会报错变量未定义。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        "use strict";
        // 打印一个未被声明的"A"
        console.log(A);

    </script>
</head>
<body>

</body>
</html>
console 复制代码 
demo0.html?_ijt=b00offorfq5j0iq791n2cvmd2v&_ij_reload=RELOAD_ON_SAVE:9 Uncaught ReferenceError: A is not defined
    at demo0.html?_ijt=b00offorfq5j0iq791n2cvmd2v&_ij_reload=RELOAD_ON_SAVE:9:21
  1. Null：只有一个值null,表示空值或不存在。需要注意，null与undefined有区别，undefined表示变量声明未赋值，而null表示变量已经赋值了，只不过是赋值为null，语义上表示为空。NaN 与自身不相等（NaN !== NaN 为 true），这是一个重要特性。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 声明一个变量但是赋值为null，打印到控制台  
        let a = null;  
        console.log(a);  
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
null
  1. boolean类型：与Java类似
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 打印一个布尔值  
        console.log(1 > 2);  
  
        // 声明一个布尔类型变量，并打印  
        let b = true;  
        console.log(b);  
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
false
true
  1. Number：数字类型。与Java中整数（byte short int long）和浮点数（float double）分不同类型不同，JS中的整数和浮点数都是Number类型。除此之外，还包括两个特殊的值：Infinity（无限大）、NaN（不是数字， Not a Number）。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 定义一个浮点数的数字变量，并打印  
        let a = 1.23456;  
        console.log(a);  
  
        // 定义一个整数的数字变量，并打印  
        let b = 100;  
        console.log(b);  
  
        // 定义一个特殊的无限大的数字变量，并打印  
        let c = Infinity;  
        console.log(c);  
  
        // 定义一个特殊的NaN（Not a Number）数字变量，并打印  
        let d = NaN;  
        console.log(d);  
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
1.23456
100
Infinity
NaN

在 JavaScript 中，Number 类型的两个特殊值：Infinity（无穷大）和 NaN（非数字，Not a Number）。它们通常在特定运算或数值超出表示范围时出现。

nfinity 表示正无穷大，超出 JavaScript 可表示的最大正数范围（约为 1.79e+308）。负无穷大为 -Infinity。比如：

console 复制代码 
5/0
Infinity

NaN 表示"不是一个数字"，通常出现在数学运算无法得出有效数字时。注意：NaN 是唯一与自身不相等（NaN !== NaN）的值。

js 复制代码 
console.log(0 / 0);              // NaN
console.log(Infinity - Infinity); // NaN
console.log(Infinity / Infinity); // NaN
console.log(Math.sqrt(-1));       // NaN
console.log(Math.log(-1));        // NaN
  1. String：字符串类型。JS的字符串与Java类似，是不可变的。字符串也有很多自带的方法可以直接调用。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 定义一个字符串变量，并打印  
        let a = "hello world";  
        console.log(a);  
        // 将字符串大写并打印  
        console.log(a.toUpperCase());  
        // 将字符串切割3~5之间的字符并打印  
        console.log(a.slice(3, 5));  
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
hello world
HELLO WORLD
lo

相比于Java要通过字符串拼接的方式进行输出，JS可以直接使用模版字符串。语法为：使用$+{}包裹变量。

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 使用模版字符串进行输出  
        let name = "张三";  
        console.log(`你好，${name}`);   
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
你好，张三

引用类型

引用类型存储的是引用的地址，包括对象和数组等。

  1. Object：基础对象类型。JS的对象，与Java的对象是不一样的东西。JS的对象，可以简单理解成是键值对的组成对象。JS对象的属性可随意添加和删除，而不像Java对象的属性是由类（蓝图）确定。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 定义一个对象  
        let student = {  
            name: "张三",  
            age: 18,  
            sex: "男"  
        }  
        console.log(student); // 打印对象  
        console.log(student.name); // 打印对象的name属性的值  
        // 对象可以随意添加和删除属性  
        student.address = "中国"; // 给对象添加一个属性address  
        console.log(student);  
        delete student.sex; // 删除对象的sex属性  
        console.log(student);  
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
{name: '张三', age: 18, sex: '男'}
张三
{name: '张三', age: 18, sex: '男', address: '中国'}
{name: '张三', age: 18, address: '中国'}
  1. Array：数组。Java中的数组只能存储同一种数据类型，而JS的数组可以存多种数据类型。JS数组可以从头部和尾部存取数据，当然也可以使用索引获取数据。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 数组存储多种数据类型  
        let array = [1, 1.1, "你好吗", false, null]  
        console.log(array);  
  
        // 数组存取数据：从尾部存取用push和pop  
        array.push("这是存在尾部的字符串"); // 从尾部增加一个item  
        console.log(array);  
        array.pop(); // 从尾部取出一个item  
        array.pop(); // 从尾部取出一个item  
        console.log(array);  
  
        // 数组存取数据：从头部存取用unshift和shift  
        array.unshift("这是存在头部的字符串"); // 从头部增加一个item  
        console.log(array);  
        array.shift();  // 从头部取出一个item  
        array.shift();  // 从头部取出一个item  
        console.log(array);  
  
        // 定义一个二维数组  
        let array1 = [[1, 2], ["hello", "JS"]]  
        console.log(array1[1][1]) // 使用下标（索引）获取数据：JS  
    </script>  
</head>  
<body>  
  
</body>  
</html>
console 复制代码 
[1, 1.1, '你好吗', false, null]
[1, 1.1, '你好吗', false, null, '这是存在尾部的字符串']
[1, 1.1, '你好吗', false]
['这是存在头部的字符串', 1, 1.1, '你好吗', false]
1.1, '你好吗', false]
JS

Set和Map

Set

Set是ES6引入的新特性，JS的Set与Java集合框架的Set相似，是无序、不可重复的集合。JS新创建一个Set也是与Java相似，需要使用new关键词来创建。Set 的构造函数只能接收一个可迭代对象作为参数，比如数组。

js 复制代码 
"use strict";  
// 定义一个Set  
let set = new Set([1, 2, 3, 4, 5]);  
console.log(set); // 打印Set

与Java的Set类似，也有add、delete、has、size等诸多方法，便于开发者使用。

js 复制代码 
"use strict";  
// 定义一个Set  
let set = new Set([1, 2, 3, 4, 5]);  
console.log(set); // 打印Set  
// Set的常用方法  
set.add(6); // 给Set添加一个item  
console.log(set);  
set.delete(3); // 删除Set的一个item  
console.log(set);  
console.log(set.has(4)); // 判断Set是否有某个item：true  
console.log(set.has(6)); // 判断Set是否有某个item：false

Map

Map也是ES6引入的新特性，JS的Map与Java集合框架的Map相似，是存储键值对的双列集合。

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script>        "use strict";  
        // 定义一个Map  
        let map = new Map();  
        // 向Map中添加键值对  
        map.set("name", "张三");  
        map.set("age", 18);  
        map.set("sex", "男");  
        console.log(map);  
        // 从Map中获取键对应的值  
        console.log(map.get("name")); // 张三  
        console.log(map.get("age")); // 18  
        console.log(map.get("sex")); // 男  
    </script>  
</head>  
<body>  
  
</body>  
</html>

JS的对象类型也是存储键值对，而Map也是存储键值对，两者有什么区别和使用场景吗？

对象（Object）和 Map 都用于存储键值对，但它们的设计目标和内部实现有显著差异，因此适用场景也不同。

在 JavaScript 中，对象（Object）和 Map 都用于存储键值对，但它们的设计目标和内部实现有显著差异，因此适用场景也不同。

特性 Object Map
键的类型 只能是字符串 或 Symbol（其他类型会自动转为字符串） 可以是任意类型（对象、函数、NaN、undefined 等）
键的顺序 整数属性按升序排序，其余按插入顺序（ES6+ 规范） 严格按照插入顺序迭代
大小获取 需要手动计算：Object.keys(obj).length 内置 size 属性，直接读取
迭代方式 需先获取键数组（keys()、entries()）或使用 for...in（会遍历原型链） 本身是可迭代对象 ，可直接 for...of 遍历
性能 适合静态结构，频繁增删键值对时性能较差 针对频繁增删进行了优化，性能更好
原型链 有原型对象，默认包含 toString 等方法，可能意外覆盖 无原型链，更"干净"
JSON 支持 原生支持 JSON.stringify() / parse() 不支持，需手动转换（Array.from() 或展开运算符）
使用便捷性 点语法或方括号访问，非常直观 只能用 get()/set() 方法访问，稍显繁琐
相关推荐
wuqingshun3141591 小时前
String、StringBuffer、StringBuilder的应用场景
java·开发语言·jvm
马猴烧酒.1 小时前
【面试八股|RabbitMQ】RabbitMQ常见面试题详解笔记
笔记·面试·rabbitmq
桂花很香,旭很美1 小时前
[7天实战入门Go语言后端] Day 5：中间件与业务分层——日志、鉴权与请求超时
开发语言·中间件·golang
沐知全栈开发2 小时前
Python File 方法详解
开发语言
MX_93592 小时前
@Import整合第三方框架原理
java·开发语言·后端·spring
写代码的小球2 小时前
C++ 标准库 ＜numbers＞
开发语言·c++·算法
拳里剑气2 小时前
C++：哈希
开发语言·数据结构·c++·算法·哈希算法·学习方法
智者知已应修善业2 小时前
【项目配置时间选择自己还是团体】2025-3-31
c语言·c++·经验分享·笔记·算法
坚持就完事了2 小时前
Java各种命名规则
java·开发语言
热门推荐
01从零搭建一个 PHP 登录注册系统（含完整源码）02使用 1panel面板 部署 php网站03如何将 TRAE IDE 的插件市场源切换至 VS Code 官方市场04PHP Error: 常见错误及其解决方法05GitHub 镜像站点06openClaw安装飞书插件｜核心踩坑：spawn EINVAL 错误终极解决指南07BUUCTF[ACTF2020 新生赛]Include 1题解08Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services09Android Studio Panda 1 正式版来了：JDK 终于不用手动配了，内存泄漏也有原生方案了10全面体验 Grok API 中转站（2025 · Grok 4 系列最新版）