JavaScript数组方法整理

287 阅读3分钟
  1. jion()
  2. push()和pop()
  3. shift()和unshift()
  4. sort()
  5. reverse()
  6. concat()
  7. slice()
  8. splice()
  9. indexOf()和lastIndexOf()
  10. forEach()(ES6)
  11. map()(ES6)
  12. fliter()(ES6)
  13. every()(ES6)
  14. some()(ES6)
  15. reduce()(ES6)
  16. find()(ES6)

join

把数组转换为字符串,给他规定一个连接符,默认是逗号

var arr = [1,2,3,4]
arr.join('-')  // '1-2-3-4'

push和pop

push():把内容添加到数组末尾,并返回修改后的长度 pop():移除数组的最后一项,并被返回移除的那个值

var a = [1,2,3]
var b = 's'
a.push(b)
console.log(a) // [1,2,3,'s']
console.log(a.push(b))  // 4

var item = a.pop()
console.log(item) // 's'

shift和unshift

shift:删除原数组第一项,并返回删除元素的值,如果元素为空,则返回undefined unshift:将参数添加到原数组开头,并返回数组的长度

var a = [1,2,3]
a.shift() // 1

var b = 'f'
a.unshift(b) //3
console.log(a) //['f', 2, 3]

sort

将数组里的项从小到大排序

var a = [2,5,5,3,6,1]
var item = a.sort()
console.log(item)  //[1, 2, 3, 5, 5, 6]

reverse

反转数组项的顺序

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

concat

将参数添加到原数组。这个方法会创建当前数组的一个副本,将参数添加到这个副本数组的末尾。最后返回新的数组,不会改变原有数组

var a = [1,2,3]
var b = a.concat(4,[5,6])
console.log(a) //[1,2,3]
console.log(b) //[1,2,3,4,5,6]

slice

返回原数组指定开始下标和结束下标之间的新数组,但不包括结束位置的项

var a = [1,2,3,4,5,6]
var a1 = a.slice(1)
var a2 = a.slice(2,4)
console.log(a1) // [2,3,4,5,6]
console.log(a2) //[3,4]

splice

删除、插入和替换

删除两个参数:splice(删除的第一项的位置,删除的数量) 删除的数量包括第一项

插入三个参数:splice(起始位置,删除的数量0,插入的项目) 插入到起始位置之前

替换三个参数:splice(起始位置,替换的数量,插入的项目)

var a = [1,2,3,4,5,6]

// 删除
var a1 = a.splice(2,3) 
console.log(a) //[1,2,6]

// 插入
var a2 = a.splice(1,0,'d','g')
console.log(a) //[1,'d','g',2,6]

// 替换
var a3 = a.splice(3,1,'a','b')
console.log(a) //[1,'d','g','a','b',6]

indexOf和lastIndexOf

indexOf(要查找的项,开始进行查找的起始位置[可选]) 从前往末尾查找

lastIndexOf(要查找的项,开始进行查找的索引[可选]) 从末尾往前查找

var a = [1,4,5,6,3,5,6,7]
console.log(a.indexOf(4)) //1
console.log(a.indexOf(5, 4)) // 5
console.log(a.lastIndexOf(6)) //6
console.log(a.lastIndexOf(6,4)) //3

forEach

对数组进行遍历循环

var a [1,2,3,5,6,345,5]
a.forEach((item) => {
    console.log(item) //1,2,3,5,6,345,5
})

map

map对数组进行遍历循环

var a [1,2,3,5,6,345,5]
var b = a.map((item) => {
    return item
})
console.log(b) //1,2,3,5,6,345,5

map和forEach区别

1、map会分配内存空间储存新数组并返回,forEach不会返回
2、forEach允许callback更改原始数据的元素。map返回新数组

比如
var a [1,2,3,5,6,345,5]
var b = a.forEach((item) => {
    return item
})
console.log(b) // undefiend

filter

数组过滤,给数组中的每一项给定过滤条件,返回满足过滤条件的新数组

var a = [1,4,5,6,3,5,6,7]
var b = a.filter((item) => {
	return item >= 4
})
console.log(b) //[4, 5, 6, 5, 6, 7]

every

判断数组每一项都是否满足条件,只有所有项都满足,才返回true

var a = [1,4,5,6,3,5,6,7]
var b = a.every((item) => {
	return item > 3
})
console.log(b) // false

some

判断数组是否存在满足条件,只要有一项满足,就会返回true

var a = [1,4,5,6,3,5,6,7]
var b = a.some((item) => {
	return item > 3
})
console.log(b) // true

reduce

累加器,输出return叠加什么就返回什么

var a = [1,4,5,6,3,5,6,7]
var b = a.reduce((pre,val) => {
	pre = pre+val
	console.log(pre) //5,10,,16,19,24,30,37
	return pre
})
console.log(b) // 37

find

查找目标元素,一找到就返回,找不到返回undefined

var a = [1,4,5,6,3,5,6,7]
var b = a.find((item) => {
	return item > 3
})
console.log(b) // 4