JavaScript基础知识概览
文章目录
JavaScrip介绍
JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。
其中ECMAScript规定了js基础语法核心，比如：变量、分支语句、循环语句、对象等
Web APIs 包括 DOM 操作文档， BOM 操作浏览器
JavaScript文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
在HTML中JavaScript 书写位置与CSS类似，包括行内、内部和外部
<!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>
<!-- 内联js -->
<button onclick="alert('aaa')">aaa</button>
<!-- 内部js -->
<script>
alert('你好，js');
</script>
<!-- 外部js -->
<script src="my.js">
// 内部的代码会被忽略，不能写代码
</script>
</body>
</html>
注意：
- 将 < script > 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
- JavaScript使用英文的 ; 代表语句结束，实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置 ，为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）
注释
单行注释： //
多行：/* */
<!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>
// 单行注释 ctrl + /
/* 多行注释 alt + shift + a */
</script>
</body>
</html>
命名规范
语法强制规则
- 开头字符：字母 (
a-z,A-Z)、下划线 (_)、美元符号 ($) - 后续字符：字母、数字、
_、$ - 禁止：数字开头、使用关键字、特殊符号（如
-,.,*） - 区分大小写：
myVar≠myvar
命名惯例
- 驼峰命名法 (Camel Case)：第一个单词首字母小写，后续每个单词的首字母大写。
- 帕斯卡命名法 (Pascal Case / Upper Camel Case)：每个单词的首字母都大写。
- 全大写 + 下划线 (UPPER_CASE_SNAKE_CASE)：所有字母大写，单词之间用下划线 _ 分隔。
- 下划线前缀（_privateMember）： 以一个下划线 _ 开头,表示一个属性或方法被视为“私有”的。
- 烤肉串式命名( kebab-case)：所有字母都小写，单词之间用连字符（-）连接。
| 标识符类型 | 推荐命名Case | 示例 | 备注 |
|---|---|---|---|
| 变量 | lowerCamelCase | userName, itemList | |
| 常量 | UPPER_SNAKE_CASE | API_KEY, DEFAULT_TIMEOUT | 值不会改变的变量 |
| 函数 / 方法 | lowerCamelCase | getUser(), calculateTotal() | 动词或动词短语开头 |
| 类 / 构造函数 | PascalCase | Person, HttpClient | 名词，首字母大写 |
| “私有”属性/方法 | _lowerCamelCase | _internalMethod, _privateValue | 只是一个约定，并非真正私有 |
| 文件命名 | kebab-case 或 lowerCamelCase | my-component.js, utils.js | 在项目中保持一致，kebab-case 更常见于项目文件 |
最佳实践
- 描述性命名：
elapsedTime，而非t - 布尔变量：以
is/has/can开头 →isLoading,hasPermission - 函数动词开头：
fetchData(),validateForm() - 避免模糊缩写：
userPassword，而非usrPwd - 一致性：项目内保持统一风格
数据类型
JS 数据类型整体分为两大类，基本数据类型和引用数据类型
基本数据类型
- 存储在栈内存中
- 按值访问
- 不可变（immutable）
引用数据类型
- 存储在堆内存中
- 按引用访问
- 可变（mutable）
基本数据类型
Number（数字类型）
// 创建和类型判断
let num = 42;
let float = 3.14;
let nan = NaN;
// 常用方法
let str = num.toString(); // "42"
let fixed = float.toFixed(1); // "3.1"
let precision = float.toPrecision(3); // "3.14"
// 全局Number方法
let parsed = Number.parseInt("123"); // 123
let parsedFloat = Number.parseFloat("3.14"); // 3.14
let isInt = Number.isInteger(42); // true
let isNan = Number.isNaN(NaN); // true
let isSafe = Number.isSafeInteger(9007199254740991); // true
// 数学运算
let max = Math.max(1, 5, 3); // 5
let min = Math.min(1, 5, 3); // 1
let rounded = Math.round(3.6); // 4
let ceiling = Math.ceil(3.1); // 4
let floor = Math.floor(3.9); // 3
let random = Math.random(); // 0-1之间的随机数
String（字符串类型）
// 创建字符串
let str1 = "Hello";
let str2 = 'World';
let template = `Hello ${str2}`; // 模板字符串
// 常用属性方法
let length = str1.length; // 5
let char = str1.charAt(1); // "e"
let charCode = str1.charCodeAt(1); // 101
let concat = str1.concat(" ", str2); // "Hello World"
// 查找和判断
let index = str1.indexOf("l"); // 2
let lastIndex = str1.lastIndexOf("l"); // 3
let includes = str1.includes("ell"); // true
let startsWith = str1.startsWith("He"); // true
let endsWith = str1.endsWith("lo"); // true
// 截取和分割
let substring = str1.substring(1, 4); // "ell"
let slice = str1.slice(1, 4); // "ell"
let substr = str1.substr(1, 3); // "ell"
let split = "a,b,c".split(","); // ["a", "b", "c"]
// 替换和修改
let replaced = str1.replace("l", "x"); // "Hexlo"
let replacedAll = str1.replaceAll("l", "x"); // "Hexxo"
let upper = str1.toUpperCase(); // "HELLO"
let lower = str1.toLowerCase(); // "hello"
let trimmed = " hello ".trim(); // "hello"
let paddedStart = str1.padStart(8, "*"); // "***Hello"
let paddedEnd = str1.padEnd(8, "*"); // "Hello***"
// 正则表达式匹配
let match = "Hello123".match(/\d+/); // ["123"]
let search = "Hello123".search(/\d+/); // 5
Boolean（布尔类型）
// 创建和转换
let isTrue = true;
let isFalse = false;
// 逻辑运算
let and = true && false; // false
let or = true || false; // true
let not = !true; // false
// 假值判断
Boolean(0); // false
Boolean(""); // false
Boolean(null); // false
Boolean(undefined); // false
Boolean(NaN); // false
// 真值判断
Boolean(1); // true
Boolean("hello"); // true
Boolean([]); // true
Boolean({}); // true
// 双重非运算快速转换
!!"hello"; // true
!!0; // false
Undefined 和 Null
// 声明和赋值
let undef; // undefined
let explicitUndef = undefined;
let empty = null;
// 类型检查
typeof undef; // "undefined"
typeof empty; // "object" (历史遗留)
// 使用场景
function test(param) {
if (param === undefined) {
console.log("参数未提供");
}
}
let obj = null; // 明确设置为空对象引用
Symbol（符号类型）
// 创建Symbol
let sym1 = Symbol();
let sym2 = Symbol("description");
let sym3 = Symbol("description");
// 唯一性验证
sym2 === sym3; // false
// 全局Symbol注册表
let globalSym = Symbol.for("global");
let sameGlobalSym = Symbol.for("global");
globalSym === sameGlobalSym; // true
// 作为对象属性
let obj = {
[sym1]: "value1",
[sym2]: "value2"
};
// 获取Symbol属性
let symbols = Object.getOwnPropertySymbols(obj);
BigInt（大整数）
// 创建BigInt
let big1 = 9007199254740991n;
let big2 = BigInt("9007199254740991");
// 数学运算
let sum = big1 + 1n; // 9007199254740992n
let product = big1 * 2n; // 18014398509481982n
// 与Number的转换
let num = Number(big1); // 9007199254740991
let bigFromNum = BigInt(num); // 9007199254740991n
// 比较运算
big1 > 1000n; // true
big1 === 9007199254740991n; // true
引用数据类型
Object（对象）
// 创建对象
let person = {
name: "张三",
age: 25,
sayHello: function() {
return `Hello, I'm ${this.name}`;
}
};
let person = new Object()
// 属性操作
person.name; // "张三"
person["age"]; // 25
person.job = "Engineer"; // 添加属性
delete person.age; // 删除属性
// 常用方法
let keys = Object.keys(person); // ["name", "sayHello", "job"]
let values = Object.values(person); // ["张三", function, "Engineer"]
let entries = Object.entries(person); // [["name", "张三"], ...]
// 遍历对象
for (let k in person) {
console.log(k) // 打印属性名
console.log(person[k]) // 打印属性值
}
// 对象合并
let obj1 = {a: 1};
let obj2 = {b: 2};
let merged = Object.assign({}, obj1, obj2); // {a: 1, b: 2}
let spreadMerged = {...obj1, ...obj2}; // {a: 1, b: 2}
// 冻结和密封
Object.freeze(person); // 防止修改
Object.seal(person); // 防止添加/删除属性
Array（数组）
// 创建数组
let arr = [1, 2, 3];
let arrNew = new Array(1, 2, 3);
// 获取修改数据
let value1 = arr[0]
arr[0] = 5
// 添加/删除元素
arr.push(4); // 末尾添加 [1,2,3,4]
arr.pop(); // 末尾删除 [1,2,3]
arr.unshift(0); // 开头添加 [0,1,2,3]
arr.shift(); // 开头删除 [1,2,3]
arr.splice(start, deleteCount) // 删除指定元素，start起始位置，deleteCount删除个数
// 遍历方法
arr.forEach(item => console.log(item)); // 遍历每个元素
let mapped = arr.map(x => x * 2); // [2,4,6]
let filtered = arr.filter(x => x > 1); // [2,3]
let found = arr.find(x => x > 1); // 2
let index = arr.findIndex(x => x > 1); // 1
// 查找和判断
let hasTwo = arr.includes(2); // true
let indexOf = arr.indexOf(2); // 1
// 排序和反转
let sorted = [3,1,2].sort(); // [1,2,3]
let reversed = arr.reverse(); // [3,2,1]
// 归约操作
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 6
// 切片和拼接
let sliced = arr.slice(1, 3); // [2,3]
let spliced = arr.splice(1, 1, 4); // 删除1个，添加4 [1,4,3]
// 其他方法
let joined = arr.join(","); // "1,4,3"
let isArray = Array.isArray(arr); // true
Function（函数）
// 函数声明
function add(a, b) {
return a + b;
}
// 函数表达式
let multiply = function(a, b) {
return a * b;
};
// 箭头函数
let divide = (a, b) => a / b;
// 默认参数
function greet(name = "Guest") {
return `Hello, ${name}`;
}
// 剩余参数
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
// 函数方法
let addCopy = add.bind(null, 5); // 绑定this和参数
let result = add.call(null, 1, 2); // 立即调用
let applyResult = add.apply(null, [1, 2]); // 数组参数调用
Date（日期）
// 创建日期
let now = new Date();
let specific = new Date("2023-12-25");
let timestamp = new Date(1700000000000);
// 获取日期组件
let year = now.getFullYear();
let month = now.getMonth(); // 0-11
let date = now.getDate();
let day = now.getDay(); // 0-6 (周日到周六)
let hours = now.getHours();
let minutes = now.getMinutes();
// 设置日期
now.setFullYear(2024);
now.setMonth(11); // 12月
// 格式化
let isoString = now.toISOString(); // "2024-12-25T08:00:00.000Z"
let localeString = now.toLocaleDateString(); // "2023/12/25"
// 日期计算
let tomorrow = new Date(now);
tomorrow.setDate(now.getDate() + 1);
let diff = tomorrow - now; // 毫秒差
RegExp（正则表达式）
// 创建正则
let regex1 = /hello/gi;
let regex2 = new RegExp("hello", "gi");
// 测试和匹配
let test = regex1.test("Hello world"); // true
let match = "Hello world".match(regex1); // ["Hello"]
// 搜索和替换
let searchIndex = "Hello world".search(regex1); // 0
let replaced = "Hello world".replace(regex1, "Hi"); // "Hi world"
// 分组匹配
let groupRegex = /(\d{4})-(\d{2})-(\d{2})/;
let groups = "2023-12-25".match(groupRegex);
// groups[1] = "2023", groups[2] = "12", groups[3] = "25"
Map 和 Set
// Map
let map = new Map();
map.set("name", "张三");
map.set("age", 25);
map.get("name"); // "张三"
map.has("age"); // true
map.size; // 2
map.delete("age");
map.clear();
// Set
let set = new Set([1, 2, 3, 2, 1]); // [1, 2, 3]
set.add(4);
set.has(2); // true
set.size; // 4
set.delete(3);
Promise
// 创建Promise
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("成功"), 1000);
});
// 使用Promise
promise
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("完成"));
// Promise方法
Promise.all([promise1, promise2]); // 所有成功
Promise.race([promise1, promise2]); // 第一个完成
Promise.resolve("立即解决");
Promise.reject("立即拒绝");
类型检测和转换
类型检测
// typeof
typeof 42; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"
// instanceof
[] instanceof Array; // true
{} instanceof Object; // true
// 精确类型检测
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(null); // "[object Null]"
类型转换
// 显式转换
String(123); // "123"
Number("123"); // 123
Boolean(1); // true
// 隐式转换
"5" + 1; // "51"
"5" - 1; // 4
+"123"; // 123
// JSON转换
JSON.stringify({name: "张三"}); // '{"name":"张三"}'
JSON.parse('{"name":"张三"}'); // {name: "张三"}
运算符
算术运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
+ | 加法 | 5 + 3 → 8 |
- | 减法 | 5 - 3 → 2 |
* | 乘法 | 5 * 3 → 15 |
/ | 除法 | 15 / 3 → 5 |
% | 取模（余数） | 10 % 3 → 1 |
** | 指数 | 2 ** 3 → 8 |
++ | 递增 | x++ 或 ++x |
-- | 递减 | x-- 或 --x |
注意：
++x（前缀）：先递增，后返回值x++（后缀）：先返回值，后递增
赋值运算符
| 运算符 | 示例 | 等价于 |
|---|---|---|
= | x = 5 | x = 5 |
+= | x += 3 | x = x + 3 |
-= | x -= 3 | x = x - 3 |
*= | x *= 3 | x = x * 3 |
/= | x /= 3 | x = x / 3 |
%= | x %= 3 | x = x % 3 |
**= | x **= 3 | x = x ** 3 |
比较运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
== | 相等（值相等） | 5 == "5" → true |
=== | 严格相等（值和类型都相等） | 5 === "5" → false |
!= | 不相等 | 5 != "5" → false |
!== | 严格不相等 | 5 !== "5" → true |
> | 大于 | 5 > 3 → true |
< | 小于 | 5 < 3 → false |
>= | 大于等于 | 5 >= 5 → true |
<= | 小于等于 | 5 <= 3 → false |
逻辑运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
&& | 逻辑与 | true && false → false |
|| | 逻辑或 | true || false → true |
! | 逻辑非 | !true → false |
短路求值：
a && b：如果a为false，直接返回a，不计算ba || b：如果a为true，直接返回a，不计算b
位运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
& | 按位与 | 5 & 1 → 1 |
| | 按位或 | 5 | 1 → 5 |
^ | 按位异或 | 5 ^ 1 → 4 |
~ | 按位非 | ~5 → -6 |
<< | 左移 | 5 << 1 → 10 |
>> | 右移 | 5 >> 1 → 2 |
>>> | 无符号右移 | -5 >>> 1 → 2147483645 |
字符串运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
+ | 字符串连接 | "Hello" + "World" → “HelloWorld” |
+= | 字符串连接并赋值 | str += "!" |
条件（三元）运算符
条件 ? 表达式1 : 表达式2
示例：
let age = 18;
let status = age >= 18 ? "成人" : "未成年"; // "成人"
逗号运算符
let x = (1, 2, 3); // x = 3（返回最后一个表达式的值）
一元运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
typeof | 返回变量类型 | typeof "hello" → “string” |
delete | 删除对象属性 | delete obj.property |
void | 求值表达式并返回undefined | void(0) |
in | 检查属性是否存在 | "name" in obj |
关系运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
in | 属性是否存在 | "name" in obj |
instanceof | 检查对象实例 | arr instanceof Array |
运算符优先级
从高到低排列：
()分组++--后缀递增/递减!~+-++--typeofvoiddelete一元运算符**指数*/%乘除取模+-加减<<>>>>>位移<<=>>=ininstanceof关系比较==!====!==相等比较&按位与^按位异或|按位或&&逻辑与||逻辑或?:条件运算符=+=-=等赋值运算符,逗号运算符
示例：
let result = 5 + 3 * 2; // 11（乘法优先）
let result2 = (5 + 3) * 2; // 16（括号优先）
注意： 在实际开发中，建议使用括号来明确运算顺序，提高代码可读性。
控制语句
分支
if语句：
if (条件1) {
代码1
} else if (条件2) {
代码2
} else {
代码3
}
三元运算符：
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
switch语句：
switch(数据) {
case 值1:
代码1
break;
case 值2:
代码2
break
default:
代码n
break
}
循环
while循环
while (循环条件) {
要重复执行的代码
}
while(true) // 构造“无限”循环
for循环
for (变量起始值; 终止条件; 变量变化量) {
循环体
}
for(;;) // 构造“无限”循环
退出循环
break：退出循环
continue：结束本次循环，继续下次循环
变量声明
变量声明有三个关键字 var let 和 const
其中var老派写法，问题很多，可以淘汰掉
尽量使用const，const 语义化更好，实际开发中也是，比如react框架，基本const
有了变量先给const，如果发现它后面是要被修改的，再改为let
扫一扫
1992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
