前言
作为一名喜欢学习(假的)的前端工程师(菜🐔),在学习前端的路上,把平时在项目中常用的各类型的方法收录到本子中,今天就分享给各位小伙伴,让我们一起在前端路上茁壮成长吧!
内置对象常用方法
备注:文中字符都是小写字母为类型的实例,这些方法都来自原型prototype对象,如str.split()来自String.prototype.split(),以此类推。
String字符串
| 方法 |
说明 |
返回值 |
备注 |
| str.indexOf() |
根据字符串查索引 |
返回索引值,查找不到返回-1 |
|
| str.lastIndexOf() |
根据字符串查最后一个索引 |
返回最后一个索引值,查找不到返回-1 |
|
| str.slice(n, m) |
对字符串进行截取,不包含m |
返回一个新的被截取的字符串 |
传入负数则从字符串尾部开始算起 |
| str.substring(n, m) |
对字符串进行截取,不包含m,不接受负数 |
返回一个新的被截取的字符串 |
传入一个参数则n截取到末尾 |
| str.substr(n, l) |
对字符串进行截取,l为截取长度 |
返回一个新的被截取的字符串 |
传入一个参数则n截取到末尾 |
| str.concat(string2, string3[, ..., stringN]) |
将一个或多个字符串与原字符串连接合并 |
返回一个新的字符串 |
|
| str.split() |
将字符串转换为数组,传入分隔符将以分隔符分割字符串 |
返回一个新的数组 |
|
| str.charAt(index) |
根据索引查找指定位置字符 |
返回指定索引的字符 |
如果没有提供索引,charAt() 将使用0 |
| str.charCodeAt(index) |
根据索引查找指定位置字符的ASCII码 |
返回指定索引的ASCII码 |
返回0到65535之间的整数 |
| str.replace(regexp|substr, newSubStr|function) |
字符串替换,将substr替换成newSubStr |
返回一个被替换的字符串 |
可以使用正则表达式匹配 |
| str[index] |
根据索引获取指定位置字符 |
返回索引指定的字符 |
|
| str.toUpperCase() |
将字符串的小写字母转大写 |
返回一个新的字符串 |
|
| str.toLowerCase() |
将字符串的大写字母转成小写 |
返回一个新的字符串 |
|
| str.includes(searchString[, position]) |
判断一个字符串是否包含在另一个字符串中 |
如果当前字符串包含被搜寻的字符串,就返回 true;否则返回 false。 |
position可选。从当前字符串的哪个索引位置开始搜寻子字符串,默认值为0 |
| str.startsWith() |
用来判断当前字符串是否以另外一个给定的子字符串开头 |
根据判断结果返回 true 或 false。 |
|
| str.endsWith() |
用来判断当前字符串是否以另外一个给定的子字符串结尾 |
根据判断结果返回 true 或 false。 |
|
| str.repeat(n) |
将字符串重复n次 |
返回新的字符串 |
|
| str.padStart(n [, padString]) |
字符串不足n位用padString在头部补齐 |
返回新的字符串 |
|
| str.padEnd(n [, padString]) |
字符串不足n位用padString在尾部补齐 |
返回新的字符串 |
|
| str.trim() |
消除头部和尾部的空格 |
返回新的字符串 |
|
| str.trimStart() |
消除头部的空格 |
返回新的字符串 |
|
| str.trimEnd() |
消除尾部的空格 |
返回新的字符串 |
|
| str.match(regexp) |
传入一个regexp对象进行匹配 |
返回一个字符串匹配正则表达式的的结果 |
如果使用g标志,则将返回与完整正则表达式匹配的所有结果,但不会返回捕获组。未使用g标志,则仅返回第一个完整匹配及其相关的捕获组(Array) |
| str.matchAll(regexp) |
传入一个regexp对象进行匹配 |
返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器 |
|
| str.search(regexp) |
传入一个regexp对象进行匹配 |
如果匹配成功,则返回正则表达式在字符串中首次匹配项的索引;否则返回 -1 |
|
Array数组
| 方法 |
说明 |
返回 |
备注 |
| Array.isArray(arr) |
用于确定传递的值是否是一个 Array |
返回Boolean |
|
| Array.from(arrayLike[, mapFn[, thisArg]]) |
从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例 |
返回一个新数组 |
|
| arr.push() |
末尾添加一个或多个元素 |
返回新的长度 |
修改原数组 |
| arr.pop() |
删除数组最后一个元素 |
返回删除的元素的值 |
修改原数组 |
| arr.unshift() |
开头添加一个或多个元素 |
返回新的长度 |
修改原数组 |
| arr.shift() |
删除第一个元素 |
返回删除的元素的长度 |
修改原数组 |
| arr.reverse() |
颠倒数组中元素的顺序 |
返回新数组 |
修改原数组 |
| arr.sort([compareFunction]) |
对数组的元素进行排序,默认升序 |
返回新数组 |
默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的 |
| arr.indexOf() |
根据元素查找第一个索引值 |
返回索引值,不存在返-1 |
|
| arr.lastIndexOf() |
根据元素查找最后一个索引值 |
返回索引值,不存在返-1 |
|
| arr.join([separator]) |
将数组转化成字符串 |
返回新的字符串 |
参数为分隔符 |
| arr.concat() |
合并两个或多个数组 |
返回一个新数组 |
|
| arr.slice([begin[, end]]) |
数组截取,不包括end |
返回一个新数组 |
|
| arr.splice(start,deleteCount,item...) |
删除或替换现有元素或者原地添加新的元素 |
返回被修改的内容 |
修改原数组 |
| 数组迭代 |
|
|
|
| arr.fill(value[, start[, end]]) |
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素 |
返回修改后的数组 |
不包括终止索引 |
| arr.every(callback[, thisArg]) |
测试一个数组内的所有元素是否通过某个指定函数的测试 |
返回布尔值 |
callback有三个参数分别为element,index,array |
| arr.filter(callback[, thisArg]) |
创建一个新数组, 其包含通过所提供函数实现的测试的所有元素 |
返回一个新数组 |
callback有三个参数分别为element,index,array |
| arr.forEach(callback[, thisArg]) |
对数组的每个元素执行一次给定的函数 |
undefined |
callback有三个参数分别为element,index,array |
| arr.map(callback[, thisArg]) |
该数组中的每个元素都调用一次提供的函数后的返回值。 |
回调函数的结果组成了新数组的每一个元素 |
callback有三个参数分别为element,index,array |
| arr.some(callback[, thisArg]) |
遍历数组,只要有一个元素满足给定函数条件即返回结束遍历 |
返回布尔值 |
callback有三个参数分别为element,index,array |
Object
说到Object,我们都知道,js中所有对象就继承了Object,因此也就拥有Object的所有方法,只不过有些对象对一些方法进行了重写,每个对象重写方法的方式不同,感兴趣的小伙伴可以自行百度哟~
| 方法 |
说明 |
返回 |
备注 |
| Object.assign(target, ...sources) |
将所有可枚举属性的值从一个或多个源对象复制到目标对象 |
返回目标对象 |
|
| Object.create(proto[, propertiesObject]) |
创建一个新对象,使用现有的对象来提供新创建的对象的__proto__ |
返回一个新对象 |
|
| Object.defineProperties(obj, props) |
在一个对象上定义新的属性或修改现有属性(多个) |
返回新对象 |
这个方法比较复杂查看详情 |
| Object.defineProperty(obj, prop, descriptor) |
在一个对象上定义新的属性或修改现有属性 |
返回新对象 |
这个方法比较复杂 查看详情 |
| Object.keys(obj) |
遍历对象自身所有可枚举的属性 |
返回一个数组 |
|
| Object.values(obj) |
遍历对象自身所有可枚举的属性值 |
返回一个数组 |
|
| Object.freeze(obj) |
冻结一个对象 |
返回被冻结的对象 |
冻结的对象只有一层 |
| Object.getOwnPropertyNames(obj) |
返回一个由指定对象的所有自身属性的属性名 |
在给定对象上找到的自身属性对应的字符串数组 |
包括不可枚举的key |
| Object.getPrototypeOf(obj) |
返回指定对象的原型prototype |
给定对象的原型。如果没有继承属性,则返null |
|
| obj.hasOwnPorperty(prop) |
判断对象自身属性中是否具有指定的键 |
返回布尔值 |
|
| obj.isPrototypeOf(obj) |
测试一个对象是否存在于另一个对象的原型链上 |
返回布尔值 |
|
| obj.toString() |
返回一个表示该对象的字符串 |
一个表示该对象的字符串 |
|
| obj.toLocaleString() |
返回一个该对象的字符串表示 |
一个该对象的字符串表示 |
|
| obj.valueOf() |
返回指定对象的原始值 |
返回指定对象的原始值 |
|
Function函数
| 方法 |
说明 |
返回 |
备注 |
| fn.call(thisArg, arg1, arg2, ...) |
使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数 |
调用有指定this值和参数的函数的结果 |
|
| fn.apply(thisArg, [argsArray]) |
调用一个具有给定this值的函数,以及作为一个数组提供的参数。 |
调用有指定this值和参数的函数的结果 |
|
| fn.bind(thisArg, arg1, arg2, ...) |
使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数,不调用函数 |
返回一个原函数的拷贝,并拥有指定的 this 值和初始参数 |
|
Json
Number数字
| 方法 |
说明 |
返回 |
备注 |
| Number.isFinite(value) |
检测传入的参数是否是一个有穷数 |
布尔值 |
|
| Number.isInteger(value) |
判断给定的参数是否为整数 |
布尔值 |
|
| Number.isNaN() |
判断给定的参数是否为NaN,是window.isNaN的稳定版 |
布尔值 |
|
| Number.parseInt(string[, radix]) |
把一个字符串解析成整数 |
如果无法被解析成整数,则返回NaN |
radix是基数 |
| Number.parseFloat(string) |
把一个字符串解析成浮点数 |
如果无法被解析成浮点数,则返回NaN |
|
| num.toFixed(小数点后数字的个数n) |
使用定点表示法来格式化一个数值 |
返回新的数值 |
n<= 20 |
Math
| 方法 |
说明 |
返回 |
备注 |
| Math.abs(x) |
计算指定数字的绝对值 |
返回一个number类型 |
|
| Math.floor(x) |
向下取整 |
返回一个整数 |
相当于 | 0 |
| Math.ceil(x) |
向上取整 |
返回一个整数 |
|
| Math.max(value1[,value2, ...]) |
比较一组数中的最大值 |
返回一个number类型 |
|
| Math.min(value1[,value2, ...]) |
比较一组数中的最小值 |
返回一个number类型 |
|
| Math.round(x) |
对x进行四舍五入 |
返回一个整数 |
|
| Math.pow(x, y) |
计算x的y次幂 |
返回一个number类型 |
|
| Math.random() |
创建一个0-1之间的数 |
返回一个浮点数 |
包括0不包括1 |
| Math.trunc(x) |
去除x的小数部分 |
返回一个整数 |
删掉小数部分 |
| Math.sign(x) |
判断一个数是正数、负数还是零 |
正数返+1,负数返-1,零返0 |
|
| Math.sqrt(x) |
计算x的平方根 |
返回一个number类型 |
|
| Math.cbrt(x) |
计算任意数字的立方根 |
返回一个number类型 |
|
Date日期
| 方法 |
说明 |
返回 |
备注 |
| Date.now() |
返回当前时间的毫秒数 |
返回当前时间的毫秒数 |
从1970.1.1.00:00:00开始 |
| date.getFullYear() |
获取年 |
年 |
|
| date.getMonth() |
获取月 |
月 |
0-11表示1-12月 |
| date.getDate() |
获取日期 |
日 |
|
| date.getDay() |
获取一周的第几天 |
周 |
|
| date.getHours() |
获取小时 |
小时 |
|
| date.getMinutes() |
获取分 |
分钟 |
|
| date.getSeconds() |
获取秒 |
秒 |
|
| date.valueOf() |
获取总毫秒数 |
毫秒 |
|
| date.set... |
设置... |
|
set也是同理,这里不列举出来 |
RegExp正则
讲正则方法前,先讲几个常用的模式符,g表示全局模式,i表示忽略大小写模式,u表示Unicode模式,m表示多行模式,y表示粘性匹配模式,s表示任何匹配字符模式,这些模式可以一起混用。
| 方法 |
说明 |
返回 |
备注 |
| reg.test(str) |
查看正则表达式与指定的字符串是否匹配 |
返回布尔值 |
|
| reg.exec(str) |
在一个指定字符串中执行一个搜索匹配 |
返回一个结果数组或null |
|
Set
| 方法 |
说明 |
返回 |
备注 |
| set.add(value) |
用来向一个 Set 对象的末尾添加一个指定的值 |
返回Set对象本身 |
|
| set.clear() |
用来清空一个 Set 对象中的所有元素 |
undefined |
|
| set.delete(val) |
从一个 Set 对象中删除指定的元素 |
返回布尔值 |
|
| set.entries() |
返回一个新的迭代器对象 |
迭代器对象 |
|
| set.forEach(callback[, thisArg]) |
根据集合中元素的插入顺序,依次执行提供的回调函数 |
undefined |
|
| set.has(value) |
判断一个值是否在Set对象中 |
返回布尔值 |
|
Map
| 方法 |
说明 |
返回 |
备注 |
| map.clear() |
移除Map对象中的所有元素 |
undefined |
|
| map.delete(key) |
用于移除 Map 对象中指定的元素 |
返回布尔值 |
|
| map.entries() |
返回一个新的包含 [key, value] 对的 Iterator 对象 |
回的迭代器的迭代顺序与 Map 对象的插入顺序相同 |
|
| map.forEach(callback[, thisArg]) |
以插入顺序对 Map 对象中的每一个键值对执行一次参数中提供的回调函数 |
undefined |
|
| map.get(key) |
返回某个Map对象中的一个指定元素 |
回一个 Map 对象中与指定键相关联的值,如果找不到这个键则返回 undefined |
|
| map.has(key) |
判断指定元素是否在Map对象中 |
返回布尔值 |
|
| map.set(key, value) |
往Map中添加键值对 |
Map对象 |
|
| map.values() |
返回一个新的Iterator对象 |
迭代器对象 |
|
总结
这份内置对象方法清单罗列的不是全部的方法,而是一些平时项目中常用的方法,掌握好这些方法,能大大提高我们的开发效率,冲鸭!