JavaScript数组方法的总结

本文主要介绍常用的数组方法、字符串方法、遍历方法、高阶函数、正则表达式以及相关数学知识。

常用方法

`push()`

在尾部追加，类似于压栈，原数组会改变。

1
2
3

const arr = [1, 2, 3]
arr.push(8);
console.log(arr) // [1, 2, 3, 8]

`push()`方法返回的是数组的长度

1 2	let arr=[1,2] return console.log(arr.push(1111))//输出3

`pop()`

在尾部弹出，类似于出栈，原数组会变。数组的 push & pop 可以模拟常见数据结构：栈。

const arr = [1, 2, 3]
const popVal = arr.pop()
console.log(popVal) // 3
console.log(arr) // [1, 2]

// 数组模拟常见数据结构之一：栈
const stack = [0, 1]
stack.push(2) // 压栈
console.log(stack) // [0, 1, 2]

const popValue = stack.pop() // 出栈
console.log(popValue) // 2
console.log(stack) // [0, 1]

`unshift()`

在头部压入数据，类似于入队，原数组会变。

1
2
3

const arr = [1, 2, 3]
arr.unshift(0)
console.log(arr) // [0, 1, 2, 3]

`shift()`

在头部弹出数据，原数组会变。数组的 push（入队） & shift（出队）可以模拟常见数据结构之一：队列。

const arr = [1, 2, 3]
const shiftVal = arr.shift()
console.log(shiftVal) // 1
console.log(arr) // [2, 3]

// 数组模拟常见数据结构之一：队列
const queue = [0, 1]
queue.push(2) // 入队
console.log(queue) // [0, 1, 2]

const shiftValue = queue.shift() // 出队
console.log(shiftValue) // 0
console.log(queue) // [1, 2]

`concat()`

concat会在当前数组尾部拼接传入的数组，然后返回一个新数组，原数组不变。

const arr = [1, 2, 3]
const arr2 = arr.concat([7, 8, 9])
console.log(arr) // [1, 2, 3]
console.log(arr2) // [1, 2, 3, 7, 8, 9]

`indexOf()`

在数组中寻找该值，找到则返回其下标，找不到则返回-1。

1
2
3

const arr = [1, 2, 3]
console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(0)) // -1

`includes()`

在数组中寻找该值，找到则返回true，找不到则返回false。

1
2
3

const arr = [1, 2, 3]
console.log(arr.includes(2)) // true
console.log(arr.includes(4)) // false

`join()`

将数组转化成字符串，并返回该字符串，不传值则默认逗号隔开，原数组不变。

1
2
3

const arr = [1, 2, 3]
console.log(arr.join()) // ‘1, 2, 3’
console.log(arr) // [1, 2, 3]

`reverse()`

翻转原数组，并返回已完成翻转的数组，原数组改变。

1
2
3

const arr = [1, 2, 3]
console.log(arr.reverse()) // [3, 2, 1]
console.log(arr) // [3, 2, 1]

`slice(start，end)`

从start 开始截取到end，但是不包括end，不改变原数组，返回的是一个新数组。

1
2
3

const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1, 4)) // [2, 3, 4]
console.log(arr) // [1, 2, 3, 4, 5]

`splice(start, deleteCount, item1, item2……)`

start参数开始的位置
deleteCount要截取的个数
后面的items为要添加的元素
如果deleteCount为0，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组里面。
返回值为由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
这个方法会改变原始数组，数组的长度会发生变化

const arr3 = [1, 2, 3, 4, 5, 6, 7, "f1", "f2"];
const arr4 = arr3.splice(2, 3) // 删除第三个元素以后的三个数组元素(包含第三个元素)
console.log(arr4); // [3, 4, 5];
console.log(arr3); // [1, 2, 6, 7, "f1", "f2"]; 原始数组被改变

const arr5 = arr3.splice(2, 0, "wu", "leon"); 
// 从第2位开始删除0个元素，插入"wu","leon"
console.log(arr5); // [] 返回空数组
console.log(arr3); // [1, 2, "wu", "leon", 6, 7, "f1", "f2"]; 原始数组被改变

const arr6 = arr3.splice(2, 3, "xiao", "long");
// 从第 2 位开始删除 3 个元素，插入"xiao", "long"
console.log(arr6); // ["wu", "leon", 6]
console.log(arr3); //[ 1, 2, "xiao", "long", 7, "f1", "f2"]

const arr7 = arr3.splice(2); // 从第三个元素开始删除所有的元素
console.log(arr7);// ["xiao", "long", 7, "f1", "f2"]
console.log(arr3); // [1, 2]

`sort()`

对数组的元素进行排序，并返回数组。
默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。

可参考 MDN：Sort[5]

1
2
3

const arr = [1, 2, 3]
arr.sort((a, b) => b - a)
console.log(arr) // [3, 2, 1]

toString()

将数组转化成字符串，并返回该字符串，逗号隔开，原数组不变。

1
2
3

const arr = [1, 2, 3, 4, 5]
console.log(arr.toString()) // ‘1, 2, 3, 4, 5’
console.log(arr) // [1, 2, 3, 4, 5]

字符串常用方法

`charAt()`

返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。

1
2
3

var str = 'abcdefg'
console.log(str.charAt(2)) // 输出 'c' 
console.log(str[2]) // 输出 'c'

`concat()`

类似数组的concat()，用来返回一个合并拼接两个或两个以上字符串。原字符串不变。

const str1 = 'abcdefg'
const str2 = '1234567'
const str3 = str1.concat(str2)
console.log(str3) // 输出 'abcdefg1234567'

`indexOf()、lastIndexOf()`

indexOf,返回一个字符在字符串中首次出现的位置,lastIndexOf返回一个字符在字符串中最后一次出现的位置。

1
2
3

const str = 'abcdcefcg'
console.log(str.indexOf('c')) // 输出 '2'
console.log(str.lastIndexOf('c')) // 输出 '7'

`slice()`

提取字符串的片断，并把提取的字符串作为新的字符串返回出来。原字符串不变。

const str = 'abcdefg'
console.log(str.slice()) // 输出 'abcdefg', 不传递参数默认复制整个字符串
console.log(str.slice(1)) // 输出 'bcdefg',传递一个，则为提取的起点，然后到字符串结尾
console.log(str.slice(2, str.length-1)) // 输出'cdef',传递两个，为提取的起始点和结束点

`split()`

使用指定的分隔符将一个字符串拆分为多个子字符串数组并返回，原字符串不变。

1 2	const str = 'ABCDEFG' console.log(str.split('*')) // 输出 ["A", "B", "C", "D", "E", "F", "G"]

`substr(), substring()`

这两个方法的功能都是截取一个字符串的片段，并返回截取的字符串。
substr和substring这两个方法不同的地方就在于参数二，substr的参数二是截取返回出来的这个字符串指定的长度，substring的参数二是截取返回这个字符串的结束点，并且不包含这个结束点。而它们的参数一，都是一样的功能，截取的起始位置。
注意事项：substr的参数二如果为0或者负数，则返回一个空字符串，如果未填入，则会截取到字符串的结尾去。substring的参数一和参数二为NAN或者负数，那么它将被替换为0。

const str = 'ABCDEFGHIJKLMN'
console.log(str.substr(2))  // 输出 'CDEFGHIJKLMN'
console.log(str.substring(2)) // 输出 'CDEFGHIJKLMN'

console.log(str.substr(2, 9))  // 输出 'CDEFGHIJK'
console.log(str.substring(2, 9))  // 输出 'CDEFGHI'

`match()`

match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，并返回一个包含该搜索结果的数组。

const str = '2018年结束了，2019年开始了，2020年就也不远了'
const reg = /\d+/g  // 这里是定义匹配规则，匹配字符串里的1到多个数字
console.log(str.match(reg))  // 输出符合匹配规则的内容，以数组形式返回 ['2018', '2019', '2020']
console.log(str.match('20'))  // 不使用正则 ["20", index: 0, input: "2018年结束了，2019年开始了"]

注意事项:如果match方法没有找到匹配，将返回null。如果找到匹配，则 match方法会把匹配到以数组形式返回，如果正则规则未设置全局修饰符g，则 match方法返回的数组有两个特性：input和index。input属性包含整个被搜索的字符串。index属性包含了在整个被搜索字符串中匹配的子字符串的位置。

`replace()`

replace接收两个参数，参数一是需要替换掉的字符或者一个正则的匹配规则，参数二，需要替换进去的字符，仔实际的原理当中，参数二，你可以换成一个回调函数。

const str = '2018年结束了，2019年开始了，2020年就也不远了'
const rex = /\d+/g  // 这里是定义匹配规则，匹配字符串里的1到多个数字
const str1 = str.replace(rex, '****') 
console.log(str1) // 输出："****年结束了，****年开始了,****年也不远了"
const str2 = str.replace(rex, function(item){
    console.log(arguments)  // 看下面的图片
    const arr = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
    let newStr = ''
    item.split('').map(function(i){
            newStr += arr[i]
    })     
    return newStr       
})
console.log(str2) // 输出：贰零壹捌年结束了，贰零壹玖年开始了,贰零贰零年也不远了

`search()`

在目标字符串中搜索与正则规则相匹配的字符，搜索到，则返回第一个匹配项在目标字符串当中的位置，没有搜索到则返回一个-1。

1
2
3

const str = '2018年结束了，2019年开始了，2020年就也不远了'
const reg = /\d+/i  // 这里是定义匹配规则,匹配字符串里的1到多个数字
console.log(str.search(reg)) // 输出 0  这里搜索到的第一项是从位置0开始的

`toLowerCase(),toUpperCase()`

toLowerCase把字母转换成小写，toUpperCase()则是把字母转换成大写。

const str1 = 'abcdefg'
const str2 = 'ABCDEFG'
console.log(str2.toLowerCase())  // 输出：'abcdefg'
console.log(str1.toUpperCase())  // 输出：'ABCDEFG'

11.includes(), startsWith(), endsWith()

includes、startsWith、endsWith，es6的新增方法，includes 用来检测目标字符串对象是否包含某个字符，返回一个布尔值，startsWith用来检测当前字符是否是目标字符串的起始部分，相对的endwith是用来检测是否是目标字符串的结尾部分。

const str = 'Excuse me, how do I get to park road?'
console.log(str.includes('how')) // 输出：true
console.log(str.startsWith('Excuse')) // 输出： true
console.log(str.endsWith('?')) // 输出： true

12.repeat()

返回一个新的字符串对象，新字符串等于重复了指定次数的原始字符串。接收一个参数，就是指定重复的次数。原字符串不变。

const str = 'http'
const str2 = str.repeat(3)
console.log(str) // 输出：'http'
console.log(str2) // 输出：'httphttphttp'

常用遍历方法&高阶函数

for()

最常用的for循环，经常用的数组遍历，也可以遍历字符串。

const arr = [1, 2, 3]
const str = 'abc'
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
    console.log(str[i])
}

while() / do while()

while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作.

while(条件){
     执行...
}
     
do{
    执行...
}
while(条件)

forEach()

拷贝一份遍历原数组。

return无法终止循环。不过可以起到continue效果。
本身是不支持的continue与break语句的我们可以通过some和 every来实现。

const arr = [5,1,3,7,4]
arr.forEach((item, index) => {
    if (item < 2) return
    console.log(`索引：${index}，数值：${item}`)
    arr[5] = 0
})
console.log(arr)
// 打印结果：
// 索引：0，数值：5
// 索引：2，数值：3
// 索引：3，数值：7
// 索引：4，数值：4
// [5, 1, 3, 7, 4, 0]

for…in

用法：for...in 用于遍历对象的可枚举属性，包括数组和对象。
遍历内容：for...in 遍历的是键（属性名或索引），而不是值。
适用场景：适合用来遍历对象的属性，特别是当我们需要访问属性名时。
for...in 是 ES5 标准，此方法遍历数组效率低，主要是用来循环遍历对象的属性。
遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串。
Object.defineProperty，建立的属性，默认不可枚举。

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key);        // 输出: a, b, c
  console.log(obj[key]);    // 输出: 1, 2, 3
}

const arr = [10, 20, 30];
for (const index in arr) {
  console.log(index);       // 输出: 0, 1, 2 (索引)
  console.log(arr[index]);  // 输出: 10, 20, 30
}

for…of

用法：for...of 用于遍历可迭代对象（如数组、字符串、Set 和 Map 等）。
遍历内容：for...of 遍历的是值，即数组中的每个元素或字符串中的每个字符。
适用场景：适合用来遍历数组或其他可迭代对象的内容。

for…of是ES6新增的方法，但是for…of不能去遍历普通的对象，**for…of的好处是可以使用break跳出循环。**

for-of这个方法避开了for-in循环的所有缺陷
与forEach()不同的是，它可以正确响应break、continue和return语句
for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象[6]。
for-of循环也支持字符串遍历

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value);  // 输出: 10, 20, 30
}

const str = "Hello";
for (const char of str) {
  console.log(char);  // 输出: H, e, l, l, o
}

区别总结

特性	`for...of`	`for...in`
遍历内容	值（元素或字符）	键（属性名或索引）
遍历对象	可迭代对象（数组、字符串、`Set`、`Map` 等）	对象属性（包括数组的索引）
适合场景	遍历数组、字符串、`Set`、`Map`等的内容	遍历对象的属性
是否可用于对象	否（不适合遍历普通对象）	是
是否可用于数组	是	是，但不推荐

注意

for...in 不推荐用于数组：因为它遍历的是索引而不是值，同时还可能会遍历到数组的继承属性，造成不必要的混乱。一般在数组的场景中优先使用 for...of。
for...of 不适合遍历对象：因为对象并不是可迭代的。如果需要遍历对象的键值对，推荐使用 for...in 或 Object.entries() 方法搭配 for...of。

建议

数组：使用 for...of 来遍历值，或使用 forEach。
对象：使用 for...in 来遍历属性名，或使用 Object.keys() / Object.entries() 结合 for...of。

every / some

返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时，可以使用every / some。这两个的区别是，every会去判断判断数组中的每一项，而 some则是当某一项满足条件时返回。

// every
const foo = [5,1,3,7,4].every((item, index) => {
    console.log(`索引：${index}，数值：${item}`)
    return item > 2
})
console.log(foo)
// every 打印：
// 索引：0，数值：5
// 索引：1，数值：1
// false
// some
const foo = [5,1,3,7,4].some((item, index) => {
    console.log(`索引：${index}，数值：${item}`)
    return item > 2
})
console.log(foo)
// some 打印：
// 索引：0，数值：5
// true

filter()

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。
它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。
该方法不会改变原数组。

const foo = [5,1,3,7,4].filter((item,index) => {
    console.log(`索引：${index}，数值：${item}`)
    return item > 2
})
console.log(foo)
// 打印结果：
// 索引：0，数值：5
// 索引：1，数值：1
// 索引：2，数值：3
// 索引：3，数值：7
// 索引：4，数值：4
// [5, 3, 7, 4]

map()

map即是 “映射”的意思，原数组被“映射”成对应新数组。
map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组。

javascriptjavascriptjavascriptconst foo = [5,1,3,7,4].map((item,index) => {
    console.log(`索引：${index}，数值：${item}`)
    return item + 2
})
console.log(foo)
// 打印结果：
// 索引：0，数值：5
// 索引：1，数值：1
// 索引：2，数值：3
// 索引：3，数值：7
// 索引：4，数值：4
// [7, 3, 5, 9, 6]

reduce() / reduceRight()

reduce 从左到右将数组元素做“叠加”处理，返回一个值。reduceRight 从右到左。

const foo = [5,1,3,7,4].reduce((total, cur) => {
    console.log(`叠加：${total}，当前：${cur}`)
    return total + cur
})
console.log(foo)
// 打印结果：
// 叠加：5，当前：1
// 叠加：6，当前：3
// 叠加：9，当前：7
// 叠加：16，当前：4
// 20

可以用来去重

const arr = [1, 2, 3, 3, 4, 5, 5, 6];

const uniqueArr = arr.reduce((accumulator, currentValue) => {
  // 检查累加器中是否已经存在当前值
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);  // 如果不存在，则添加
  }
  return accumulator;  // 返回累加器供下一次迭代使用
}, []);

console.log(uniqueArr);  // 输出: [1, 2, 3, 4, 5, 6]

Object,keys遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

const obj = {
  p1: 123,
  p2: 456
};
Object.keys(obj) // ["p1", "p2"]

Object.getOwnPropertyNames() 遍历对象的属性

Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

1
2
3

const arr = ['Hello', 'World'];
Object.keys(arr) // ["0", "1"]
Object.getOwnPropertyNames(arr) // ["0", "1", "length"]

以上遍历方法的区别：

一：map()，forEach()，filter()循环的共同之处：
  1.forEach，map，filter循环中途是无法停止的，总是会将所有成员遍历完。
  2.他们都可以接受第二个参数，用来绑定回调函数内部的 this 变量，将回调函数内部的 this 对象，指向第二个参数，间接操作这个参数（一般是数组）。

二：map()、filter()循环和forEach()循环的不同：
   forEach 循环没有返回值；map，filter 循环有返回值。

三：map()和filter()都会跳过空位，for 和 while 不会

四：some()和every():
   some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.

五：reduce()，reduceRight()：
   reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员）。

六：Object对象的两个遍历 Object.keys 与 Object.getOwnPropertyNames：
   他们都是遍历对象的属性，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但Object.keys不能返回不可枚举的属性；Object.getOwnPropertyNames能返回不可枚举的属性。

常用正则表达式

这里罗列一些我在刷算法题中遇到的正则表达式，如果有时间可认真学一下正则表达式不要背[7]。

1.判断字符

由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

2.判断数字

1	数字：^[0-9]*$

持续更新，敬请期待……

数学知识

1.质数

若一个正整数无法被除了1 和它自身之外的任何自然数整除，则称该数为质数（或素数），否则称该正整数为合数。

function judgePrime(n) {
    for (let i = 2; i * i <= n; i++) {
        if (n % i == 0) return false
    }
    return true
}

2.斐波那契数列

function Fibonacci(n) {
    if (n <= 1) return n  
    return Fibonacci(n - 1) + Fibonacci(n - 2)
}

JavaScript数组方法的总结

常用方法

push()

push()方法返回的是数组的长度

pop()

unshift()

shift()

concat()

indexOf()

includes()

join()

reverse()

slice(start，end)

splice(start, deleteCount, item1, item2……)

sort()

toString()

字符串常用方法

charAt()

concat()

indexOf()、lastIndexOf()

slice()

split()

substr(), substring()

match()

replace()

search()

toLowerCase(),toUpperCase()

11.includes(), startsWith(), endsWith()

12.repeat()

常用遍历方法&高阶函数

for()

while() / do while()

forEach()

for…in

for…of

区别总结

注意

建议

every / some

filter()

map()

reduce() / reduceRight()

可以用来去重

Object,keys遍历对象的属性

Object.getOwnPropertyNames() 遍历对象的属性

以上遍历方法的区别：

常用正则表达式

1.判断字符

2.判断数字

数学知识

1.质数

2.斐波那契数列

`push()`

`push()`方法返回的是数组的长度

`pop()`

`unshift()`

`shift()`

`concat()`

`indexOf()`

`includes()`

`join()`

`reverse()`

`slice(start，end)`

`splice(start, deleteCount, item1, item2……)`

`sort()`

`charAt()`

`concat()`

`indexOf()、lastIndexOf()`

`slice()`

`split()`

`substr(), substring()`

`match()`

`replace()`

`search()`

`toLowerCase(),toUpperCase()`