map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
let array = [1, 2, 3]
let array1 = array.map(item=> item *2)
console.log(array1,array)
// [2, 4, 6] [1, 2, 3]
在对象中添加新的属性
let array = [{name: 'Tom', age: 4},{name: 'Jerry',age: 3}]
let array1 = array.map(item=> {
item.sex = '男'
return item
})
console.log(array1)
// [{name: 'Tom', age: 4, sex: '男'},{name: 'Jerry', age: 3, sex: '男'}]
这个在处理列表数据时经常会用到,追加进去的属性在Vue项目中没有双向绑定,自己也在网上搜了原因,好像是Vue是监听数据存放在栈内存中的值,直接对数组强制转换
array1 = JSON.parse(JSON.stringify(array1))
根据条件修改某个属性,我这里是用三元运算符去判断的,也可以通过if去判断,具体看项目需求
let array = [{name: 'Tom', age: 4},{name: 'Jerry',age: 3}]
let array1 = array.map(item=> {
item.name == 'Tom' ? item.age = 5 : ''
return item
})
console.log(array1)
// [{name: 'Tom', age: 5},{name: 'Jerry', age: 3}]
修改属性名
let array = [{name: 'Tom', age: 4},{name: 'Jerry',age: 3}]
let array1 = array.map(item=> {
return {
label: item.name,
value: item.age
}
})
console.log(array1)
// [{label: 'Tom', value: 5},{label: 'Jerry', value: 3}]
遍历数组,返回新数组
let array = [1, 2, 3]
array.forEach((value, index, arr)=> {
console.log(value, index, arr)
}
)
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]
let array = [1, 2, 3]
array.forEach((value, index, arr)=> {
value = value * 2
console.log(value)
}
)
console.log(array)
// 2
// 4
// 6
// [1, 2, 3]
let array = [1, 2, 3]
array.forEach((value, index, arr)=> {
arr[index] = value * 2
return arr
}
)
console.log(array)
// [2, 4, 6]
向数组末尾追加一个元素
let array = [1, 2, 3]
array.push(4,5)
console.log(array)
// [1, 2, 3, 4, 5]
let obj = {name: 'Tom', age: 4}
array.push(obj)
console.log(array)
// [1, 2, 3, 4, 5, {name: 'Tom', age: 4}]
删除数组末尾的元素,返回值是删除的元素
let array = [1, 2, 3]
console.log(array.pop()) // 3
console.log(array) // [1, 2]
删除数组第一个元素,返回值是删除的元素
let array = [1, 2, 3]
console.log(array.shift()) // 1
console.log(array) // [2, 3]
从前面添加元素, 返回值是添加完后的数组的长度
let array = [1, 2, 3]
console.log(array.unshift(2)) // 4
console.log(array) // [2, 1, 2, 3]
删除从index(索引值)开始之后的那个元素。返回值是删除的元素
index:数组索引值
num: 截取长度
let array = [1, 2, 3, 4, 5, 6]
console.log(array.splice(2,2)) // [3, 4]
console.log(array) // [1, 2, 5, 6]
连接两个数组,返回新数组,不改变原数组
let array = [1, 2, 3]
console.log(array.concat([5, 6])) // [1, 2, 3, 5, 6]
console.log(array) // [1, 2, 3]
将数组进行排序,按照数组元素最左边的字符进行排序
let array = [1, 2, 3, 10, 6, 20]
console.log(array.sort())
// [1, 10, 2, 20, 3, 6]
let array1 = array.sort((a, b)=>a - b)
console.log(array1)
// [1, 2, 3, 6, 10, 20]
let array2 = array.sort((a, b)=>b - a)
console.log(array2)
// [20, 10, 6, 3, 2, 1]
将数组反转,返回值是反转的数组,改变原数组
let array = [1, 2, 3, 10, 6, 20]
console.log(array.reverse())
// [20, 6, 10, 3, 2, 1]
console.log(array)
// [20, 6, 10, 3, 2, 1]
切去索引值start到索引值end的数组,不包含end索引的值,返回值是切出来的数组,不改变原数组
let array = [1, 2, 3, 10, 6, 20]
console.log(array.slice(2, 4))
// [3, 10]
console.log(array)
// [1, 2, 3, 10, 6, 20]
过滤数组,返回一个满足要求的数组
let array = [1, 2, 3, 10, 6, 20]
let array1 = array.filter((item, index)=> item > 5)
console.log(array1)
// [10, 6, 20]
let array = [{name: 'Tom', age: 4},{name: 'Jerry',age: 3}]
let array1 = array.filter((item, index)=> item.age > 3)
console.log(array1)
// [{name: 'Tom', age: 4}]
依据判断条件,数组的元素是否全满足,若满足则返回ture
let array = [1, 2, 3, 10, 6, 20]
let array1 = array.every((item, index)=> item > 5)
console.log(array1) // false
let array = [10, 6, 20]
let array1 = array.every((item, index)=> item > 5)
console.log(array1) // true
依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture
let array = [1, 2, 3]
let array1 = array.some((item, index)=> item > 5)
console.log(array1) // false
let array = [1, 2, 10, 6, 20]
let array1 = array.some((item, index)=> item > 5)
console.log(array1) // true
迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值
callback:
previousValue 必选 --上一次调用回调返回的值,或者是提供的初始值(initialValue)
currentValue 必选 --数组中当前被处理的数组项
index 可选 --当前数组项在数组中的索引值
array 可选 --原数组
initialValue: 可选 --初始值
实行方法:回调函数第一次执行时,preValue 和 curValue 可以是一个值,如果 initialValue 在调用 reduce() 时被提供,那么第一个 preValue 等于 initialValue ,并且curValue 等于数组中的第一个值;如果initialValue 未被提供,那么preValue 等于数组中的第一个值.
let array = [1, 2, 3]
let array1 = array.reduce((pre,cur)=> pre + cur)
console.log(array1) // 6
let array2 = array.reduce((pre,cur)=> pre + cur, 5)
console.log(array2) // 11
(1)计算数组中每个元素出现的次数
let names = ['peter', 'mary', 'tom', 'bob', 'tom','peter'];
let nameNum = names.reduce((pre, cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum )
// {peter: 2, mary: 1, tom: 2, bob: 1}
(2)数组去重
let array = [1, 2, 3, 4, 4, 1]
let array1 = array.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(array1)
// [1, 2, 3, 4]
(3)将多维数组转化为一维
let array = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre, cur)=>pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
}
console.log(newArr(array))
// [0, 1, 2, 3, 4, 5, 6, 7]
与reduce()功能一样,不同的是,reduceRight()从数组的末尾向前将数组中的数组项做累加。
查找某个元素的索引值,若有重复的,则返回第一个查到的索引值若不存在,则返回 -1
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.indexOf(6)
console.log(array1) // 3
let array2 = array.indexOf(5)
console.log(array2) // -1
和arr.indexOf()的功能一样,不同的是从后往前查找
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.indexOf(6)
console.log(array1) // 5
let array2 = array.indexOf(5)
console.log(array2) // -1
将伪数组转为数组
let str = '02324'
let array = Array.from(str)
console.log(array)
// ['0', '2', '3', '2', '4']
将一组值转换成数组,类似于声明数组
let str = '22'
let array = Array.of(str)
console.log(array)
// ['22']
console.log(new Array('11'))
// ['11']
new Array()有缺点,因为参数导致重载
console.log(new Array(2)) //[empty × 2] 是个空数组
console.log(Array.of(2)) // [2]
在当前数组内部,将制定位置的数组复制到其他位置,会覆盖原数组项,返回当前数组参数:
target --必选 索引从该位置开始替换数组项
start --可选 索引从该位置开始读取数组项,默认为0.如果为负值,则从右往左读。
end --可选 索引到该位置停止读取的数组项,默认是Array.length,如果是负值,表示倒数
let array = [1, 2, 3, 4, 5, 6, 7]
let array1 = array.copyWithin(1)
console.log(array1)
// [1, 1, 2, 3, 4, 5, 6]
let array = [1, 2, 3, 4, 5, 6, 7]
let array1 = array.copyWithin(1,3)
console.log(array1)
// [1, 4, 5, 6, 7, 6, 7]
let array = [1, 2, 3, 4, 5, 6, 7]
let array1 = array.copyWithin(1,2,4)
console.log(array1)
// [1, 3, 4, 4, 5, 6, 7]
找到第一个符合条件的数组成员
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.find((val, index, arr)=>val > 3)
console.log(array1) // 10
找到第一个符合条件的数组成员的索引值
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.findIndex((val, index, arr)=>val > 3)
console.log(array1) // 2
使用给定的值,填充一个数组,ps:填充完后会改变原数组参数:
target – 待填充的元素
start – 开始填充的位置-索引
end – 终止填充的位置-索引(不包括该位置)
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.fill(2)
console.log(array1)
// [2, 2, 2, 2, 2, 2]
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.fill(2,3)
console.log(array1)
// [1, 2, 10, 2, 2, 2]
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.fill(2,3,4)
console.log(array1)
// [1, 2, 10, 2, 20, 6]
判断数中是否包含给定的值
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.includes(2)
console.log(array1) // true
console.log(array.includes(5)) // false
与indexOf 区别:
1、indexOf 返回的是索引值,includes返回的是布尔值
2、indexOf 不能判断 NaN,返回-1,includes可以判断NaN
遍历数组的键名
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.keys()
for (let key of array1){
console.log(key) // 0,1,2,3,4,5
}
遍历数组值
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.values()
for (let val of array1){
console.log(val) // 1, 2, 10, 6, 20, 6
}
遍历数组的键名和键值
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.entries()
for (let e of array1) {
console.log(e); // [0,1] [1,2] [2,10] [3,6] [4,20] [5,6]
}