Bootstrap

【JS】String、Object、Array常用方法

String

const str1 = 'Hello';
const str2 = 'World';
方法名字方法使用返回参数返回
concat 连接一(多)个字符串str2.concat(', ', str1)"World, Hello"列举要连接的字符串返回新字符串
startsWith判断是否以指定字符串开头

str1.startsWith('H')

str1.startsWith('H',3)

true

false

1、要结尾的字符串

2、被找到的起始位置索引,默认0

endsWith判断是否以指定字符串结尾

str1.endsWith('o')

str1.endsWith('o',2)

true

false

1、要结尾的字符串

2、被找到的末尾位置的索引,默认字符串的length

includes字符串中是否有指定字符串,区分大小写

str1.includes('Hel')

str1.includes('Hel', 2)

true

false

1、要查找的字符串

2、要开始查找的位置索引,默认0

indexOf字符串中搜索指定字符串

str1.indexOf('e')

str1.indexOf('l', 2)

1

2

1、要查找的指定字符串

2、要开始查找的位置,负数默认从0开始找

返回第一个找到的元素的索引
lastIndexOf字符串中搜索指定字符串

str1.lastIndexOf('l', 1)

str1.lastIndexOf('l', 5)

-1

3

1、要查找的指定字符串

2、要查找的最后一个位置的索引>=找到的指定字符串的索引要

返回最后一个找到的元素的索引
match检查字符串与正则匹配结果,返回数组str1.match(/[a-z]/g)['e', 'l', 'l', 'o']1、正则表达式
matchAll检查字符串与正则匹配的索引结果[...str1.matchAll(/(l)l/g)][['ll','l']]1、正则表达式
padEnd从末尾开始填充字符串str1..padEnd(8, '.')'Hello...'

1、填充后的长度

2、要填充的字符串

返回新字符串
padStart从开头开始填充字符串str1..padStart(8, '.')'...Hello'

1、填充后的长度

2、要填充的字符串

返回新字符串
repeat重复几次,连一起str1.repeat(2)'HelloHello'1、重复的次数返回新字符串
replace指定字符串替换成指定字符串str1.replace('He', 'a')‘allo’

1、要替换的字符串

2、替换后的字符串

返回新字符串
replaceAll指定字符串全部替换成指定字符串str1.replaceAll('l', 'e')'Heeeo'

1、要替换的字符串

2、替换后的字符串

返回新字符串
search正则匹配搜索str1.search(/e/g)11、要匹配的正则表达式返回匹配的索引
slice提取部分字符串str1.slice(1,3)'el'

1、提取的开始索引

2、提取的结束索引,默认.length

返回新字符串
substring提取字符串开始(包含开始位置)到结束(不包含结束位置)的字符串str1.substring(1,3)'el'

1、提取的开始索引

2、提取的结束索引,默认.length

返回新字符串
split分割字符串放到数组中

str1.split('e')

str1.split('l')

['H', 'llo']

['He', '', 'o']

1、以某个字符分割

2、返回数组元素的最大长度

返回新数组
toLowerCase转成小写str1.toLowerCase()"hello"返回新字符串
toUpperCase转成大写str1.toUpperCase()"HELLO"返回新字符串
toString转成返回String对象的字符串new String(str1).toString()'Hello'返回新字符串
trim删除前后空白符‘ Hello ’.trim()'Hello'返回新字符串
trimStart删除开头空白符‘ Hello ’.trim()‘Hello ’返回新字符串
trimEnd删除开头空白符‘ Hello ’.trim()‘ Hello’返回新字符串
valueOf返回String对象的字符串new String(str1).valueOf()'Hello'返回新字符串

Array

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
方法名字方法使用返回参数返回
concat合并多个数组arr1.concat(arr2)['a', 'b', 'c', 'd', 'e', 'f']列举所有合并的数组返回新数组
copyWithin从指定索引开始替换开始到结束位置的值arr1.copy(0,1,2)['b', 'b', 'c']

1、开始替换的位置

2、复制的开始位置

3、复制的结束位置

改变数组,长度不变
every数组内所有元素是否通过指定函数的测试arr1.every((v) => v==='a')false1、函数条件返回boolean
fill用固定值填充数组从开始到结束索引的全部元素arr1.fill('gg', 1,2)['a', 'gg', 'c']

1、填充值

2、填充的开始位置

3、填充的结束位置

返回修改后的数组
filter创建满足函数的所有元素arr1.filter((v) => v === 'a')['a']1、函数条件返回新数组
find返回数组中满足条件的第一个元素arr1.find(v => v === 'a')'a'1、函数条件返回找到的第一个元素
findIndex返回数组中满足条件的第一个元素的索引arr1.findIndex(v => v === 'a')01、函数条件返回找到的第一个元素的索引
findILast返回数组中满足条件的第一个元素arr1.findILast(v => v === 'a')'a'1、函数条件返回找到的最后一个元素
findILastIndex返回数组中满足条件的最后一个元素的索引arr1.findILastIndex(v => v === 'a')01、函数条件返回找到的最后一个元素的索引
flat递归将数组所有元素拼到新数组

[0,1,arr1].flat()

[[0,1],[arr1]].flat(2)

[0,1,'a','b','c']

[0, 1, 'a','b','c']

1、递归的层级,默认1返回新数组
flatMap对数组每个元素执行回调后,再将结果展开一层arr1.flatMap((v) => v === 'a' ? [1,2] : 3)[1, 2, 3, 3]1、函数条件返回新数组
forEach数组每个元素执行一次给定函数arr1.forEach(v => console.log(v))

'a'

'b'

'c'

1、函数条件修改原数组
map数组每个元素执行一次给定函数arr1.map(v => v)

['a','b','c']

1、函数条件返回新数组
includes判断数组是否包含指定值arr1.includes('a', 1)false

1、查找的元素

2、开始查找的索引位置

返回boolean
indexof返回数组中第一次出现元素的索引arr1.indexOf('b',1)1

1、查找的元素

2、开始查找位置的索引

返回数组中第一次出现元素的索引
lastIndexof返回数组最后一次出现元素的索引arr1.lastIndexof('b',0)1

1、查找的元素

2、开始查找位置的索引

返回数组中最后一次出现元素的索引
join将数组所有元素连成字符串arr1.join('')'abc'

1、连接符

返回字符串

keys返回数组中索引的新的数组迭代器对象;

values:返回数组值

arr1.keys()

for (const key of iterator) {
  console.log(key);
}

0

1

2

返回新的数组迭代器对象
pop删除数组最后一个元素arr1.pop()'c'返回删除的数组
shift删除数组第一个元素arr1.shift()['b','c']返回删除后的原数组
push添加指定元素到数组末尾arr1.push('1','2')['a','b','c','1','2']1、列举所有添加的值返回数组长度;修改原数组
unshift添加数组头部arr1.push('1')['1','a','b','c']1、列举所有添加的值返回数组长度;修改原数组
reduce对数组每个元素按序执行函数,每次每一次运行结果作为参数传入,最后将结果汇总为单个返回值,数组第一个元素默认当作初始值

arr3 = [1,2,3]

initval = 1

const sum = arr3.reduce((prev, current) => prev + current), initval) 

7

执行顺序是1+1+2+3

1、执行函数

2、初始值

使用“reducer”回调函数遍历整个数组后的结果
reduceRight对数组的每个元素从右往左的顺序依次执行函数,返回单个值

arr1 = [
  [0, 1],
  [2, 3],
  [4, 5],
];

arr1.reduceRight((accumulator, currentValue) =>accumulator.concat(currentValue)
);

[4,5,2,3,0,1]

1、执行函数

2、初始值

返回单个值
reverse反转数组arr1.reverse()['c','b','a']

改变原数组;

toReverse返回新数组

slice有开始到结束(不含)的新数组arr1.slice(0,2)['a','b']

1、开始位置(含)

2、结束位置(不含)

返回新数组
splice就地删除或者替换已存在的元素或添加新元素arr1.splice(1,0,'1')['a','1','c','c']

1、开始位置

2、删除元素个数

3、添加元素

修改原数组;

toSpliced()返回新数组

some测试数组是否至少有一个元素通过执行函数返回truearr1.some(v => v==='a')true1、执行函数返回boolean
sort对数组进行排序[1,7,5].sort()[1,5,7]将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。

改变原数组;

不改变原数组用toSorted()

toString返回字符串arr1.toString()'a,b,c'返回字符串
with在指定位置替换成指定值arr1.with(1,'1')['a','1','c']

1、替换的指定位置

2、替换的指定值

返回新数组
Array.from将类数组转成数组Array.from({'0':'a',length:3})['a']
Array.of将一组值转为数组

Array.of(3) 

Array.of(3,5,9)

[3]

[3,5,9]

Array.isArray()判断是否为数组Array.isArray(arr1)true
Array.of将参数变成数组Array.of('a','b')['a','b']

Object

// target
const t= { a: 1, b: 2 };
// source
const s= { b: 4, c: 5 };
方法名字方法使用返回参数返回
assign多个对象合并Object.assign(t,s){a:1,b:4,c:5}

1、目标对象

2、源对象

返回修改后的目标对象
create以现有对象为原型,创建新对象

t.show = function () {console.log(`${this.a} + ${this.b}`)}

me = Object.create(t)

t.show

1+ 2返回新对象
seal密封对象,现有属性可改,其他不能操作;isSealed()是否密封

Object.seal(t)

t.d = 55

Object.isSealed(t)

t.d = undefined

true

1、要密封的对象
freeze对象被冻结,不可改Object.freeze(t)1、冻结对象
isFrozen是否已冻结Object.isFrozen(t)true1、冻结对象返回boolean
hasOwn对象是否有指定的属性Object.hasOwn(t, 'a')true

1、对象

2、属性

返回boolean
setPrototypeOf将一个指定对象的原型设置为另一个对象

Object.setPrototypeOf(t,s)

t.c

5

1、要设置原型的对象

2、该对象的新原型

指定的对象
fromEntries将键值对列表转换为对象Object.fromEntries(new Map(['foo', 'bar'],['baz',42])){foo: 'bar', baz: 42}1、Map或者数组返回新对象

;