数组方法总结

push

向数组的末尾添加一个或多个元素,影响原数组

bash 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.push('e')

console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ]

pop

删除数组的最后一个元素,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.pop()

console.log(arr); // [ 'a', 'b', 'c' ]

unshift

向数组的开头添加一个或多个元素,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.unshift('A')

console.log(arr); // [ 'A', 'a', 'b', 'c', 'd' ]

shift

删除数组的第一个元素,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd']

arr.shift()

console.log(arr); // [ 'b', 'c', 'd' ]

indexOf

从左到右查看数组是否存在这个元素,有就返回它的第一个下标,没有就返回-1

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'c']

console.log(arr.indexOf('c')); // 2
console.log(arr.indexOf('f')); // -1

lastIndexOf

从右到左查看数组是否存在这个元素,有就返回它的第一个下标,没有就返回-1

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'c']

console.log(arr.lastIndexOf('c')); // 4
console.log(arr.lastIndexOf('f')); // -1

includes

判断数组是否存在指定元素,有就返回true,否则返回false

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

console.log(arr.includes('a')); // true
console.log(arr.includes('f')); // false

concat

拼接两个数组,不影响原数组,需要新数组接收

bash 复制代码
let arr = ['a', 'b', 'c']
let arr2 = ['A', 'B', 'C']

let newArr = arr.concat(arr2)

console.log(newArr); // [ 'a', 'b', 'c', 'A', 'B', 'C' ]

join

将数组所有元素按照填充规则连接成一个字符串,不影响原数组,需要新参数接收

ini 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']
let arr2 = ['hello', 'world', 'dolphin']

let str = arr.join('')
let str2 = arr2.join(',')

console.log(str); // abcde
console.log(str2); // hello,world,dolphin

fill

对数组填充值,比如下面迅速创建一个三个元素均为0的数组,影响原数组

javascript 复制代码
var arr = new Array(3).fill(0)

console.log(arr) // [ 0, 0, 0 ]

reverse

颠倒数组,影响原数组

css 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.reverse()

console.log(arr); // [ 'e', 'd', 'c', 'b', 'a' ]

sort

对数组元素进行排序,默认按照unicode顺序排序,影响原数组

0~9对应的unicode十进制为48-57

A~Z对应的unicode十进制为65-90

a~z对应的unicode十进制为97-122

scss 复制代码
let arr = [2, 4, 5, 1, 3]

arr.sort()

console.log(arr); // [ 1, 2, 3, 4, 5 ]

接收一个回调,a-b对应默认的顺序,升序

css 复制代码
let arr = [2, 4, 5, 1, 3]

arr.sort((a, b) => {
    return a - b
})

console.log(arr); // [ 1, 2, 3, 4, 5 ]

b-a对应的逆序

css 复制代码
let arr = [2, 4, 5, 1, 3]

arr.sort((a, b) => {
    return b - a
})

console.log(arr); // [ 5, 4, 3, 2, 1 ]

slice

根据下标区间截取数组,左闭右开,若是一个参数,则从左边开始截取到最后一位,不影响原数组,需要新数组接收

bash 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

let newArr = arr.slice(1, 3)
let newArr2 = arr.slice(1)

console.log(newArr); // [ 'b', 'c' ]
console.log(newArr2); // [ 'b', 'c', 'd', 'e' ]

splice

根据下标删除数组元素,第二个参数代表从下标位置开始删除几个,影响原数组

scss 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.splice(1, 3) // 从下标为1的位置删除3个

console.log(arr); // [ 'a', 'e' ]

后面的参数代表删除后插入的元素

bash 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.splice(1, 3, 'dolphin')

console.log(arr); //[ 'a', 'dolphin', 'e' ]

toString

将数组转换成字符串,数组元素之间以,隔开

ini 复制代码
let arr = ['apple', 'watch']

let str = arr.toString()

console.log(str); // apple,watch

substring

提取字符串指定位置的子字符串,左闭右开,返回新的字符串

vbscript 复制代码
let str = "Dolphin_Fung"

let newStr = str.substring(1, 5)
let newStr2 = str.substring(1)
console.log(newStr); // olph
console.log(newStr2); // olphin_Fung

forEach

遍历数组,接受一个回调,回调三个参数:数组的每一项,下标,数组

javascript 复制代码
let arr = ['a', 'b', 'c', 'd', 'e']

arr.forEach((item) => {
    console.log(item); // a b c d e
})

reduce

对数组的每个元素执行指定的函数,并将结果汇总为一个返回值,接收的回调第一个参数为累计值,第二个为当前值,返回累计值,不影响原数组,需要新参数来接收

javascript 复制代码
let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((a, b) => {
    return a + b
})

console.log(sum); // 15

map

通过对每个元素调用指定函数来创建一个新数组,不影响原数组,需要新数组接收

javascript 复制代码
let arr = [1, 2, 3, 4]

let newArr = arr.map((item) => {
    return item + 1
})

console.log(newArr); // [ 2, 3, 4, 5 ]

filter

过滤出符合条件的元素,不会影响原数组,需要新数组接收

javascript 复制代码
let arr = [1, 2, 3, 4]

let newArr = arr.filter((item) => {
    return item >= 2
})

console.log(newArr); // [ 2, 3, 4 ]

some

查看数组中是否至少有一项元素满足回调的条件,有则返回true,否则返回false

ini 复制代码
let arr = [1, 3, 5]

let flag = arr.some((item) => {
    return item % 2 === 0
})

console.log(flag); // false

find

返回数组中第一个通过回调条件的元素

ini 复制代码
let arr = [1, 2, 3, 4, 5, 6]

let flag = arr.find((item) => {
    return item % 2 === 0
})

console.log(flag); // 2

flat

扁平化数组,参数为减去的维度,默认为1,比如3维,参数为2,最终flat为1维,想要最终直接变成1维,可放入Infinity。不影响原数组,需要新数组来接收

ini 复制代码
var arr = [1, [2, [3, 4]]]

var newArr = arr.flat(2)

console.log(newArr) // [ 1, 2, 3, 4 ]

下面顺带讲解几个字符串的方法

replace

查找匹配的字符串然后用指定的字符串替换它,不影响原字符串,需要新参数来接收

ini 复制代码
let str = 'apple watch'

let newStr = str.replace('apple', 'Huawei')

console.log(newStr) // Huawei watch

split

按照指定规则使字符串变成数组。不影响原字符串,需要新参数来接收

ini 复制代码
let str = 'apple watch'

let newStr = str.split(' ')

console.log(newStr) // [ 'apple', 'watch' ]

最后

数组的这些方法很容易忘记,可以结合力扣刷题时使用

另外有不懂之处欢迎在评论区留言,如果觉得文章对你学习有所帮助,还请"点赞+评论+收藏"一键三连,感谢支持!

相关推荐
xptwop1 小时前
05-ES6
前端·javascript·es6
Heo1 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
前端小巷子2 小时前
深入 npm 模块安装机制
前端·javascript·面试
深职第一突破口喜羊羊3 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking3 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵3 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆3 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七4 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03014 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati4 小时前
JavaScript Promise完整指南
javascript