JavaScript 语法零基础入门：从变量到异步（附 Python 语法对比）

JavaScript（简称 JS）是前端开发的核心语言，也是全栈开发的必备技能 ------ 它既能运行在浏览器中实现页面交互，也能通过 Node.js 运行在服务端。本文将从零基础视角，系统讲解 JS 核心语法，每章搭配 Python 语法对比 + 丰富的可运行代码示例，帮你在对比中快速掌握 JS 基础。

一、基础：运行环境与书写方式

1.1 JS 运行方式

浏览器端：内嵌<script>标签、外部.js文件、Console 控制台
服务端：Node.js 运行.js文件

1.2 与 Python 运行方式对比

特性	JavaScript	Python
运行环境	浏览器 / Node.js	Python 解释器（CPython）/PyPy
代码书写位置	HTML 内嵌 / 独立`.js`文件	独立`.py`文件 / 交互式终端（IDLE）
执行方式	浏览器自动执行 /`node xxx.js`	`python xxx.py`/ 交互式终端直接执行

html

预览

复制代码

<!-- JS示例：内嵌式运行 -->
<!DOCTYPE html>
<html>
<body>
  <script>
    console.log("Hello JavaScript!"); // 浏览器控制台输出
  </script>
</body>
</html>

python

运行

复制代码

# Python示例：直接执行
print("Hello Python!")  # 终端输出

二、变量与数据类型

变量是存储数据的容器，JS 是弱类型（动态类型）语言，Python 同样是动态类型，但两者语法差异显著。

2.1 变量声明：JS vs Python

特性	JavaScript	Python
声明关键字	var/let/const（必须声明）	无关键字，直接赋值（无需声明）
作用域	let/const：块级；var：函数级	缩进级（块级）/ 全局 / 局部
常量	const（赋值后不可改）	无原生常量（约定用大写命名）

javascript

运行

复制代码

// JS变量声明
var a = 10;    // 函数作用域（不推荐）
let b = 20;    // 块级作用域（推荐）
const c = 30;  // 常量（不可重新赋值）
// c = 40; // 报错：Assignment to constant variable

// 块级作用域示例
if (true) {
  let x = 1;
  var y = 2;
}
// console.log(x); // 报错：x is not defined
console.log(y); // 2（var不受块级作用域限制）

python

运行

复制代码

# Python变量声明（无关键字）
a = 10  # 直接赋值
b = 20
C = 30  # 约定大写为常量（实际可修改）
C = 40  # 无报错，Python无严格常量

# 缩进作用域示例
if True:
    x = 1
    y = 2
print(x)  # 1（Python缩进块不限制变量访问）
print(y)  # 2

2.2 数据类型对比

（1）核心类型对照表

JS 类型	Python 类型	说明
number	int/float	JS 统一为 number，Python 区分整数 / 浮点数
string	str	均支持单 / 双引号，JS 模板字符串`${}` vs Python f-string
boolean	bool	JS：true/false；Python：True/False（首字母大写）
undefined	None（近似）	JS 未赋值变量为 undefined，Python 为 None
null	None（完全对应）	JS null 表示空值，Python None 表示空
symbol	无对应类型	Python 无唯一值原生类型（可自定义）
object（数组）	list	JS 数组 vs Python 列表
object（普通对象）	dict	JS 键值对对象 vs Python 字典
function	function（def 定义）	JS 函数是对象，Python 函数是一等对象

javascript

运行

复制代码

// JS数据类型
// 原始类型
let num = 123.45;   // number（整数/浮点数统一）
let str = `JS模板字符串：${num}`; // 模板字符串
let bool = true;    // 布尔值（小写）
let und = undefined;// 未定义
let nul = null;     // 空值

// 检测类型（typeof）
console.log(typeof num); // number
console.log(typeof str); // string
console.log(typeof nul); // object（历史bug）

// 引用类型
let arr = [1, 2, 3]; // 数组
let obj = {name: "张三", age: 20}; // 对象
console.log(Array.isArray(arr)); // true（检测数组）

python

运行

复制代码

# Python数据类型
# 基本类型
num_int = 123
num_float = 123.45
str_py = f"Python f-string：{num_float}"  # f-string
bool_py = True  # 布尔值（首字母大写）
none_val = None # 空值

# 检测类型（type()）
print(type(num_int))  # <class 'int'>
print(type(num_float))# <class 'float'>
print(type(none_val)) # <class 'NoneType'>

# 容器类型
lst = [1, 2, 3]  # 列表（对应JS数组）
dic = {"name": "张三", "age": 20}  # 字典（对应JS对象）
print(isinstance(lst, list)) # True（检测列表）

三、运算符

JS 与 Python 运算符大部分功能一致，但语法和细节有差异，核心对比如下：

3.1 核心运算符对比表

运算符类型	JavaScript	Python
严格相等	===（值 + 类型）	==（等价于 JS 的 ===，Python 无 ==/=== 区分）
逻辑与 / 或 / 非	&& / \|\| / !	and / or / not
自增 / 自减	a++ / ++a / a-- / --a	无（需用 a += 1 /a -= 1）
幂运算	Math.pow (2,3) 或 **（ES7）	（直接支持，如 23）

javascript

运行

复制代码

// JS运算符示例
// 算术运算符
let a = 10, b = 3;
console.log(a + b);  // 13
console.log(a ** b); // 1000（幂运算，ES7+）
console.log(a++);    // 10（自增，Python无此语法）

// 比较运算符
let x = 10, y = "10";
console.log(x == y);  // true（宽松相等，自动转类型）
console.log(x === y); // false（严格相等，推荐）

// 逻辑运算符
console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

python

运行

复制代码

# Python运算符示例
# 算术运算符
a = 10
b = 3
print(a + b)   # 13
print(a ** b)  # 1000（直接支持幂运算）
# a++ # 报错：Python无自增运算符
a += 1         # 等价于a++，结果11

# 比较运算符（Python无宽松/严格区分）
x = 10
y = "10"
print(x == y)  # False（等价于JS的===）

# 逻辑运算符
print(True and False) # False
print(True or False)  # True
print(not True)       # False

3.2 赋值与三元运算符对比

javascript

运行

复制代码

// JS三元运算符
let score = 85;
let result = score >= 60 ? "及格" : "不及格";
console.log(result); // 及格

python

运行

复制代码

# Python三元运算符（语法不同）
score = 85
result = "及格" if score >= 60 else "不及格"
print(result)  # 及格

四、流程控制

流程控制决定代码执行顺序，JS 用{}划分代码块，Python 用缩进（4 个空格），核心逻辑一致但语法差异大。

4.1 条件判断：JS vs Python

javascript

运行

复制代码

// JS：if-else（{}包裹代码块）
let score = 90;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else {
  console.log("及格");
}

// JS：switch（多值匹配）
let day = 3;
switch (day) {
  case 1: console.log("周一"); break;
  case 3: console.log("周三"); break;
  default: console.log("其他");
}

python

运行

复制代码

# Python：if-else（缩进划分代码块）
score = 90
if score >= 90:
    print("优秀")
elif score >= 80:
    print("良好")
else:
    print("及格")

# Python：无switch，用if-elif或字典模拟
day = 3
day_map = {1: "周一", 3: "周三"}
print(day_map.get(day, "其他"))  # 周三

4.2 循环语句：JS vs Python

循环类型	JavaScript	Python
普通 for 循环	for (let i=0; i<5; i++) {}	for i in range(5): {}
遍历集合	for...of（数组）/for...in（对象）	for...in（列表 / 字典）/for...of（迭代器）
while 循环	while (条件) {}	while 条件: {}
跳出循环	break/continue	break/continue

javascript

运行

复制代码

// JS循环示例
// 普通for循环
for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// 遍历数组（for...of）
let fruits = ["苹果", "香蕉"];
for (let fruit of fruits) {
  console.log(fruit);
}

// while循环
let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

python

运行

复制代码

# Python循环示例
# 普通for循环（range替代）
for i in range(5):
    print(i)  # 0 1 2 3 4

# 遍历列表
fruits = ["苹果", "香蕉"]
for fruit in fruits:
    print(fruit)

# while循环
i = 0
while i < 3:
    print(i)
    i += 1

五、函数

函数是可复用的代码块，JS 和 Python 均支持 "一等函数"（可赋值、传参、返回），但定义语法差异显著。

5.1 函数定义对比

特性	JavaScript	Python
定义方式	function 声明 / 函数表达式 / 箭头函数	def 关键字 / 匿名函数（lambda）
参数默认值	function fn(a=10) {}（ES6+）	def fn (a=10): {}（原生支持）
可变参数	...rest（剩余参数）	args（可变位置）/*kwargs（可变关键字）
返回值	return 关键字，无返回则 undefined	return 关键字，无返回则 None

javascript

运行

复制代码

// JS函数示例
// 1. 函数声明
function add(a, b = 0) { // 默认参数
  return a + b;
}
console.log(add(10, 20)); // 30

// 2. 箭头函数（简化）
let mul = (a, b) => a * b;
console.log(mul(3, 4)); // 12

// 3. 剩余参数（可变参数）
function sum(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

python

运行

复制代码

# Python函数示例
# 1. 普通函数
def add(a, b=0):  # 默认参数
    return a + b
print(add(10, 20))  # 30

# 2. 匿名函数（lambda）
mul = lambda a, b: a * b
print(mul(3, 4))  # 12

# 3. 可变参数
def sum(*nums):  # *args接收可变位置参数
    total = 0
    for num in nums:
        total += num
    return total
print(sum(1, 2, 3))  # 6

六、数组 / 列表：JS Array vs Python List

JS 数组和 Python 列表是最常用的有序集合，方法名和使用方式差异较大。

6.1 核心方法对比表

功能	JavaScript	Python
尾部添加元素	arr.push(4)	lst.append(4)
尾部删除元素	arr.pop()	lst.pop()
遍历元素	arr.forEach((item) => {})	for item in lst: {}
映射转换	arr.map(item => item*2)	list(map(lambda x: x*2, lst))
过滤元素	arr.filter(item => item>5)	[item for item in lst if item>5]
累加聚合	arr.reduce((sum, item) => sum+item)	sum (lst) / 循环累加

javascript

运行

复制代码

// JS数组操作
let arr = [1, 2, 3];
arr.push(4); // [1,2,3,4]
arr.pop();   // [1,2,3]

// 遍历
arr.forEach((item, index) => {
  console.log(`索引${index}：${item}`);
});

// 映射
let doubleArr = arr.map(item => item * 2); // [2,4,6]

// 过滤
let filterArr = arr.filter(item => item > 1); // [2,3]

// 累加
let total = arr.reduce((sum, item) => sum + item, 0); // 6

python

运行

复制代码

# Python列表操作
lst = [1, 2, 3]
lst.append(4)  # [1,2,3,4]
lst.pop()      # [1,2,3]

# 遍历
for index, item in enumerate(lst):
    print(f"索引{index}：{item}")

# 映射（列表推导式更常用）
double_lst = [item * 2 for item in lst]  # [2,4,6]

# 过滤
filter_lst = [item for item in lst if item > 1]  # [2,3]

# 累加
total = sum(lst)  # 6

七、对象 / 字典：JS Object vs Python Dict

JS 普通对象和 Python 字典均为键值对集合，但语法和操作方式不同。

javascript

运行

复制代码

// JS对象操作
let person = {
  name: "张三",
  age: 20,
  sayHi: function() {
    console.log(`我是${this.name}`);
  }
};

// 访问属性
console.log(person.name); // 张三
console.log(person["age"]); // 20

// 解构赋值
let { name, age } = person;
console.log(name, age); // 张三 20

// 调用方法
person.sayHi(); // 我是张三

python

运行

复制代码

# Python字典操作
person = {
  "name": "张三",
  "age": 20
}

# 访问属性
print(person["name"])  # 张三
print(person.get("age"))  # 20（推荐，避免键不存在报错）

# 解构赋值
name, age = person["name"], person["age"]
print(name, age)  # 张三 20

# Python字典无方法，需单独定义函数
def say_hi(p):
    print(f"我是{p['name']}")
say_hi(person)  # 我是张三

八、异步编程：JS vs Python

JS 是单线程非阻塞模型，异步是核心特性；Python 异步需依赖asyncio，且默认是阻塞模型。

8.1 定时器 / 延迟执行对比

javascript

运行

复制代码

// JS：非阻塞定时器（setTimeout）
console.log("开始");
setTimeout(() => {
  console.log("1秒后执行（非阻塞）");
}, 1000);
console.log("结束"); // 先执行，不会等待定时器
// 输出顺序：开始 → 结束 → 1秒后执行

python

运行

复制代码

# Python：阻塞延迟（time.sleep）
import time
print("开始")
time.sleep(1)  # 阻塞1秒，后续代码暂停执行
print("1秒后执行（阻塞）")
print("结束")
# 输出顺序：开始 → 1秒后执行 → 结束

# Python异步（asyncio）
import asyncio
async def delay():
    print("异步开始")
    await asyncio.sleep(1)  # 非阻塞延迟
    print("1秒后执行（异步）")

asyncio.run(delay())
# 输出：异步开始 → 1秒后执行

8.2 Promise vs asyncio（异步请求示例）

javascript

运行

复制代码

// JS：Promise处理异步请求
function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: "JS请求成功" });
    }, 1000);
  });
}

// async/await简化Promise
async function getData() {
  let res = await requestData();
  console.log(res); // { data: 'JS请求成功' }
}
getData();

python

运行

复制代码

# Python：asyncio+aiohttp处理异步请求
import asyncio
import aiohttp

async def request_data():
    async with aiohttp.ClientSession() as session:
        # 模拟请求，实际替换为真实URL
        await asyncio.sleep(1)
        return {"data": "Python请求成功"}

async def get_data():
    res = await request_data()
    print(res)  # {'data': 'Python请求成功'}

asyncio.run(get_data())

九、DOM 操作（JS 独有）

DOM 操作是 JS 特有的浏览器交互能力，Python 无对应功能（需借助 Selenium 等库模拟）。

html

复制代码

<!-- JS DOM操作示例 -->
<!DOCTYPE html>
<html>
<body>
  <h1 id="title">初始标题</h1>
  <button id="btn">点击修改</button>

  <script>
    // 获取元素
    let title = document.getElementById("title");
    let btn = document.querySelector("#btn");

    // 修改样式和内容
    title.style.color = "blue";
    btn.addEventListener("click", () => {
      title.innerText = "新标题";
    });
  </script>
</body>
</html>

python

复制代码

# Python模拟DOM操作（需安装selenium）
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome()
driver.get("上述HTML文件路径")

# 获取元素并修改
title = driver.find_element(By.ID, "title")
title.style = "color: blue"
title.text = "Python修改的标题"

time.sleep(3)
driver.quit()

十、核心差异总结

维度	JavaScript	Python
核心应用场景	前端交互、Node.js 服务端	数据分析、后端开发、自动化
代码块划分	大括号`{}`	缩进（4 个空格）
变量声明	必须用 var/let/const	直接赋值，无声明关键字
异步模型	原生非阻塞（Promise/async-await）	需依赖 asyncio 实现非阻塞
特有功能	DOM 操作、浏览器事件	丰富的标准库（如 math、os、sys）
字符串格式化	模板字符串`${}`	f-string、% 格式化、format 方法

十一、学习建议

对比学习 ：用 Python 已知的语法类比 JS，重点记差异（如{} vs 缩进、=== vs ==）；
动手实践：每段代码手动敲写，JS 用浏览器控制台调试，Python 用交互式终端验证；
场景区分：JS 重点练 DOM 交互和异步，Python 重点练数据处理和库调用；
进阶方向：JS 深入学习 V8 引擎、闭包、模块化；Python 深入学习装饰器、生成器、框架（Django/Flask）。

本文通过 "语法讲解 + 代码示例 + Python 对比" 的方式，覆盖了 JS 入门的核心知识点。新手可先掌握基础语法，再结合小案例（如计算器、待办列表）巩固，欢迎在评论区交流学习问题！