JavaScript常用循环方法总结
map
map
方法会把每一次返回的值添加到新数组中,它要有 return
否则就失去了 map
的意义
map
不改变原数组,他会把值返回给新的数组
let arr = [10, 20, 30, 40, 50]
let newArr = arr.map(item => {
return item += 5
})
console.log(newArr);
// [15, 25, 35, 45, 55]
forEach
forEach
方法与 map
方法十分相似,都可以对数组进行循环操作,但不同的是 forEach
不返回值,只能用于操作数据。如果以得到返回值为目的,则需要用到 map
方法, 否则两者之间没有任何区别
let arr = [10, 20, 30, 40, 50]
arr.forEach((item, index) => {
console.log("索引:", index, "每一项的值:", item);
})
// 索引: 0 每一项的值: 10
// 索引: 1 每一项的值: 20
// 索引: 2 每一项的值: 30
// 索引: 3 每一项的值: 40
// 索引: 4 每一项的值: 50
forEach
循环中 return
无效
let arr = [10, 20, 30, 40, 50]
let newArr = arr.forEach((item, index) => {
return item += 5
})
console.log(newArr); // undefined
forEach
主要用于替代传统的 for
循环,因为 forEach
非常方便
filter
filter
顾名思义,它主要用于过滤数组中的数据
过滤大于等于30的数据然后返回给新数组
let arr = [10, 20, 30, 40, 50]
let newArr = arr.filter(item => {
return item >= 30
})
console.log(newArr);
// [30, 40, 50]
some
该方法用于判断数组中每一项是否为 true
,只要有一个值为 true
则它的返回值就为 true
let arr = [10, 20, 30, 40, 50]
let newArr = arr.some(item => {
return item === 30
})
console.log(newArr);
// true
全部为false
,返回值才为 false
let arr = [10, 20, 30, 40, 50]
let newArr = arr.some(item => {
return item === 60
})
console.log(newArr);
// false
every
该方法与 some
方法恰恰相反,只要有一个值为 false
,那么结果就为 false
find
该方法用于查找数组中某个元素
let arr = [10, 20, 30, 40, 50]
let index = arr.find(item => {
return item === 30
})
console.log(index); //30
findIndex
该方法用于查找数组中指定元素的索引下标
let arr = [10, 20, 30, 40, 50]
let index = arr.findIndex(item => {
return item === 30
})
console.log(index); //2
reduce
该方法主要用于计算数组中的累加和,参数一为累加和的变量,参数二为每一项的值,参数三为从多少开始累加
let arr = [10, 20, 30, 40, 50]
let sum = arr.reduce((sum, item) => {
return sum += item
}, 0)
console.log(sum); //150
sort
该方法主要用于对数组进行排序,例如:
const list = [3, 1, 2, 7, 9]
// 默认从小到大排序
list.sort()
console.log(list);
// [1, 2, 3, 7, 9]
可以发现 sort
方法会改变原数组
接下来演示一下复杂的应用场景:循环每一项通过 cid
的大小进行排序
const list = [
{
name: "zs",
cid: 1
},
{
name: "ls",
cid: 3
},
{
name: "ww",
cid: 6
},
{
name: "xm",
cid: 2
},
]
// 从小到大排序
list.sort((a, b) => a.cid - b.cid)
console.log(list);
// { name: 'zs', cid: 1 }
// { name: 'xm', cid: 2 }
// { name: 'ls', cid: 3 }
// { name: 'ww', cid: 6 }
// 从大到小排序 只需要将a与b的位置互换即可
list.sort((a, b) => b.cid - a.cid)
console.log(list);
// { name: 'ww', cid: 6 }
// { name: 'ls', cid: 3 }
// { name: 'xm', cid: 2 }
// { name: 'zs', cid: 1 }
希望明年能够实现月薪过万的目标,这也是我的目标 哈哈哈