数组有很多的方法哦,常用的整理如下
参考文档:
方法列表
join()
push()
pop()
shift()
unshift()
sort()
reverse()
concat()
slice()
splice()
IndexOf() ( ES5新增)
lastIndexOf() (ES5新增)
forEach() (ES5新增)
map() (ES5新增)
filter() (ES5新增)
every() (ES5新增)
some() (ES5新增)
find() (ES6新增)
findIndex() (ES6新增)
includes() (ES6新增)
join()
把数组转换为字符串,通过给定的字符进行连接,默认是,
let foods = ['西瓜', '南瓜', '北瓜'];
console.log(foods.join());
// 输出: "西瓜,南瓜,北瓜"
console.log(foods.join(''));
// 输出: "西瓜南瓜北瓜"
console.log(foods.join('-'));
// 输出: "西瓜-南瓜-北瓜"
push()
把一个或多个元素添加到数组的末尾,并返回新的数组长度
let foods = ['西兰花', '花菜']
let length = foods.push('西红柿')
console.log(length)
// 输出:3
console.log(foods)
// 输出: ['西兰花','花菜','西红柿']
foods.push('西瓜', '南瓜', '北瓜', '冬瓜')
console.log(foods)
// 输出: ['西兰花', '花菜', '西红柿', '西瓜', '南瓜', '北瓜', '冬瓜']
pop()
从数组中删除最后一个元素,并返回该元素的值。注意:数组的长度会发生改变
let foods = ['西兰花','花菜']
let food = foods.pop()
console.log(food)
// 输出: 花菜
console.log(foods)
// 输出: ['西兰花']
shift()
从数组中删除第一个元素,并返回该元素的值。注意:数组的长度会发生改变
let foods = ['西兰花', '花菜']
let food = foods.shift()
console.log(food)
// 输出: 西兰花
console.log(foods)
// 输出: ['花菜']
unshift()
将一个或者多个元素添加到数组的开头,并返回数组的新长度
let foods = ['西兰花', '花菜']
let length = foods.unshift('西瓜')
console.log(length)
// 输出: 3
console.log(foods)
// 输出: ['西瓜','西兰花','花菜']
foods.unshift('南瓜', '冬瓜')
console.log(foods)
// 输出: ['南瓜','冬瓜','西瓜','西兰花','花菜']
sort()
对数组的元素进行排序,并返回数组。默认比较的数组元素转为字符串的utf-16的顺序,也可以传入函数进行排序
let numArr = [6, 2, 7, 1, 4, 9]
console.log(numArr.sort())
// 输出: [1,2,4,6,7,9]
let letterArr = ['e', 'c', 'z', 'd', 'f']
console.log(letterArr.sort())
// 输出 ['c','d','e','f','z']
let personArr = [
{ name: 'jack', age: 25 },
{ name: 'rose', age: 13 },
{ name: 'lucy', age: 20 }
]
console.log(
// a 和 b 就是数组中比较的元素
personArr.sort((a, b) => {
// 返回的 小于 0 和等于0 a继续在b之前
// 返回的 大于 0 a 和 b 的位置会调换
return a.age - b.age
})
)
// 按照 年龄 进行升序排列,如果希望倒序,可以调换位置
reverse()
将数组进行翻转,并返回该数组。注意:改变的是原始数组
let foods = ['西兰花', '花菜']
foods.reverse()
console.log(foods)
// 输出: ['花菜','西兰花']
concat()
用来合并两个或者多个数组,返回的是新数组,不会改变原始数组
let foods = ['西兰花', '花菜']
let fruits = ['西瓜', '香蕉']
console.log(foods.concat(fruits))
// 输出: ['西兰花', '花菜','西瓜','香蕉']
let meats = ['牛肉', '猪肉']
console.log(foods.concat(fruits, meats))
// 输出: ['西兰花', '花菜','西瓜','香蕉','牛肉','猪肉']
slice()
返回一个新的数组对象,值是由传入的起始索引和结束索引决定的。回调函数会接收两个参数,分别为:
- start 截取的开始数组索引(包括)
- end 截取的结束数组索引(不包括)
//如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾
var a=[1,2,3,4,5,6];
console.log(a.slice(0,3))
// 输出: [1,2,3]
console.log(a.slice(3))
// 输出: [4,5,6]
//如果两个参数中的任何一个是负数,array.length会和它们相加,试图让它们成为非负数,举例说明:
//当只传入一个参数,且是负数时,length会与参数相加,然后再截取
var a=[1,2,3,4,5,6];
console.log(a.slice(-1))
// 输出: [6]
//当只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组
var a=[1,2,3,4,5,6];
console.log(a.slice(-6))
// 输出: [1,2,3,4,5,6]
console.log(a.slice(-8))
// 输出: [1,2,3,4,5,6]
//当传入两个参数一正一负时,length也会先于负数相加后,再截取
var a=[1,2,3,4,5,6];
console.log(a.slice(2,-3))
// 输出: [3]
//当传入一个参数,大于length时,将返回一个空数组
var a=[1,2,3,4,5,6];
console.log(a.slice(6))
// 输出: []
splice()
根据给定的起始索引和结束索引删除指定个元素,会改变原数组 let foods = ['西兰花', '花菜','西瓜','香蕉','牛肉','猪肉']
// 从索引1开始删除1个元素
foods.splice(1,1)
console.log(foods)
// 输出: ['西兰花', '西瓜', '香蕉', '牛肉', '猪肉']
// 从索引2开始删除,删除所有
foods.splice(2)
console.log(foods)
// 输出: ['西兰花', '西瓜']
indexOf()
返回在数组中可以找到的符合条件的第一个索引值,如果不存在,返回-1let foods =['西瓜','西兰花']
console.log(foods.indexOf('西兰花'))
// 输出: 1
console.log(foods.indexOf('花菜'))
// 输出: -1
lastIndexOf()
从后往前查找符合条件的元素,符合返回索引,如果不存在,返回-1let foods =['西兰花','西瓜','西兰花']
console.log(foods.lastIndexOf('西兰花'))
// 输出: 2
console.log(foods.lastIndexOf('花菜'))
// 输出: -1
forEach()
将数组的每一个元素,挨个的传递给传入的回调函数 回调函数会接收三个参数,分别为:- element 当前元素
- index 当前元素的索引
- array 调用forEach的数组
let foods =['西兰花','西瓜','西兰花']
foods.forEach(v=>{
console.log(v)
})
// 依次输出: 西兰花 西瓜 西兰花
map()
返回一个新的数组,新数组的元素,是数组中每个元素调用一个提供的函数后返回的结果 回调函数会接收三个参数,分别为- element 当前元素
- index 当前元素的索引
- array 调用map()的数组
let foods = ['西兰花', '西瓜']
let newFoods = foods.map(v => {
return v + '好好吃'
})
console.log(foods)
// 输出: ['西兰花', '西瓜']
console.log(newFoods)
// 输出: ['西兰花好好吃', '西瓜好好吃']
filter()
返回一个新的数组,新数组的元素是数组中每个元素调用一个提供的函数,根据返回值的真假决定是否保留 回调函数会接收三个参数,分别为- element 当前元素
- index 当前元素的索引
- array 调用filter()的数组
let foods = ['西兰花', '西瓜', '花椒', '剁椒']
console.log(
foods.filter(v => {
return v.indexOf('西') == 0
})
)
// 输出: ['西兰花', '西瓜']
every()
检验数组中的每个值是否都满足回调函数的校验,都满足结果为true,反之为false 回调函数会接收三个参数,分别为- element 当前元素
- index 当前元素的索引
- array 调用every()的数组
let numArr = [2, 5, 6, 7, 8, 9]
console.log(
numArr.every(v => {
return v > 2
})
)
// 输出: false
console.log(
numArr.every(v => {
return v >= 2
})
)
// 输出: true
some()
和every类似,只需要有任意一个元素满足回调函数的校验条件结果就是true,都不满足就是false 回调函数会接收三个参数,分别为 - element 当前元素 - index 当前元素的索引 - array 调用some()的数组 let numArr = [2, 5, 6, 7, 8, 9]
console.log(
numArr.some(v => {
return v == 1
})
)
// 输出: false
console.log(
numArr.some(v => {
return v == 2
})
)
// 输出: true
find()
返回满足提供的回调函数校验的第一个元素的值,如果都不满足,返回undefined 回调函数会接收三个参数,分别为- element 当前元素
- index 当前元素的索引
- array 调用find()的数组
let foods = ['西兰花', '西瓜', '椒盐', '剁椒']
console.log(
foods.find(v => {
return v.indexOf('椒') != -1
})
)
// 输出: 椒盐
console.log(
foods.find(v => {
return v.indexOf('花菜') != -1
})
)
// 输出: undefined
findIndex()
返回数组中满足提供的回调函数校验的第一个元素的索引,否则返回-1 回调函数会接收三个参数,分别为- element 当前元素
- index 当前元素的索引
- array 调用findIndex()的数组
let foods = [
{ name: '西兰花', color: '绿' },
{ name: '辣椒', color: '红' },
{ name: '花菜', color: '白' }
]
console.log(
foods.findIndex(v => {
return v.color == '白'
})
)
// 输出: 2
console.log(
foods.findIndex(v => {
return v.color == '黄'
})
)
// 输出: -1
includes()
返回数组中是否存在指定的值,如果存在返回true,否则返回falselet foods = ['西兰花', '西瓜', '椒盐', '剁椒']
console.log(foods.includes('西瓜'))
// 输出: true
console.log(foods.includes('花菜'))
// 输出: false