JavaScript day9

云笔记

数组的基本方法：

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

数组的常用方法

splice（i,howmany,v1,v3````)删除，替换，新增

includes（）indexof()

join（）转换字符串

concatenate（）拼接数组，得到新的数组

数组的迭代方法

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 ;
        })

---

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

 

 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);
        }

---

数据类型

基本数据类型储存在栈内存

变量存储的就是值

引用数据类型存储在堆内存中

变量存储的是地址

var a=2;
var b = a;
b++;
console.log(a)
var arr =[1,2,3]
var arr2=arr;
arr2.push(4);

---

数组的深复制和浅复制

数组的浅复制---只是复制J地址(共享地址)

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

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

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

var arr = [1,2,3,4,5] ;
//数组的浅复制---只是复制J地址
//
var arr2 = arr ;
//数组的深复制---复制的是数组中的值
//开了一房609
vararr3=[];
arr . forEach(function (v) {
arr3. push(v)
})
console.log(arr3);
arr3.push('a') ;
console. log(arr，arr3) ;
var arr3=arr.slice(0,3);
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);

---

函数的值传递和引用传值

函数传参时

基本数据类型传递是值

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

因此在封装函数的时候，

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

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

 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

---

二维数组

 var arr = [
            [1,2,3],
            [4,5,6],
            [2,3,4]
        ]
        // console.log(arr); // [1,2,3], [4,5,6] [2,3,4]
        // console.log(arr[0][1]); // 2
      //循环外层和内层数组
        for(var i in arr) {
            for(var j in arr[i]) {
               console.log(arr[i][j]);//内层逐个打印
            }
        }
        function concat() {  
            console.log(arguments);//三个数组[1,2,3], [4,5,6] [2,3,4]
            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]) //[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); //[1, 2, 3, Array(2), Array(3), 'a']
        // console.log(arr); //[1, 2, 3, Array(2), Array(3)]
       //浅拷贝
arr2[3].push('a') ;
        console.log(arr2); //[1, 2, 3, Array(3), Array(3)]
        console.log(arr); // [1, 2, 3, Array(3), Array(3)]

---

生成表格

<body>
  <table>
    <thead>
        <tr>
            <th>职位th>
            <th>性别th>
            <th>年龄th>
            <th>地址th>
       <tr>
     </ thead>
     <tbody id="tb">
     </tbody>
   </table>  
    <script>
        var arr=[
            ['校长','男','56','武昌'],
           ['副校长','男','49','江夏'],
            ['语文老师','女','34','汉口'],
            ['数学老师','男','25','纸坊'],
            ['政治','女','28','汉阳'],
        ];
        var res ='';
        for(var i in arr){
            res +=''
                for(var j in arr[i]){
                    res+=''+arr[i][j]+''
                }
                res+=''
        }
        console.log(res);
        var oTb=document.getElementById('tb');
        oTb.innerHTML=res;

---

动态生成标签

<style>
        p{
            display: flex;
        }
        span{
            width: 80px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #000;
            margin: 10px;
        }
    </style>
<body>
    <div id="box">
   </div>
    <script>
        var res = '' ;
        for(var i = 1 ; i <= 9 ; i++) {
            res += '
            for(var j = 1 ; j <= i ; j++) {
                res += '' + j + '*' + i + '=' + i * j + ''
            }
            res += ''
        }
        console.log(res);
        var oBox = document.getElementById('box') ;
        oBox.innerHTML = res ;

---

动态生成列表

<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>

<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

 var person = {
            name : '师爷',
            age : 42 ,
            sex : '男',
            hobby : 'girl' ,
            say : function () {  
                console.log('hello world');
            },
            nickname : ''
        }
        console.log(person.name);师爷
        // var a = 1 ;
        // var b = 2 ;
        // var c = 3 ;
        // // 数组一般存储同一种数据类型
        // var arr = [1,2,3] ;    
        //    arr['0'] = 1       arr['1'] = 2
        //    dog['name'] = '二哈'  dog['age'] = 3
        // var name = '师爷';
        // var age = 42 ;
        // var sex = '男' ;
        // var arr = ['师爷' , 42 , '男'];
        // var name2 = '狗子';
        // var age2 = 2 ;
        // var sex = '女' ;
        // var say = function () {  
        //     console.log('汪');
        // }
        var dog = {
            name : '二哈',
            age : 3 ,
            sex : '公',
            say : function () {  
                console.log('汪');
            }
        }
        var person = {
            sex : '公',
            name : '二哈',
            age : 3 ,
            say : function () {  
                console.log('汪');
            }
        }
        console.log(dog.name);
        console.log(person.name);
        console.log(person['age']);
        // for(var i in arr)   i string

---

对象的遍历

 

 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' ;

---

对象的深拷贝和浅拷贝

  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);//{name: '方总', age: 18}
        person2.age = 20 ;
        console.log(person1);//{name: '方总', age: 18}       

---

动态生成列表

 <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 ;
       

---

商品列表

<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>

<body>
    <ul id="list">
    </ul>

    <script>
        var data = [
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
              price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
                price : 1299
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
               img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
               price : 1299
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
           },
           {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
           }
        ]
        var res = '' ; 
        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>

---

模板字符串

 var a = 'hello' ;
 // document.write('<h1>' + a + '</h1>')
document.write(`<h1>${a}'</h1>'`)

---

商品搜索

        var data = [
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米11' ,
               content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
                price : 1299
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米家庭11' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
           },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
                price : 1299
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米家庭青春版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米11版' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            }
        ]
        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)
        }

作业

 

        //   数组

        //   对象

        //   数组的深复制?