JavaScript核心构成与基础语法详解2
目录
1、对象基础概念
1.1、对象创建的方式
2. 三大包装类
2.1、String包装类
2.2、Number包装类
2.3、Booean包装类
2.4、小结
3、Globa对象
3.1、全局属性
3.2、全局函数
3.2.1 eval(）函数
3.2.2 编码和解码函数
3.2.3 数字转换和检查函数
3.2.4 其他全局函数
3.2.5 小结
4、math对象
5、数组对象
6、RegExp对象
7、Date对象
7.1 创建 Date 对象
7.2 获取日期时间信息
7.3设置日期时间信息
7.4 日期时间格式化与转换
7.5 日期时间计算与比较
8、Window 对象 - 浏览器窗口的控制器
核心概念
9、History 对象 - 浏览器历史记录管理器
核心概念
10 Location 对象 - URL 管理器
核心概念
小结
1、对象基础概念
JavaScript 中的对象就像现实生活中的物体，它有属性（特征）和方法（行为）。想象一个"汽车"对象：
- 属性：颜色、品牌、速度
- 方法：启动、加速、刹车
对象的特点：
- 属性：对象的特征或数据
- 方法：对象能够执行的操作或功能
- 键值对结构：每个属性都有名称和值
- 动态性：可以随时添加或删除属性
使用场合：
- 表示现实世界中的实体（用户、产品等）
- 组织相关数据和功能
- 作为模块化的代码单元
//创建对象实例
let person={//属性：描述对象的特征name:"张三",age:25,isStudent:true,//方法：对象能执行的操作introduce:function(){return "你好，我叫"+this.name+",今年"+this.age+"岁";},//ES6简单写法celebrateBrithday(){this.age++;//this指向当前对象return "生日快乐！现在"+this.age+"岁了";}
};
//访问对象属性和方法
console.log(person.age);
console.log(person.introduce());
//alert(person.celebrateBrithday);
1.1、对象创建的方式
- javaScript提供了多种创建对象的方式
//1、对象字面常量（最常用）
let person1={name:"小李",age:18,sayHello:function(){console.log("你好，我是"+this.name);}
};
//2、使用New object()
let person2=new Object();
person2.name="小贾";
person2.age=18;
//使用构造函数
function Person(name,age){this.name=name;this.age=age;this.sayHello=function(){console.log("你好，我是"+this.name);};}
let person3=new Person("张三",28);
//4、使用class
class Personclass{constructor(name,age){this.name=name;this.age =age;}sayHello(){console.log("你好，我是"+this.name)}
}
let person4=new Personclass("李四",28);
对象的功能：
function fun1(){alert("hello"); } alert(fun1.toSting);//打印出的是function的定义 alert(fun1);//打印出的是function的定义 fun1();//打印出hellotoString方法是打印函数的定义
js中的函数在调用时，只看函数名称，不看参数
arguments=>函数运行时，参数的封装
function fun(){alert(arguments.length);//返回实际传入参数的个数 } fun(1,2);//2 fun(1,2,3,4);//4 fun();//0
2. 三大包装类
JavaScript 为基本数据类型（String、Number、Boolean）提供了对应的包装对象，使得这些基本类型可以像对象一样使用方法。
工作流程：
- 当基本类型调用方法时，临时创建包装对象
- 调用方法
- 销毁包装对象，返回基本类型
// String 包装类
let str = "Hello World";
console.log(str.length); // 11
console.log(str.toUpperCase()); // "HELLO WORLD"// Number 包装类
let num = 123.456;
console.log(num.toFixed(2)); // "123.46"
console.log(num.toString(2)); // "1111011.011101001"// Boolean 包装类
let bool = true;
console.log(bool.toString()); // "true"// 注意：这些基本类型在使用方法时临时转换为对象，使用后恢复2.1、String包装类
String包装了为字符创原始值提供了丰富的方法来处理文本。当对字符串原始值调用方法时，javaScript会自动创建临时String对象，调用方法后再销毁该对象
//创建一个字符创原始值
let message="hello.javaScript";//基本字符串类型，不是对象
//1 长度属性，获取字符串的长度
let length=message.length;//访问length属性，返回字符串的字符数量
console.log("字符串长度："+length);
//2 大小写转换//大写let upperCaseMsg=message.toUpperCase();//转换为大写字母console.log("大写："+upperCaseMsg);//小写let lowerCaseMsg=message.toLowerCase();console.log("小写："+lowerCaseMsg);
//3 字符串截取
let substring1=message.substring(0,5);//从索引0开始到索引5（不包括5）
console.log("索引0-5："+substring1);
let substring2=message.substring(7);//从索引7开始，到字符串末尾
console.log("从索引7开始："+substring2);
//4 字符串分割//按空格分割=>数组let words=message.split(" ");//按空格分割字符串，返回数组console.log("按空格分割："+words);//拆分为字符=>数组let chars=message.split("");//空字符串分割，将字符串拆分为字符数组console.log("拆分为字符："+chars);
//5 查找和替换//查找字符串首次出现的位置let index=message.indexOf("javaScript");console.log("javaScript的位置："+index);//7//查找字符最后一次出现的位置let lastindex=message.lastIndexOf("a");console.log("最后一个a的位置："+lastindex);//15//检查是否包含子字符串let includes=message.includes("world");console.log("包含world吗？"+includes);//false//替换子字符串let replaced=message.replace("javaScript","JS");console.log("替换后："+replaced);
//6 去除空白字符
let spaceText=" 前后都有空格 ";
//去除收尾空白字符
let trimmed=spaceText.trim();
console.log("去除空格后："+trimmed);
//7 字符串连接
let fristName="张";
let lastName="三";
//拼接字符串
let fullName=fristName.concat("",lastName);
console.log("全名："+fullName);
//8 字符访问
//获取指定位置的字符
let charCode=message.charCodeAt(0);
console.log("h的Unicode编码："+charCode);//72
//9 字符串比较
let str1="apple";
let str2="banana";
console.log("apple<banana?"+str1.localeCompare(str2)<0);//true
//10 模板字符串
let name="李四";
let age=25;
//使用反引号和${}插入变量
let template='姓名:${name},年龄${age}岁'：
console.log("模板字符串："+template);//输出：姓名：李四，年龄：25岁2.2、Number包装类
为数字原始值提供数值格式化和装换方式，包含处理数字的各种使用方法
//创建数字原始值
//基本数据类型
let price=123.4567;
let largeNumber=1000000;
//1 小数位数处理
//保留两位小数，返回字符串
let fixedPrice=price.toFixed(2);
console.log("保留两位小数："+fixedPrice);
//保留三位小数，返回字符串
let fixedPrice3=price.toFixed(3);
console.log("保留三位小数："+fixedPrice3);
//2 数字转换为字符串
let stringPrice=price.toString();
console.log("数字转换为字符串："+stringPrice);
//转换为二进制字符串，参数2表示2进制
let binaryString=(10).toString(2);
console.log("10的二进制："+binaryString);
//转换为16进制
let hexString=(255).toString(16);
console.log("255的16进制:"+hexString);
//3 指数表示法
//转换为指数表示法，保留两位小数
let expPrice=price.toExponential(2);
console.log("指数表示法：",expPrice);
//4 精度控制
//保留4位有效数字
let precisePrice=price.toPrecision(4);
console.log("4位有效数字:"+precisePrice);
//5 数值判断
console.log("是整数吗？",Number.isInteger(price));//false
console.log("是NaN吗:",Number.isNaN(NaN));//true
console.log("是有限数吗？",Number.isFinite(price));
//6 数值解析
//解析字符中的整数部分
let parsendlnt=parseInt("123abc");
console.log("整数部分："+parsendlnt);
//解析字符中的浮点数部分
let parsefloat=parseFloat("123.45abc");
console.log("小数部分："+parsefloat);
//7 数值范围检查
console.log("安全整数范围：",Number.MIN_SAFE_INTEGER,"到",Number.MAX_SAFE_INTEGER);
console.log("123是安全数吗？",Number.isSafeInteger(123));
//8 数值格式转换
//添加千位分隔符
let formattedNumber=largeNumber.toLocaleString();
console.log("格式化数字：",formattedNumber);//1,000,000
//9 特殊数值
//js能表示的最大数值
console.log("最大值：",Number.MAX_SAFE_INTEGER);
//无穷大
console.log("无穷大：",Number.POSITIVE_INFINITY);
//10 数值转换
//字符串转换为数字
let fromString=Number("123.54");
console.log("字符串转换为数字：",fromString);
//无法转换的字符
let fromStringInvalid=Number("123abc");
console.log("无效转换：",fromStringInvalid);//NaN
2.3、Booean包装类
为布尔原始值提供方法，虽然方法较少，但在类型转换和逻辑片段中非常重要
// 创建布尔原始值 let isActive = true; // 布尔原始值 let isComplete = false;// 1. 转换为字符串 let activeString = isActive.toString(); // 转换为字符串 console.log("true转换为字符串:", activeString); // 输出: "true"let completeString = isComplete.toString(); console.log("false转换为字符串:", completeString); // 输出: "false"// 2. 值Of方法（返回原始值） let originalValue = isActive.valueOf(); // 返回原始布尔值 console.log("原始值:", originalValue); // 输出: true// 3. 布尔转换规则 // 以下值在布尔上下文中会被转换为false（falsy值） console.log("空字符串布尔值:", Boolean("")); // 输出: false console.log("数字0的布尔值:", Boolean(0)); // 输出: false console.log("NaN的布尔值:", Boolean(NaN)); // 输出: false console.log("null的布尔值:", Boolean(null)); // 输出: false console.log("undefined的布尔值:", Boolean(undefined)); // 输出: false// 其他值会被转换为true（truthy值） console.log("非空字符串布尔值:", Boolean("hello")); // 输出: true console.log("非零数字布尔值:", Boolean(123)); // 输出: true console.log("对象的布尔值:", Boolean({})); // 输出: true console.log("数组的布尔值:", Boolean([])); // 输出: true// 4. 逻辑运算 let hasPermission = true; let isLoggedIn = false;// 逻辑与（AND） - 两个都为true才返回true console.log("权限AND登录:", hasPermission && isLoggedIn); // 输出: false// 逻辑或（OR） - 至少一个为true就返回true console.log("权限OR登录:", hasPermission || isLoggedIn); // 输出: true// 逻辑非（NOT） - 取反 console.log("无权限:", !hasPermission); // 输出: false console.log("已登录:", !isLoggedIn); // 输出: true// 5. 双重非运算（强制转换为布尔值） let userName = ""; // 空字符串（falsy值） let hasUserName = !!userName; // 双重非运算，转换为布尔值 console.log("有用户名吗?", hasUserName); // 输出: falselet userAge = 25; // 非零数字（truthy值） let hasUserAge = !!userAge; // 转换为布尔值 console.log("有年龄吗?", hasUserAge); // 输出: true// 6. 布尔对象 vs 布尔原始值 // 注意：不要使用Boolean构造函数创建布尔对象 let boolObject = new Boolean(false); // 创建布尔对象（不推荐） let boolPrimitive = false; // 布尔原始值（推荐）console.log("对象类型:", typeof boolObject); // 输出: "object" console.log("原始值类型:", typeof boolPrimitive); // 输出: "boolean"// 对象在条件判断中总是为true（因为是对象） if (boolObject) {console.log("布尔对象为真"); // 这会执行，即使对象值为false }if (boolPrimitive) {console.log("布尔原始值为真"); // 这不会执行 }// 7. 比较操作 let a = true; let b = false;console.log("true == 1:", a == 1); // 输出: true（宽松相等） console.log("true === 1:", a === 1); // 输出: false（严格相等） console.log("false == 0:", b == 0); // 输出: true（宽松相等） console.log("false === 0:", b === 0); // 输出: false（严格相等）// 8. 三元运算符（条件运算符） let age = 20; let canVote = age >= 18 ? true : false; // 条件为真返回true，否则返回false console.log("可以投票吗?", canVote); // 输出: true// 9. 默认值设置（利用短路求值） let userSettings = null; let defaultSettings = { theme: "dark" };// 如果userSettings为falsy，使用defaultSettings let settings = userSettings || defaultSettings; console.log("最终设置:", settings); // 输出: {theme: "dark"}
2.4、小结
三大包装类的重要特点：
- 自动转换：当对基本类型调用方法时，JavaScript 会自动创建对应的包装对象
- 临时性：包装对象只在方法调用期间存在，调用完成后立即销毁
- 不可变性：字符串方法返回新字符串，不修改原字符串
- 类型安全：使用包装类方法比手动类型转换更安全可靠
附加：instanceof运算符：用于判断是否是指定类型
let str=new String("abc");
alert(str instanceof String);//true
3、Globa对象
- Global对象是JavaScript中的全局对象，是最顶层的对象，在浏览器环境中是windows，在Node.js中是global.
- 它包含了所有的全局可用的属性和函数
- 重要特性：
全局变量和函数实际上是Global对象的属性和方法
无需显示引用，可直接调用全局方法
//在浏览器中，全局变量和函数是windows对象的属性和方法
//属性
var globleVar="我是全局变量";
console.log(window.globleVar);//我是全局变量
//方法
function globleFunc()
{return "我是全局变量";
}
console.log(window.globalFunc());//输出：我是全局变量//在node.js中，全局变量和函数是globle对象的属性和方法
//注意：在node.js中，使用var定义的变量不会成为global对象的属性
//需要使用global.前缀显示定义
global.nodevar="我是node.js的全局变量";
console.log(global.nodevar);3.1、全局属性
Global对象包含一些特殊的全局属性，这些属性在任何地方都可以直接访问
1、Infinity-表示无穷大的值
2、NaN-表示非数字
3、undefined-表示未定义的值
4、null-表示空值
// 1. Infinity - 表示无穷大的数值
console.log("正无穷大:", Infinity); // 输出: Infinity
console.log("负无穷大:", -Infinity); // 输出: -Infinity// 数学运算中的无穷大
console.log("1除以0:", 1 / 0); // 输出: Infinity
console.log("-1除以0:", -1 / 0); // 输出: -Infinity// 2. NaN - 表示"非数字"(Not a Number)
console.log("非数字:", NaN); // 输出: NaN// 产生NaN的运算
console.log("0除以0:", 0 / 0); // 输出: NaN
console.log("字符串乘以数字:", "abc" * 3); // 输出: NaN// 3. undefined - 表示未定义的值
let undefinedVar;
console.log("未定义的变量:", undefinedVar); // 输出: undefined// 显式使用undefined
let obj = { prop: undefined };
console.log("对象属性:", obj.prop); // 输出: undefined// 4. null - 表示空值
let nullVar = null;
console.log("空值:", nullVar); // 输出: null// 注意：null和undefined的区别
console.log("null == undefined:", null == undefined); // 输出: true (宽松相等)
console.log("null === undefined:", null === undefined); // 输出: false (严格相等)3.2、全局函数
Global对象提供了多个重要的全局函数，这些函数可以在任何地方直接调研
3.2.1 eval(）函数
eval()函数用于执行字符串中的 JavaScript 代码。
// eval() 基本用法
let x = 10;
let y = 20;
let result = eval("x + y"); // 执行字符串中的表达式
console.log("eval结果:", result); // 输出: 30// 使用eval创建变量和函数
eval("var z = 5; function multiply(a, b) { return a * b; }");
console.log("创建的变量z:", z); // 输出: 5
console.log("创建的函数:", multiply(3, 4)); // 输出: 12// 注意：eval有安全风险，应谨慎使用
// 1. 性能问题：eval中的代码无法被JavaScript引擎优化
// 2. 安全风险：可能执行恶意代码
// 3. 调试困难：错误难以追踪// 替代方案：使用Function构造函数（相对安全）
let safeEval = new Function("a", "b", "return a + b");
console.log("Function构造器:", safeEval(5, 10)); // 输出: 153.2.2 编码和解码函数
这些函数用于处理URL（统一资源标识符）
// 示例URI
let uri = "https://example.com/测试页面.html?name=张三&age=25#section";// 1. encodeURI() - 编码整个URI（保留特殊字符）
let encodedURI = encodeURI(uri);
console.log("encodeURI结果:", encodedURI);
// 输出: "https://example.com/%E6%B5%8B%E8%AF%95%E9%A1%B5%E9%9D%A2.html?name=%E5%BC%A0%E4%B8%89&age=25#section"// 2. decodeURI() - 解码整个URI
let decodedURI = decodeURI(encodedURI);
console.log("decodeURI结果:", decodedURI); // 输出原URI// 3. encodeURIComponent() - 编码URI组件（编码所有特殊字符）
let uriComponent = "测试页面.html?name=张三&age=25";
let encodedComponent = encodeURIComponent(uriComponent);
console.log("encodeURIComponent结果:", encodedComponent);
// 输出: "%E6%B5%8B%E8%AF%95%E9%A1%B5%E9%9D%A2.html%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D25"// 4. decodeURIComponent() - 解码URI组件
let decodedComponent = decodeURIComponent(encodedComponent);
console.log("decodeURIComponent结果:", decodedComponent); // 输出原组件// 5. escape() 和 unescape() - 已废弃的函数，不推荐使用
// 注意：escape() 和 unescape() 已从Web标准中删除，应使用encodeURIComponent和decodeURIComponent
let escaped = escape("测试");
console.log("escape结果:", escaped); // 输出: "%u6D4B%u8BD5"let unescaped = unescape(escaped);
console.log("unescape结果:", unescaped); // 输出: "测试"3.2.3 数字转换和检查函数
这些函数用于将值转换为数字或检查数字的特殊字符
// 1. isNaN() - 检查值是否为NaN（Not a Number）
console.log("isNaN(NaN):", isNaN(NaN)); // 输出: true
console.log("isNaN(123):", isNaN(123)); // 输出: false
console.log("isNaN('123'):", isNaN('123')); // 输出: false（字符串可转换为数字）
console.log("isNaN('abc'):", isNaN('abc')); // 输出: true（字符串不能转换为数字）
console.log("isNaN(undefined):", isNaN(undefined)); // 输出: true// 注意：isNaN()会先尝试将参数转换为数字
// Number.isNaN()是ES6新增的方法，不会进行类型转换
console.log("Number.isNaN(NaN):", Number.isNaN(NaN)); // 输出: true
console.log("Number.isNaN('abc'):", Number.isNaN('abc')); // 输出: false// 2. isFinite() - 检查值是否为有限数字
console.log("isFinite(123):", isFinite(123)); // 输出: true
console.log("isFinite(Infinity):", isFinite(Infinity)); // 输出: false
console.log("isFinite(-Infinity):", isFinite(-Infinity)); // 输出: false
console.log("isFinite(NaN):", isFinite(NaN)); // 输出: false
console.log("isFinite('123'):", isFinite('123')); // 输出: true（字符串可转换为数字）// Number.isFinite()是ES6新增的方法，不会进行类型转换
console.log("Number.isFinite('123'):", Number.isFinite('123')); // 输出: false// 3. parseInt() - 将字符串转换为整数
console.log("parseInt('123'):", parseInt('123')); // 输出: 123
console.log("parseInt('123.45'):", parseInt('123.45')); // 输出: 123（忽略小数部分）
console.log("parseInt('abc'):", parseInt('abc')); // 输出: NaN（无法转换）// 指定进制
console.log("parseInt('1010', 2):", parseInt('1010', 2)); // 输出: 10（二进制）
console.log("parseInt('FF', 16):", parseInt('FF', 16)); // 输出: 255（十六进制）
console.log("parseInt('075', 8):", parseInt('075', 8)); // 输出: 61（八进制）// 4. parseFloat() - 将字符串转换为浮点数
console.log("parseFloat('123.45'):", parseFloat('123.45')); // 输出: 123.45
console.log("parseFloat('123'):", parseFloat('123')); // 输出: 123
console.log("parseFloat('123abc'):", parseFloat('123abc')); // 输出: 123（忽略非数字部分）
console.log("parseFloat('abc123'):", parseFloat('abc123')); // 输出: NaN（无法转换）3.2.4 其他全局函数
// 1. Number() - 将值转换为数字
console.log("Number('123'):", Number('123')); // 输出: 123
console.log("Number('123.45'):", Number('123.45')); // 输出: 123.45
console.log("Number('abc'):", Number('abc')); // 输出: NaN
console.log("Number(true):", Number(true)); // 输出: 1
console.log("Number(false):", Number(false)); // 输出: 0
console.log("Number(null):", Number(null)); // 输出: 0
console.log("Number(undefined):", Number(undefined)); // 输出: NaN// 2. String() - 将值转换为字符串
console.log("String(123):", String(123)); // 输出: "123"
console.log("String(true):", String(true)); // 输出: "true"
console.log("String(null):", String(null)); // 输出: "null"
console.log("String(undefined):", String(undefined)); // 输出: "undefined"
console.log("String({a:1}):", String({a:1})); // 输出: "[object Object]"// 3. Boolean() - 将值转换为布尔值
console.log("Boolean(0):", Boolean(0)); // 输出: false
console.log("Boolean(1):", Boolean(1)); // 输出: true
console.log("Boolean(''):", Boolean('')); // 输出: false
console.log("Boolean('abc'):", Boolean('abc')); // 输出: true
console.log("Boolean(null):", Boolean(null)); // 输出: false
console.log("Boolean(undefined):", Boolean(undefined)); // 输出: false
console.log("Boolean({}):", Boolean({})); // 输出: true// 4. 使用场景示例 - 表单验证
function validateForm(input) {// 转换为数字并验证let num = Number(input);if (isNaN(num)) {return "请输入有效的数字";}if (!isFinite(num)) {return "数字不能是无穷大";}if (num <= 0) {return "请输入正数";}return "验证通过";
}console.log(validateForm("123")); // 输出: "验证通过"
console.log(validateForm("abc")); // 输出: "请输入有效的数字"
console.log(validateForm("Infinity")); // 输出: "数字不能是无穷大"
console.log(validateForm("-5")); // 输出: "请输入正数"3.2.5 小结
Global 对象是 JavaScript 中最重要的对象之一，它提供了：
- 全局属性和函数：在任何地方都可以直接访问
- 类型转换功能：Number(), String(), Boolean() 等
- URI 处理功能：encodeURI(), decodeURI() 等
- 数字验证功能：isNaN(), isFinite() 等
- 代码执行功能：eval()（谨慎使用）
4、math对象
math对象提供数学常数和函数，用于执行数学运算，所有属性和方法都是静态的，不需要创建Math实例
主要功能：
- 数字常数（PI E）等
- 数字运算函数（sin cos pow）
- 取整和随机数生成
//数字常数
console.log("圆周率π：",Math.PI);
console.log("自然常数e:",Math.E);
console.log("2的自然对数:",Math.LN2);
console.log("10的自然对数:",Math.LN10);
//取整方法
console.log("向上取整4.2：",Math.ceil(4.2));//5
console.log("向下取整：",Math.floor(4.8));//4
console.log("四舍五入：",Math.round(4.5));//5
//数学运算
console.log("绝对值 -5：",Math.abs(-5));
console.log("2的3次方：",Math.pow(2,3));
console.log("16的平方跟：",Math.sqrt(16));
console.log("最大值：",Math.max(1,5,3,9));
console.log("最小值：",Math.min(1,5,3,9));
//随机数生成
function getRandomInt(min,max){min=Math.ceil(min);max=Math.floor(max);return Math.floor(Math.random()*(max-min+1))+min;}
console.log("1-10的随机数：",getRandomInt(1,10));
//三角函数
console.log("sin90°：",Math.sin(Math.PI/2));
console.log("cos(180°)：",Math.cos(Math.PI));
console.log("tan(180°)：",Math.tan(Math.PI));
//角度转弧度函数
function toRadians(degress){return degress*(Math.PI/180);}
console.log("30°的弧度值)：",toRadians(30));
5、数组对象
数组是一种特殊类型对象，用于存储有序的数据集合，js数组可以包含不同类型的元素，并且长度可以动态变化
主要特性
- 有序的元素集合
- 索引从0开始
- 动态大小
- 丰富的内置方法
// 创建数组的不同方式
let fruits = ["苹果", "香蕉", "橙子"]; // 字面量方式
let numbers = new Array(1, 2, 3, 4, 5); // Array构造函数
let mixed = [1, "hello", true, {name: "张三"}]; // 混合类型数组// 基本操作
console.log("数组长度:", fruits.length); // 3
console.log("第一个元素:", fruits[0]); // "苹果"
console.log("最后一个元素:", fruits[fruits.length - 1]); // "橙子"// 添加/删除元素
fruits.push("芒果"); // 末尾添加
console.log("添加芒果后:", fruits); // ["苹果", "香蕉", "橙子", "芒果"]let lastFruit = fruits.pop(); // 移除最后一个元素
console.log("移除的元素:", lastFruit); // "芒果"
console.log("当前数组:", fruits); // ["苹果", "香蕉", "橙子"]fruits.unshift("草莓"); // 开头添加
console.log("添加草莓后:", fruits); // ["草莓", "苹果", "香蕉", "橙子"]let firstFruit = fruits.shift(); // 移除第一个元素
console.log("移除的元素:", firstFruit); // "草莓"// 遍历数组
console.log("=== for循环遍历 ===");
for (let i = 0; i < fruits.length; i++) {console.log(i + ": " + fruits[i]);
}console.log("=== forEach方法遍历 ===");
fruits.forEach(function(fruit, index) {console.log(index + ": " + fruit);
});// 数组转换方法
let numbers = [1, 2, 3, 4, 5];// map - 创建新数组
let squared = numbers.map(function(num) {return num * num;
});
console.log("平方数:", squared); // [1, 4, 9, 16, 25]// filter - 过滤数组
let evenNumbers = numbers.filter(function(num) {return num % 2 === 0; // 返回偶数
});
console.log("偶数:", evenNumbers); // [2, 4]// reduce - 累积计算
let sum = numbers.reduce(function(total, num) {return total + num;
}, 0);
console.log("总和:", sum); // 15// 查找和排序
let index = fruits.indexOf("香蕉");
console.log("香蕉的索引:", index); // 1let sortedFruits = fruits.sort(); // 排序
console.log("排序后:", sortedFruits);let reversedFruits = fruits.reverse(); // 反转
console.log("反转后:", reversedFruits);// 多维数组
let matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];
console.log("二维数组:", matrix);
console.log("中心元素:", matrix[1][1]); // 56、RegExp对象
正则表达式（Regular Expression）用于匹配字符串中的字符组合，提供强大的模式匹配和文本处理能力。
主要用途
- 验证表单输入
- 搜索和替换文本
- 提取字符串中的特定字符
// 创建正则表达式的两种方式
let pattern1 = /abc/; // 字面量方式
let pattern2 = new RegExp("abc"); // 构造函数方式// 正则表达式方法
let testString = "Hello, abc world! abc again!";// test() - 测试是否匹配
console.log("是否包含abc:", pattern1.test(testString)); // true// exec() - 执行搜索匹配
let result = pattern1.exec(testString);
console.log("匹配结果:", result); // ["abc", index: 7, input: "Hello, abc world! abc again!"]// 字符串方法配合正则表达式
// match() - 查找所有匹配
let matches = testString.match(/abc/g); // g表示全局匹配
console.log("所有匹配:", matches); // ["abc", "abc"]// replace() - 替换匹配文本
let newString = testString.replace(/abc/g, "XYZ");
console.log("替换后:", newString); // "Hello, XYZ world! XYZ again!"// search() - 查找匹配位置
let position = testString.search(/abc/);
console.log("首次出现位置:", position); // 7// split() - 根据模式分割字符串
let parts = testString.split(/\s+/); // 按空白字符分割
console.log("分割结果:", parts); // ["Hello,", "abc", "world!", "abc", "again!"]// 正则表达式修饰符
let globalPattern = /abc/g; // g: 全局匹配
let caseInsensitive = /abc/i; // i: 忽略大小写
let multiLine = /^abc/m; // m: 多行匹配// 常用模式示例
// 邮箱验证
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
console.log("邮箱验证:", emailPattern.test("user@example.com")); // true// 手机号验证（中国大陆）
let phonePattern = /^1[3-9]\d{9}$/;
console.log("手机号验证:", phonePattern.test("13800138000")); // true// URL匹配
let urlPattern = /https?:\/\/[^\s/$.?#].[^\s]*/;
console.log("URL匹配:", urlPattern.test("https://www.example.com")); // true// 提取信息
let dateString = "今天是2023-12-15，明天是2023-12-16";
let datePattern = /\d{4}-\d{2}-\d{2}/g;
let dates = dateString.match(datePattern);
console.log("提取的日期:", dates); // ["2023-12-15", "2023-12-16"]// 分组捕获
let namePattern = /(\w+)\s(\w+)/;
let nameMatch = "张三 李四".match(namePattern);
console.log("姓氏:", nameMatch[1]); // "张三"
console.log("名字:", nameMatch[2]); // "李四"7、Date对象
Date对象是javaScript中用于处理日期和时间的内置对象。他提供了丰富的方法来创建、获取、设置和操作日期时间值
7.1 创建 Date 对象
JavaScript 提供了多种方式来创建 Date 对象
// 1. 创建当前日期时间的Date对象
let now = new Date(); // 不传入任何参数，创建表示当前时间的Date对象
console.log("当前时间:", now); // 输出当前日期时间，如: Wed Dec 15 2023 14:30:25 GMT+0800// 2. 通过时间戳创建Date对象
let timestamp = 1671093025000; // 时间戳表示从1970年1月1日00:00:00 UTC开始的毫秒数
let dateFromTimestamp = new Date(timestamp); // 根据时间戳创建Date对象
console.log("时间戳对应时间:", dateFromTimestamp); // 输出: Wed Dec 15 2023 14:30:25 GMT+0800// 3. 通过日期字符串创建Date对象
let dateFromString = new Date("2023-12-15T14:30:25"); // 解析ISO格式日期字符串
console.log("字符串解析时间:", dateFromString); // 输出: Fri Dec 15 2023 14:30:25 GMT+0800// 4. 通过指定年、月、日等参数创建Date对象
// 注意：月份从0开始（0=一月，11=十二月）
let specificDate = new Date(2023, 11, 15, 14, 30, 25, 500); // 年,月,日,时,分,秒,毫秒
console.log("指定参数时间:", specificDate); // 输出: Fri Dec 15 2023 14:30:25 GMT+0800// 5. 使用Date.parse()方法解析日期字符串
let parsedDate = Date.parse("2023-12-15T14:30:25"); // 解析日期字符串，返回时间戳
console.log("解析后的时间戳:", parsedDate); // 输出: 1702614625000// 6. 使用Date.UTC()方法获取UTC时间戳
let utcTimestamp = Date.UTC(2023, 11, 15, 14, 30, 25); // 参数与构造函数相同，但返回UTC时间戳
console.log("UTC时间戳:", utcTimestamp); // 输出: 1702643425000// 7. 获取当前时间戳的快捷方式
let currentTimestamp = Date.now(); // 返回当前时间的时间戳
console.log("当前时间戳:", currentTimestamp); // 输出: 1702614625000（当前时间的毫秒数）7.2 获取日期时间信息
Date 对象提供了多种方法来获取日期时间的各个部分。
let date = new Date(2023, 11, 15, 14, 30, 25, 500); // 创建指定日期时间对象// 1. 获取时间戳
console.log("时间戳:", date.getTime()); // 输出: 1702614625000
console.log("时间戳:", date.valueOf()); // 输出: 1702614625000// 2. 获取年份
console.log("年份:", date.getFullYear()); // 输出: 2023（推荐使用）
console.log("年份:", date.getYear()); // 输出: 123（已废弃，返回当前年份减去1900）// 3. 获取月份（0-11，0=一月）
console.log("月份:", date.getMonth()); // 输出: 11（十二月）// 4. 获取日期（1-31）
console.log("日期:", date.getDate()); // 输出: 15// 5. 获取星期（0-6，0=星期日）
console.log("星期:", date.getDay()); // 输出: 5（星期五）// 6. 获取小时（0-23）
console.log("小时:", date.getHours()); // 输出: 14// 7. 获取分钟（0-59）
console.log("分钟:", date.getMinutes()); // 输出: 30// 8. 获取秒数（0-59）
console.log("秒数:", date.getSeconds()); // 输出: 25// 9. 获取毫秒（0-999）
console.log("毫秒:", date.getMilliseconds()); // 输出: 500// 10. 获取UTC时间的各个部分
console.log("UTC小时:", date.getUTCHours()); // 输出: 6（UTC时间比北京时间晚8小时）
console.log("UTC分钟:", date.getUTCMinutes()); // 输出: 30
console.log("UTC秒数:", date.getUTCSeconds()); // 输出: 25
console.log("UTC毫秒:", date.getUTCMilliseconds()); // 输出: 500// 11. 获取时区偏移（分钟）
console.log("时区偏移:", date.getTimezoneOffset()); // 输出: -480（北京时间比UTC早8小时，即480分钟）7.3设置日期时间信息
Date 对象也提供了相应的方法来设置日期时间的各个部分
let date = new Date(); // 创建当前日期时间对象
console.log("原始时间:", date); // 输出当前时间// 1. 设置年份
date.setFullYear(2024); // 设置年份为2024年
console.log("设置年份后:", date); // 输出: Sun Dec 15 2024 14:30:25 GMT+0800// 2. 设置月份（0-11，0=一月）
date.setMonth(5); // 设置月份为6月
console.log("设置月份后:", date); // 输出: Sat Jun 15 2024 14:30:25 GMT+0800// 3. 设置日期（1-31）
date.setDate(25); // 设置日期为25号
console.log("设置日期后:", date); // 输出: Tue Jun 25 2024 14:30:25 GMT+0800// 4. 设置小时（0-23）
date.setHours(18); // 设置小时为18点（下午6点）
console.log("设置小时后:", date); // 输出: Tue Jun 25 2024 18:30:25 GMT+0800// 5. 设置分钟（0-59）
date.setMinutes(45); // 设置分钟为45分
console.log("设置分钟后:", date); // 输出: Tue Jun 25 2024 18:45:25 GMT+0800// 6. 设置秒数（0-59）
date.setSeconds(10); // 设置秒数为10秒
console.log("设置秒数后:", date); // 输出: Tue Jun 25 2024 18:45:10 GMT+0800// 7. 设置毫秒（0-999）
date.setMilliseconds(250); // 设置毫秒为250毫秒
console.log("设置毫秒后:", date); // 输出: Tue Jun 25 2024 18:45:10 GMT+0800// 8. 使用时间戳设置日期时间
date.setTime(1702614625000); // 使用时间戳设置日期时间
console.log("使用时间戳设置后:", date); // 输出: Wed Dec 15 2023 14:30:25 GMT+0800// 9. 设置UTC时间的各个部分
date.setUTCFullYear(2025); // 设置UTC年份
date.setUTCMonth(0); // 设置UTC月份（1月）
date.setUTCDate(1); // 设置UTC日期
date.setUTCHours(12); // 设置UTC小时
date.setUTCMinutes(0); // 设置UTC分钟
date.setUTCSeconds(0); // 设置UTC秒数
date.setUTCMilliseconds(0); // 设置UTC毫秒console.log("设置UTC时间后:", date); // 输出: Wed Jan 01 2025 20:00:00 GMT+08007.4 日期时间格式化与转换
Date 对象提供了多种方法来格式化和转换日期时间。
let date = new Date(2023, 11, 15, 14, 30, 25); // 创建指定日期时间对象// 1. 转换为字符串
console.log("toString:", date.toString()); // 输出: "Fri Dec 15 2023 14:30:25 GMT+0800 (中国标准时间)"
console.log("toDateString:", date.toDateString()); // 输出: "Fri Dec 15 2023"（仅日期部分）
console.log("toTimeString:", date.toTimeString()); // 输出: "14:30:25 GMT+0800 (中国标准时间)"（仅时间部分）// 2. 转换为ISO格式字符串
console.log("toISOString:", date.toISOString()); // 输出: "2023-12-15T06:30:25.000Z"（UTC时间）// 3. 转换为JSON格式
console.log("toJSON:", date.toJSON()); // 输出: "2023-12-15T06:30:25.000Z"（与toISOString相同）// 4. 转换为本地格式字符串
console.log("toLocaleString:", date.toLocaleString()); // 输出: "2023/12/15 14:30:25"（本地格式）
console.log("toLocaleDateString:", date.toLocaleDateString()); // 输出: "2023/12/15"（本地日期格式）
console.log("toLocaleTimeString:", date.toLocaleTimeString()); // 输出: "14:30:25"（本地时间格式）// 5. 使用选项自定义格式化
let options = {weekday: 'long', // 长格式星期（如"星期五"）year: 'numeric', // 数字年份（如"2023"）month: 'long', // 长格式月份（如"十二月"）day: 'numeric', // 数字日期（如"15"）hour: '2-digit', // 两位小时（如"02"）minute: '2-digit', // 两位分钟（如"30"）second: '2-digit', // 两位秒数（如"25"）timeZoneName: 'short' // 时区简称（如"GMT+8"）
};console.log("自定义格式化:", date.toLocaleString('zh-CN', options)); // 输出: "2023年12月15日星期五 14:30:25 GMT+8"// 6. 转换为UTC字符串
console.log("toUTCString:", date.toUTCString()); // 输出: "Fri, 15 Dec 2023 06:30:25 GMT"（UTC时间）// 7. 获取时间戳的多种方式
console.log("getTime:", date.getTime()); // 输出: 1702614625000
console.log("valueOf:", date.valueOf()); // 输出: 1702614625000
console.log("Number(date):", Number(date)); // 输出: 1702614625000
console.log("+date:", +date); // 输出: 1702614625000（一元加号操作符）7.5 日期时间计算与比较
Date 对象可以用于进行日期时间的计算和比较。
// 1. 创建两个日期对象用于比较
let date1 = new Date(2023, 11, 15); // 2023年12月15日
let date2 = new Date(2023, 11, 20); // 2023年12月20日// 2. 日期比较
console.log("date1 < date2:", date1 < date2); // 输出: true
console.log("date1 > date2:", date1 > date2); // 输出: false
console.log("date1 == date2:", date1 == date2); // 输出: false（比较引用，不是值）// 3. 使用时间戳比较日期
console.log("date1.getTime() < date2.getTime():", date1.getTime() < date2.getTime()); // 输出: true// 4. 计算日期差值（毫秒）
let diffMs = date2 - date1; // 日期相减得到毫秒差
console.log("日期差值（毫秒）:", diffMs); // 输出: 432000000（5天的毫秒数）// 5. 将毫秒转换为天、小时、分钟、秒
let diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // 计算天数
let diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算小时数
let diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); // 计算分钟数
let diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000); // 计算秒数console.log(`时间差: ${diffDays}天 ${diffHours}小时 ${diffMinutes}分钟 ${diffSeconds}秒`); // 输出: "时间差: 5天 0小时 0分钟 0秒"// 6. 日期加减计算
let startDate = new Date(2023, 11, 15); // 2023年12月15日// 加5天
let endDate1 = new Date(startDate);
endDate1.setDate(startDate.getDate() + 5); // 日期加5天
console.log("加5天后:", endDate1.toDateString()); // 输出: "Wed Dec 20 2023"// 加2个月
let endDate2 = new Date(startDate);
endDate2.setMonth(startDate.getMonth() + 2); // 月份加2
console.log("加2个月后:", endDate2.toDateString()); // 输出: "Wed Feb 15 2024"// 减1年
let endDate3 = new Date(startDate);
endDate3.setFullYear(startDate.getFullYear() - 1); // 年份减1
console.log("减1年后:", endDate3.toDateString()); // 输出: "Thu Dec 15 2022"// 7. 计算两个日期之间的所有日期
function getDatesBetween(startDate, endDate) {let dates = [];let currentDate = new Date(startDate);while (currentDate <= endDate) {dates.push(new Date(currentDate)); // 添加当前日期副本currentDate.setDate(currentDate.getDate() + 1); // 日期加1天}return dates;
}let datesArray = getDatesBetween(new Date(2023, 11, 15), new Date(2023, 11, 20));
console.log("日期范围内的所有日期:");
datesArray.forEach(date => console.log(date.toDateString())); // 输出12月15日到20日的所有日期8、Window 对象 - 浏览器窗口的控制器
核心概念
Window 对象是浏览器环境中的全局对象，代表当前的浏览器窗口或标签页。它是整个 JavaScript 浏览器 API 的入口点。
// 1. 全局属性和方法实际上都是window的属性和方法
var globalVar = "我是全局变量";
console.log(window.globalVar); // "我是全局变量"function globalFunc() {return "我是全局函数";
}
console.log(window.globalFunc()); // "我是全局函数"// 2. 窗口尺寸和滚动信息
console.log("窗口宽度:", window.innerWidth); // 视口宽度（包含滚动条）
console.log("窗口高度:", window.innerHeight); // 视口高度
console.log("水平滚动距离:", window.scrollX); // 页面水平滚动距离
console.log("垂直滚动距离:", window.scrollY); // 页面垂直滚动距离// 3. 窗口操作
// 打开新窗口
let newWindow = window.open("https://www.example.com", "exampleWindow", "width=600,height=400");// 关闭当前窗口（通常需要用户交互）
// window.close();// 4. 定时器方法
// setTimeout - 延迟执行
let timeoutId = setTimeout(() => {console.log("2秒后执行");
}, 2000);// setInterval - 循环执行
let intervalId = setInterval(() => {console.log("每隔1秒执行");
}, 1000);// 清除定时器
// clearTimeout(timeoutId);
// clearInterval(intervalId);// 5. 对话框
// alert("提示信息"); // 警告框
// confirm("确定吗?"); // 确认框（返回布尔值）
// prompt("请输入:"); // 输入框（返回输入内容）// 6. 浏览器信息
console.log("用户代理:", navigator.userAgent); // 浏览器信息
console.log("页面URL:", location.href); // 当前页面URL9、History 对象 - 浏览器历史记录管理器
核心概念
History 对象允许操作浏览器的会话历史记录，实现页面的前进、后退和跳转
// 1. 获取历史记录信息
console.log("历史记录长度:", history.length); // 当前会话中的页面数量// 2. 导航方法
// history.back(); // 后退一页（相当于浏览器后退按钮）
// history.forward(); // 前进一页（相当于浏览器前进按钮）
// history.go(-2); // 后退两页
// history.go(1); // 前进一页
// history.go(0); // 刷新当前页// 3. 现代SPA应用使用的History API
// 添加新的历史记录（不会触发页面刷新）
history.pushState({page: 1}, "Page 1", "/page1");// 替换当前历史记录
history.replaceState({page: 2}, "Page 2", "/page2");// 监听popstate事件（用户点击前进/后退按钮时触发）
window.addEventListener('popstate', (event) => {console.log("导航状态变化:", event.state);// 通常在这里更新页面内容
});// 4. 实际应用示例 - SPA路由
function navigateTo(page) {const pages = {home: { title: "首页", url: "/home" },about: { title: "关于", url: "/about" },contact: { title: "联系", url: "/contact" }};const pageInfo = pages[page];if (pageInfo) {// 更新历史记录history.pushState(pageInfo, pageInfo.title, pageInfo.url);// 更新页面内容（不刷新）updatePageContent(pageInfo);}
}function updatePageContent(pageInfo) {document.title = pageInfo.title;// 这里实际会更新页面DOM内容console.log("切换到页面:", pageInfo.title);
}// 初始化监听
window.addEventListener('popstate', (event) => {if (event.state) {updatePageContent(event.state);}
});10 Location 对象 - URL 管理器
核心概念
Location 对象包含当前页面的 URL 信息，并允许操作和导航到新的 URL
// 1. 获取URL的各个部分
console.log("完整URL:", location.href); // https://example.com:8080/path/page.html?query=string#hash
console.log("协议:", location.protocol); // https:
console.log("主机名:", location.hostname); // example.com
console.log("端口:", location.port); // 8080
console.log("主机:", location.host); // example.com:8080
console.log("路径:", location.pathname); // /path/page.html
console.log("查询参数:", location.search); // ?query=string
console.log("哈希值:", location.hash); // #hash
console.log("源:", location.origin); // https://example.com:8080// 2. URL导航操作
// 跳转到新页面（生成历史记录）
// location.href = "https://newpage.com"; // 替换当前页面（不生成历史记录）
// location.replace("https://newpage.com");// 重新加载页面
// location.reload(); // 可能从缓存加载
// location.reload(true); // 强制从服务器重新加载// 3. 操作URL各部分
// 只改变哈希部分（不会刷新页面）
location.hash = "#section2";// 改变查询参数（会刷新页面）
// location.search = "?page=2&sort=name";// 4. 解析查询参数实用函数
function getQueryParams() {const params = {};const searchParams = new URLSearchParams(location.search);for (let [key, value] of searchParams) {params[key] = value;}return params;
}// 示例：https://example.com?page=2&sort=name
const params = getQueryParams();
console.log("当前页码:", params.page); // "2"
console.log("排序方式:", params.sort); // "name"// 5. 构建URL查询参数
function buildUrl(baseUrl, params) {const url = new URL(baseUrl);Object.keys(params).forEach(key => {url.searchParams.set(key, params[key]);});return url.toString();
}const newUrl = buildUrl('https://example.com', {page: 2,sort: 'name',filter: 'active'
});
console.log("构建的URL:", newUrl); // https://example.com/?page=2&sort=name&filter=active小结
| 对象 | 职责 | 主要功能 |
|---|---|---|
| Window | 浏览器窗口总控 | 全局对象、窗口操作、定时器、对话框 |
| History | 历史记录管理 | 前进/后退、SPA路由、历史状态管理 |
| Location | URL管理 | URL解析、页面导航、参数处理 |
关键点：
- Window 是顶层对象，包含其他所有 BOM 对象
- History 用于管理浏览器历史记录，实现无刷新导航
- Location 用于操作和解析 URL 地址
- 三者配合可以构建现代单页面应用（SPA）
- 这些对象只在浏览器环境中可用，Node.js 中不存在