当前位置：首页 > 资讯 > 系统环境

重学前端：js基础知识

时间：2025-11-21 22:49 作者：来源：阅读：0
扫一扫，手机访问

摘要：起源与发展诞生背景：1995 年由 Brendan Eich（布兰登·艾奇）为 Netscape（网景）浏览器设计，原名 Mocha（摩卡） → LiveScript → JavaScript（因 Java 热潮改名）。标准化：1997 年由 ECMA 组织制定标准规范 ECMAScript（简称 ES），当前主流版本为 ES6+（2015 年及后来）。作用领域：从浏览器脚本语言发展为全栈开

起源与发展

诞生背景：1995 年由 Brendan Eich（布兰登·艾奇）为 Netscape（网景）浏览器设计，原名 Mocha（摩卡） → LiveScript → JavaScript（因 Java 热潮改名）。
标准化：1997 年由 ECMA 组织制定标准规范 ECMAScript（简称 ES），当前主流版本为 ES6+（2015 年及后来）。
作用领域：从浏览器脚本语言发展为 全栈开发语言（前端、后端、移动端、桌面应用）。

JavaScript能做什么？

客户端开发（浏览器）：操作 DOM、处理用户交互、动态修改页面内容。
服务端开发（Node.js）：通过运行时环境处理文件、数据库、网络请求等。
其他场景开发：React Native（移动端）、Electron（桌面应用）等。

特点

解释型语言：代码逐行执行，无需编译（由浏览器或 Node.js 引擎解析）。
动态类型：变量类型在运行时确定，可随时改变。
基于原型：对象通过原型链继承属性和方法（而非传统的类继承）。
事件驱动：通过事件监听（如点击、网络请求）实现异步逻辑。

与 ECMAScript（ES）的关系

ECMAScript（ES） 是 JavaScript 的“语法标准说明书”

定义了 JavaScript 的 核心语法规则（如变量声明、循环、函数、类等）。
不涉及任何具体环境（如浏览器、服务器）的 API。
由 ECMA 国际组织定期更新（如 ES5、ES6、ES2023）。

// ES6 规定箭头函数语法
const sum = (a, b) => a + b;

// ES6 规定 class 语法
class Person {
  constructor(name) {
    this.name = name;
  }
}

JavaScript 是基于 ECMAScript 的“具体实现”：

实现 ECMAScript 标准：所有 JavaScript 引擎（如 V8、SpiderMonkey）必须遵循 ES 语法。
浏览器环境：DOM 操作（document.getElementById）、BOM（window.location）、事件系统。

// 浏览器环境下独有的 DOM API（非 ES 标准）
document.querySelector("#btn").addEventListener("click", () => {
  alert("按钮被点击");
});

Node.js 环境：文件读写（fs 模块）、网络通信（http 模块）。

// Node.js 环境下独有的文件操作 API（非 ES 标准）
const fs = require("fs");
fs.readFile("data.txt", "utf8", (err, data) => {
  console.log(data);
});

与 Java 的区别

重学前端：js基础知识

JavaScript 核心特性

动态类型：变量类型在运行时自动推断，无需显式声明：

let a = 10;      // number
a = "hello";     // string（类型可动态改变）

单线程与事件循环

单线程：JavaScript 主线程一次执行一个任务。
事件循环：通过回调、Promise、async/await 处理异步任务（如定时器、网络请求）。

弱类型与隐式转换： 不同类型变量可进行运算（可能导致意外结果）

console.log(1 + "2");    // "12"（数字转为字符串）
console.log("3" - 1);    // 2 （字符串转为数字）

发展历史

1994 年 Netscape（网景）公司发布了 Navigator 浏览器 1.0 版本，市场占用率超过 90%
1995 年发布了JavaScript 语言
1996 年 JS 在 Navigator浏览器中使用
1996 年微软发布JScript在 IE3.0 中使用
1996 年 11 月网景公司将 JS 提交给 ECMA(国际标准化组织)成为国际标准，用于对抗微软。
由 ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等大公司。
1997 年 ECMA 发布 ECMA-262 标准，推出浏览器标准语言 ECMAScript 1.0
ECMAScript 是标准而 Javascript 是实现
...
2009 年 ECMAScript 5.0 发布
2011 年 ECMAScript5.1 发布，成为 ISO 国际标准，从而推动所有浏览器都支持
...
2015 年 ECMAScript6 发布，更名为 ECMAScript 2015。
2016 年 ECMAScript7 发布，ECMAScript2016
2017 年 ECMAScript8 发布，ECMAScript2017
2018 年 ECMAScript9 发布，ECMAScript2018
2019 年 ECMAScript10，ECMAScript2019
2020 年 ECMAScript11，ECMAScript2020
....

从 2015 年开始 tc39委员会决定每年发布新的 ECMAScript 版本

兼容性

下面是 ES6 兼容性状况，你也可以在 https://caniuse.com/网站查看。

重学前端：js基础知识

学习路径提议

基础语法：变量、运算符、流程控制。
函数与对象：作用域、闭包、原型链。
DOM 操作：动态修改页面内容。
异步编程：Promise、async/await。
模块化开发：ES6 模块、Node.js 的 require。

学习准备

浏览器：本套课程会讲到新的 JS 知识，所以请使用chrome 或 firefox 浏览器来进行学习。

编辑器：推荐使用 vscode 编辑器开始学习，你可能需要安装一些插件才可以高效使用。

js 运行流程

浏览器内置了处理的 JS 的解析器，但不同浏览器的性能不同，所以 JS 一般都在浏览器中执行，当然也有可以在服务器后台执行的 JS 解析器。

JS 请求处理步骤如下:

重学前端：js基础知识

内嵌脚本定义

像 style 标签一样，可以在 html 文档中使用 script 标签嵌入 javascript 代码。

<script>
  alert('你好，世界！');
</script>

外部文件定义

<script src="tool.js"></script>

单行注释

语法: // 注释内容
用途: 解释单行代码逻辑或临时禁用代码。
示例:

let price = 100; // 定义商品价格
// let discount = 0.8; （临时禁用这行代码）

多行注释

语法: /* 注释内容 */
用途: 解释复杂逻辑、多行代码或代码块功能。
示例:

/* 
函数：计算总价
参数：
 - price: 单价
 - count: 数量
返回：总价（含税）
*/
function calcTotal(price, count) {
 return price * count * 1.1;
}

文档注释（JSDoc）

用途: 生成 API 文档，常用于函数、类和模块。
示例:

/**
 * 计算两个数字的和
 * @param {number} a - 第一个数字
 * @param {number} b - 第二个数字
 * @returns {number} 两数之和
 * @example
 * add(2, 3); // 返回 5
 */
function add(a, b) {
  return a + b;
}

常用标签

重学前端：js基础知识

JavaScript 命名规则

以下是 JavaScript 命名规则的详细说明，遵循行业通用规范以提高代码可读性和协作效率：

区分大小写

let name = "重学js";
let Name = "重学js"; // 与 name 不同

使用有意义的名称

// 错误示例
let a = 10; 
// 正确示例
let maxRetryCount = 10;

避免保留字

// 错误
let class = "web"; 
// 正确
let className = "web";

仅允许的字符- 1.字母、数字、$、_ 2.不能以数字开头)

let _count = 1;     // 允许
let $price = 100;   // 允许
let 2ndPlace = "no"; // 错误

变量与函数-小驼峰命名法（首字母小写，后续单词首字母大写）

let userName = "重学js"; 
function getUserInfo() {}

类与构造函数-大驼峰命名法（每个单词首字母大写）

class UserAccount {}
function DatabaseConnection() {}

常量-全大写 + 下划线分隔

const MAX_WIDTH = 1920;
const API_BASE_URL = "https://api.mtsws.cn";

私有成员-前缀下划线（约定俗成，非强制限制）

class User {
  constructor() {
    this._internalId = 100; // 暗示私有属性
  }
}

布尔值-以 is/has/can 开头

let isLogged = false;
let hasPermission = true;
let canEdit = true;

事件处理函数-on/handle 前缀

function onClickSubmit() {}
function handleKeyPress() {}

变量声明

以下是关于 JavaScript 变量声明的详细说明，涵盖声明方式、作用域、提升及最佳实践：

var(传统方式)

作用域：函数作用域（或全局作用域）。
变量提升：声明会被提升到作用域顶部，赋值保留原位。
可重复声明：同一作用域内可重复声明，容易引发错误。

function example() {
  console.log(a); // undefined（变量提升）
  var a = 10;
  var a = 20;     // 允许重复声明
}

let(ES6 引入)

作用域：块级作用域（{} 内有效）。
变量提升：存在暂时性死区（TDZ），声明前访问会报错。
不可重复声明：同一作用域内不可重复声明。

if (true) {
  // console.log(b); // 报错（TDZ）
  let b = 20;
  // let b = 30;    // 报错（重复声明）
}
// console.log(b);   // 报错（超出作用域）

const(ES6 引入)

常量声明：必须初始化，且不能重新赋值。
块级作用域：同 let。
对象/数组可修改：常量指向的内存地址不变，内容可变更。

const PI = 3.14;
// PI = 3.1415;     // 报错（禁止重新赋值）
const user = { name: "重学js" };
user.name = "你好，世界！"; // 允许修改属性

作用域对比

重学前端：js基础知识

变量提升（Hoisting）

var 的变量提升：

console.log(x); // undefined（声明提升，赋值不提升）
var x = 10;

let/const 无提升（实际有提升但存在 TDZ）：

console.log(y); // 报错（ReferenceError）
let y = 20;

暂时性死区（TDZ）

现象：从作用域开始到 let/const声明语句之间的区域，禁止访问变量。

function test() {
  // TDZ 开始
  console.log(tmp); // 报错
  // TDZ 结束
  let tmp = 100;    // TDZ 结束
}

全局变量挂载

var 在全局作用域声明：变量会成为 window 对象的属性。

var globalVar = "重学js";
console.log(window.globalVar); // "重学js"

let/const 全局声明：不会挂载到 window。

let globalLet = "重学js";
console.log(window.globalLet); // undefined

常见错误示例

// 错误1：重复声明
let a = 1;
let a = 2; // SyntaxError
// 错误2：未初始化 const
const URL; // SyntaxError
// 错误3：块级作用域误用
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i)); // 输出 3, 3, 3
}
// 修复：改用 let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i)); // 输出 0, 1, 2
}

弱类型

弱类型的定义

核心概念：变量无需预先声明类型，类型在运行时动态确定，且可随时改变。
对比强类型：1.强类型语言（如 Java）：变量类型在编译时确定，不可更改。2.弱类型语言（如 JavaScript）：类型灵活，但易引发隐式转换错误。

弱类型的具体表现

变量类型可变let value = 100; // number 类型
value = "Hi"; // 转为 string 类型
value = true; // 转为 boolean 类型

隐式类型转换JavaScript 在运算或比较时自动转换类型，规则复杂易出错：

1.字符串拼接优先：遇到 +运算符时，若一方为字符串，则转为字符串拼接。

console.log(1 + "2");   // "12"（数字转字符串）
console.log("3" - 1);   // 2 （字符串转数字）

2.比较时的转换

console.log(1 == "1");  // true（字符串转数字后比较）
console.log(1 === "1"); // false（严格比较类型和值）

3.Truthy/Falsy 值：非布尔值在条件判断中自动转为布尔值。

if ("")       console.log("不执行"); // Falsy
if ("hello")  console.log("执行");   // Truthy

常见隐式转换表

重学前端：js基础知识

弱类型引发的问题

意外结果

// 示例1：数字与字符串相加

const total = 100 + "50"; // "10050"（预期 150）

// 示例2：数组与数字比较

console.log([] == 0);     // true（[] 转数字为 0）

调试困难- 类型错误可能被隐式转换掩盖，导致问题后期暴露。
function sum(a, b) {

 return a + b; // 若传入字符串参数，结果错误

}
sum(10, "20"); // "1020"

应对弱类型的策略 - 显式类型转换-使用 Number(), String(), Boolean() 主动转换类型。

const input = "100";
const num = Number(input); // 显式转为数字

严格比较（===）避免 ==的隐式转换，优先使用 ===

function add(a: number, b: number): number {

  return a + b;

}
add(10, "20"); // 编译时报错

使用 TypeScript静态类型检查：编译时捕获类型错误。

function add(a: number, b: number): number {

  return a + b;

}

add(10, "20"); // 编译时报错

总结

优势：提升开发效率，适应动态场景。
风险：隐式转换可能导致隐蔽错误。
通过 显式转换、严格比较、工具辅助 可有效规避风险，必要时使用 TypeScript 增强类型安全。

Object.freeze

Object.freeze 的作用: 冻结一个对象，使其1.不可修改; 2.不可添加新属性; 3.不可删除现有属性;4.不可修改属性的值;5.不可修改属性的描述符（如 writable、configurable）。

语法

Object.freeze(targetObject);

冻结对象

const user = { name: "重学js", age: 10 };

Object.freeze(user);

// 修改属性（静默失败，严格模式报错）

user.name = "Mr 焦"; 

console.log(user.name); // "重学js"

// 添加属性（失败）

user.email = "admin@qq.com"; 

console.log(user.email); // undefined

// 删除属性（失败）

delete user.age; 

console.log(user.age); // 10

检测冻结状态

console.log(Object.isFrozen(user)); // true

仅冻结对象自身的直接属性，嵌套对象不受影响

const data = { config: { theme: "dark" } };

Object.freeze(data);

data.config.theme = "light"; // 修改成功（内部对象未冻结）

console.log(data.config.theme); // "light"

严格模式报错-在严格模式下，修改冻结对象属性会抛出 TypeError
。"use strict";

const obj = Object.freeze({ key: 1 });

obj.key = 2; // TypeError: Cannot assign to read only property 'key'

冻结后的对象无法解冻，需通过拷贝生成新对象
冻结对象可被 V8 引擎优化，适合存储静态配置或常量。
常量配置

const APP_CONFIG = Object.freeze({
  API_URL: "https://api.mtsws.com",
  MAX_RETRY: 3,
});

防止状态篡改

// 共享状态对象

const state = Object.freeze({ loggedIn: false });

// 恶意代码无法意外修改

通过递归冻结所有嵌套对象

function deepFreeze(obj) {

  Object.freeze(obj);

  for (const key in obj) {

    if (typeof obj[key] === "object" && !Object.isFrozen(obj[key])) {

      deepFreeze(obj[key]);
    }
  }
  return obj;
}
const data = deepFreeze({ user: { name: "重学js" } });
data.user.name = "baidu"; // 修改失败（严格模式报错）

传值与传址

1.传值（Pass by Value）：传递变量的副本值，修改副本不影响原变量

适用类型：基本数据类型（number, string, boolean, null, undefined, symbol）

传值场景（基本类型）：

let a = 10;
let b = a; // 将 a 的值拷贝给 b
b = 20;    // 修改 b 不影响 a
console.log(a); // 10（原值不变）
console.log(b); // 20

函数中-传递基本类型（传值）

function updateValue(value) {
  value = 100; // 修改形参不影响实参
}
let num = 10;
updateValue(num);
console.log(num); // 10（原值未变）

2.传址（Pass by Reference）：传递变量的内存地址引用，修改引用会影响原变量

适用类型：引用数据类型（object, array, function）

传址场景（引用类型）

let obj1 = { name: "重学js" };
let obj2 = obj1; // 将 obj1 的内存地址引用赋值给 obj2
obj2.name = "baidu.com"; // 修改 obj2 会影响 obj1
console.log(obj1.name); // "baidu.com"（原对象被修改）
console.log(obj2.name); // "baidu.com"

函数中-传递引用类型（传址）

function updateUser(user) {
  user.age = 20; // 修改引用对象的属性会影响原对象
}
const user = { name: "重学js" };
updateUser(user);
console.log(user); // { name: "重学js", age: 20 }（原对象被修改）

3.特殊场景分析

重新赋值引用类型

let arr1 = [1, 2];
let arr2 = arr1;
arr2 = [3, 4]; // 让 arr2 指向新地址，不再关联 arr1
console.log(arr1); // [1, 2]（原数组未变）
console.log(arr2); // [3, 4]

对象浅拷贝

const source = { a: 1, b: { c: 2 } };
const copy = { ...source }; // 浅拷贝（只复制第一层属性）
copy.a = 10; // 不影响原对象
copy.b.c = 20; // 修改嵌套对象会影响原对象
console.log(source); // { a: 1, b: { c: 20 } }

4.如何避免引用传递的副作用

深拷贝对象

// 方法1：JSON 序列化（不适用函数、Symbol 等特殊类型）
const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
// 方法2：递归拷贝（完整深拷贝）
function cloneDeep(target) {
 if (typeof target !== "object" || target === null) return target;
 const copy = Array.isArray(target) ? [] : {};
 for (const key in target) {
 copy[key] = cloneDeep(target[key]);
 }
 return copy;
}

使用不可变数据// 冻结对象防止修改

const config = Object.freeze({ theme: "dark" });
function tryModify(cfg) {
 cfg.theme = "light"; // 严格模式报错，非严格模式静默失败
}
tryModify(config);

5.总结与对比表

重学前端：js基础知识

undefined 与 null

1.核心定义

重学前端：js基础知识

2.何时用 undefined

系统默认状态：变量未初始化、函数无返回值。
可选参数缺失：函数参数未传递时默认为 undefined。

3.何时用 null

显式清空对象：释放内存或重置引用。
表明空对象值：如接口返回数据为空时的占位。

4.总结

重学前端：js基础知识

全部评论(0)

上一篇：nodejs Q 使用
下一篇：如何查看git本地分支对应的远程分支

真快激活码

店铺

推荐商品

重学前端：js基础知识

起源与发展

JavaScript能做什么？

特点

与 ECMAScript（ES）的关系

与 Java 的区别

JavaScript 核心特性

发展历史

兼容性

学习路径提议

学习准备

js 运行流程

内嵌脚本定义

外部文件定义

推荐写法

单行注释

多行注释

文档注释（JSDoc）

JavaScript 命名规则

变量声明

弱类型

Object.freeze

传值与传址

undefined 与 null