今天完成的事情:学习数组的方法,复习JS知识,准备复盘申请
明天计划的事情:
遇到的问题:
收获:
循环、迭代、遍历、递归
循环,指的是在满足条件的情况下,重复执行同一段代码。比如,while语句。
迭代,指的是按照某种顺序逐个访问列表中的每一项。比如,for语句。
遍历,指的是按照一定的规则访问树形结构中的每个节点,而且每个节点都只访问一次。
递归,指的是一个函数不断调用自身的行为
数组定义了5个迭代的方法,分别是:filter、some、map、foreach、every
语法:
这五种方法,都会执行一个函数,以及一个可选的该函数作用域的对象this <br>
array.every(function(currentValue,index,arr){ <br>
return;<br>
}, thisValue <br><br>
上述函数中的三个参数分别代表:
currentValue :当前元素的值,必选
index:当前元素的索引值,可选
arr:当前元素属于的数组对象,可选
forEach():对数组中的每一项运行给定函数。这个方法没有返回值。
forEach的使用频率很高,多用于对数组自身的改变和各元素相关统计性的计算,重要特性如下:
1、可以改变数组自身,没有返回值;
2、中途不能用常规操作跳出循环,可以用抛出异常(try/catch)的方式,但不推荐这样做;
3、不支持链式调用,在调用forEach之前,前面的数组你怎么玩链式都没问题
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
map()功能很强大,forEach()的一些局限性它很多都能解决。"map"即"映射",也就是原数组被"映射"成对应新数组。它的一些特性:
1、新建一个数组,需要有承载对象,也意味着原始数组在调用它后不会发生变化;
2、该数组中的每个元素都调用一个提供的函数后返回结果。
一些需要注意的地方:
创建新数组不代表不能用它改变原有数组,你用原有数组去承载就可以
map()中每个元素都要执行相应的回调函数,所以必须要有return
<body>
<p>
设定一个使用场景这里有一堆土豆,如果换成代码,可以表示如下:<br>
var potatos = <br>
[{ id: '1001', weight: 50 },<br>
{ id: '1002', weight: 80 },<br>
{ id: '1003', weight: 120 },<br>
{ id: '1004', weight: 40 },<br>
{ id: '1005', weight: 110 },<br>
{ id: '1006', weight: 60 }]<br>
</p>
<p>重量(g)记录成一个数组<br>
var w = [50, 80, 120, 40, 110, 60]</p>
</body>
</html>
<script>
var potatos = [{
id: '1001',
weight: 50
},
{
id: '1002',
weight: 80
},
{
id: '1003',
weight: 120
},
{
id: '1004',
weight: 40
},
{
id: '1005',
weight: 110
},
{
id: '1006',
weight: 60
}
]
var w = [50, 80, 120, 40, 110, 60]
// 农民:我要催熟(批量操作)使用forEach()
// potatos.forEach(potato => {
// potato.weight += 20
// })
// console.log("forEach()每个重量都加20", potatos)
// map方法说:我也可以!
// potatos.map(potato => {
// potato.weight += 20
// })
// console.log("map()每个重量都加20", potatos)
// map补充了一句,我还可以把重量统计表格,更新出一份新的给你
// w = potatos.map(potato => {
// return potato.weight += 20
// })
// console.log("重量加20并列出重量", w);
// forEach和map的最大区别就在于, forEach没有返回值。
// 即便你给forEach加上return也没用
// w = potatos.forEach(potato => {
// return potato.weight += 20
// })
// console.log(w);
// 问:你这有没有大的啊(some()判断有没有符合条件的)
// var hasbig = potatos.some(potato => {
// return potato.weight > 100
// })
// console.log("判断有没有重量大于100的土豆", hasbig);
// 问:难道全都是大的吗(every()判断是否全部符合条件)
// var allbig = potatos.every(potato => {
// return potato.weight > 100
// })
// console.log("判断是不是全部的重量都大于100", allbig);
// 老板:给我看看都有多少大土豆(filter()筛选过滤重量大于100的土豆)
// var bigOnes = potatos.filter(potato => {
// return potato.weight > 100
// })
// // 返回一个新的对象数组,并不会改变原数组
// console.log("筛选重量大于100的土豆", bigOnes);
// 顾客:给我个大土豆(find()返回一个符合的)
// var big = potatos.find(potato => {
// return potato.weight > 100
// })
// console.log("顾客拿到的大土豆",big);
// 收银员:这土豆是仓库的第几个来着(findIndex()返回序号)
// var i = potatos.findIndex(potato => {
// return potato.weight > 100
// })
// console.log('顾客的大土豆在仓库哪里放着', '数组下标是' + i, '第' + (i + 1) + '个');
// findIndex返回第一个符合条件的索引号
// 老板问:今年收成如何呀(所有的重量的和:递归累加)
// var sum = w.reduce((sum, w) => {
// return w + sum
// }, 0)
// console.log("总重量",sum);
var sum = potatos.reduce((sum, p) => {
return p.weight + sum
}, 0)
console.log("另一种写法",sum);
</script>
①sort()用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。
默认排序按字母升序(更准确一些是根据字符串Unicode码点)
一些注意点
1、sort()与map()、filter()等不同,它直接改变原始数组(很重要!);
2、如果想按照其他标准进行排序,就需提供比较函数compareFunction(a,b),数组会按照调用该函数的返回值排序,即a和b是两个将要比较的元素:
如果小于0,则a排列到b之前;等于0,a和b的相对位置不变
②new Set()用来数组去重
new Set()会将结果转换成对象! 没法去重元素是引用对象的数组。
③_.uniqWith()是Lodash提供的方法
Lodash一个一致性、模块化、高性能的JavaScript实用工具库。它有提供给了我们一个很好的方法——_.uniqWith():
获取数组中的指定元素
④findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
⑤indexOf()方法在数组中搜索元素值并返回其位置。
⑥find()
find()顾名思义,就是用来在数组中找到我们所需要的元素,并且和some()一样,只要有一个满足即返回该元素,不会多余遍历,对性能很友善。
IE 11 及更早版本也不支持 find()。
评论