集合引用类型Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
     <script>
         /* 
            1.判断一个值是否是数组
            if(Array.isArray(value)){
                // 操作数组
            }
         */
        
         /* 
         2.迭代器方法
         */
        const a = ["foo", "bar", "baz", "qux"]

        console.log(a.keys()); // Array Iterator
        // 通过Array.from() 直接转换为数组实例
        const aKeys = Array.from(a.keys())
        console.log(aKeys); // 
        // 还有 a.values()  a.entries()


        /* 
        3.复制和填充
        批量复制fill()
        填充数组copyWithin()
        */

        /* 
        4.转换字符串
        toString()
        valueOf()
        toLocaleString()
        join()---替换字符串分隔符(以指定元素分割开数组)
        */
        let colors = ["red", "blue", "green"]
        console.log(colors.toString()); //red,blue,green  转换字符串--

        /* 
        5.栈方法(后进先出)
            ---push()  添加在数组末尾
            ---pop()   删除数组的最后一项,同时减少数组length值,返回被删除的项
        */
       /* 
       6.队列方法(先进先出)
            ---shift()   删除数组的第一项并返回它
            ---unshift()    在数组开头添加任意多个值
       */

       /* 
       7.排序方法
            ---reverse()  反向排列
            ---sort()     升序排列
        */

        // 排序案例--因为sort()先把值转换为了字符,所以10会排在5之前
        function compare(value1, value2){
            if(value1 < value2) {
                return -1;
            }else if(value1 > value2) {
                return 1;
            }else {
                return 0;
            }
        }
         let values = [2,1,6,,0,5,8,7,10,16,15]

         values.sort(compare);
         console.log(values); // [0, 1, 2, 5, 6, 7, 8, 10, 15, 16, empty]

        //  简洁写法(降序--把return的1和-1修改一下就可以)
        let values2 = [2,1,6,,0,5,8,7,10,16,15]
        values2.sort((a, b) => a < b ? 1 : a > b ? -1 : 0);
        console.log(values2); //  [16, 15, 10, 8, 7, 6, 5, 2, 1, 0, empty]


        /* 
        8.操作方法
            ---concat()    把参数添加在数组末尾,返回一个新数组,原数组不变
            ---slice()     切割数组,原数组不变
            ---splice()    在数组中间插入元素(删除,插入,替换),返回被删除的元素
        */

        /* 
        9.搜索和位置方法
            严格相等---(会使用===)比较
                indexOf()      ---没找到返回-1,找到返回索引
                lastIndexOf() ---从末尾开始向前搜索
                includes()
            断言函数---(3个参数  元素  索引  和数组本身)每个索引都会调用这个函数
                find()
                findIndex()
        */
        let numbers = [1,2,3,4,5,4]
        console.log(numbers.indexOf(4)); // 3
        console.log(numbers.lastIndexOf(4)); // 5---找到第一个,从后往前寻找(但是返回的索引是正序)
        console.log(numbers.includes(4)); // true

        const people = [{
            name: "Matt",
            age: 27
        },{
            name: "nick",
            age: 29
        }]
        console.log(people.find((el, index, array) => el.age < 28)); // {name: "Matt", age: 27}
        console.log(people.findIndex((el, index, array) => el.age < 28));    // 0


        /* 
        10.迭代方法
            (三个参数  数组元素  元素索引  数组本身)
            every()和some()
            filter()  
            forEach()
            map()    
        */
    
        // every()每一项都是true,才会返回true,否则false
        // some()有一项true,就是true
        // filter()返回true的项会组成数组之后返回
        let numbers2 = [1,2,3,4,5,4]
        let filterResult = numbers2.filter((item, index, array) => item > 2)
        console.log(filterResult); // [3, 4, 5, 4]

        // map()--可对元素进行函数处理,并返回数组
        let numbers3 = [1,2,3,4,5,4]
        let mapResult = numbers3.map((item, index, array) => item*3);
        console.log(mapResult); // [3, 6, 9, 12, 15, 12]

        /* 
        11.归并方法
            reduce()
            reduceRight()
            参数(上一个归并值, 当前项, 当前项的索引 ,数组本身)--求和
        */
        let numbers4 = [1,2,3,4,5,4]
        let sum = numbers4.reduce((pre, cur, index, array) => pre + cur);
        console.log(sum); // 19

     </script>
</body>
</html>

  

posted @ 2021-03-18 22:44  小白咚  阅读(32)  评论(0编辑  收藏  举报