1、map()
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}]
2、forEach()
遍历数组，返回新数组
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]
3、push()
向数组末尾追加一个元素
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}]
4、pop()
删除数组末尾的元素，返回值是删除的元素
let array = [1, 2, 3]
console.log(array.pop()) // 3
console.log(array) // [1, 2]
5、shift()
删除数组第一个元素，返回值是删除的元素
let array = [1, 2, 3]
console.log(array.shift()) // 1
console.log(array) // [2, 3]
6、unshift()
从前面添加元素, 返回值是添加完后的数组的长度
let array = [1, 2, 3]
console.log(array.unshift(2)) // 4
console.log(array) // [2, 1, 2, 3]
7、splice(index,num)
删除从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]
8、concat()
连接两个数组，返回新数组，不改变原数组
let array = [1, 2, 3]
console.log(array.concat([5, 6])) // [1, 2, 3, 5, 6]
console.log(array) // [1, 2, 3]
9、sort()
将数组进行排序，按照数组元素最左边的字符进行排序
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]
10、reverse()
将数组反转，返回值是反转的数组，改变原数组
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]
11、slice(start,end)
切去索引值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]
12、filter()
过滤数组，返回一个满足要求的数组
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}]
13、every()
依据判断条件，数组的元素是否全满足，若满足则返回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
14、some()
依据判断条件，数组的元素是否有一个满足，若有一个满足则返回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
15、reduce(callback，initialValue )
迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
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
16、reduce()拓展
（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]
17、reduceRight()
与reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加。
18、indexOf()
查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -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
19、lastIndexOf()
和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
20、Array.from()
将伪数组转为数组
let str = '02324'
let array = Array.from(str)
console.log(array)
// ['0', '2', '3', '2', '4']
21、Array.of()
将一组值转换成数组，类似于声明数组
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]
22、copyWithin()
在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组参数:
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]
23、find()
找到第一个符合条件的数组成员
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.find((val, index, arr)=>val > 3)
console.log(array1) // 10
24、findIndex()
找到第一个符合条件的数组成员的索引值
let array = [1, 2, 10, 6, 20, 6]
let array1 = array.findIndex((val, index, arr)=>val > 3)
console.log(array1) // 2
25、fill(target, start, end)
使用给定的值，填充一个数组,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]
26、includes()
判断数中是否包含给定的值
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
27、keys()
遍历数组的键名
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
}
28、values()
遍历数组值
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
}
29、entries()
遍历数组的键名和键值
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]
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
