博客网站开发利用数据库,北京好用的h5建站,在线网站排名工具,工程管理毕业设计代做网站文章目录 JS基础检测当前运行环境浏览器端 JavaScript组成#xff1a;#xff08;3个部分#xff09;Node Demo:读文件并返回大小 JS语法变量声明 let / const / var数据类型栈内存和堆内存Undefined#xff1a;未定义类型Null#xff1a;空对象 运算符流程控制函数作用域… 文章目录 JS基础检测当前运行环境浏览器端 JavaScript组成3个部分Node Demo:读文件并返回大小 JS语法变量声明 let / const / var数据类型栈内存和堆内存Undefined未定义类型Null空对象 运算符流程控制函数作用域与闭包对象数组模块化异步基础错误处理 JS基础
检测当前运行环境
console.log(typeof window undefined ? Node : Browser);进阶做法用 globalThis
console.log(globalThis.window ? Browser : Node);globalThis 是所有环境都存在的统一顶级对象在 Node 里 globalThis.window 为 undefined在浏览器里指向 window 本身。
浏览器端 JavaScript组成3个部分
组成作用核心接口DemoECMAScript语言本体 (语法 内建对象)Array, PromiseMath.random()DOM (Document Object Model)操作页面元素document.querySelector, Element.classListjs document.body.style.backgroundlavender; BOM (Browser Object Model)操作浏览器窗口/历史/地址location, history, navigatorjs alert(location.href);
Node Demo:读文件并返回大小
// size.js
//运行命令 node size.js Test111.txt
import { statSync } from fs;
import { resolve } from path;const file resolve(process.argv[2]);
const { size } statSync(file);
console.log(File size: ${size} bytes);输出
File size: 57 bytes文件不存在
node size.js nofile.txt会抛出错误并终止执行
Error: ENOENT: no such file or directory, stat /F:zyx/nofile.txt未提供参数 (process.argv[2] 是 undefined就会有这个问题)
TypeError [ERR_INVALID_ARG_TYPE]: The path argument must be of type string. Received undefinedJS语法
变量声明 let / const / var
要点 let 和 const 拥有块级作用域存在「暂时性死区」TDZ禁止在声明前访问。 const 声明后不可重新赋值但若值是对象其属性仍可变。 var 具函数作用域并会变量提升容易造成混淆通常仅维护旧代码时使用。
{console.log(typeof value); // ⚠️ ReferenceErrorTDZ这就是在声明之前访问了声明在下一句let value 42;const PI 3.1416;// PI 3; // ⚠️ TypeError: Assignment to constant variable
}在进入花括号后value 处于 TDZ尝试访问即抛错。
PI 一旦赋值后不可再次赋值。
输出TDZ声明前访问
ReferenceError: Cannot access value before initialization数据类型
要点
基本数据类型number (含 NaN、Infinity)、string、boolean、undefined、null、symbol、bigint引用数据类型Object Array、Function、自定义对象……注意内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。也就是说除了那七种基本数据类型之外其他的都称之为 Object 类型。
console.log(typeof null); // 为何是 object
console.log(typeof 10n); // bigint
console.log(typeof Symbol()); // symbol早期实现遗留导致 typeof null 返回 object
Symbol() 生成独一无二的标识符用于对象私有键。
基本数据类型举例
var a 23;
var b a;a;console.log(a); // 打印结果24
console.log(b); // 打印结果23a 和 b 都是基本数据类型让 b 等于 a然后改变 a 的值之后发现 b 的值并没有被改变。
引用数据类型举例
var obj1 new Object();
obj1.name smyh;// 让 obj2 等于 obj1
var obj2 obj1;// 修改 obj1 的 name 属性
obj1.name vae;console.log(obj1.name); // 打印结果vae
console.log(obj2.name); // 打印结果vaeobj1 和 obj2 都是引用数据类型让 obj2 等于 obj1然后修改 obj1.name 的值之后发现 obj2.name 的值也发生了改变。
栈内存和堆内存
JS 中所有的变量都是保存在栈内存中的。
基本数据类型
基本数据类型的值**直接保存在栈内存中。**值与值之间是独立存在修改一个变量不会影响其他的变量。
引用数据类型
对象是保存到堆内存中的。每创建一个新的对象就会在堆内存中开辟出一个新的空间而变量保存了对象的内存地址对象的引用保存在栈内存当中。如果两个变量保存了同一个对象的引用当一个通过一个变量修改属性时另一个也会受到影响。
这一点和py是很像的。
Undefined未定义类型
Undefined 类型的值只有一个就是 undefind。比如 var a undefined。
使用 typeof 检查一个 undefined 值时会返回 undefined。
undefined 的出现有以下几种情况
变量已声明未赋值未初始化一个变量如果只声明了但没有赋值此时它的值就是 undefined。变量未声明未定义如果你从未声明一个变量就去使用它则会报错这个大家都知道此时如果用 typeof 检查这个变量时会返回 undefined。函数无返回值时在定义一个函数时如果末尾没有 return 语句那么其实就是 return undefined。调用函数时未传参
调用函数时如果没有传实参那么对应形参的值就是 undefined。
function foo(name) {console.log(name);
}foo(); // 调用函数时未传参。执行函数后的打印结果undefined实际开发中如果调用函数时没有传参我们可以根据需要给形参设置一个默认值
function foo(name) {name name || qianguyihao;
}foo();等学习了 ES6 之后上方代码也可以这样写
function foo(name qianguyihao) {}foo();Null空对象
如果你想定义一个变量用来保存引用类型也就是对象但是还不确定放什么内容这个时候可以在初始化时将其赋值为 null。
从语义上讲null表示一个空对象所以使用 typeof 检查一个 null 值时会返回 object。举例
var myObj null;
cosole.log(typeof myObj); // 打印结果objectundefined 实际上是由 null 衍生出来的所以null undefined的结果为 true。null undefined 的结果是 false。它们虽然相似但还是有区别的其中一个区别是和数字运算时
10 null 结果为 10。10 undefined 结果为 NaN。
运算符
算数 - * / % **比较 ! 务必用全等 逻辑 || !含短路行为三元condition ? A : B模板字符串用反引号 , 可内插 ${…}。
Demo
const score 75;
const ok score 60 ? pass : fail;
const msg Result: ${ok}, score ${score};
console.log(msg);score 60 为真三元返回 pass。模板字符串直接插入变量无需拼接。
输出
Result: pass, score 75流程控制
条件if…else, switch
循环for(索引)、for…in(枚举键)、for…of(遍历可迭代对象)
break / continue 控制跳出或跳过。
Demo
const arr [a, b, c];
for (const val of arr) {if (val b) continue;console.log(val); // 打印 a 和 c
}for…of 直接拿值当遇到 b 时 continue 跳过本轮。
输出
a
c函数
声明式有函数提升表达式 / 箭头函数在赋值后才能调用默认参数与剩余参数 ...args箭头函数不绑定自己的 this / arguments。
Demo
const sum (...ns) ns.reduce((a, b) a b, 0);
console.log(sum(1, 2, 3, 4)); // 10解释
...ns 收集任意个参数生成数组。reduce 累加得到总和。
输出
10作用域与闭包
JS 使用词法作用域静态作用域闭包 函数 其引用的外部变量即便外部函数已返回。
Demo
function makeCounter() {let count 0;return () count;
}const inc makeCounter();
console.log(inc()); // 1
console.log(inc()); // 2inc 始终持有对 count 的引用形成闭包累加状态得以保留。
输出
1
2对象
字面量简写{x} 等价于 {x: x}计算属性[prop i]: value方法简写say() {}可选链obj?.child?.name 防止空值报错。
Demo
const x 5;
const o {x, // 简写[y 1]: 6, // 计算属性名 y1say() { return this.x }
};
console.log(o.y1, o.say()); // 6 5输出
6 5数组
高阶函数map, filter, reduce解构、扩展 ...Array.isArray(obj) 判断。
Demo
const raw [1, 2, 3, 4];
const squares raw.map(n n ** 2); // [1,4,9,16]
const evens raw.filter(n n % 2 0); // [2,4]
const total raw.reduce((a, b) a b, 0); // 10
const [head, ...rest] raw; // 解构
console.log(squares, evens, total, head, rest);输出
[ 1, 4, 9, 16 ] [ 2, 4 ] 10 1 [ 2, 3, 4 ]模块化
ES Module浏览器 / Node ≥ v14 原生支持 export const foo …; / export default …;import foo, { bar } from ./lib.js; CommonJS旧版 Node module.exports …; / const foo require(./lib);
Demo (ESM)
// math.js
export const add (a, b) a b;// main.mjs
import { add } from ./math.js;
console.log(add(2, 3)); // 5输出
5异步基础
回调 → Promise → async/await 是演进路线。静态方法Promise.all, Promise.race。await 只能在 async 函数或顶级 module 中使用。
Demo
function delay(ms) {return new Promise(res setTimeout(res, ms));
}(async () {console.time(t);await delay(500);console.timeEnd(t); // ≈ 500ms
})();delay 返回在指定毫秒后解决的 Promise。await 暂停执行确保时序易读。
输出
t: 500.XXXms错误处理
try / catch / finally 捕获同步 await 抛出的异常。自定义错误类继承 Error。
Demo
class BadInputError extends Error {constructor(msg) { super(msg); this.name BadInputError; }
}function parseJson(str) {if (typeof str ! string) throw new BadInputError(Need string);return JSON.parse(str);
}try {parseJson(42);
} catch (e) {console.error(e.name, e.message); // BadInputError Need string
} finally {console.log(done);
}输出
BadInputError Need string
done
