循环方法对比

for、for…of…可以跳转循环；forEach 无法跳出循环
1.for
for(var i =0 ;i<list.length;i++){
if(list[i] == 5){
break
}
console.log(list[i]) // 1,2,3,4
}

2.for…0f…
for(const item of list){
if(item == 5){
break
}
console.log(item) // 1,2,3,4
}

3.forEach
list.forEach((item,index)=>{
if(item == 5) return
console.log(item) // 1,2,3,4,5,6,7,8
})

filter、map都会生成一个新数组，不改变原数组，find会改变原数组
const list = [
{ name: ‘头部导航’, type: ‘nav’, id: 1 },
{ name: ‘轮播’, type: ‘content’, id: 2 },
{ name: ‘页脚’, type: ‘nav’, id: 3 },
];
1.filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同
const resultList = list.filter(item => {
return item.id == 3 ;
});
console.log(resultList); //[{ name: ‘页脚’, type: ‘nav’, id: 3 }]

2.map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致
const newList = list.map(item => {
return item.id
});
console.log(newList);// [1, empty, 2, 3]

3.改变find返回的数组，也会改变原数组
const list = [
{ name: ‘头部导航’, id: 1 },
{ name: ‘轮播’, id: 2 },
{ name: ‘页脚’, id: 3 },
];
const result = list.find((item) => item.id === 3);
result.name = ‘我被改变了’
console.log(result) //{name:‘我被改变了’,id:3}
console.log(list) //[{ name: ‘头部导航’, id: 1 },{ name: ‘轮播’, id: 2 },{ name: ‘我被改变了’, id: 3 } ]

reduce

会循环当前的数组，侧重于进行"滚雪球"操作
reduce(函数，初始值)reduce((上次计算的结果，当前循环的item项)=>{return 上次计算的结果 + 当前循环的item项}，0)

	基本用法
		let arr = [1,2,3,4,5]
		const total = arr.reduce((val,item)=>{
			return val+item
		},0)
		
	链式获取对象属性的值
		const  obj = {
			name:'zd',
			info:{
				address:{
					location:'地区A'
				}
			}
		}
		const arrs = ['info','address','location']
		// 可简写成下面方式
		const address  = arrs.reduce((newObj,k)=>newObj[k],obj)