美文网首页JavaScript美文共赏
数组常用的方法函数(整理)

数组常用的方法函数(整理)

作者: 辰漪 | 来源:发表于2021-12-12 14:02 被阅读0次

1. Array.push() 在原数组末尾追加一个或多个元素,返回该数组的长度

let arr = [ 1 , 2 , 3 ]
arr.push( 4 , 5 ) // 返回值为数组的长度 5
console.log(arr) // [1, 2, 3, 4, 5]

2. Array.pop() 删除数组的最后一个元素,并返回该元素

let arr = [ 1 , 2 , 3 , 4 ]
arr.pop() // 返回值为删除的元素 4
console.log(arr) // [1, 2, 3]

3. Array.unshift() 在原数组前边添加一个或多个元素,返回该数组的长度

let arr = [ 1 , 2 , 3 ]
arr.unshift( 4 , 5 ) // 返回值为数组的长度 5
console.log(arr) // [4, 5, 1, 2, 3]

4. Array.shift() 删除数组的第一个元素,并返回该元素

let arr = [ 4 , 5 , 1 , 2 , 3 ]
arr.shift() // 返回值为删除的元素 4
console.log(arr) // [5, 1, 2, 3]

5. Array.splice() 从原数组某个位置删除/添加元素,返回删除的元素数组

let arr = [ 4 , 5 , 1 , 2 , 3 ]
arr.splice( 0 , 1 ) // 从 0 的位置,删除一个元素,返回值为删除的元素数组 [4]
console.log(arr) // [5, 1, 2, 3]
arr.splice( 0 , 1 , 11 ) // 从 0 的位置,删除一个元素,并添加一个 11 元素 返回值为删除的元素数组 [5]
console.log(arr) // [11, 1, 2, 3]

6. Array.slice() 返回选定的元素数组,原数组不会改变

let arr = ['a','b','c','d']
arr.slice( 1 , 3 ) // 从索引为 1 的位置,取到 3 的位置,但不包含 3 ,返回值为 新数组 ['b', 'c']
console.log(arr) // ['a', 'b', 'c', 'd'] 原数组不会改变

7. Array.join() 使用某个拼接符,将数组转化为字符串,返回该字符串,原数组不会改变

let arr = [ 1 , 2 , 3 , 4 , 5 ]
arr.join('-') // 返回拼接后的字符串 '1-2-3-4-5'
console.log(arr) // [1, 2, 3, 4, 5] 原数组不会改变

8. Array.forEach() 遍历数组,为每一个元素调用一次函数

let arr = ['a','b','c']
arr.forEach((item, index, arr) => {
console.log(item) // 当前遍历元素项
console.log(index) // 当前遍历元素的索引
console.log(arr) // 原数组
})

9. Array.map() 遍历数组,为每一个元素调用一次函数,根据函数return返回的结果组成一个新的数组

let arr = ['a','b','c']
const newArr = arr.map((item, index, arr) => {
console.log(item, index, arr) // 元素项,索引,当前数组
return item += 2
})
console.log(arr) // 原数组不会改变
console.log(newArr) // 返回一个处理过的新数组 ['a2', 'b2', 'c2']

10. Array.filter() 遍历数组,根据筛选出的符合条件的元素,组成一个新的数组

let arr = [ 1 , 2 , 3 , 4 ]
const newArr = arr.filter((item,index,arr) => {
return item > 2 // 返回元素项大于 2 的元素,组成一个新的数组
})
console.log(arr) // [1,2,3,4] 不会改变元素组
console.log(newArr) // [3, 4]

11. Array.find() 遍历数组,返回第一个通过测试的元素项

let arr = [ 1 , 2 , 3 , 2 , 4 ]
const num = arr.find((item, index) => {
console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束
return item >= 2 // 返回item >= 2的第一个元素项,找到之后结束遍历,不会继续
})
console.log(arr) // [1,2,3,2,4] 不会改变元素组
console.log(num) // 2

12. Array.findIndex() 遍历数组,返回第一个通过测试的元素的索引值

let arr = [ 1 , 2 , 3 , 2 , 4 ]
const num = arr.findIndex((item, index) => {
console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束
return item >= 2 // 返回item >= 2的第一个元素项的索引值,找到之后结束遍历,不会继续
})
console.log(arr) // [1,2,3,2,4] 不会改变元素组
console.log(num) // 索引值为 1

13. Array.indexOf() 数组中是否存在某个元素,存在返回该索引,不存在返回-1,出现多次,也只会返回第一次出现时的索引

let arr = ['a','b','c','d', 'c', 'c']
arr.indexOf('c') // 返回值为 索引 2
arr.indexOf('ff') // 返回值为 -1 ff不存在数组中

14. Array.reduce() 遍历数组,将函数的返回值,存储到累加器中

let arr = [ 1 , 2 , 3 , 4 , 5 ]
const total = arr.reduce((total, item) => {
// 每次遍历将total + item,下一次的遍历时,total为上一次返回的结果
console.log(total) // 1 3 6 10
return total + item
})
console.log(total) // 15

15. Array.from() 将具有length属性或者可迭代的对象转化为数组

Array.from('abcdef') // 返回值['a', 'b', 'c', 'd', 'e', 'f']
Array.from(new Map([['b', 1 ], ['a', 2 ]]))
Array.from(new Set([ 1 , 2 , 3 ]))

本文转自:辰漪博客

相关文章

  • 数组常用的方法函数(整理)

    1. Array.push() 在原数组末尾追加一个或多个元素,返回该数组的长度 2. Array.pop() 删...

  • 收集整理js常用工具函数

    (更新于2018.12.15 )持续更新... 收集整理的一些前端开发常用的工具函数 数组去重方法 数组快速排序 ...

  • 数组常用函数整理

    数组函数有:every,find,findIndex,forEachsome函数 every函数

  • PHP常用数组函数

    PHP数组常用函数分类整理 一、数组操作的基本函数 数组的键名和值 array_values($arr); 获得数...

  • php-常用函数

    常用函数 常用函数: 数组常用函数

  • js与ES6数组常用方法区别

    js数组 数组的概念及其定义方式字面量的形式 构造函数 数组的常用方法(依赖于数组使用)获取方法:对象.方法( )...

  • Javascript中数组常用方法总结

    Javascript中数组常用方法总结 创建方式:Array构造函数字面量Array创建数组的静态方法from: ...

  • JS数组及其常用方法

    数组的概念及其定义方式 数组:有序的值的集合 字面量的形式 构造函数 数组的常用方法(依赖于数组使用) 获取方法:...

  • PHP常用的函数

    PHP常用的函数整理1.array_unique() 函数用于移除数组中重复的值。如果两个或更多个数组值相同,只保...

  • Java Script 数组内置函数

    内置函数 一、数字常用方法 to.Fixed(n)保留小数n位前提是数字才能使用 二、数组常用方法 1、push:...

网友评论

    本文标题:数组常用的方法函数(整理)

    本文链接:https://www.haomeiwen.com/subject/zlvjfrtx.html