JavaScript 常用的内置函数
数组(Array)方法
length
属性
length
表示数组中元素的个数,是数组的长度。
const arr: number[] = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出: 5
length
是一个动态属性,会根据数组的变化自动更新。如果手动修改 length,数组会被截断或扩展。
const arr: number[] = [1, 2, 3, 4, 5];
arr.length = 3; // 将长度改为 3,数组被截断
console.log(arr); // 输出: [1, 2, 3]
arr.length = 7; // 将长度改为 7,增加空槽
console.log(arr); // 输出: [1, 2, 3, <4 empty items>]
push(...items)
push
方法用于向数组末尾添加一个或多个元素,并返回数组的新长度。push
不会生成新的数组,而是修改原数组。如果需要链式调用,
const arr: string[] = ["a", "b"];
const newLength = arr.push("c", "d");
console.log(arr); // 输出: ["a", "b", "c", "d"]
console.log(newLength); // 输出: 4
需要注意的是 push
返回的是数组的新长度,而不是数组本身。
const arr: string[] = [];
console.log(arr.push("a").push("b")); // 报错,`push` 返回长度而不是数组
pop()
pop
从数组末尾移除一个元素,并返回被移除的元素。如果数组为空,pop
返回 undefined
。pop
是会修改原数组的方法。所以需要注意内存指向。
const arr: number[] = [1, 2, 3];
const removed = arr.pop();
console.log(arr); // 输出: [1, 2]
console.log(removed); // 输出: 3
shift()
shift
从数组头部移除一个元素,并返回被移除的元素。和 pop
类似,但移除的是第一个元素,数组中的元素会向前移动。操作空数组时返回 undefined
,但不会报错。
const arr: number[] = [1, 2, 3];
const removed = arr.shift();
console.log(arr); // 输出: [2, 3]
console.log(removed); // 输出: 1
unshift(...items)
unshift
在数组头部添加一个或多个元素,并返回数组的新长度。新增的元素会插入到数组头部,其他元素会依次后移。
和 push
类似,unshift
返回的是新长度,而不是数组本身。
const arr: number[] = [3, 4];
const newLength = arr.unshift(1, 2);
console.log(arr); // 输出: [1, 2, 3, 4]
console.log(newLength); // 输出: 4
indexOf(element, startIndex?)
indexOf
查找数组中第一次出现的指定元素的索引,找不到返回 -1
。和字符串的indexOf
用法是一样的。indexOf
使用严格相等(===)比较,NaN
不会被找到。
const arr: string[] = ["a", "b", "c", "a"];
console.log(arr.indexOf("a")); // 输出: 0
console.log(arr.indexOf("a", 1)); // 输出: 3,从索引 1 开始查找
console.log(arr.indexOf("d")); // 输出: -1,未找到
如果查找对象或复杂结构,可能会返回 -1
即使内容相同,因为比较的是引用地址。需要注意数据在内存的 this
指向。
const obj = { key: "value" };
const arr = [obj];
console.log(arr.indexOf({ key: "value" })); // 输出: -1,不同引用
lastIndexOf(element, fromIndex?)
lastIndexOf
查找数组中指定元素的最后一次出现的索引,找不到返回 -1
。和 indexOf
类似,但方向是从右向左
。
const arr: string[] = ["a", "b", "a"];
console.log(arr.lastIndexOf("a")); // 输出: 2
console.log(arr.lastIndexOf("a", 1)); // 输出: 0,从索引 1 向前查找
console.log(arr.lastIndexOf("d")); // 输出: -1,未找到
splice(start, deleteCount, ...items?)
splice
用于删除、替换或插入元素。start
是起始索引,deleteCount
是删除的数量,后面的参数是要插入的元素。splice
修改的是原数组,而不是返回新数组。
const arr: number[] = [1, 2, 3, 4];
arr.splice(1, 2, 5, 6); // 从索引 1 开始,删除 2 个元素,并插入 5 和 6
console.log(arr); // 输出: [1, 5, 6, 4]
slice(start, end?)
slice
返回一个新的数组,包含从 start
到 end(不包括 end)
的元素。
const arr: number[] = [1, 2, 3, 4];
const newArr = arr.slice(1, 3);
console.log(newArr); // 输出: [2, 3]
console.log(arr); // 原数组未改变: [1, 2, 3, 4]
对象(Object)方法
Object.keys()
Object.keys()
方法返回一个包含对象自身可枚举属性名称的数组。这个方法常用于遍历对象的属性。
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // 输出: ["a", "b", "c"]
Object.values()
Object.values()
方法返回一个包含对象自身可枚举属性值的数组。这个方法常用于获取对象的所有值。
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // 输出: [1, 2, 3]
Object.entries()
Object.entries()
方法返回一个包含对象自身可枚举属性的键值对数组。每个键值对都是一个数组,包含两个元素:属性名称和属性值。
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // 输出: [["a", 1], ["b", 2], ["c", 3]]
Object.assign()
Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // 输出: [["a", 1], ["b", 2], ["c", 3]]
Object.freeze()
Object.freeze()
方法可以冻结一个对象。冻结后的对象不能再被修改;即不能添加新属性,不能删除已有属性,不能修改已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。冻结一个对象后返回该对象
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // 无效操作
console.log(obj.a); // 输出: 1
Object.seal()
Object.seal()
方法可以封闭一个对象,防止添加新属性并将所有现有属性标记为不可配置。现有属性的值仍然可以改变。
const obj = { a: 1 };
Object.seal(obj);
obj.a = 2; // 有效操作
delete obj.a; // 无效操作
console.log(obj.a); // 输出: 2
Object.create()
Object.create()
方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__
。
const proto = { a: 1 };
const obj = Object.create(proto);
console.log(obj.a); // 输出: 1
Object.defineProperty()
Object.defineProperty()
方法直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。
const obj = {};
Object.defineProperty(obj, 'a', {
value: 1,
writable: true,
enumerable: true,
configurable: true
});
console.log(obj.a); // 输出: 1
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor()
方法返回指定对象上一个自有属性对应的属性描述符。
const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptor); // 输出: { value: 1, writable: true, enumerable: true, configurable: true }
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()
方法返回指定对象所有自身属性(非继承属性)的描述符。
const obj = { a: 1, b: 2 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// 输出:
// {
// a: { value: 1, writable: true, enumerable: true, configurable: true },
// b: { value: 2, writable: true, enumerable: true, configurable: true }
// }
Object.getPrototypeOf()
Object.getPrototypeOf()
方法返回指定对象的原型(即内部的 [[Prototype]]
属性的值)。
const proto = { a: 1 };
const obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj)); // 输出: { a: 1 }
Object.setPrototypeOf()
Object.setPrototypeOf()
方法设置一个指定的对象的原型(即内部的 [[Prototype]]
属性)。
const proto = { a: 1 };
const obj = {};
Object.setPrototypeOf(obj, proto);
console.log(obj.a); // 输出: 1
Object.is()
Object.is()
方法判断两个值是否是相同的值。与严格比较(===
)不同的是,Object.is()
认为 NaN
等于 NaN
,且认为 +0
和 -0
不相同。
console.log(Object.is(25, 25)); // 输出: true
console.log(Object.is(NaN, NaN)); // 输出: true
console.log(Object.is(+0, -0)); // 输出: false
Object.fromEntries()
Object.fromEntries()
方法将一个键值对数组转换为一个对象。这个方法是 Object.entries()
的逆操作。
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // 输出: { a: 1, b: 2 }
Object.hasOwn()
Object.hasOwn()
方法返回一个布尔值,表示某个对象是否具有指定的属性作为自身 (不继承) 属性。这个方法是 Object.prototype.hasOwnProperty()
的简写。
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // 输出: true
console.log(Object.hasOwn(obj, 'b')); // 输出: false
全局函数
JavaScript的全局函数是指在任何地方都可以直接访问并调用的函数。这些函数不依赖于任何对象实例,可以在代码中直接使用。
eval()
eval()
函数用来计算字符串中的 JavaScript 代码。
将字符串作为代码执行, 它接收一个字符串作为参数,并将字符串作为 JavaScript 代码执行。
let siminAge = 25;
let expression = 'siminAge + 5';
let result = eval(expression);
console.log(result); // 30
isNaN()
isNaN()
函数用来判断一个值是否是 NaN
。如果值是 NaN
,则返回 true
,否则返回 false
。这个函数可以帮助处理数值时进行类型检查。
let age = 25;
let input = 'hello';
console.log(isNaN(age)); // false
console.log(isNaN(input)); // true
但是,isNaN()
函数存在一些缺陷,特别是在处理一些非数值类型时,可能会返回意料之外的结果
例如,isNaN()
会认为一些既不是数字也不是 NaN
的值(如空字符串、undefined、null 等)也应当返回 true
。这容易引起混淆,导致判断失误。
let validAge = 25;
let notANumber = 'hello';
let undefinedValue;
console.log(isNaN(validAge)); // false
console.log(isNaN(notANumber)); // true
console.log(isNaN(undefinedValue)); // true
isNaN()
对 undefined
和非数字类型的值(如字符串 'hello')都会返回 true
,但这些值并不等于 NaN
。
解决办法:使用 Number.isNaN()
Number.isNaN()
只会对真正的 NaN
返回 true
,解决了 isNaN()
在判断非数字值时的缺陷。
console.log(Number.isNaN(validAge)); // false
console.log(Number.isNaN('hello')); // false
console.log(Number.isNaN(NaN)); // true
parseInt()
parseInt()
函数用于将字符串解析成整数。如果字符串无法转换成有效的整数,则返回 NaN
。这个函数常用于处理用户输入的数据,确保数据格式正确。但也可能返回意外的结果。
let ageStr = '25';
let invalidStr = 'simin';
console.log(parseInt(ageStr)); // 25
console.log(parseInt(invalidStr)); // NaN
这里,parseInt(ageStr)
返回 25
,而 parseInt(invalidStr)
返回 NaN
,因为字符串无法转换成整数。
let str1 = '25px';
let str2 = '100.5';
let str3 = 'hello';
console.log(parseInt(str1)); // 25
console.log(parseInt(str2)); // 100
console.log(parseInt(str3)); // NaN
parseInt('25px')
返回 25
,忽略了字符 'px' 后面的部分。 parseInt('100.5')
返回 100
,因为它只解析整数部分。 对于 'hello' 这样的字符串,parseInt()
返回 NaN
,因为无法解析出有效的整数。
parseFloat
parseFloat()
用于将字符串解析为浮动数。与 parseInt()
类似,它会尽量从字符串中提取出一个浮动数,直到遇到无法解析的字符为止。
let str1 = '25.5px';
let str2 = '100.99';
let str3 = 'hello';
console.log(parseFloat(str1)); // 25.5
console.log(parseFloat(str2)); // 100.99
console.log(parseFloat(str3)); // NaN
setTimeout()
setTimeout()
用于在指定的延迟时间后执行某个函数。这个函数常用于延迟执行操作。
setTimeout(() => {
console.log('Hello World.');
}, 2000);
clearTimeout()
clearInterval()
用于取消通过 setInterval()
设置的定时器。它能够停止定时任务的执行。
let timerId = setTimeout(() => {
console.log('Hello World.');
}, 2000);
clearTimeout(timerId); // 取消定时器
setInterval()
setInterval()
用于在固定的时间间隔内重复执行某个函数。它适合处理重复性的定时任务。
但是需要注意以下几点⚠️
- 时间间隔不准确。 JavaScript 是单线程的,如果当前执行的代码耗时过长,可能会导致
setInterval()
的执行间隔不准确。例如
setInterval(function() {
console.log(new Date().toLocaleTimeString());
// 假设这里有一个耗时很长的操作
for (let i = 0; i < 1000000000; i++) {}
}, 1000);
这种情况下,setInterval()
的实际执行间隔可能会比设定的 1000 毫秒长。
- 及时清理定时器,避免内存泄漏,避免重复设置定时器。
- 避免重复设置定时器。
- 在框架中使用时,注意组件的生命周期。
let intervalId = setInterval(() => {
console.log('hhhh.');
}, 1000 * 60); // 每隔 1 分钟输出一次
clearInterval()
clearInterval()
用于取消通过 setInterval()
设置的定时器。它能够停止定时任务的执行。
let intervalId = setInterval(() => {
console.log('hhh');
}, 1000);
setTimeout(() => {
clearInterval(intervalId); // 3秒后取消定时器
}, 3000);
encodeURIComponent()
encodeURIComponent()
用于对 URI 组件进行编码,将特殊字符转换为对应的 % 编码形式,常用于构建安全的 URL。
它的主要用途是确保字符串中的特殊字符(如空格、中文、&、= 等)被正确地转义,从而可以安全地作为 URL 的一部分传递。
let message = 'Hello Simin, how are you?';
let encodedMessage = encodeURIComponent(message);
console.log(encodedMessage); // Hello%20Simin%2C%20how%20are%20you%3F
decodeURIComponent()
decodeURIComponent()
用于解码经过 encodeURIComponent()
编码的 URI 组件。它将 % 编码的字符转换回原始字符。
let encodedString = 'Hello%20Simin%2C%20how%20are%20you%3F';
let decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // Hello Simin, how are you?
encodeURI()
和 decodeURI()
encodeURI()
和 decodeURI()
等同于 encodeURIComponent()
和 decodeURIComponent()
区别是 encodeURI()
用于编码整个 URL,不会对 URL 中的分隔符(如 ; / ? : @ & = + $ , # 等)进行编码。
console.log(encodeURI("https://example.com?q=春节")); // 输出:https://example.com?q=%E6%98%A5%E8%8A%82
console.log(encodeURIComponent("https://example.com?q=春节")); // 输出:https%3A%2F%2Fexample.com%3Fq%3D%E6%98%A5%E8%8A%82
数字(Number)方法
Number()
Number()
方法用于将其他类型的数据转换为数值。如果值无法转换为有效的数值,它将返回 NaN。
let str = '123';
let num = Number(str);
console.log(num); // 123
Number()
方法对于空字符串会返回 0
,但是对于包含非数字字符的字符串会返回 NaN
。
toFixed()
toFixed()
方法用于将数字转换为指定小数位数的字符串。它接受一个参数,表示需要保留的小数位数。返回值是字符串格式的数字。
let num = 12.34567;
let result = num.toFixed(2);
console.log(result); // '12.35'
toFixed()
会进行四舍五入,并返回字符串。如果需要获得数值类型结果,应该将结果转换为数值类型。
toPrecision()
toPrecision()
方法用于将数字转换为指定有效数字的字符串。它可以保留一定数量的有效数字,并返回字符串类型的结果。
let num = 12.34567;
let result = num.toPrecision(4);
console.log(result); // '12.35'
toPrecision()
返回的是字符串,且会进行四舍五入处理。
Math.round()
Math.round()
方法用于将数字四舍五入到最接近的整数。
let num = 12.5;
let result = Math.round(num);
console.log(result); // 13
Math.round()
只适用于四舍五入,不处理其他类型的舍入方式。
Math.floor()
Math.floor()
方法用于将数字向下取整,即返回小于或等于给定数字的最大整数。
let num = 12.9;
let result = Math.floor(num);
console.log(result); // 12
Math.floor()
总是将数字向下舍入,无论数字的小数部分是多少。
Math.ceil()
Math.ceil()
方法用于将数字向上取整,即返回大于或等于给定数字的最小整数。
let num = 12.1;
let result = Math.ceil(num);
console.log(result); // 13
Math.max()
和 Math.min()
Math.max()
和 Math.min()
方法用于返回给定数字中最大或最小的数值。
let maxNum = Math.max(1, 2, 3);
let minNum = Math.min(1, 2, 3);
console.log(maxNum); // 3
console.log(minNum); // 1
这两个方法可以接受多个参数,返回其中的最大值或最小值。如果没有传入参数,它们将返回 -Infinity
或 Infinity
。
字符串(String)方法
length
属性
length
返回字符串的字符数量,包括空格和特殊符号。字符串中的每一个字符(包括空格、标点符号、Emoji等)都算作一个字符,但需要注意的是 Emoji
,它占用多个字符
const str: string = "Hello";
console.log(str.length); // 输出: 5
charAt(index)
返回指定索引处的字符,如果 index 超出范围,会返回空字符串,而不是抛出错误。。
const str: string = "TypeScript";
console.log(str.charAt(0)); // 输出 "T"
console.log(str.charAt(5)); // 输出 "c"
console.log(str.charAt(20)); // 输出 ""
charCodeAt(index)
返回指定索引处字符的 Unicode 编码。 和 charAt
类似,索引超出范围时不会抛出错误,而是返回 NaN
const str: string = "A";
console.log(str.charCodeAt(0)); // 输出 65
console.log(str.charCodeAt(5)); // 输出 NaN
concat(...strings)
连接一个或多个字符串。但更推荐使用 + 或模板字符串,基本很少用到。和数组concat
方法一样,concat
方法不会改变原字符串,而是返回新字符串。
const str1: string = "Hello";
const str2: string = "TypeScript";
console.log(str1.concat(", ", str2, "!")); // 输出 "Hello, TypeScript!"
includes(substring, start?)
判断是否包含子字符串,非常好用的查找字符串的方案,比如检查字符串中是否包含某个关键字、前端模糊搜索、检查文件名后缀。但是需要注意includes
是大小写敏感的,如果需要忽略大小写,可以先用toLowerCase
将字符串统一转换为小写或大写。
const str: string = "Hello, TypeScript!";
console.log(str.includes("Type")); // 输出 true
console.log(str.includes("Java")); // 输出 false
console.log(str.includes("Hello", 1)); // 从索引 1 开始,输出 false
console.log(str.includes("hello")); // 输出 false
endsWith(substring, length?)
判断字符串是否以指定子串结尾。
const str: string = "Hello, TypeScript!";
console.log(str.endsWith("!")); // 输出 true
console.log(str.endsWith("Type", 13)); // 输出 true
indexOf(searchValue)
indexOf
返回指定子字符串在当前字符串中 首次出现
的位置(索引),如果字符串中有多个匹配项,它只会返回第一个出现的索引,如果没有找到,返回 -1
。
const str: string = "Hello, TypeScript!";
console.log(str.indexOf("Type")); // 输出: 7 (Type 在索引 7 位置)
console.log(str.indexOf("JavaScript")); // 输出: -1 (未找到)
slice(start, end)
slice 返回字符串的一个子字符串,截取从 start 到 end(不包括 end 索引)的部分。slice 不会修改原字符串,而是返回一个新字符串。负值表示从字符串末尾开始计算位置。
const str: string = "Hello, TypeScript!";
console.log(str.slice(0, 5)); // 输出: "Hello"
console.log(str.slice(7)); // 输出: "TypeScript!"
const str: string = "abcdef";
console.log(str.slice(1, 3)); // "bc"
console.log(str.slice(-3)); // "def"(最后3个字符)
split(separator)
split
方法将字符串按照指定的分隔符拆分成一个数组,并返回该数组。如果分隔符不存在,它会返回一个包含整个字符串的数组。
const str: string = "apple,banana,cherry";
console.log(str.split(",")); // 输出: ["apple", "banana", "cherry"]
console.log(str.split(" ")); // 输出: ["apple,banana,cherry"] (无空格,返回整个字符串)
toLowerCase()
toLowerCase
将字符串中的所有字母转换为小写,并返回一个新的字符串。但是它只会转换字母,不会改变其他字符(如数字或符号)。
const str: string = "TypeScript";
console.log(str.toLowerCase()); // 输出: "typescript"
toUpperCase()
toUpperCase
将字符串中的所有字母转换为大写,并返回一个新的字符串。同样只会改变字母,其他字符不受影响。
const str: string = "TypeScript";
console.log(str.toUpperCase()); // 输出: "TYPESCRIPT"
replace(searchValue, newValue)
replace
用来替换字符串中第一个匹配到的子字符串。
如果想替换所有匹配项,需要使用正则表达式。
默认只替换第一次出现的匹配项。如果想替换所有匹配项,需要用正则表达式加上 g
标志
const str: string = "Hello, TypeScript!";
console.log(str.replace("TypeScript", "JavaScript")); // 输出: "Hello, JavaScript!"
trim()
trim
去除字符串两端的空白字符(包括空格、换行符等),并返回一个新的字符串。但是trim
只会删除两端的空白字符,中间的空格不会影响。如果要替换全部空格就得用 replace
const str: string = " Hello, TypeScript! ";
console.log(str.trim()); // 输出: "Hello, TypeScript!"
startsWith(searchString)
startsWith
检查字符串是否以指定的子字符串开始,返回 true
或 false
。startsWith
它是区分大小写的。
const str: string = "Hello, TypeScript!";
console.log(str.startsWith("Hello")); // 输出: true
console.log(str.startsWith("Type")); // 输出: false
console.log(str.startsWith("hello")); // 输出: false
repeat(count)
repeat 返回一个新字符串,将原字符串重复 count 次。如果 count 为负数或非整数,会抛出错误。
const str: string = "Hello!";
console.log(str.repeat(3)); // 输出: "Hello!Hello!Hello!"
toLocaleString(locales, options)
toLocaleString
是 JavaScript 中一个非常有用的方法,它可以将数字、日期等对象转换为本地化的字符串表示。简单来说,就是让你的数据看起来更符合你所在地区的习惯,比如日期格式、数字格式等。
toLocaleString()
方法可以接收两个可选参数:locales
和 options
。
locales
:一个字符串或字符串数组,表示要使用的语言环境。例如,'en-US'
表示美国英语,'de-DE'
表示德国德语。如果不指定,默认使用运行环境的语言环境。options
:一个对象,包含自定义格式选项。常见选项包括:style
:指定格式类型,如'decimal'
(默认)、'currency'
(货币)、'percent'
(百分比)。currency
:指定货币类型,如'USD'
、'EUR'
,当style
为'currency'
时使用。minimumFractionDigits
和maximumFractionDigits
:指定小数位数的最小和最大值。year
、month
、day
、hour
、minute
、second
:指定日期和时间的显示格式。
数字的 toLocaleString
当你有一个数字,希望它按照本地的格式显示,比如加上千位分隔符或者小数点,你可以使用 toLocaleString
。
const number = 1234567.89;
console.log(number.toLocaleString()); // 输出: "1,234,567.89"(在美国地区)
还可以指定使用哪种语言和格式:
const number = 1234567.89;
console.log(number.toLocaleString('de-DE')); // 输出: "1.234.567,89"(在德国地区)
日期的 toLocaleString
toLocaleString
也可以用在日期对象上,让日期按照本地的格式显示。
const date = new Date();
console.log(date.toLocaleString()); // 输出: "3/4/2025, 10:00:00 AM"(在美国地区)
可以指定使用哪种语言和格式
const date = new Date();
console.log(date.toLocaleString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }));
// 输出: "2025年3月4日星期二"(在中国地区)
自定义选项
还可以通过传递选项对象来自定义格式,比如指定使用哪种货币、日期格式等。
const number = 1234567.89;
const options = { style: 'currency', currency: 'USD' };
console.log(number.toLocaleString('en-US', options)); // 输出: "$1,234,567.89"
const date = new Date();
const dateOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleString('en-GB', dateOptions)); // 输出: "04/03/2025"(在英国地区)