一、Function类:可以表示开发者定义的任何函数。
1、创建函数:
1、函数声明 使用 function 关键字和函数名进行定义:
function add(num1, num2) {
return num1 + num2;
}
2、函数表达式 将函数赋值给一个变量,这种方式也称为匿名函数:
var sum = function(num1, num2) {
return num1 + num2;
};
2、属性:
以下是 function 类型中常见属性:
- name:函数的名称字符串,在函数被声明时指定,也可以通过函数对象的 name 属性进行访问。
- length:函数希望接收的参数数量。通俗点说,就是函数参数的个数。
- toString:返回函数的源代码字符串表示形式。
- prototype:用于为所有实例化对象添加属性或方法。
- 在 JavaScript 中,function 是一种数据类型,可以被定义、分配和传递。函数本身也包含一些内置的属性,如 name, length, toString, prototype 和 arguments。
- arguments:一个特殊对象,它是一个类数组对象(Array-like object),包含当前正在执行的函数中传入的参数列表。
// 1. name 属性
function sayHello() {
console.log('Hello!');
}
console.log(sayHello.name); // 输出 "sayHello"
// 2. length 属性
function add(x, y) {
return x + y;
}
console.log(add.length); // 输出 2
// 3. toString() 方法
function displayMessage(message) {
console.log(message);
}
console.log(displayMessage.toString());
// 输出 "function displayMessage(message) {\n console.log(message);\n}"
// 4. prototype 属性
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log('Hello, my name is ' + this.name);
};
var person1 = new Person('Alice');
person1.sayHello(); // 输出 "Hello, my name is Alice"
// 5. arguments 对象
function sum() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.log(sum(1, 2, 3, 4, 5)); // 输出 15
console.log(sum(10, 20)); // 输出 30
//在上述示例中,sum 函数没有定义任何形式参数,
//但我们可以通过在函数调用时传递不确定数量的实参来调用它。
//在函数体内,我们通过 arguments 属性来获取所有传递给函数的实际参数,
//并使用 for 循环将它们累加起来。
3、特点:
- 可以作为变量使用:在 JavaScript 中,函数可以像其他任何值一样被赋值、传递和操作。这意味着函数可以作为变量来使用,使得程序更加灵活和复杂。
- 代码重用:函数允许开发人员编写可重用的代码块,从而减少了代码的重复和冗余。可以将某些代码拆分成独立的函数来提高代码维护性和可读性。
- 封装:函数可以使用局部变量来隐藏其内部实现,并只公开必要的接口。这有助于开发人员设计模块化和可靠的程序。
- 支持递归:JavaScript 函数支持递归(即函数可以调用自身),这使得处理问题更加简单和优雅。
- 高阶函数:JavaScript 函数允许传递函数作为参数,并且返回一个函数,这使得函数可以作为高阶函数来使用,从而使得程序更加完善和强大。
二、Array对象
1、创建语法:
var arr = [element0, element1, ..., elementN];
其中,arr 是我们定义的数组名称,element0 到 elementN 是该数组中要存储的元素。这些元素可以是字符串、数字、布尔值或任何其他类型的 JavaScript 对象,甚至可以是其他数组。
//使用数组创建一个学生姓名列表,并打印列表中的每个名称:
var students = ['Alice', 'Bob', 'Carol'];
for (var i = 0; i < students.length; i++) {
console.log(students[i]);
}
//在这个示例中,我们创建了一个名为 students 的数组,
//包含三个字符串,分别是 Alice、Bob 和 Carol。
//接下来,我们使用 for 循环遍历数组中的每个元素,并使用 console.log() 函数将其打印到控制台上。
2、访问数组元素:[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。
var arr = ["apple", "banana", "cherry"];
console.log(arr[0]); // "apple"
console.log(arr[1]); // "banana"
console.log(arr[2]); // "cherry"
//在这个示例中,我们创建了一个包含三个字符串元素的数组。
//然后我们使用方括号来访问数组中的各个元素,并将它们打印到控制台上。
3、Array方法:
方法 | 描述 |
---|---|
concat() | 连接两个或多个数组,并返回已连接数组的副本。 |
copyWithin() | 将数组中的数组元素复制到指定位置或从指定位置复制。 |
entries() | 返回键/值对数组迭代对象。 |
every() | 检查数组中的每个元素是否通过测试。 |
fill() | 用静态值填充数组中的元素。 |
filter() | 使用数组中通过测试的每个元素创建新数组。 |
find() | 返回数组中第一个通过测试的元素的值。 |
findIndex() | 返回数组中通过测试的第一个元素的索引。 |
forEach() | 为每个数组元素调用函数。 |
from() | 从对象创建数组。 |
includes() | 检查数组是否包含指定的元素。 |
indexOf() | 在数组中搜索元素并返回其位置。 |
isArray() | 检查对象是否为数组。 |
join() | 将数组的所有元素连接成一个字符串。 |
keys() | 返回 Array Iteration 对象,包含原始数组的键. |
lastIndexOf() | 在数组中搜索元素,从末尾开始,并返回其位置。 |
map() | 使用为每个数组元素调用函数的结果创建新数组。 |
pop() | 删除数组的最后一个元素,并返回该元素。 |
push() | 将新元素添加到数组的末尾,并返回新的长度。 |
reduce() | 将数组的值减为单个值(从左到右)。 |
reduceRight() | 将数组的值减为单个值(从右到左)。 |
reverse() | 反转数组中元素的顺序。 |
shift() | 删除数组的第一个元素,并返回该元素。 |
slice() | 选择数组的一部分,并返回新数组。 |
some() | 检查数组中的任何元素是否通过测试。 |
sort() | 对数组的元素进行排序。 |
splice() | 从数组中添加/删除元素。 |
toString() | 将数组转换为字符串,并返回结果。 |
unshift() | 将新元素添加到数组的开头,并返回新的长度。 |
valueOf() | 返回数组的原始值。 |
4、Array属性:
- length: 获取数组元素的数量。
- constructor: 返回用于创建数组对象的函数的引用。
- prototype: 允许您向数组添加自定义属性和方法。
var arr = ["apple", "banana", "cherry"];
console.log(arr.length); // 3
console.log(arr.constructor); // Array()
console.log(arr.prototype); // []
5、特点:
- 有序集合:数组是有序的值的集合,每个值在数组中有一个唯一的位置。
- 可以放入任何类型的数据:数组中可以存放任何类型的 JavaScript 数据:字符串、数字、布尔值、对象、函数等。
- 长度不固定:JavaScript 数组没有长度限制,可以动态地添加或删除元素,以满足程序的实际需求。
- 可以嵌套:JavaScript 数组可以嵌套,也就是说,其中的元素可以是另一个数组。
- 能够使用索引访问元素:可以使用数字索引来访问数组中的元素。
- 支持多种方法:JavaScript 数组提供了丰富的方法来操作其中的元素,例如增删查改、排序、迭代、过滤、映射等。
6、使用数组方法的综合示例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
//用 push() 方法向其中添加了一种新的水果 kiwi
// ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
fruits.pop();
//用 pop() 方法将其删除
// ["Banana", "Orange", "Apple", "Mango"]
fruits.unshift("Lemon", "Pineapple");
//使用 unshift() 方法向数组的开头添加了两种新的水果 lemon 和 pineapple
// ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]
fruits.shift();
//用 shift() 方法从数组开头移除了第一种水果
// ["Pineapple", "Banana", "Orange", "Apple", "Mango"]
var slicedFruits = fruits.slice(1, 4);
//用 slice() 方法提取了数组中的前三种水果
// ["Banana", "Orange", "Apple"]
fruits.splice(2, 0, "Pear", "Cherry");
//用 splice() 方法向数组中插入了 pear 和 cherry 的名称
// ["Pineapple", "Banana", "Pear", "Cherry", "Orange", "Apple", "Mango"]
var fruitsString = fruits.join(" and ");
//用 join() 方法将这些名称组合成一个字符串以便于打印和显示
// "Pineapple and Banana and Pear and Cherry and Orange and Apple and Mango"
fruits.sort();
//排序
// ["Apple", "Banana", "Cherry", "Mango", "Orange", "Pear", "Pineapple"]
fruits.reverse();
//反转
// ["Pineapple", "Pear", "Orange", "Mango", "Cherry", "Banana", "Apple"]
三、Date 对象
1、创建:Date 对象用于处理日期和时间。日期对象是用 new Date() 创建的。实例化日期有四种方式:
1、使用 new Date() 构造函数创建一个表示当前时间的 Date 对象。
var now = new Date();
2、使用 new Date(毫秒数) 构造函数创建一个指定时间戳的 Date 对象。
需要传入一个自 1970 年 1 月 1 日以来的毫秒数。
var time = new Date(1621013915000);
3、使用 new Date(年, 月, 日, 时, 分, 秒) 构造函数创建一个指定日期时间的 Date 对象。
需要传入六个整数参数:年份(四位数字)、月份(从零开始到十一)、日期、小时、分钟和秒钟。
var date = new Date(2023, 4, 14, 15, 30, 0);
注意,月份从 0 开始计算,因此 4 表示五月。
4、使用 new Date("日期字符串") 构造函数创建一个指定日期时间的 Date 对象。
可以传入不同格式的字符串,例如 YYYY/MM/DD, MM/DD/YYYY等。
var str = "2023-05-14";
var date = new Date(str);
// 或者
var str = "2023/05/14";
var date = new Date(str);
2、方法:
方法 | 描述 |
---|---|
getDate() | 返回月中的第几天(从 1 到 31)。 |
getDay() | 返回星期几(0-6)。 |
getFullYear() | 返回年份。 |
getHours() | 返回小时(从 0-23)。 |
getMilliseconds() | 返回毫秒(0-999)。 |
getMinutes() | 返回分钟(从 0-59)。 |
getMonth() | 返回月份(从 0-11)。 |
getSeconds() | 返回秒数(从 0-59)。 |
getTime() | 返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。 |
getTimezoneOffset() | 返回 UTC 时间与本地时间之间的时差,以分钟为单位。 |
getUTCDate() | 根据世界时,返回月份中的第几天(从 1 到 31)。 |
getUTCDay() | 根据世界时,返回星期几(0-6)。 |
getUTCFullYear() | 根据世界时,返回年份。 |
getUTCHours() | 根据世界时,返回小时(0-23)。 |
getUTCMilliseconds() | 根据世界时,返回毫秒数(0-999)。 |
getUTCMinutes() | 根据世界时,返回分钟(0-59)。 |
getUTCMonth() | 根据世界时,返回月份(0-11)。 |
getUTCSeconds() | 根据世界时,返回秒数(0-59)。 |
now() | 返回自 1970 年 1 月 1 日午夜以来的毫秒数。 |
parse() | 解析日期字符串并返回自 1970 年 1 月 1 日以来的毫秒数。 |
setDate() | 设置 Date 对象中月的某一天。 |
setFullYear() | 设置日期对象的年份 |
setHours() | 设置日期对象的小时。 |
setMilliseconds() | 设置日期对象的毫秒数。 |
setMinutes() | 设置日期对象的分钟数。 |
setMonth() | 设置日期对象的月份。 |
setSeconds() | 设置日期对象的秒数。 |
setTime() | 将日期设置为 1970 年 1 月 1 日之后/之前的指定毫秒数。 |
setUTCDate() | 根据世界时,设置 Date 对象中月份的一天。 |
setUTCFullYear() | 根据世界时,设置日期对象的年份。 |
setUTCHours() | 根据世界时,设置日期对象的小时。 |
setUTCMilliseconds() | 根据世界时,设置日期对象的毫秒数。 |
setUTCMinutes() | 根据世界时,设置日期对象的分钟数。 |
setUTCMonth() | 根据世界时,设置日期对象的月份。 |
setUTCSeconds() | 根据世界时,设置日期对象的秒数。 |
toDateString() | 将 Date 对象的日期部分转换为可读字符串。 |
toISOString() | 使用 ISO 标准将日期作为字符串返回。 |
toJSON() | 以字符串形式返回日期,格式为 JSON 日期。 |
toLocaleDateString() | 使用区域设置约定将 Date 对象的日期部分作为字符串返回。 |
toLocaleTimeString() | 使用区域设置约定将 Date 对象的时间部分作为字符串返回。 |
toLocaleString() | 使用区域设置约定将 Date 对象转换为字符串。 |
toString() | 将 Date 对象转换为字符串。 |
toTimeString() | 将 Date 对象的时间部分转换为字符串。 |
toUTCString() | 根据世界时,将 Date 对象转换为字符串。 |
UTC() | 根据 UTC 时间,返回自 1970 年 1 月 1 日午夜以来的日期中的毫秒数。 |
valueOf() | 返回 Date 对象的原始值。 |
四、Math
Math 对象允许执行数学任务。Math 不是构造函数。Math 的所有属性/方法都可以通过使用 Math 作为对象来调用,而无需创建它。
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值。 |
acos(x) | 返回 x 的反余弦值,以弧度为单位。 |
acosh(x) | 返回 x 的双曲反余弦值。 |
asin(x) | 返回 x 的反正弦值,以弧度为单位。 |
asinh(x) | 返回 x 的双曲反正弦值。 |
atan(x) | 返回 x 的反正切值,返回的值是 -PI/2 到 PI/2 之间的弧度值。 |
atan2(y, x) | 返回其参数商的反正切值。 |
atanh(x) | 返回 x 的双曲反正切值。 |
cbrt(x) | 返回 x 的三次方根。 |
ceil(x) | 返回 x,向上舍入为最接近的整数。 |
clz32(x) | 返回 x 的 32 位二进制表示中前导零的数量。 |
cos(x) | 返回 x 的余弦值(x 以弧度为单位)。 |
cosh(x) | 返回 x 的双曲余弦值。 |
exp(x) | 返回 Ex 的值。 |
expm1(x) | 返回 Ex 减去 1 的值。 |
floor(x) | 返回 x,向下舍入为最接近的整数。 |
fround(x) | 返回数的最接近的(32 位单精度)浮点表示。 |
log(x) | 返回 x 的自然对数。 |
log10(x) | 返回 x 的以 10 为底的对数。 |
log1p(x) | 返回 1 + x 的自然对数。 |
log2(x) | 返回 x 的以 2 为底的对数。 |
max(x, y, z, ..., n) | 返回值最高的数字。 |
min(x, y, z, ..., n) | 返回值最小的数字。 |
pow(x, y) | 返回 x 的 y 次幂值。 |
random() | 返回 0 到 1 之间的随机数。(含0,不含1) |
round(x) | 将 x 舍入为最接近的整数。 |
sign(x) | 返回数的符号(检查它是正数、负数还是零)。 |
sin(x) | 返回 x 的正弦值(x 以弧度为单位)。 |
sinh(x) | 返回 x 的双曲正弦值。 |
sqrt(x) | 返回 x 的平方根。 |
tan(x) | 返回角度的正切值。 |
tanh(x) | 返回数的双曲正切值。 |
trunc(x) | 返回数字 (x) 的整数部分。 |
console.log(Math.PI); // 输出 3.141592653589793
var num = -10.5;
console.log(Math.abs(num)); // 输出 10.5
var num1 = 3.5;
console.log(Math.ceil(num1)); // 输出 4
var num2 = 3.9;
console.log(Math.floor(num2)); // 输出 3
var maxNum = Math.max(1, 10, 20);
console.log(maxNum); // 输出 20
var minNum = Math.min(5, 10, -1);
console.log(minNum); // 输出 -1
var powNum = Math.pow(2, 3);
console.log(powNum); // 输出 8
var roundNum = Math.round(3.6);
console.log(roundNum); // 输出 4
var sqrtNum = Math.sqrt(16);
console.log(sqrtNum); // 输出 4
五、RegExp:正则表达式
正则表达式是构成搜索模式的字符序列。该搜索模式可用于文本搜索和文本替换操作。
正则表达式:/pattern/attributes
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
1、正则表达式对象的创建:
1、使用构造函数来创建正则表达式对象:
var pattern = new RegExp( 'hello', 'i' );
RegExp 构造函数接受两个参数,第一个参数表示要匹配的字符串模式,第二个参数是可选的标志,可以用来设置正则表达式的行为。
2、使用正则表达式字面量来创建正则表达式对象:
var pattern = /hello/i;
正则表达式字面量由一对斜杠符号包裹着要匹配的字符串模式,后面跟着可选的标志字符。
2、RegExp 对象方法
方法 | 描述 |
---|---|
exec() | 测试字符串中的匹配项。返回第一个匹配项。 |
test() | 测试字符串中的匹配项。返回 true 或 false。 |
toString() | 返回正则表达式的字符串值。 |
创建完成后的正则表达式对象可以对字符串进行搜索、匹配、替换等操作,常用的方法包括:test()、exec() 等。例如:
var str = 'Hello world';
var pattern = /hello/i;
console.log(pattern.test(str)); // true
console.log(pattern.exec(str)); // ["Hello", index: 0, input: "Hello world", groups: undefined]
console.log(str.match(pattern)); // ["Hello", index: 0, input: "Hello world", groups: undefined]
console.log(str.replace(pattern, 'Hi')); // "Hi world"
支持正则表达式的 String 对象的方法
方法 | 描述 |
---|---|
search | 检索与正则表达式相匹配的值。 |
match | 找到一个或多个正则表达式的匹配。 |
replace | 替换与正则表达式匹配的子串。 |
split | 把字符串分割为字符串数组。 |
修饰符用于执行不区分大小写和全局的搜索:
修饰符 | 描述 |
---|---|
g | 执行全局匹配(查找所有匹配而不是在第一个匹配后停止)。 |
i | 执行不区分大小写的匹配。 |
m | 执行多行匹配。 |
方括号用于查找某个范围内的字符:
表达式 | 描述 |
---|---|
[abc] | 查找括号之间的任何字符。 |
[^abc] | 查找任何不在方括号之间的字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
[^0-9] | 查找任何不在括号内的字符(任何非数字)。 |
(x|y) | 查找任何指定的选项。 |
元字符是具有特殊含义的字符:
元字符 | 描述 |
---|---|
. | 查找单个字符,除了换行符或行终止符。 |
\w | 查找单词字符。 |
\W | 查找非单词字符。 |
\d | 查找数字。 |
\D | 查找非数字字符。 |
\s | 查找空白字符。 |
\S | 查找非空白字符。 |
\b | 在单词的开头/结尾查找匹配项,开头如下:\bHI,结尾如下:HI\b。 |
\B | 查找匹配项,但不在单词的开头/结尾处。 |
\0 | 查找 NULL 字符。 |
\n | 查找换行符。 |
\f | 查找换页符。 |
\r | 查找回车符。 |
\t | 查找制表符。 |
\v | 查找垂直制表符。 |
\xxx | 查找以八进制数 xxx 规定的字符。 |
\xdd | 查找以十六进制数 dd 规定的字符。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
n{X} | 匹配包含 X 个 n 的序列的字符串。 |
n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
n$ | 匹配任何以 n 结尾的字符串。 |
^n | 匹配任何以 n 开头的字符串。 |
?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
RegExp 对象属性
属性 | 描述 |
---|---|
constructor | 返回创建 RegExp 对象原型的函数。 |
global | 检查是否设置了 "g" 修饰符。 |
ignoreCase | 检查是否设置了 "i" 修饰符。 |
lastIndex | 规定开始下一个匹配的索引。 |
multiline | 检查是否设置了 "m" 修饰符。 |
source | 返回 RegExp 模式的文本。 |
六、Global 全局对象
在 JavaScript 中,global 是一个顶级(全局)对象,它是在浏览器端的 JavaScript 环境中的 window 对象,在 Node.js 环境中则称为 global。
global 对象包含了所有全局范围内可以访问的变量、函数和对象,因此可以直接通过 global 访问这些对象。
需要注意的是,如何使用 global 对象和它所包含的属性和方法会根据不同的编程环境而有所不同。以下将分别介绍在浏览器和 Node.js 中 global 对象的不同用法以及常见的属性和方法。
1、在浏览器中:该对象包含了所有的全局属性和方法,并且也是其他所有 JavaScript 对象的父对象。以下是一些常用的 window 对象属性和方法:
- window.setTimeout():设置一个定时器,在指定的时间段后执行特定的代码。
- window.setInterval():连续的设置定时器,重复的调用指定的代码。
- window.clearTimeout():取消由 setTimeout() 方法设置的定时操作。
- window.clearInterval():取消由 setInterval() 方法设置的多次定时器操作。
- window.document:表示当前文档 DOM 的根节点,可以使用它来操纵 HTML 文档的内容和结构。
- window.location:表示当前文档的 URL 信息,可以使用它来获取或设置 URL。
- window.navigator:表示客户端浏览器的信息,如浏览器类型、版本等。
2、在 Node.js 中:global 对象与 window 对象类似,但包含了一些附加的属性和方法。
- global.console:类似于浏览器中的 console 对象,提供了许多输出调试信息的方法,如 .log()、.warn()、.error() 等。
- global.process:process 是一个全局对象,提供了与当前 Node.js 进程相关的功能和状态。它是一个 EventEmitter 实例。
- global.require():用于加载模块。在 Node.js 中,所有的模块都必须使用 require() 方法加载后才能使用。
- global.setImmediate() 和 global.setTimeout():设置定时器,在指定时间段后执行代码。这两个函数略微不同,setImmediate()函数会立即异步地执行回调函数,而 setTimeout() 函数则是在设定的固定时间量后异步地执行回调函数。
- global.Buffer:Buffer 类是用于在 JavaScript 中处理二进制数据的类。它类似于数组,但专门用于存储原始的二进制数据。
需要注意的是,全局作用域是 JavaScript 中最容易导致命名冲突和代码不可重用的地方,所以应当尽可能避免使用全局变量或对象,而应该采用模块化的方式来组织代码。
JavaScript 全局函数
函数 | 描述 |
---|---|
decodeURI() | 解码 URI。 |
decodeURIComponent() | 解码 URI 组件。 |
encodeURI() | 对 URI 进行编码。 |
encodeURIComponent() | 对 URI 组件进行编码。 |
eval() | 评估字符串并像脚本代码一样执行它。 |
isFinite() | 确定值是否是有限的合法数。 |
isNaN() | 确定值是否是非法数字。 |
Number() | 将对象的值转换为数字。 |
parseFloat() | 解析字符串并返回浮点数。 |
parseInt() | 解析字符串并返回整数。 |
String() | 将对象的值转换为字符串。 |