JavaScript快速入门基础知识

2301_80150018

184人浏览 · 2026-05-18 01:19:41

2301_80150018 · 2026-05-18 01:19:41 发布

本文围绕JavaScript入门核心知识展开，主要讲解了JS的概述、运行环境与引入方式，详解变量、数据类型、运算符、流程控制等基础语法，同时包括了函数、数组、对象、DOM操作的相关知识，帮助零基础学习者快速掌握JS入门知识，搭建完整的基础知识框架。

一、JavaScript 简介

1.1 JavaScript的概述

JavaScript（简称JS）是一种轻量级、解释型、弱类型的脚本语言，主要用于实现网页的动态交互效果，是前端开发三大核心技术（HTML负责结构、CSS负责样式、JS负责行为）之一。

JS不仅能运行在浏览器端实现前端交互，还能通过Node.js运行在服务器端，实现接口开发、文件操作、数据库连接等后端功能，真正做到一次编写，多平台运行。

核心功能：

网页动态效果：轮播图、下拉菜单、页面滚动动画、弹窗提示等；
表单验证：注册/登录时校验账号格式、密码强度、手机号合法性等；
数据交互：通过AJAX/Fetch请求服务器数据，实现无刷新更新页面；
全栈开发：结合Node.js搭建前后端完整项目。

核心特点：

弱类型：变量无需提前声明类型，值的类型可动态切换（如let a = 10; a = "字符串"）；
解释型：无需编译，浏览器/Node.js逐行解析执行，开发效率高；
跨平台：支持所有主流浏览器（Chrome、Firefox、Edge等）和操作系统（Windows、Mac、Linux）；
多范式：同时支持面向过程、面向对象、函数式三种编程范式；
单线程：同一时间只能执行一段代码，通过事件循环实现异步操作。

1.2 JavaScript的运行环境

JS的运行依赖解析引擎，主流运行环境分为两类：

浏览器端
核心是浏览器内置的JS引擎，负责解析执行JS代码，同时提供DOM（文档对象模型）、BOM（浏览器对象模型）API，实现与网页、浏览器的交互。
服务器端
通过Node.js（基于Chrome V8引擎）运行，脱离浏览器独立工作，提供文件系统、网络、进程等后端API，可开发服务器、接口、桌面应用等。

1.3 JS代码的引入方式

JS必须依附于HTML才能在浏览器中运行，引入方式有3种，优先级：外链式 > 内嵌式 > 行内式。

内嵌式
将JS代码写在HTML的<script>标签内，推荐放在</body>结束标签前（避免JS阻塞页面渲染）。

<body>
  <h1>网页内容</h1>
  <!-- 内嵌式JS -->
  <script>
    console.log("内嵌式");
  </script>
</body>

外链式
将JS代码写在独立的.js文件中，通过<script src="文件路径">引入，可复用、便于维护，项目开发首选。
```

<script src="index.js"></script>
```
```
// index.js 文件
console.log("外链式");
```
行内式
将JS代码直接写在HTML标签的事件属性中（如onclick、onload），耦合度高，不推荐使用。
```
<button onclick="alert('行内式')">点击我</button>
```

二、变量与数据类型

2.1 变量的声明

变量是存储数据的容器，JS中声明变量有3种关键字：var（旧标准）、let/const（ES6新标准）。

声明方式	作用域	重复声明	可修改性	变量提升
var	函数/全局作用域	允许	允许	存在
let	块级作用域（`{}`内）	不允许	允许	不存在（暂时性死区）
const	块级作用域（`{}`内）	不允许	常量不可修改	不存在（暂时性死区）

核心规则：

优先使用const（声明常量），值需要修改时用let，尽量不使用var；
const声明的基本类型值不可改，引用类型（对象/数组）的属性/元素可修改；
变量必须先声明后使用，否则报错。

// var 弊端：可重复声明、作用域混乱
var num = 10;
var num = 20; // 不报错

// let 块级作用域，不可重复声明
let age = 18;
age = 20; // 允许修改
// let age = 25; // 报错

// const 常量
const PI = 3.1415926;
// PI = 3.14; // 报错
const USER = { name: "张三" };
USER.name = "李四"; // 允许，修改对象属性

2.2 数据类型

JS数据类型分为基本数据类型（值类型）和引用数据类型，核心区别：

基本类型：存储在栈内存，直接存值，赋值时拷贝值；
引用类型：存储在堆内存，栈中存地址，赋值时拷贝地址。

2.2.1 基本数据类型（5种）

Number：数字类型，包含整数、小数、NaN（非数字）、Infinity（无穷大）；
String：字符串，单引号''、双引号""、反引号（支持模板字符串/换行）包裹；
Boolean：布尔值，仅true（真）、false（假）；
Undefined：未定义，变量声明未赋值的默认值；
Null：空值，主动清空变量，表示“空对象”；

2.2.2 引用数据类型

Object：对象，存储键值对，{ key: value }；
Array：数组，有序集合，[元素1, 元素2]，索引从0开始；
Function：函数，封装可执行代码块；

// 基本类型
let num = 100; // Number
let str = "JS"; // String
let flag = true; // Boolean
let un; // Undefined
let empty = null; // Null

// 引用类型
let obj = { name: "小明", age: 20 }; // 对象
let arr = [1, 2, 3, 4]; // 数组
function fn() {} // 函数

2.3 数据类型检测

typeof：检测基本类型（除null）、函数，返回字符串类型名；
Array.isArray()：精准检测数组；
Object.prototype.toString.call()：最精准的类型检测方法。

console.log(typeof 10); // "number"
console.log(typeof "abc"); // "string"
console.log(Array.isArray([1,2])); // true

2.4 数据类型转换

JS弱类型特性会自动转换类型，也可手动转换，分为隐式转换（自动）和显式转换（手动）。

2.4.1 转数字（显式）

Number(数据)：通用转换，纯数字字符串转数字，非纯数字转NaN；
parseInt(数据)：转整数，忽略小数，从左到右提取数字；
parseFloat(数据)：转小数，支持小数点。

Number("123"); // 123
Number("123abc"); // NaN
parseInt("12.99"); // 12
parseFloat("12.99"); // 12.99

2.4.2 转字符串（显式）

String(数据)：通用转换，支持所有类型；
toString(基数)：不支持null/undefined，基数可转进制。

String(123); // "123"
String(true); // "true"
(10).toString(2); // "1010"（转二进制）

2.4.3 转布尔值（显式）

Boolean(数据)：仅6种假值转false，其余全转true。
假值：0、NaN、""（空字符串）、undefined、null、false。

示例：

Boolean(0); // false
Boolean(""); // false
Boolean([]); // true
Boolean({}); // true

三、运算符

运算符用于对数据进行运算、比较、赋值，JS常用运算符分为5类。

3.1 算术运算符

用于数值计算。
运算符：+（加）、-（减）、*（乘）、/（除）、%（取余）、++（自增）、--（自减）。
+遇到字符串会拼接而非加法。

自增/自减规则：

前置（++num）：先运算，后赋值；
后置（num++）：先赋值，后运算。

console.log(10 + 20); // 30（加法）
console.log(10 + "20"); // "1020"（拼接）
let a = 5;
console.log(++a); // 6（前置）
console.log(a++); // 6（后置）
console.log(a); // 7

3.2 比较运算符

比较两个值，返回布尔值true/false，优先使用===/!==。
运算符：==（相等，弱比较，只比较值）、===（全等，强比较，类型和值都比较）、!=、!==、>、<、>=、<=。

console.log(10 == "10"); // true（弱比较，值相同）
console.log(10 === "10"); // false（强比较，值相同，类型不同）
console.log(5 >= 3); // true

3.3 逻辑运算符

用于多条件判断，支持短路运算。

&&（与）：一假则假，全真返回最后一个真值；
||（或）：一真则真，全假返回最后一个假值；
!（非）：取反，非布尔值先转布尔值。

console.log(10 && 20); // 20
console.log(0 && 20); // 0
console.log(10 || 20); // 10
console.log(!0); // true

3.4 赋值运算符

简化赋值操作，运算符：=、+=、-=、*=、/=、%=。

let num = 10;
num += 5; // 等价于 num = num + 5 → 15
num *= 2; // 30

3.5 三元运算符

简化if-else，语法：条件 ? 表达式1 : 表达式2。
条件为真执行表达式1，否则执行表达式2。

let age = 20;
let result = age >= 18 ? "成年" : "未成年"; // "成年"

四、流程控制语句

流程控制用于控制代码执行顺序，分为条件判断、循环、跳转语句。

4.1 条件判断语句

4.1.1 if-else 语句

单条件/多条件判断，支持嵌套。

// 单条件
if (条件) {
  代码块;
}

// 多条件
if (条件1) {
  代码块1;
} else if (条件2) {
  代码块2;
} else {
  代码块3;
}

判断成绩代码示例：

let score = 88;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

4.1.2 switch 语句

多固定值判断，必须加break防止穿透。

switch (变量) {
  case 值1:
    代码块1;
    break;
  case 值2:
    代码块2;
    break;
  default:
    默认代码;
    break;
}

判断季节代码示例：

let month = 8;
switch (month) {
  case 3:
  case 4:
  case 5:
    console.log("春季");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏季");
    break;
  default:
    console.log("秋冬");
}

4.2 循环语句

重复执行代码块，适用于批量操作。

4.2.1 for 循环（最常用）

语法：for(初始化; 条件; 增量){ 代码块 }

// 打印1-5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

4.2.2 while 循环

先判断条件，再执行代码。

let i = 1;
while (i <= 3) {
  console.log(i);
  i++;
}

4.2.3 do-while 循环

先执行一次代码，再判断条件。

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 3);

4.3 跳转语句

break：跳出整个循环/switch，终止执行；
continue：跳过当前一次循环，继续下一次。

// break：打印到3停止
for (let i = 1; i <= 5; i++) {
  if (i === 4) break;
  console.log(i); // 1 2 3
}

// continue：跳过4
for (let i = 1; i <= 5; i++) {
  if (i === 4) continue;
  console.log(i); // 1 2 3 5
}

五、函数基础

5.1 函数的定义

函数是封装重复逻辑的代码块，定义方式3种：

函数声明（有提升，可先调用后定义）

function 函数名(形参1, 形参2) {
  函数体;
  return 返回值;
}

函数表达式（无提升，必须先定义后调用）

let 函数名 = function(形参) {
  函数体;
};

箭头函数（ES6，简化写法，无this）

let 函数名 = (形参) => { 函数体 };
// 简写：一个参数可省略()，一行代码可省略{}和return
let add = (a, b) => a + b;

5.2 函数的调用与参数

调用：函数名(实参1, 实参2)；
形参：定义函数时的占位变量；
实参：调用时传递的真实数据；
实参与形参个数不匹配：未接收的形参为undefined，多余实参会被忽略。

5.3 函数的返回值

return：将结果返回给调用处，return后代码不执行；
无return，函数默认返回undefined。

// 函数声明：求和
function sum(a, b) {
  return a + b;
}
let result = sum(10, 20); // 调用，result=30

// 箭头函数
let multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

5.4 作用域与变量访问

全局作用域：函数外声明的变量，全局可访问；
局部作用域：函数/块内声明的变量，仅内部可访问；
作用域链：内部函数可访问外部函数变量，反之不行。

六、数组基础

数组是有序、可修改的集合，用于存储多个数据，索引从0开始。

6.1 数组的创建

字面量（推荐）：let arr = [1, 2, 3];
构造函数：let arr = new Array(1, 2, 3);

6.2 数组核心操作（增删改查）

操作	方法	说明
增	push()	末尾添加元素
增	unshift()	开头添加元素
删	pop()	删除末尾元素
删	shift()	删除开头元素
删	splice(起始索引, 删除个数)	删除指定位置元素
改	arr[索引] = 新值	修改指定元素
查	arr[索引]	获取指定元素
查	indexOf(元素)	查找元素索引，无则返回-1
查	includes(元素)	判断是否包含元素，返回布尔值

let arr = [10, 20, 30];
arr.push(40); // [10,20,30,40]
arr.unshift(0); // [0,10,20,30,40]
arr.pop(); // [0,10,20,30]
arr.splice(1, 1); // [0,20,30]
arr[0] = 100; // [100,20,30]
console.log(arr.indexOf(20)); // 1
console.log(arr.includes(50)); // false

6.3 数组长度

arr.length：获取数组元素个数，可修改长度清空/截断数组。

let arr = [1,2,3];
console.log(arr.length); // 3
arr.length = 0; // 清空数组

七、对象基础

对象是无序键值对集合，用于描述一个事物的属性和方法。

7.1 对象的创建

字面量（推荐）：

let 对象名 = {
  属性名: 属性值,
  方法名: function() {}
};

构造函数：

let obj = new Object();
obj.name = "张三";

7.2 对象的操作

查属性：obj.属性名 或 obj["属性名"]；
改属性：obj.属性名 = 新值；
增属性：直接赋值obj.新属性 = 值；
删属性：delete obj.属性名。

let user = {
  name: "小红",
  age: 22,
  sayHi: function() {
    console.log("你好");
  }
};

console.log(user.name); // 小红
user.age = 23; // 修改
user.gender = "女"; // 新增
delete user.age; // 删除
user.sayHi(); // 调用方法

八、DOM基础（文档对象模型）

DOM是JS操作网页的接口，可增删改查HTML元素和样式。

8.1 获取元素

// 1. 通过id获取（唯一）
document.getElementById("id名");

// 2. 通过类名获取（伪数组）
document.getElementsByClassName("类名");

// 3. 通过标签名获取（伪数组）
document.getElementsByTagName("标签名");

// 4. 选择器获取（推荐，类似CSS）
document.querySelector("选择器"); // 第一个元素
document.querySelectorAll("选择器"); // 所有元素

8.2 操作元素内容

文本内容：元素.innerText（仅文本，不解析标签）；
超文本内容：元素.innerHTML（解析HTML标签）；
表单值：表单元素.value。

8.3 操作元素属性

// 标准属性：src、href、title等
元素.属性名 = 新值;

// 自定义属性
元素.setAttribute("属性名", 值);
元素.getAttribute("属性名");

8.4 操作元素样式

行内样式：元素.style.样式名 = 值（驼峰命名，如backgroundColor）；
类名样式：元素.className = "类名"；
classList（推荐）：元素.classList.add("类名")/remove()/toggle()。

九、注意事项

严格区分大小写：let a和let A是两个变量，if和If完全不同；
变量命名规范：
- 只能由字母、数字、下划线_、美元符$组成；
- 不能以数字开头，不能用关键字/保留字（如let、var、if）；
- 语义化命名，推荐小驼峰命名法（userName、userList）；
分号使用：代码结尾可加;，建议添加，避免语法解析歧义；
调试技巧：使用console.log(内容)在浏览器控制台打印数据，快速排查错误；
NaN特性：NaN不等于任何值（包括自身），判断用isNaN(变量)；
相等判断：永远优先用===，避免弱类型转换导致bug；

openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

金仓数据库字符集与国际化支持：多语言环境下的编码处理方案

openEuler 社区

万字讲解操作系统硬件，进程的部分概念

任何平台，进程都是具有独立性的，就是我结束了一个进程并不会影响其他的进程，所以父进程和子进程在共享代码的时候，由于代码不能修改，所以是没有问题的，你读你的我读我的，相互之间并不影响，但是如果是数据就不一样了，数据是可以修改的所以我改了可能你也会改，因此从理论上来说，我们的子进程必须想办法拷贝一份相同的数据且独立的数据出来！

openEuler 社区

BIOS/UEFI模式PXE装机全解析

老服务器（2018年前）：优先用BIOS模式，配置简单、兼容性好，核心记“pxelinux.0+pxelinux.cfg/default”，分区用MBR；新服务器（2018年后）：优先用UEFI模式，支持大硬盘、高安全，核心记“grubx64.efi+EFI/BOOT/grub.cfg”，分区用GPT；混合机房（新老服务器都有）：无需搭建两套PXE系统，配置DHCP自动识别启动模式，分发对应引导程

openEuler 社区

所有评论(0)

查看更多评论

2301_80150018

@2301_80150018

已为社区贡献1条内容

JavaScript快速入门基础知识

2301_80150018

一、JavaScript 简介

1.1 JavaScript的概述

1.2 JavaScript的运行环境

1.3 JS代码的引入方式

二、变量与数据类型

2.1 变量的声明

2.2 数据类型

2.2.1 基本数据类型（5种）

2.2.2 引用数据类型

2.3 数据类型检测

2.4 数据类型转换

2.4.1 转数字（显式）

2.4.2 转字符串（显式）

2.4.3 转布尔值（显式）

三、运算符

3.1 算术运算符

3.2 比较运算符

3.3 逻辑运算符

3.4 赋值运算符

3.5 三元运算符

四、流程控制语句

4.1 条件判断语句

4.1.1 if-else 语句

4.1.2 switch 语句

4.2 循环语句

4.2.1 for 循环（最常用）

4.2.2 while 循环

4.2.3 do-while 循环

4.3 跳转语句

五、函数基础

5.1 函数的定义

5.2 函数的调用与参数

5.3 函数的返回值

5.4 作用域与变量访问

六、数组基础

6.1 数组的创建

6.2 数组核心操作（增删改查）

6.3 数组长度

七、对象基础

7.1 对象的创建

7.2 对象的操作

八、DOM基础（文档对象模型）

8.1 获取元素

8.2 操作元素内容

8.3 操作元素属性

8.4 操作元素样式

九、注意事项

所有评论(0)

温馨提示：您尚未绑定手机号

2301_80150018