JS方法合集

本文旨在记录工作中用到的js方法，黄色标注为重点方法，删除线代表不常用

数组

不改变原数组的数组方法

1.1 map

作用：通过指定函数处理数组的每一项，并返回处理后的数组，不更改数组项数，但更改每项的值。

let newArr = arr.map((item, index, arr) => {
  return 对每一项item的操作（通常会更改每项的值）
})

item必填，第二个参数index和第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用

1.2 forEach

作用：遍历数组的每一项，该方法内部不能有返回值/return
因为没有返回值/return，因此不用定义新变量来接收

arr.forEach((item, index, arr) => {
  对每一项item的操作
})

item为必填，第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用

1.3 filter

作用：筛选数组
一般会过滤部分项，因此也可以理解为筛选数组的项数

let newArr = arr.filter((item, index, arr) => {
  return 对每一项item的判断操作（一般加的都是大于小于等于这种判断，以此达到筛选的目的）
})

item必填，第二个参数index和第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用

1.4 indexOf

作用：从头到尾搜索数组中是否包含某个元素，并返回它第一次出现所在的位置，找不到返回-1。

arr.indexOf(item,start)

item必填，第二个参数start表示开始检索的起始索引/位置，不常用

1.5 lastIndexOf

作用：从尾到头搜索数组中是否包含某个元素，并返回它最后一次出现所在的位置，找不到返回-1。

arr.indexOf(item,start)

item必填，第二个参数start表示开始检索的起始索引/位置，不常用

1.6 find

作用：搜索数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。

let newItem = arr.find((item, index, arr) => {
  return 对每一项item的判断操作（一般加的都是大于小于等于这种判断，以此达到查找符合条件元素的目的）
})

item必填，第二个参数index和第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用
find和filter很像，主要区别就是find只会返回第一项，filter则返回所有符合的项组成的数组

1.7 findIndex

作用：搜索数组中符合条件的第一个元素的索引，如果没有符合条件的元素，则返回-1。

let newIndex = arr.findIndex((item, index, arr) => {
  return 对每一项item的判断操作（一般加的都是大于小于等于这种判断，以此达到查找符合条件元素的目的）
})

item必填，第二个参数index和第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用

1.8 reduce

作用：从头到尾遍历数组并对每一项执行一个函数，总体类似于一个累加器(注意前一项是经过函数处理的返回值)，会将其结果汇总为单个返回值。

const sum = arr.reduce((pre, cur, index, arr) => {
  return 要执行的操作，此处的返回值将作为下一项的pre
})

pre和cur必填，pre表示前一项的return值，初始时为第一项的值，cur表示当前项的值，初始时为第二项的值
第三个参数index和第四个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用

1.9 reduceRight

作用：从尾到头遍历数组并对每一项执行一个函数，总体类似于一个累加器(注意前一项是经过函数处理的返回值)，会将其结果汇总为单个返回值。

const sum = arr.reduceRight((pre, cur, index, arr) => {
  return 要执行的操作，此处的返回值将作为下一项的pre
})

pre和cur必填，pre表示前一项的return值，初始时为最后一项的值，cur表示当前项的值，初始时为倒数第二项的值
第三个参数index和第四个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用

1.10 includes

作用：检测数组元素中是否有某个元素，有一个符合条件即为true，全都不符合才为false。

let flag = arr.includes(item, index)

item必填，第二个参数index不填时默认为0，如果为负数则从后往前

1.11 some

作用：检测数组元素中是否有元素符合指定条件，有一个符合条件即为true，全都不符合才为false。

let flag = arr.some((item, index, arr) => {
  return 对每一项item的判断操作（一般加的都是大于小于等于这种判断，以此达到判断是否存在某项符合的目的）
})

item必填，第二个参数index和第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用，flag返回是一个布尔值

1.12 every

作用：检测数组元素的每个元素是否都符合条件，全都符合才为true，有一个不符合就为false。

let flag = arr.every((item, index, arr) => {
  return 对每一项item的判断操作（一般加的都是大于小于等于这种判断，以此达到判断是否所有项均符合的目的）
})

item必填，第二个参数index和第三个参数arr（即数组本身arr，无论数组取什么名字此处都可叫arr）不常用，flag返回是一个布尔值

1.13 join

作用：将数组内所有元素按一定的连接方式放入一个字符串中。

let str = arr.join("传入的分隔符")

join括号内如果什么也不写或传入undefined则默认分隔符为逗号，
而如果要加入分隔符则一定要加引号并在引号内写分隔符

1.14 toString

作用：把数组转换为字符串

let str = arr.toString()

toString中什么都不用放，强制用逗号分隔，这也是和join的显著区别

1.15 toLocaleString

作用：把数组转换为字符串

let str = arr.toLocaleString()

常用于将时间/日期对象转为时间格式的字符串，数组转为字符串用的不多。

1.16 valueOf

作用：返回数组对象的原始值。

arr.valueOf()

不太常用，和toString的结果差不多，了解即可

1.17 slice

作用：选取数组的的一部分，并返回一个新数组。

let newArr = arr.slice(start, end)

start表示选取的起始索引/位置，为负数时表示从倒数第几个开始选取，省略时从0开始；
end表示选取的结束索引/位置，但是选取的数组不包含该位置，省略时则到结尾结束

1.18 concat

作用：连接两个或更多的数组，并返回结果。

arr.concat(arr1, arr2, arr3, ..., arrN)

arr1到arrN都可省略，但平常使用基本至少都会有一个arr1，该功能现在
更多地被展开运算符...取代了

1.19 entries

作用：返回带有键/值对的数组Iterator对象，可以用for of或者next()方法遍历拿到值。

arr.entries()

不过上面这种写法在开发中由于只返回Array Iterator {}，因此是没啥用的，
Object.entries(arr)其实是更常用的
方法
const arr = [{ a: 1 }, 2, '你好'];
console.log(Object.entries(arr)); // [['0', { a: 1 }], ['1', 2],['2', '你好']]
还有一种for...in的方法，他和Object.entries(arr)返回结果相同
const arr2 =[{ a: 1 }, 2, '你好']
for(obj of arr2.entries()){
    console.log(obj);
}// [['0', { a: 1 }], ['1', 2], ['2', '你好']]

1.20 keys

作用：返回带有键的数组Iterator对象，可以用for of或者next()方法遍历拿到值。

arr.keys()

不过上面这种写法在开发中由于只返回Array Iterator {}，因此是没啥用的，
Object.keys(arr)其实是更常用的
方法
const arr = [{ a: 1 }, 2, '你好'];
console.log(Object.keys(arr)); // ['0', '1', '2']
还有一种for...in的方法，他和Object.keys(arr)返回结果相同
const arr2 =[{ a: 1 }, 2, '你好']
for(obj of arr2.keys()){
    console.log(obj);
}// ['0', '1', '2']

1.21 values

作用：返回带有键的数组Iterator对象，可以用for of或者next()方法遍历拿到值。

arr.values()

由于这个方法转换的数组和原来是一样的，因此是用了个寂寞，所以基本不用
不过上面这种写法在开发中由于只返回Array Iterator {}，因此是没啥用的，
Object.values(arr)其实是更常用的
方法
const arr = [{ a: 1 }, 2, '你好'];
console.log(Object.values(arr)); // [{a: 1}, 2, '你好']
还有一种for...in的方法，他和Object.values(arr)返回结果相同
const arr2 =[{ a: 1 }, 2, '你好']
for(obj of arr2.values()){
    console.log(obj);
}// [{a: 1}, 2, '你好']

改变原数组的数组方法

2.1 push

作用：向数组的末尾添加新元素

arr.push(item)

括号里可以放各种基本数据类型，这里有个容易出错的点，如果放的是变量，那变量本身就已经表示他所指向的内存的值了，因此不用在外面套大括号中括号之类的了

2.2 pop

作用：从数组的末尾删除元素

arr.pop()

括号内不要有参数，带参了也没用

2.3 unshift

作用：向数组的开头添加新元素
和push的各种使用格式都一样，唯一区别就是arr.unshift(item)是操作数组的开头

2.4 shift

作用：从数组的开头删除元素

arr.shift()

括号内不要有参数，带参了也没用

2.5 splice

作用：纯删除、删除后替换、纯新增

arr.splice(index, length, item1,...itemn)

参数一是要替换元素的索引位置，如果是负值则从末尾开始算，参数二是要删除的长度/个数，如果为0则不执行删除，参数三到n均为可添加的元素
参数一是必填的；参数二选填，不填的情况默认取到参数一索引后所有的元素；参数三到n选填，不填则不执行替换/新增，正常使用只会用到前两个，而且一般是删除操作splice(index, 1)

2.6 sort

作用：排序。

arr.sort()

如果是数组均为数字则按照从小到大排，字符串则按ASCII码从小到大排
但是如果是这种在排序10和5的时候会有错误，因为数字是按位比较的，会先比较10里的1和5，因为1和5比1更小导致10排在前面，而且这种写法也不能降序，因此不太推荐用这种写法
推荐写法arr.sort((a, b) => { return a - b }) return值为a - b时为升序，b - a为降序，如果是复杂数组如
对象数组，则可以修改为return a.c - b.c

2.7 reverse

作用：翻转数组。

arr..reverse()

字符串

不改变原字符串的字符串方法

1.1 charAt

作用：获取指定索引位置的字符。

str.charAt(index)

index必填，正常会返回对应索引值的字符，如果index索引大于字符串最大索引值，则会返回空字符串

1.2 indexOf

作用：从头到尾搜索字符串是否包含某个字符，并返回它第一次出现所在的位置，找不到返回-1。

str.indexOf(item, start)

item必填，具体例子在下方

let str = 'ABCDEF';
let i = str.indexOf('C');// 2
let i2 = str.indexOf('C',3);// -1
let i3 = str.indexOf('G');// -1

1.3 lastIndexOf

作用：从尾到头搜索字符串是否包含某个字符，并返回它最后一次出现所在的位置，找不到返回-1。

str.lastIndexOf(item, start)

item必填，具体例子在下方

let str = 'ACDFCDCD';
let i1 = str.lastIndexOf('C');// 6
let i2 = str.lastIndexOf('G');// -1

1.4 includes

作用：检测字符串中是否有某个子字符串素，有一个符合条件即为true，全都不符合才为false。

str.includes(item, start)

item必填，具体例子在下方

let str = "My favorite color is blue";
let i1 = str.includes("blue");// true
let i2 = str.includes("BLUE");// false

1.5 startsWith

作用：检测字符串是否以指定的子字符串开始，有一个符合条件即为true，全都不符合才为false。

str.startsWith(item, start)

item必填，具体例子在下方

let str = 'Hello world!';
str.startsWith('Hello') // 输出结果：true
str.startsWith('Helle') // 输出结果：false
str.startsWith('wo', 6) // 输出结果：true

1.6 endsWith

作用：检测字符串是否以指定的子字符串结尾，有一个符合条件即为true，全都不符合才为false。

str.endsWith(item, length)

item必填，具体例子在下方

let str = 'Hello world!';
str.endsWith('!')       // 输出结果：true
str.endsWith('llo')     // 输出结果：false
str.endsWith('llo', 5)  // 输出结果：true

1.7 concat

作用： 连接两个或更多的字符串，并返回结果。

str.concat(str1, str2, ..., strN)

str1到strN都可省略，但平常使用基本至少都会有一个str1

1.8 split

作用： 将一个字符串按一定的条件分割成数组。

str.split(separator,limit)

separator必填，表示字符串或正则表达式，从该参数指定的地方分割str
limit表示返回的数组的最大长度，具体例子在下方

let str = "abcdef";
str.split("c");    // 输出结果：["ab", "def"]
str.split("", 4)   // 输出结果：['a', 'b', 'c', 'd'] 
str.split("");     // 输出结果：["a", "b", "c", "d", "e", "f"]
可以通过正则表达式实现两种分隔符分割字符串形成数组
const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits);  // 输出结果：["apples", "bananas", "cherries"]

1.9 slice

作用：选取字符串的一部分，并返回一个新字符串。

str.slice(start, end)

start必填，表示选取的起始索引/位置，为负数时表示从倒数第几个开始选取；
end表示选取的结束索引/位置，但是选取的字符串不包含该位置，省略时则到结尾结束，具体例子在下方

let str = "abcdefg";
str.slice(1,6);   // 输出结果："bcdef" 
str.slice(1);     // 输出结果："bcdefg" 
str.slice();      // 输出结果："abcdefg" 
str.slice(-2);    // 输出结果："fg"
str.slice(6, 1);  // 输出结果：""

1.10 substr

作用：从字符串指定索引位置选取其部分长度的字符，并返回一个新字符串。

str.substr(start,length)

start必填，表示选取的起始索引/位置，为负数时表示从倒数第几个开始选取；
length表示选取的字符数，具体例子在下方

let str = "abcdefg";
str.substr(1,6); // 输出结果："bcdefg" 
str.substr(1);   // 输出结果："bcdefg" 相当于截取[1,str.length-1]
str.substr();    // 输出结果："abcdefg" 相当于截取[0,str.length-1]   
str.substr(-3);  // 输出结果："efg"

1.11 substring

作用：从字符串指定的开始和结束索引位置选取字符(包含开头但不包含结尾)，并返回一个新字符串。

str.substring(start, end)

start必填，需为非负整数，表示选取的起始索引/位置；
end表示选取的结束索引/位置，但是选取的字符串不包含该位置，省略时则到结尾结束，具体例子在下方

let str = "abcdefg";
str.substring(1,6); // 输出结果："bcdef" [1,6)
str.substring(1);   // 输出结果："bcdefg" [1,str.length-1]
str.substring();    // 输出结果："abcdefg" [0,str.length-1]
str.substring(6,1); // 输出结果 "bcdef" [1,6)
str.substring(-1);  // 输出结果："abcdefg"

1.12 toLowerCase

作用：将字符串转换为小写。

str.toLowerCase()

1.13 toUpperCase

作用：将字符串转换为大写。

str.toUpperCase()

1.14 replace

作用：将字符串内用某些字符替换成其他字符，或用正则表达式替换字符。

str.replace(item,newItem)

item,newItem均必填，前者表示要替换的字符或由此组成的正则表达式，后者表示替换后的新字符，具体例子在下方

字符替换
let str = "abcdef";
str.replace("c", "z") // 输出结果：abzdef
正则替换
let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red");    // 输出结果：'Mr red has a red house and a red car'

1.15 match

作用：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

str.match(item)

item必填。表示要查找的字符或由此组成的正则表达式，返回值就是一个很奇怪的数组，具体例子在下方

let str = "abcdef";
str.match("c") // ["c", index: 2, input: "abcdef", groups: undefined]

1.16 search

作用：在字符串中检索指定的子字符串，或找到一个或多个与正则表达式相匹配的子字符串。

str.search(item)

item必填。表示要查找的子串或由此组成的正则表达式，返回值就是找到的值的起始索引/位置，
如果没找到任何匹配的子串，则返回-1，具体例子在下方

let str = "abcdef";
str.search(/bcd/)   // 输出结果：1

1.17 trim

作用：移除字符串首尾空白符。

str.trim()

具体例子在下方

let str = "  abcdef  "
str.trim()    // 输出结果："abcdef"

1.18 trimStart

作用：移除字符串开头空白符。

str.trimStart()

具体例子在下方

let str = "  abcdef  "
str.trimStart()    // 输出结果："abcdef  "

1.19 trimEnd

作用：移除字符串开头空白符。

str.trimEnd()

具体例子在下方

let str = "  abcdef  "
str.trimEnd()    // 输出结果："  abcdef"

1.20 valueOf

作用：返回字符串对象的原始值。

string.valueOf()

返回的原始值貌似和字符串是一样的，目前看不出啥区别

1.21 repeat

作用：返回对原字符串重复n次得到的新字符串。

string.repeat(count)

count必填，表示复制的次数，如果是小数遵循向0的方向靠齐的原则，正向下取整，负向上取整，具体例子在下方

'hello'.repeat(2) // 输出结果："hellohello"
'na'.repeat(0)    // 输出结果：""
'na'.repeat(2.9) // 输出结果："nana" 正小数向下取整
'na'.repeat(Infinity)   // RangeError <=-1的负数或者Infinity，会报错
'na'.repeat(-1)         // RangeError <=-1的负数或者Infinity，会报错
'na'.repeat(-0.9)   // 输出结果："" (-1, 0)之间的向上取整得到0

1.22 padStart

作用：头部补全，会在字符串头部加上想要加的字符串。

str.padStart(length, insertStr)

在网上搜未找到length是否必填，自身测试后如果不填会返回原字符串
如果只填了一项也就代表填了length，此时如果填的是数字或者可被隐式转换为数字的字符串则会返回
在开头补全空格的结果，如果无法识别为数字则返回原字符串
如果两项全填则依据情况讨论，具体例子在下方

'zcw'.padStart(6, 'abc') // 'abczcw' 最小长度=(补全+原)字符串，最常见的情况
'zcw'.padStart(8, 'abc') // 'abcabzcw' 最小长度>(补全+原)字符串，补全字符串会一直重复
                         // 直到(补全加原)字符串长度等于最小长度
'zcw'.padStart(5, 'abc') // 'abzcw' 最小长度<(补全+原)字符串且原字符串长度小于最小长度，
                         // 此时补全字符串从后舍弃一部分使(补全+原)字符串长度等于最小长度
'zcw'.padStart(2, 'abc') // 'zcw' 最小长度<(补全+原)字符串且原字符串长度大于等于最小长度，
                         // 此时返回原字符串

1.23 padEnd

作用：尾部补全，会在字符串头部加上想要加的字符串。

str.padEnd(length, insertStr)

在网上搜未找到length是否必填，自身测试后如果不填会返回原字符串
如果只填了一项也就代表填了length，此时如果填的是数字或者可被隐式转换为数字的字符串则会返回
在结尾补全空格的结果，如果无法识别为数字则返回原字符串
如果两项全填则依据情况讨论，具体例子在下方

'zcw'.padEnd(6, 'abc') // 'zcwabc' 最小长度=(补全+原)字符串，最常见的情况
'zcw'.padEnd(8, 'abc') // 'zcwabcab' 最小长度>(补全+原)字符串，补全字符串会一直重复
                         // 直到(补全加原)字符串长度等于最小长度
'zcw'.padEnd(5, 'abc') // 'zcwab' 最小长度<(补全+原)字符串且原字符串长度小于最小长度，
                         // 此时补全字符串从后舍弃一部分使(补全+原)字符串长度等于最小长度
'zcw'.padEnd(2, 'abc') // 'zcw' 最小长度<(补全+原)字符串且原字符串长度大于等于最小长度，
                         // 此时返回原字符串

1.24 parseInt

作用：将字符串转为整数。

parseInt(str, radix)

str必填，表示要被解析为整数的字符串，radix表示要解析的数字的基数。该值介于2~36之间。(第二个参数不太常用暂时不做探讨)

1.25 parseFloat

作用：将字符串转为浮点数。

parseFloat(str)

str必填，表示要被解析为浮点数的字符串，具体例子在下方

parseFloat("10.00")      // 输出结果：10.00
parseFloat("10")         // 输出结果：10
parseFloat("10.01")      // 输出结果：10.01
parseFloat("-10.01")     // 输出结果：-10.01
parseFloat("40.5 years") // 输出结果：40.5
parseFloat("years")      // 输出结果：NaN