- Array.map()
将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
let arr = [1, 2, 3];
let newArr = arr.map((item, index) => {
return item * 3
});
// newArr = [3, 6, 9]
- Array.forEach()
将数组中的每个元素执行传进提供的函数,方法执行没有返回值,不影响原数组
function resultFn(array, ...res) {
res.forEach((item, index) => {
array[index] = item
})
}
let result = [];
resultFn(result, 1, 2, 3);
// console.log(result) [1, 2, 3]
- Array.filter()
将所有元素进行判断,将满足条件的元素作为一个新的数组返回
let arr = [1, 2, 3, 4, 5];
let result = arr.filter((item, index) => {
return item > 2
});
// console.log(result) [3, 4, 5]
let arr = [1, 2, 3, 2, 3, 4];
let result = arr.filter((el, index, arr) => {
return arr.indexOf(el) === index
});
// console.log(arr) [1, 2, 3, 4]; 数组去重
- Array.every()
将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false
let arr = [1, 2, 3, 2, 3, 4];
let result = arr.every((item, index, arr) => {
return item < 6
});
// console.log(result) true
- Array.some()
a) 将所有元素进行判断返回一个布尔值,如果有一个元素满足条件,则表达式返回true 剩余的元素不会再执行检测
b) 若所有元素都不满足判断条件,则返回false
let arr = [1, 2, 3, 2, 3, 4];
let result = arr.some((item) => {
return item > 2
});
// console.log(result) true
- Array.reduce()
接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用 reduce 的数组)
5、 initialValue (作为第一次调用 callback 的第一个参数。)
let arr = [1, 2, 3, 4];
let result = arr.reduce((prev, cur, index, arr) => {
return prev + cur;
}, 0)
// console.log(result) 10, 数组求和
const timeArr = [
{
label: '分钟',
value: 'minute'
},
{
label: '小时',
value: 'hour'
},
{
label: '天',
value: 'day'
}
]
const timeArrMap = timeArr.reduce((acc, cur) => {
acc[cur.label] = cur.value
return acc
}, {})
const dataForm = ref({
max: '200',
unit: '天'
})
const timeName = computed(() => {
const value = dataForm.value.max
return value + timeArrMap[dataForm.value.unit]
})
setTimeout(() => {
dataForm.value.maxitime = 100
dataForm.value.unit = '小时'
}, 3000)
- Array.find()
a) 返回通过测试(函数内判断)的数组的第一个元素的值
b) 数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数
c) 如果没有符合条件的元素返回 undefined
let arr = [1, 3, 5, 7, 9];
let result = arr.find((item) => {
return item > 7
});
// console.log(result) 9
- Array.findIndex()
a) 返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
b) 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
c) 如果没有符合条件的元素返回 -1
let arr = [1, 2, 3, 4, 5];
let result = arr.findIndex((item) => {
return item > 4
});
console.log(result) // 4
- Array.includes()
a) 判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
if (type === 1 || type === 2 || type || 3) {
// code
}
// 用include简写
if ([1, 2, 3].includes(type)) {
// code
}
其他基础常用方法
- Array.shift()
a) 删除数组第一位元素,返回删除的值
b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.shift() // vue
console.log(arr) // ['css', 'js']
- Array.unshift()
a) 添加数组第一位元素,返回新增后的数组长度
b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.unshift('react') // 4
console.log(arr) // ['vue', 'css', 'js', 'react']
- Array.pop()
a) 删除数组最后一位元素,返回删除的值
b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.pop() // js
console.log(arr) // ['vue', 'css']
- Array.push()
a) 给数组末尾添加元素,返回新增后的数组长度
b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.push('react', 'anglar') // 5
数组拼接 arr1.concat(arr2)
反转数组
数组转换成字符串
- Array.join()
a) 方法将数组作为字符串返回
b) 元素将由指定的分隔符分隔。默认分隔符是逗号 (,)
let arr = ['vue', 'css', 'js']
arr.join() // "vue,css,js"
- Array.slice()
a) 选择数组的一部分,并返回新数组(截取数组)
b) slice(start, end) 左闭右开区间
let arr = ['vue', 'css', 'js']
arr.slice(1, 2) // ["css"]
- Array.splice()
a) 从数组中添加、替换、删除
// 添加
let arr = ['vue', 'css', 'js']
arr.splice(2, 0,'react', 'anglar') //从下标为2处,删除0个元素,新增2个元素
console.log(arr) // ["vue", "css", "react", "anglar", "js"]
// 替换
let arr = ['vue', 'css', 'js']
arr.splice(1, 1, 'hellow world') // 从下标为1处,替换1个元素
console.log(arr) // ["vue", "hellow world", "js"]
// 删除
let arr = ['vue', 'css', 'js']
arr.splice(1, 1) // 从下标为1处,删除1个元素
console.log(arrr) // ["vue", "js"]
- Array.sort(callback)
a)sort排序: 正序和倒序,有返回值,a-b正序,b-a倒序
arr1.sort((a, b) =>{
return a - b
})
网友评论