您现在的位置是：首页 > 网站制作 > JavaScript记录JavaScript记录
js常用的数组方法
三七2023-02-15【JavaScript记录】人已围观
简介不改变原数组join()参数：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。语法：array.join(separator)返回值：转换后的字符串使用场景：把数组转为字符串的方法l
不改变原数组
join()
参数：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
语法：array.join(separator)
返回值：转换后的字符串
使用场景：把数组转为字符串的方法
let arr = [1, 2, 3, 4]
let res = arr.join('')
console.log('res', res) // 1234
let res2 = arr.join(',')
console.log('res2', res2) // 1,2,3,4concat()
语法：array1.concat(array2,array3,...,arrayX)
参数：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值：返回新的数组
使用场景： 是连接多个数组的方法
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
let res = arr.concat(arr2)
console.log('res', res) // [1, 2, 3, 4, 5, 6]
// 可以使用ES6的"..."扩展运算符更简单
let res = [...arr, ...arr2] // [1, 2, 3, 4, 5, 6]forEach()
语法：array.forEach(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：undefiend
使用场景：用于调用数组的每个元素
let arr = [1, 2, 3]
let res = []
arr.forEach((item, index) => {
res.push(item * 2)
})
console.log('res', res) // [2, 4, 6]map()
语法：array.map(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：返回新的数组
使用场景：比如我们只想拿到arr数组中name
let arr = [
{
name: '轨迹',
year: '10'
},
{
name: '外婆',
year: '11'
},
{
name: '暗号',
year: '12'
}
]
const res = arr.map(item => item.name)
console.log('res', res) // ['轨迹', '外婆', '暗号']filter()
语法：array.filter(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：返回(条件满足)新的数组
使用场景：过滤出想要的新数组
// 我们只想要告白气球，过滤掉其他的
let arr = [
{
name: '半岛铁盒',
year: '10'
},
{
name: '回到过去',
year: '11'
},
{
name: '告白气球',
year: '12'
}
]
const res = arr.filter(item => item.name === '告白气球')
console.log('res', res) // { name: '告白气球', year: 12 }every()
语法：array.every(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：布尔值。如果所有元素都通过检测返回 true，否则返回 false。
使用场景：一个班级所有人的分数60分(含60分)以上就是优秀班级
注意点：如果有一个不通过就返回false，不会再进行检测。
let arr = [
{
name: '小明',
score: 90
},
{
name: '小红',
score: 88
},
{
name: '小花',
score: 70
}
]
const res = arr.every(item => item.score >= 60)some()
语法：array.some(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：布尔值。如果有一个元素满足就返回 true，否则返回 false。
使用场景：一个班级只要有一个人超过90分就是优秀班级啦
注意点：如果有一个通过就返回true，不会再进行检测。
let arr = [
{
name: '小明',
score: 90
},
{
name: '小红',
score: 100
},
{
name: '小花',
score: 70
}
]
const res = arr.some(item => item.score > 90)
console.log('res', res) // true => 小花同学好棒，超过了90咱们又是优秀班级啦reduce()
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数：total => 必需，初始值、或者计算结束后的值；currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象； initialValue => 可选，传递给函数的初始值
返回值：返回计算后的结果
使用场景：这个方法能实现的东西太多了，有兴趣的同学可以去百度看看，咱们这里就是实现一个常规的累加和吧
let arr = [1, 2, 3, 4]
const res = arr.reduce((pre, cur) => pre + cur, 0)
console.log('res', res) // 10find()
语法：array.find(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：返回(条件满足)的元素
使用场景：返回第一个满足条件的元素，比如我们翻试卷，看看谁先超过90，有同学超过了，我们就看这同学的答案，我们就不会再往下看了。
注意点：只要有一个元素满足条件就返回当前元素，不会再进行检测；如果没有都没有满足条件就返回 undefined
let arr = [
{
name: '小明',
score: 99
},
{
name: '小红',
score: 100
},
{
name: '小花',
score: 70
}
]
const res = arr.find(item => item.score > 90)
console.log('res', res) // {name: '小明', score: 99}findIndex()
语法：array.findIndex(function(currentValue, index, arr))
参数：currentValue => 必需，当前元素；index => 可选，当前元素索引；arr => 可选，当前元素所属的数组对象
返回值：返回(条件满足)的元素
使用场景：返回第一个满足条件的元素，比如我们翻试卷，看看谁先超过90，有同学超过了，我们就得到我们翻了第几张卷子，我们就不会再往下看了。
注意点：只要有一个元素满足条件就返回当前元素的索引，不会再进行检测；如果没有都没有满足条件就返回 -1
let arr = [
{
name: '小明',
score: 60
},
{
name: '小红',
score: 50
},
{
name: '小花',
score: 70
}
]
const res = arr.findIndex(item => item.score > 90)
console.log('res', res) // -1 => 没有同学达到条件所以返回了 -1indexOf()
语法：string.indexOf(searchvalue,start)
参数：searchvalue => 必需，规定检索的字符串； start => 可选，规定字符串开始检索的位置
返回值：如果找到就返回第一次出现的索引，找不到就返回 -1
使用场景：咱们找出c的索引，然后去xxoo
let str = 'abcdefg'
const index = str.indexOf('c')
console.log('index', index) // 2includes()
语法：string.includes(searchvalue, start)
参数：searchvalue => 必需，规定检索的字符串； start => 可选，从那个位置开始查找，默认为0
返回值：布尔值，找到就返回true，否则返回false
使用场景：如果检测的数组中有 彭于晏 那么就返回true
注意点：不区分大小写哟
let arr = ['胡歌', '彭于晏', '吴彦祖']
const res = arr.includes('彭于晏')
console.log('res', res) // true slice()
语法：array.slice(start,end)
参数：start => 可选从那个位置开始选取，如果是负数就从数组的倒数第几个开始；end => 可选，从那个位置结束，如果不给参数则默认到数组的最后一个元素。
返回值：返回一个新的数组
使用场景：从开始到结束（[)左闭右开，即不包括结束）选择数组的一部分浅拷贝到一个新数组。
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.slice(1, 5)); // [ 1, 2, 3, 4 ]at()
语法：array.at(index)
参数：要返回的数组元素的索引（位置）。当传递负数时，支持从数组末端开始的相对索引；也就是说，如果使用负数，返回的元素将从数组的末端开始倒数。
返回值：匹配给定索引的数组中的元素。如果找不到指定的索引，则返回undefined
使用场景：取数组最后一个元素
let arr = ['珊瑚海', '发如雪', '黑色毛衣']
const res = arr.at(-1)
console.log('res', res) // 黑色毛衣
// ES5取最后一个元素
arr[arr.length - 1]flat()
语法：array.flat(index)
参数：数值 默认是0
返回值：返回扁平后的数组
使用场景：把一个多维数组扁平
const arr = [1, [2]]
const res = arr.flat() // [1, 2]
// Infinity关键字参数
const arr1 = [1, [2, [3, [4, 5]]], 6]
const res2 = arr1.flat(Infinity)
console.log(names) // [1, 2, 3, 4, 5, 6]fill()
语法：array.fill(value, start, end)
参数：value => 必需，填充的值；start => 可选，开始填充的位置；end, 可选，停止填充位置
返回值：返回新的数组
使用场景：把一个数组进行填充
let arr = ['珊瑚海', '发如雪', '黑色毛衣']
const res = arr.fill('爱在西元前')
console.log('res', res) // ['爱在西元前', '爱在西元前', '爱在西元前']改变对象数组里某项字段的值
let res= arr.find(item=>item.name == '珊瑚海')
arr.concat(res.tt = 6)
console.log(arr)
改变数组
push()
语法：array.push(item1,item2, ...,itemX)
参数：必需，要添加到数据的元素
返回值：新数组长度
使用场景：将元素添加到数组的末尾
let arr = []
arr.push('退后', '搁浅', '彩虹')
console.log('arr', arr) // ['退后', '搁浅', '彩虹']pop()
语法：array.pop()
返回值：返回删除的元素
使用场景：删除数组最后的元素
let arr = ['青花瓷', '我不配', '甜甜的']
const res = arr.pop()
console.log('res', res) // 甜甜的
console.log('arr', arr) // ['青花瓷', '我不配']shift()
语法：array.shift()
返回值：返回删除的元素
使用场景：删除数组第一个元素
let arr = ['说好不哭', '烟花易冷', '本草纲目']
const res = arr.shift()
console.log('res', res) // 说好不哭
console.log('arr', arr) // ['烟花易冷', '本草纲目']unshift()
语法：array.unshift(item1,item2, ...,itemX)
参数：可选。向数组起始位置添加一个或者多个元素。
返回值：返回新数组的长度
使用场景：方法可向数组的开头添加一个或更多元素，并返回新的长度。
let arr = ['晴天', '暗号']
const res = arr.unshift('外婆')
console.log('res', res) // 3
console.log('arr', arr) // ['外婆', '晴天', '暗号']splice()
语法：array.splice(index,howmany,item1,.....,itemX)
参数：index =>必需，从何处添加/删除元素；howmany => 可选，要删除几个元素，必需是数字，可以为0，如果不给参数则从index删除到数组的结尾 item1,.....,itemX => 可选，要添加到数组的新元素
返回值：如果是删除元素就返回含有被删除元素的数组
使用场景：数组可以在规定的位置删除/添加元素
let arr = ['听妈妈的话', '算什么男人', '黑色幽默', '可爱女人']
const res = arr.splice(1, 2, '千里之外', '反向的钟')
console.log('res', res) // ['算什么男人', '黑色幽默']
console.log('arr', arr) // ['听妈妈的话', '千里之外', '反向的钟', '可爱女人']sort()
语法：array.sort(sortfunction)
参数：sortfunction => 可选，规定排序顺序，必需可选
使用场景：方法用于对数组的元素进行排序。
// 个位数直接 arr.sort() 就可以
let arr = [1, 6, 2, 9, 4]
arr.sort()
console.log('arr', arr) // [1, 2, 4, 6, 9]
// 非个位数
let arr = [40, 100, 1, 5, 25, 10]
arr.sort(function (a, b) {
return a - b // 如果是b - a 就是倒过来排序了
})
console.log('arr', arr) // [1, 5, 10, 25, 40, 100]
// 字母
let arr = ['Banana', 'Orange', 'Apple', 'Mango']
arr.sort()
console.log('arr', arr) // ['Apple', 'Banana', 'Mango', 'Orange']reverse()
语法：array.reverse()
参数： 无
返回值：
| 颠倒顺序后的数组 |
使用场景：把一个数组的元素翻转过来
let arr = [1, 2, 3, 4, 5, 6]
const res = arr.reverse()
console.log('res', res) // [6, 5, 4, 3, 2, 1]转自https://zhuanlan.zhihu.com/p/533649286
Tags：
很赞哦！ ()
