JavaScript_Day_09 (对象、商品搜索)_var goodsbyyear = data.reduce((acc, item) => {-CSDN博客

本文链接：https://blog.csdn.net/m0_64954239/article/details/122004603

数组的基本方法：

shift() pop() push() unshift() 直接改变原数组；

数组的常用方法：

splice(i , howmany , v1 , v3 ...) 删除，替换，新增；

includes() indexOf()

join() 转换字符串

concat() 拼接数组，得到新的数组

数组的迭代方法：

sort()

forEach() 遍历数组不能写返回值

map() 改变数组中的值

filter() 过滤数据，找到满足条件的值，返回新的数组

every() 是否每条数据都满足条件

some() 是否有数据满足条件

数据类型：

数字，字符串，布尔值

数组

函数(代码块)

        var obj = 

        function get() {  
            document.getElementById('id') ;
        }


        // function buyCar(car) {  
        //     console.log('买一个' + car);
        // }

        // function buyCar(car) {  
        //     car()
        // }

        // buyCar(function () {  
        //     console.log(666);
        // })



        function idDate(cb) {  
            // ...
            // ...
            // ...
            // ...

            // alert(666);
            cb()
        }



        // isDate(function () {  
        //     alert('我真厉害，居然写出来了')
        // })

        // isDate(function () {  
        //     alert('真简单')
        // })

        // isDate(function () {  

        // })


        function forEach(arr , cb) {
            for(var i = 0 ; i < arr.length ; i++) {
                cb(arr[i])
            }
        }



        var sum = 0 ;
        forEach([1,2,3] , function (v) {  
            sum += v ;
        })

在排序好的数组中插入一个值：

    <script>

        // var arr = [1,3,6,8,9,12] ;
        // var n = 0 ;

        // // 比前一个数大，比后一个数小
        // for(var i = 0 ; i < arr.length - 1 ; i++) {
        //     if(n >= arr[i] && n <= arr[i+1] ) {
        //         arr.splice(i+1 , 0 , n)
        //         // 在插入值以后，数组会变长，后面就把插入的值加入判断，条件也会满足
        //         break
        //     }
        // }
        // if(n < arr[0]) {
        //     arr.splice(0 , 0 , n);
        // }
        // if(n > arr[arr.length - 1]) {
        //     arr.push(n)
        // }
        // console.log(arr);




        // function insert(arr , n) {  
        //     // 插入就是找到 一个位置 
        //     //   1 最前面
        //     //   2 最后面
        //     //   3 在中间
        //     if(n < arr[0]) {
        //         arr.unshift(n);
        //     }else if(n > arr[arr.length - 1]) {
        //         arr.push(n)
        //     } else {
        //         for(var i = 0 ; i < arr.length - 1 ; i++) {
        //             if(n >= arr[i] && n <= arr[i+1]) {
        //                 arr.splice(i+1 , 0 ,n);
        //                 break ;
        //             }
        //         }
        //     }

        //     console.log(arr);

        // }



        function insert(arr , n) {  
            // 找位置
            var index = 0 ;   // 最前面
            // 最后面
            if(n > arr[arr.length - 1]) {
                index = arr.length ;
            } else {
                for(var i = 0 ; i < arr.length - 1 ; i++) {
                    if(n >= arr[i] && n <= arr[i + 1]) {
                        index = i + 1 ;
                    }
                }
            }


            arr.splice(index , 0 , n) ;
            console.log(arr);

        }

        insert([1,3,6,8,9,12] , 9)

    </script>

数据类型：

1.基本数据类型存储在栈内存中，变量存储的就是值；

2.引用数据类型存储在堆内存中，变量存储的是地址；

    <script>

        var a = 2 ;

        var b = a ;

        b++ ;

        console.log(a);


        var arr = [1,2,3] ;

        var arr2 = arr ;

        arr2.push(4) ;

        console.log(arr);   // arr发生了改变

    </script>

数组的深复制和浅复制：

数组的浅复制：只复制了地址 (共享地址)；

数组的深复制：复制值；

遍历(把原数组中的值存入新的数组) var arr2 = [] ;

slice() 截取数组中的所有值，得到的是一个新数组；

    <script>

        var arr = [1,2,3,4,5] ;

        // 数组的浅复制 --- 只是复制了地址
        // 
        var arr2 = arr ;

        // 数组的深复制  --- 复制数组中的值

        // 开了一房  609
        // var arr3 = [] ;
        // arr.forEach(function (v) {  
        //     arr3.push(v)
        // })
        // console.log(arr3);

        // arr3.push('a') ;

        // console.log(arr , arr3);


        var arr3 = arr.slice() ;
        console.log(arr3);

        arr3.push('a') ;

        console.log(arr);




        var arr4 = [1,2,3] ;
        var arr5 = ['a' , 'b'] ;
        arr4 = arr5 ;
        console.log(arr4);
        arr5.push('c') ;
        console.log(arr4);
        arr4.push(1) ;
        console.log(arr5);

        

    </script>

函数的值的值传递和引用传递：

函数传参时

基本数据类型传递是值；

引用数据类型传递的是地址(形参和实参共享地址)；

因此在封装函数的时候：

如果想改变原数组，就直接操作形参；

如果不想改变原数组，就实现深复制，然后操作新的数组；

    <script>

        var a = 1 ;

        function fn(n) {
            // n = a ;  
            n++ ;
        }

        fn(a) ;  // 普通数据类型只是传递了值过去
        console.log(a);


        var arr = [1,2,3] ;

        function fn2(arr2) {  
            // arr2 = arr 
            arr2.push('a')
        }

        fn2(arr) ;
        console.log(arr);


        function bubbleSort(arr) {  
            // arr = arr3 ;
            // 不改变原数组，也就是不改变arr
            var arr7 = arr.slice() ;
            for(var i = 0 ; i < arr7.length - 1 ; i++) {
                for(var j = 0 ; j < arr7.length - 1 - i ; j++) {
                    if(arr7[j] > arr7[j+1]) {
                        var t = arr7[j];
                        arr7[j] = arr7[j+1]
                        arr7[j+1] = t
                    }
                }
            }
            console.log(arr7);
            return arr7
        }

        var arr3 = [6,7,4,2,9,1] ;
        var res = bubbleSort(arr3) ;
        console.log(arr3);


        function pop(arr) {  
            // arr = arr3 ; // 608
            var newArr = [] ;  // 609
            for(var i = 0 ; i < arr.length - 1 ; i++) {
                newArr.push(arr[i])
            } 
            // arr = newArr ;  // arr 609
            return newArr
        }
        var arr3 = [6,7,4,2,9,1] ;  // 608
        var res = pop(arr3) ;
        console.log(res);
        console.log(arr3);
        arr3 = res ;


        var arr = [1,2,3] ;  // 608
        arr = [6,7,9] ;  // 609


    </script>

二维数组：

  <script>

        var arr = [
            [1,2,3],
            [4,5,6],
            [2,3,4]
        ]

        // console.log(arr);

        // console.log(arr[0][1]);

        for(var i in arr) {
            for(var j in arr[i]) {
                console.log(arr[i][j]);
            }
        }


        function concat() {  
            console.log(arguments);
            var newArr = [] ;
            for(var i in arguments) {
                for(var j in arguments[i]) {
                    console.log(arguments[i][j]);
                    newArr.push(arguments[i][j])
                }
            }
            console.log(newArr);
        }

        concat([1,2,3] , [4,5,6])


        var arr = [1,2,3,[4,5],[6,7,8]] ;
        var arr2 = arr.slice() ;
        // arr2.push('a') ;
        // console.log(arr2);
        // console.log(arr);

        arr2[3].push('a') ;
        console.log(arr2);

        console.log(arr);

    </script>
    
</body>

生成表格：

<body>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

    <script>
        var arr = [
            ['方总' , '男' , '32' , '青年公寓'],
            ['师爷' , '男' , '42' , '青年公寓'],
            ['班长' , '男' , '18' , '江滩边上'],
            ['方总' , '男' , '32' , '青年公寓'],
            ['方总' , '男' , '32' , '青年公寓'],
            ['师爷' , '男' , '42' , '青年公寓'],
            ['班长' , '男' , '18' , '江滩边上'],
            ['方总' , '男' , '32' , '青年公寓'],
        ]

        var res = '' ;
        for(var i in arr) {
            res += '<tr>'
            for(var j in arr[i]) {
                res += '<td>' + arr[i][j] + '</td>'
            }
            res += '</tr>'
        }
        console.log(res);

        var oTb = document.getElementById('tb') ;
        // 给输入框加内容 value
        // 给标签加内容   innerHTML
        oTb.innerHTML = res ;




    </script>
    
</body>

动态生成标签：

   <style>
        p{
            display: flex;
        }
        span{
            width: 80px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #000;
            margin: 10px;
        }
    </style>
</head>
<body>

    <div id="box">

    </div>

    <script>

        var res = '' ;
        for(var i = 1 ; i <= 9 ; i++) {
            res += '<p>'
            for(var j = 1 ; j <= i ; j++) {
                res += '<span>' + j + '*' + i + '=' + i * j + '</span>' 
            }
            res += '</p>'
        }
        console.log(res);

        var oBox = document.getElementById('box') ;
        oBox.innerHTML = res ;

    </script>

动态生成列表：

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li{
            display: flex;
            width: 700px;
            margin: auto;
        }
        li span{
            /* flex-grow:1; */
            flex:1;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <span>序号</span>
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>地址</span>
        </li>
    </ul>
    <ul id="ul">
        
    </ul>

    <script>
        var arr = [
            ['方总' , '男' , '32' , '青年公寓'],
            ['师爷' , '男' , '42' , '青年公寓'],
            ['班长' , '男' , '18' , '江滩边上'],
            ['方总' , '男' , '32' , '青年公寓'],
            ['方总' , '男' , '32' , '青年公寓'],
            ['师爷' , '男' , '42' , '青年公寓'],
            ['班长' , '男' , '18' , '江滩边上'],
            ['方总' , '男' , '32' , '青年公寓'],
        ]

        var res = '' ;
        for(var i = 0; i < arr.length ; i++) {
            res += '<li>'
            res += '<span>' + (i + 1) + '</span>'
            for(var j = 0 ; j < arr[i].length ; j++) {
                res += '<span>' + arr[i][j] + '</span>'
            }
            res += '</li>'
        }
        console.log(res);

        var oUl = document.getElementById('ul');
        oUl.innerHTML = res ;

    </script>

对象

数组：存储同一种类型的数据，有序性；

对象：描述同一类型的事物(属性，方法)无序性；

属性：属性值

方法：函数

对象的两种访问方式：

person['name'] person['age']

点语法 person.name person.age

对象的遍历

  <script>
        var dog = {
            name : '二哈',
            age : 3 ,
            sex : '公',
            say : function () {  
                console.log('汪');
            }
        }

        // console.log(dog.name);
        // console.log(dog['name']);  


        for(var key in dog) {
            // console.log(key);
            console.log(dog[key]);
        }


        // arr.forEach()


        // var arr = {
        //     length : ,
        //     forEach : function () {  }
        // }
        // arr.forEach()


        // document 对象
        // console 对象
        // arr.join()


        var obj = {} 

        // 实例化对象  -- 空对象
        var obj = new Object() ;
        // 赋值
        obj.name = '奔驰' ;
        obj.color = 'pink' ;
        obj.price = '100w' ;


    </script>

对象的深拷贝和浅拷贝

    <script>

        var person1 = {
            name : '方总',
            age : 18
        }


        // 浅复制
        // var person2 = person1 ;

        // person2.name = '师爷' ;
        // console.log(person1);

        // var person2 = {}
        var person2 = new Object() ;
        for(var key in person1) {
            person2[key] = person1[key]
        }
        console.log(person2);

        person2.age = 20 ;

        console.log(person1);

    </script>

动态生成列表

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li{
            display: flex;
            width: 700px;
            margin: auto;
        }
        li span{
            /* flex-grow:1; */
            flex:1;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <span>序号</span>
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>地址</span>
        </li>
    </ul>
    <ul id="ul">
        
    </ul>

    <script>
        var arr = [
            {
                name : '方总' ,
                age : 20 ,
                sex : '男',
                address : '青年公寓'
            },
            {
                name : '方总' ,
                age : 20 ,
                sex : '男',
                address : '青年公寓'
            },
            {
                name : '方总' ,
                age : 20 ,
                sex : '男',
                address : '青年公寓'
            },
            {
                name : '方总' ,
                age : 20 ,
                sex : '男',
                address : '青年公寓'
            },
            {
                name : '方总' ,
                age : 20 ,
                sex : '男',
                address : '青年公寓'
            }
        ]


        var res = '' ;
        // arr.forEach(function (v , i) {  
        //     res += '<li>'
        //     // 遍历对象
        //     for(var key in v) {

        //     }
        //     res += '</li>'
        // })

        for(var i = 0 ; i < arr.length ; i++) {
            res += '<li>'
            res += '<span>' + (i + 1) + '</span>'
            // 遍历对象
            for(var key in arr[i]) {
                res += '<span>' + arr[i][key] + '</span>'
            }
            res += '</li>'
        }
        var oUl = document.getElementById('ul');
        oUl.innerHTML = res ;

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

生成商品列表

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        li{
            width: 23%;
            border: 1px solid #000;
            text-align: center;
            line-height: 2;
            margin: 10px;
        }
        li img{
            width: 90%;
        }
        li span{
            color: red;
        }
    </style>
</head>
<body>

    <ul id="list">
        <!-- <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <h3>小米青春版</h3>
            <p>轻薄5G,内外兼修</p>
            <span>1999</span>
        </li> -->
        

    </ul>


    <script>

        var data = [
            {
                price : 1999,
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                
            },
            {
                
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
                price : 1299,
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
                price : 1299
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            }
        ]

        var res = '' ;
        // data.forEach(function (v , i) {  
        //     res += '<li>'
        //     // res += '<img src ="v.img">'
        //     res += '<img src ="' + v.img + '">'
        //     res += '<h3>' + v.title + '</h3>'
        //     res += '<p>' + v.content + '</p>'
        //     res += '<span>' + v.price + '</span>'
        //     res += '</li>'
        // })

        data.forEach(function (v , i) {  
             res += `
                <li>
                    <img src="${v.img}" alt="">
                    <h3>${v.title}</h3>
                    <p>${v.content}</p>
                    <span>${v.price}</span>
                </li>
                `
        })
        

        var oList = document.getElementById('list') ;
        oList.innerHTML = res

    </script>

模板字符串商品列表

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        li{
            width: 23%;
            border: 1px solid #000;
            text-align: center;
            line-height: 2;
            margin: 10px;
        }
        li img{
            width: 90%;
        }
        li span{
            color: hotpink;
        }
        div{
            justify-content: center;
            display: flex;
            height: 30px;
            margin: 20px;
        }
    </style>
</head>
<body>

    <div>
        <input type="text" id="inp">
        <button id="btn">搜索</button>
    </div>

    <ul id="list">
        <!-- <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <h3>小米青春版</h3>
            <p>轻薄5G,内外兼修</p>
            <span>1999</span>
        </li> -->
        

    </ul>


    <script>

        var data = [
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            },
            {
                img : 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/202012/26/7810/187251/614be59dE69c8da89/58a0fe2a2ca998f1.jpg' ,
                title : 'iPhone 13' ,
                content : '256G 粉色' ,
                price : '￥6799'
            }
        ]

        var oList = document.getElementById('list') ;
         // 搜索功能
        var oBtn = document.getElementById('btn') ;
        var oInp = document.getElementById('inp') ;


        list(data)

        function list(arr) {  
            var res = '' ;

            arr.forEach(function (v , i) {  
                res += `
                    <li>
                        <img src="${v.img}" alt="">
                        <h3>${v.title}</h3>
                        <p>${v.content}</p>
                        <span>${v.price}</span>
                    </li>
                    `
            })

            
            oList.innerHTML = res
        }



       
        oBtn.onclick = function () {  
            var kw = oInp.value ;
            // 找到满足条件的数据  filter

            // var res = arr.filter(function (v) {  
            //     return v > 60
            // })


            var data2 = data.filter(function (v) {  
                return v.title.includes(kw)
            })

            console.log(data2);

            list(data2)

            
        }


    </script>
</body>