本周新需求暂未提出,有较多空余时间,开始自学vue3.0,使用vue3.0完成了todolist
1.该todolist可以进行增删改查,代码放置在Gitee上,地址如下
2.js数组方法foreaEach和map的区别
网上关于二者的区别众说纷纭,争议点主要在于是否能更改原数组。其实二者的主要区别在于是否有返回值，MDN官方对二者定义如下:
forEach概念
Map概念
在我们的印象中,forEach会更改原数组,map不会更改原数组,MDN说二者的callback参数可以更改原数组,实验如下:
当arr中元素为基本类型时:
const arr1 = [1, 2, 3, 4, 5]
arr1.forEach(ele => {
ele = ele * 2
})
console.log(arr1) //[ 1, 2, 3, 4, 5 ] 未改变
arr1.map(ele => {
ele = ele * 2
})
console.log(arr1) //[ 1, 2, 3, 4, 5 ] 未改变
二者均未更改原数组
当arr中元素为引用类型时:
const arr2 = [
{ a: 1, b: 2, c: 3 },
{ a: 1, b: 2, c: 3 },
{ a: 1, b: 2, c: 3 }
]
arr2.forEach(ele => {
ele.a = 2
})
console.log(arr2) //[ { a: 2, b: 2, c: 3 }, { a: 2, b: 2, c: 3 }, { a: 2, b: 2, c: 3 } ] 被更改
arr2.map(ele => {
ele.b = 6
})
console.log(arr2) //[ { a: 2, b: 6, c: 3 }, { a: 2, b: 6, c: 3 }, { a: 2, b: 6, c: 3 } ] 被更改
二者均可以更改原数组
可以发现二者都可以改变数组内容为引用类型的数组，基本类型则都不可以改变，故二者的区别在于是否有返回值，返回值测试如下：
forEach返回值测试
const arr3 = [6, 6, 6, 6, 6, 6]
const res1 = arr3.forEach(ele => {
return ele + 1
})
console.log(res1) //undefined
不管写不写return 都为undefined,即没有返回值
map返回值测试
const arr3 = [6, 6, 6, 6, 6, 6]
const res2 = arr3.map(ele => {
ele = ele + 1
})
console.log(res2) //[ undefined, undefined, undefined, undefined, undefined, undefined ]
const res3 = arr3.map(ele => {
return (ele = ele + 1)
})
console.log(res3) //[ 7, 7, 7, 7, 7, 7 ]
不管写不写return都返回一个新的数组,数组长度与原数组相同,没有return时,数组中每一项均未undefined,有return时,为return后表达式处理后的值。
综上，想要生成一个新数组时一定要用map，不需要返回值时可以使用佛forEach。
