发表于: 2019-11-28 21:12:08

0 994


今天完成的事情:学习数组的方法,复习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 = [50801204011060]


    // 农民:我要催熟(批量操作)使用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()。



返回列表 返回列表
评论

    分享到