js进阶笔记

最新推荐文章于 2024-07-20 23:54:17 发布

摇光93

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量76

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_73270720/article/details/129912178

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

第一天

<!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>
    //     function my(){
    //         let a=10;
           
    //         return  function she()
    //         {
    //             console.log(a);
    //         };
    //     }
    //  const our=my()
    //  our()

    </script>
    <!-- 闭包应用 -->
    <script>
        //i为全局变量，容易被修改
        // let i=0;
        // function fn()
        // {
        //     i++;
        //     console.log(`函数被调用了${i}次`);
        // }
        // function cout()
        // {
        //     let i=0;
        //     function fn()
        //     {
        //         i++;
        //         // console.log(i);
        //         console.log(`函数被调用了${i}次`)
        //     }
        //     return fn;
        // }
        // const my=cout()
        // my()

    </script>
    <!-- 变量提升----只提升var声明，不提升其赋值-->
    <script>
        
        // function fn()
        // {
        //     num=10
        //    console.log(num+'件')
        //     var num;
        // }
        // fn()
    </script>
    <!-- 函数提升--将调用函数放在声明之前 -->
    <script>
        // fn()
        // function fn()
        // {
        //     console.log('我是函数');
        // }
        // 函数表达式必须先声明后调用，本质为赋值而不是声明
        // var fn=function(){
        //     console.log('我是函数表达式');
        // }
        // fn()
        //
    </script>
    <!-- 函数参数 -->
    <script>
        // 1.函数的动态参数
        // function getsum()
        // {
        //     // arguments 动态参数只存在与函数里面,为伪数组
        //     let sum=0;
        //     for(let i=0;i<arguments.length;i++)
        //     {
        //         sum+=arguments[i];
        //     }
        //     console.log(`求和为${sum}`);
        // }
        // getsum(2,3,4)
        //2.剩余参数
        // function getsum(...arr)
        // {
        //     console.log(arr);
        // }
        // getsum(2,3)
        // getsum(2,3,4)
    </script>
    <!-- 箭头函数 -->
    <script>
        // const fn=function(x)
        // {
        //     console.log(x);
        // }
        // fn(3)

        // const fn=(x)=>{
        //     console.log(x);
        // }
        // fn(3)
    //只有一个形参的时候，省略小括号
        // const fn=x=>{
        //     console.log(x);
        // }
        // fn(3)
    //只有一行代码，可以省略大括号
        // const fn= x =>
        //  console.log(x+x);
        //  fn(3)
    //只有一行代码可以省略return
        //  const fn= x =>
        //  x+x;
        // console.log(fn(1));
    //箭头函数返回一个对象
        //     const fn=(uname)=>
        //     ({ame:uname})

        // fn('liu')
    </script>
    <!-- 箭头函数应用 -->
    <script>
        // const getsum=(...arr)=>{
        //     let sum=0;
        //     for(let i=0;i<arr.length;i++)
        //     {
        //         sum+=arr[i];
        //     }
        //     return sum;
        // }
        // console.log(getsum(2,3,4,));
    </script>
    <!-- 数组解构--一一对应，不用写多个赋值-->
    <script>
        // let arr=[100,80,90]
        // const [max,min,avr]=arr;
        // console.log(max);
        // console.log(min);
        // console.log(avr);

    </script>
    <!-- 对象解构 -->
    <script>
        // const my={
        //     name:"sss",
        //     age:18,
        // }
        // const {name,age}=my
        // console.log(name);
        // console.log(age);
    </script>
    <!-- 解构案例 -->
    <script>
        // msg有很多属性，但是我们只需要data,就利用解构
        // const msg={
        //     uname:'sss',
        //     age:18,
        //     data:[{
        //         me:'dd',
        //         aa:12
        //     }]
        // }
        // 需求1.
        // const {data}=msg
        // console.log(data);
        // 需求2.
        //msg 为后台传过来的参数，只取出data当参数传给函数
        // 
        // function render({data})
        // {
        //    console.log(data);
        // }
        // render(msg)
        // render(data)
        // 需求3.防止名字data混淆，变成mydata
            // function render({data:mydata})
            // {
            // console.log(mydata);
            // }
            // render(msg)

    </script>
    <!-- forEnch语法---遍历作用，不返回数组，formap返回空数组 -->
    <script>
        // const arr=['aa','bb','ss']
        // arr.forEach(function(item,index)
        // {
        //     console.log(item);//元素--不能省略
        //     console.log(index);//元素下标---可以省略
        // })
    </script>
</body>
</html>

第二天

<!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>
    <!-- 1.创建对象的三种方式 -->
    <script>
        // 1.1   ‘=’
        // const obj={
        //     age:12,
        //     uname:"sssw"
        // }
        // console.log(obj);
        // 1.2  new
        // const my=new Object()
        //     my.age=18
        //     console.log(my);
        //1.3  构造函数
        // 注意两个约定
        // 1.要首字母大写
        // 2.要使用new实例化
        // function Pig(uname,age)
        // {
        //     this.uname=uname
        //     this.age=age
        // }

        // const ni=new Pig("hh",18)
        // console.log(ni);

        // 1.4案例
        // function Goods(name,price,num)
        // {
        //     this.name=name
        //     this.price=price
        //     this.num=num
        // }
        // const xi=new Goods('ss',1222,333)
        // console.log(xi);
    </script>
    <!-- 2.实例成员与静态成员 -->
    <script>
        // 1.实例成员--构造函数创造的对象   的   属性与方法
        // function My(uname,age)
        // {
        //     this.uname=uname
        //     this.age=age
        // }
        // const ds=new My('ss',19)
        // console.log(ds);
        //2.静态成员--构造函数本身  的   属性与方法
        // function My(uname,age)
        // {
        //     this.uname=uname
        //     this.age=age
        // }
        // My.hobby="aj"
        // console.log(My.hobby);
    </script>
    <!-- 3.内置构造函数 -->
    <script>
        // 简单复习
        // 基本数据类型：字符串，数，undefined，null
        // 引用数据类型：对象
        // 疑问：（字符串变量有方法）基本数据类型也有属性与方法？
        // js底层实现构造函数，将简单数据类型包装成引用数据类型
        // const str="ssss"
        // const str=new String("sss")--js底层实现
        // 3.1 Object
        // 3.1.1   
        // const my={
        //     uname:'ssss',
        //     age:18
        // }
        // // 获得属性名（键）
        // const arr=Object.keys(my)---返回数组
        // console.log(arr);
        //获得属性值
        // const arr2=Object.values(my)
        // console.log(my);
        // 3.1.2
        // const my={
        //     uname:'ssss',
        //     age:18
        // }
        // Object.assign(my,{gender:"ddd"})
        // console.log(my);

        // const ds={}
        // Object.assign(ds,my)
        // console.log(ds);
        // 3.2  array
        // 3.2.1 reduce
        // const arr=[1,2,3]
        // 1.没有初始值
        // const q=arr.reduce(function(prev,current){
        //     return prev+current
        // })
        // console.log(q);
        // 2.有初始值
        //    const w= arr.reduce(function(prev,current){
        //         return prev+current
        //     },10)
        //     console.log(w);
         // 3.箭头函数
        // const e= arr.reduce((prev,current)=>prev+current)
        // console.log(e);


        // 薪资案例
        // const my=[
        //     {
        //         uname:'jack',
        //         salary:10000
        //     },
        //     {
        //         uname:'rose',
        //         salary:10000
        //     },
        //     {
        //         uname:'bob',
        //         salary:10000
        //     }
        // ]

        // const total=my.reduce((prve,current)=>prve+current.salary*1.3,0)
        // console.log(total);

        // 3.2.2  find---找对象，并且返回这个对象
        // const arr=[
        //     {
        //         uname:'小米',
        //         price:1999
        //     },
        //     {
        //         uname:'华为',
        //         price:1999
        //     }
        // ]
        
        // const re=arr.find(function(item){
        //     return item.uname==='华为'
        // })
        // console.log(re);

        // 3.2.3 every  some
        // const arr=[10,20,30]
        
        // console.log(arr.every(item=>item>=10));---true
        // console.log(arr.every(item=>item>=20));---false
        // console.log(arr.some(item=>item>=30));---true
        // 3.3 string
        // const my='2022-31-03'
        // // 3.3.1  字符串转换为数组---split | VS |  join
        // console.log(my.split('-'));
        // // 3.3.2   字符串截取----substring--[,)
        // console.log(my.substring(0,1));
        // // 3.3.3   字符串是否以某字母开头---startwith
        // console.log(my.startsWith(20));
        // // 3.3.4   字符串是否包含某字符串----includes
        // console.log(my.includes(0));
    </script>
</body>
</html>

第三天

<!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>
    //     function Star(uname,age)
    //     {
    //         this.uname=uname
    //         this.age=age
    //         this.sing=function (){
    //             console.log('sing~~~');
    //         }
    //     }
    // const hzt=new Star()
    // const mby=new Star()
    // console.log(hzt===mby);
    // 存储复杂数据类型，会在栈中存储地址，地址指向堆中的数据
    // 造成内存空间的浪费

    </script>

    <!-- 原型 -->
    <script>
    // function Star(uname,age)
    // // 1.公共的属性，写在构造函数里面
    //     {
    //         this.uname=uname
    //         this.age=age
    //         // this.sing=function (){
    //         //     console.log('sing~~~');
    //         // }
    //     }
    // //2.公共的方法写在原型对象(为构造函数的属性)上
    // Star.prototype.sting=function(){
    //     console.log('sing~~~');
    // }
    // const hzt=new Star()
    // const mby=new Star()

    // hzt.sting()
    // console.log(hzt);
    </script>
    
    <!-- 小案例，数组封装函数 -->
    <script>
        // // const arr=[1,2,3]
        // const arr=new Array(11,223,55)

        // Array.prototype.max=function ()
        // {
        //     //展开运算符，传入数组的值
        //     //原型对象的this指向调用者
        //     return Math.max(...this)
        // }

        // Array.prototype.sum=function(){
        //   return  this.reduce((prev,next)=>prev+next,0)
            
        // }
        // console.log(arr.max());
        // console.log(arr.sum());
    </script>

    <!-- constructor属性 -->
    <script>
        // function Star(uname,age)
        // {
        //     this.uname=uname
        //     this.age=age
        //     // this.sing=function (){
        //     //     console.log('sing~~~');
        //     // }
        // }
        // console.log(Star.prototype);
        // //有多个方法时，直接给原型对象采取赋值方式，但是注意，要重新定义constructor属性☞Star
        // Star.prototype={
        //     constructor:Star,
        //     sing:function(){
        //         console.log('sing~~~');
        //     },
        //     dance:function(){
        //         console.log('dancing~~~');
        //     }
        // }
        // console.log(Star.prototype);

        // const me=new Star()
        // me.sing()
    </script>

    <!-- 对象原型，原型对象 -->
    <script>
        // // 1.构造函数
        //  function Star(uname,age)
        // {
        //     this.uname=uname
        //     this.age=age
        //     // this.sing=function (){
        //     //     console.log('sing~~~');
        //     // }
        // }
        // // 2.构造函数的原型对象
        // console.log(Star.prototype);
        // //3.构造函数   实例化的对象中的  对象原型__proto__
        // const me=new Star()
        // console.log(me.__proto__===Star.prototype);
    </script>

    <!-- 原型继承 -->
    <script>
    //    function W(){
    //     // this.name='ww',
    //     // this.age=12,
    //     this.body=1
    //    }

    //    function M(){
    //     // this.name='ww',
    //     // this.age=12,
    //     this.hair=0
    //    }

    //     // person={
    //     //     name:'sss',
    //     //     age:12
    //     // }
    //     function person()
    //     {
    //        this.name='sss',
    //        this.age=12
    //     }

    //     W.prototype=new person
    //     W.prototype.constructor=W
    //     //此时对W增加生孩子属性
    //     W.prototype.baby=function(){
    //         console.log('sss');
    //     }
    //     //发现会影响M
    //     M.prototype=new person
    //     M.prototype.constructor=M
        
    //    const w=new W()
    //    const m=new M()
    //     console.log(w);
    //     console.log(m);
    </script>

    <!-- 原型链 -->
    <script>
        // // 1.对象都有对象原型，然后指向构造函数的原型对象（.而原型对象属于对象，它也有对象原型指向另一个构造函数的原型对象）
        // //2.只要是原型对象就有constructor,指向构造函数

        // console.log(Object.prototype)---object
        // console.log(Object.prototype.__proto__)----null

        // function Person()
        // {
        //     console.log('ssss')
        // }
        // console.log(Person.prototype);--object
        // console.log(Person.prototype.__proto__===Object.prototype);--true

        // //检测实例对象的原型链

        // const ldh=new Person()
        // console.log(ldh instanceof Person);
        // console.log(ldh instanceof Object);



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

第四天

<!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>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;

            margin: 50px auto;

            color: aqua;
            font-size: x-large;

            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- <div></div>
    <p>123</p>
    <button>发送</button> -->
    <div class="box">

    </div>
    <!-- 深浅拷贝 -->
    <script>
        //1.一般拷贝--采取赋值---新对象改变会影响原对象(传递的是栈里面地址)
        // const pre={
        //     uname:'Bob',
        //     age:18,
        //    address:{
        //     ss:12
        //    }
        // }
        
        // const af=pre

        // af.age=90
        // console.log(af);
        // console.log(pre);
        //2.浅拷贝--两种方式--简单数据类型改变不影响原对象,复杂数据类型改变会影响(传递的还是地址)
        //简单的说当单层的复杂对象没影响,多层有影响
        // let my={}
        // Object.assign(my,pre)
        // console.log(my)
        // my.age=90
        // console.log(pre);
        // my.address.ss=30//原对象改变
         
    </script>

    <!-- 深拷贝实现方式 -1  递归函数-->
    <script>
        // const obj={
        //     uname:'pink',
        //     age:18,
        //     hobby:['乒乓球','足球'],
        //     sing:{
        //         ldh:'sing'
        //     }
        // }
        // const o={}
        // deepCopy(o,obj)
        // function deepCopy(newobj,oldobj)
        // {
        //     for(let k in oldobj)
        //      {
        //             //修改数组问题-----复杂数据类型
        //             if(oldobj[k] instanceof Array)
        //             {
        //                 newobj[k]=[]//给新对象创建hobby，
        //                 deepCopy(newobj[k],oldobj[k])
        //             }else if(oldobj[k] instanceof Object)
                            // {
                            //     newobj[k]={}
                            //     deepCopy(newobj[k],oldobj[k])
                            // }
        //             else
        //             {
        //                  //k  是属性名uname ||  oldObj[k]  属性值
        //                  newobj[k]=oldobj[k]   //等价于   o.uname,不用o.uname,因为o为空对象，使用【k】,给新对象添加属性

        //             }
        //      }
        // }
        // o.age=20;
        // o.hobby[0]='sing'
        
        // console.log(o);
        // console.log(obj);
    </script>

    <!-- 递归函数 -->
    <script>
        // getTime()
        // function getTime()
        // {
        // document.querySelector('div').innerHTML=new Date().toLocaleString()
        // setTimeout(getTime,1000) 
        // }
    </script>


    <!-- 异常处理 -->
    <script>
        // 1.throw
        // function nihao(x,y)
        // {
        //     if(!x||!y)
        //     {
        //         throw new Error('没有传递参数值')
        //     }
        //     return x+y;
        // }

        // console.log(nihao());
        // 2.try/catch
        //   nihao()
        //   function nihao()
        // {
        //  //有可能出现问题的代码放在里面
        //  try{
        //     const p=document.querySelector('p')
        //     p.style.color='red'
        //  }catch(err)
        //  {
        //     //不会中断程序，只会捕获
        //     console.log(err.message);
        //     // return 
        //     throw new Error('error')
        //  }finally{
        //     //无论如何都会执行
        //     alert("i am there")
        //  }
        // }

    </script>

    <!-- this -->
    <script>
        // 1.this的指向问题
        // 1.1普通函数，谁调用指向谁
        // 1.2箭头函数，指向最近一级的函数this
    // 2.改变this指向的三种方法
    // 2.1 call(this指向,参数)
    // const m={
    //     uname:'sss'
    // }
    // function nihao(x,y){
    //     console.log(this);
    //     console.log(x+y);
    // }
    // nihao.call(m,1,2)
    // 2.2 apply(this指向,数组参数)
    // nihao.apply(m,[1,3])
    //call（）使用场景---求数组最大最小值
    // const arr=[100,23,54]
    // console.log(Math.max.apply(null,arr));
    // console.log(Math.min.apply(null,arr));
    // console.log(Math.max(...arr));

   

    </script>

    <!-- this指向改变---重点方法bind() -->
    <script>
         // 2.3 bind()方法解决----不调用函数，只改变this指向
        //  function my(x,y)
        //  {
        //     console.log(this);
        //     console.log(x+y);
        //  }
        //  const o={
        //     age:15
        //  }
        //  my.bind(o,1,2)
        //使用场景---点击案例即禁用，两秒后开启
        // const button=document.querySelector('button')
        // button.addEventListener('click',function(){
        //     console.log(this);
        //     this.disabled=true
        //     // setTimeout()为window.settimeout,this指向window  
        //     setTimeout(function(){
        //         this.disabled=false
        //     }.bind(this),2000)
        // })
    </script>

    <!-- 防抖--- -->
    <script>
        //   如果事件过多，可能会造成卡顿
        // const box=document.querySelector('.box')
        // let i=1;
        // function mouseMove(){
        //     box.innerHTML=i++;
        // }
        // box.addEventListener('mousemove',mouseMove)
    //防抖函数手写实现-----有错，在哪呀！！！
        // function fandou(fn,t)
        // {
        //     let timer=null//定义定时器变量
        //     return function()
        //     {
        //         //deblunce()---只调用，一次，为了每次鼠标移动都有效果，需要返回匿名函数
        //         if(timer) {clearTimeout(timer)}
        //         else
        //         {
        //             timer=setTimeout(function()
        //             {
        //                 fn()
        //             },t);
        //         }
        //     }
        // }
        // box.addEventListener('mousemove',fandou(mouseMove,500))

        //节流函数实现
        //         function jieliu(fn,t)
        //         {
        //             let timer=null
        //             return function(){
        //                 if(!timer){
        //                     timer=setTimeout(function(){
        //                         fn();
        //                         timer=null
        //                     },t)
        //                 }
        //             }
        //         }
        // box.addEventListener('mousemove',jieliu(mouseMove,500))

        </script>

    </body>
    </html>