学习ES6[黑马四]

61-严格模式

<script>
    'use strict';
   var num=10;
    console.log(num)
</script>

62-高阶函数-函数可以作为参数传递

<style>
        div{
         position: absolute;
            width:100px;
            height:100px;
            background-color:pink;
        }
        /* div {*/
        /*    position: absolute;*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    */
        /*}*/
    </style>
    <!-- Bootstrap -->
<!--    <script src="./js/jquery.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
<div>

</div>

<script>
    //高阶函数--函数可以作为参数传递
    function fn(a,b,callback){
        console.log(a+b);
        callback&&callback();
    }
    fn(1,2,function(){
        console.log("我是最后调用的")
    })
    $("div").animate({left:500},function(){
        $("div").css("backgroundColor","purple");
    })
    // $("div").animate({left:500})

63-闭包

<script>
    //闭包(closure)指有权访问另一个函数作用域中变量的函数
    //闭包：我们fun这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    //我们fn 外面的作用域可以访问fn 内部的局部变量
    //闭包的主要作用:延伸了变量的作用范围

    function fn(){
        var num=10;
        // function fun(){
        //     console.log(num);
        // }
        // fun()
        // return fun;
        return function fun(){
            console.log(num)
        }
    }
    var f=fn();
    f();
    //类似于
    // var f=function fun(){
    //     console.log(num)
    // }


</script>

64-闭包应用

<ul class="nav">
    <li>榴莲</li>
     <li>臭豆腐</li>
     <li>啡鱼罐头</li>
     <li>大猪蹄子</li>
</ul>

<script>
    //闭包应用--点击li输出当前li的索引号
    //1.我们可以利用动态添加属性的方式
    var lis=document.querySelector('.nav').querySelectorAll('li');

    for (var i=0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onclick=function(){
            //console.log(i);
            console.log(this.index)
        }
    }
    //2.利用闭包的方式得到当前小li的索引号
    for(var i=0;i<lis.length;i++){
        //利用for循环创建了4个立即执行函数
        //立即执行函数也称为小闭包因为立即执行函数里面的任何一个函数都可以使用他的i这变量
        (function(i){
          lis[i].onclick=function(){
              console.log(i)
          }
        })(i)
    }

</script>

65-闭包应用2-定时器

<ul class="nav">
    <li>榴莲</li>
     <li>臭豆腐</li>
     <li>啡鱼罐头</li>
     <li>大猪蹄子</li>
</ul>
<script>
    //闭包应用-3秒钟之后，打印所有li元素的内容
    var lis=document.querySelector('.nav').querySelectorAll('li');
    for(var i=0;i<lis.length;i++){
        (function(i){
            setTimeout(function(){
                console.log(lis[i].innerHTML)
            },3000)
        })(i)
    }

</script>

66.-闭包应用3

<script>
    //打车起步价13(3公里内)，之后每多一公里增加5块钱，用户输入公里数就可以计算打车价格
    //如果有拥堵情况，总价格多收取10块钱拥堵费
    var car=(function(){
        var start=13;//起步价
        var total=0;//总价
        return {
            //正常的总价
            price:function(n){
                if(n<3){
                    total=start;
                }else{
                    total=start+(n-3)*5
                }
                return total;
            },
            //拥堵之后的费用
            yd:function(flag){
                return flag?total+10:total;
            }
            // yd:funtion(){}//拥堵之后的费用

        }
    })()
    console.log(car.price(5))//23
    console.log(car.yd(true))//33
    console.log(car.price(1))//13
    console.log(car.yd(false))//13
</script>

67-闭包应用4

<script>
    //作用域链
var num = 3;
(function () {
  (function () {
    (function () {
      (function () {
        (function () {
          var num=2;
          console.log(num);
        })();
      })();
    })();
  })();
})();//2  是从里往外查找


</script>

68-闭包应用5-保存作用域

<button id="btn">点我</button>
<button id="btn">点我2</button>
<button id="btn">点我3</button>
<button id="btn">点我4</button>
<button id="btn">点我5</button>

<script>
    var A=function(){
    return function(){};
}

(function(document){
    var btn=document.getElementById("btn");
    var btn1=document.getElementById("btn");
    var btn2=document.getElementById("btn");
    var btn3=document.getElementById("btn");
})(document)//传入了参数，第一次查找时是在全局查找，后面的直接使用，也就是保存了全局的数据，局部直接使用。

</script>

69.闭包从外部获取数据

<script>
    function f1(){
        var n=123;
        function f2(){
            alert(n)
        }
        return f2;
    }
    f2=f1()
    f2()
</script>

70.闭包应用6


<script>
setTimeout(function(param){
    alert(param)
},1000)

function func(param){
    return function(){
        alert(param)
    }
}
var f1=func(1)
setTimeout(f1,1000)


</script>

71.

<style>
    body{
        font-size: 12px;
    }
    h1{
        font-size: 1.5rem;
    }
    h2{
        font-size: 1.2rem;
    }
</style>
<body>

    <p>哈哈哈哈哈哈</p>
    <h1>hhhhhhhhh</h1>
    <h2>qqqqqqqqq</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

<script>
    function changeSize(size){
        return function(){
            document.body.style.fontSize = size + 'px';
        };
    }

    var size12 = changeSize(12);
    var size14 = changeSize(14);
    var size16 = changeSize(16);

    document.getElementById('size-12').onclick = size12;
    document.getElementById('size-14').onclick = size14;
    document.getElementById('size-16').onclick = size16;
    //我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上
</script>

72.封装变量

<script>
    //用闭包定义能访问私有函数和私有变量的公有函数。
    var counter = (function(){
        var privateCounter = 0; //私有变量
        function change(val){
            privateCounter += val;
        }
        return {
             value:function(){
                return privateCounter;
            },
            increment:function(){   //三个闭包共享一个词法环境
                change(1);
            },
            decrement:function(){
                change(-1);
            },

        };
    })();

    console.log(counter.value());//0
    console.log(counter.increment());
    console.log(counter.increment());//2
    //共享的环境创建在一个匿名函数体内，立即执行。
    //环境中有一个局部变量一个局部函数，通过匿名函数返回的对象的三个公共函数访问。

</script>

73.为节点绑定循环事件


<p id="info">123</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

<script>
function showContent(content){
    document.getElementById('info').innerHTML = content;
};

function setContent(){
    var infoArr = [
        {'id':'email','content':'your email address'},
        {'id':'name','content':'your name'},
        {'id':'age','content':'your age'}
    ];
    for (var i = 0; i < infoArr.length; i++) {
        var item = infoArr[i];
        document.getElementById(item.id).onfocus = function(){
            showContent(item.content)
        }
    }
}
setContent()

</script>

74.递归


<script>
    //递归函数：函数内部自己调用自己，这个函数就是递归函数
    var num=1;
    function fn(){
        console.log('我要打印6句话');
        if(num === 6){
            return ;//递归里面必须加退出条件
        }
        num++;
        fn();
    }
    fn();


</script>

75.递归函数求1-n的阶乘

<script>
    //利用递归函数求1~n的阶乘1*2*3*4..n
    function fn(n){
        if(n===1){
            return 1;
        }
        return n*fn(n-1)
    }
    console.log(fn(3));
    console.log(fn(4));
</script>

76.求斐波那契数列

<script>
    //利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5
    //用户输入一个数字n就可以求出 这个数字对应的兔子序列值
    //我们只需要知道用户输入的n 的前面两项(n-1,n-2)就可以计算出n 对应的序列值
    function fb(n){
        if (n===1||n===2){
            return 1;
        }
        return fb(n-1)+fb(n-2);
    }
   console.log(fb(10))

</script>

77.用递归遍历数据

<script>
    var data=[{
        id:1,
        name:'家电',
        goods:[{
            id:11,
            gname:'冰箱'
        },{
            id:12,
            gname:'洗衣机'
        }]},{
        id:2,
        name:'服饰'
    }];
    //我们想要做输入id号，就可以返回的数据对象
    //1.利用forEach去遍历里面的每一个对象
    function getID(json,id){
        var o={};
        json.forEach(function(item){
           // console.log(item)
            if(item.id===id){
                // console.log(item)
                o=item;
                return item;
               //2.我们想要得到里层的数据 11,12可以利用递归函数
                //里面应该有goods这个数组并且数组的长度不为0
            }else if(item.goods && item.goods.length>0){
               o=getID(item.goods,id)
            }
        })
        return o ;
    }
    console.log(getID(data,1));
    console.log(getID(data,2));
    console.log(getID(data,11));
    console.log(getID(data,12));
     // getID(data,2);
     // getID(data,11);

</script>

78.深拷贝和浅拷贝

<script>
    //浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
    //深拷贝拷贝多层，每一层级别的数据都会拷贝
    var obj={
        id:1,
        name:'andy',
        msg:{
            age:18
        }
    };
    var o={};
    // for(var k in obj){
    //     //k是属性值 obj[k]属性值
    //     o[k]=obj[k];
    // }
    // console.log(o)
    // o.msg.age=20;
    // console.log(obj)

    console.log('----------')
    Object.assign(o,obj);
    console.log(o)
    o.msg.age=20;
    console.log(obj)
</script>

79.深拷贝和浅拷贝

<script>
    //浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
    //深拷贝拷贝多层，每一层级别的数据都会拷贝
    var obj={
        id:1,
        name:'andy',
        msg:{
            age:18
        },
        color:['pink','red']
    };
    var o={};
    //封装函数
    function deepCopy(newobj,oldobj){
        for(var k in oldobj){
            //判断我们的属性值属于哪种数据类型
            //1.获取属性值 oldobj[k]
            var item=oldobj[k];
            //2.判断这个值是否是数组
            if(item instanceof Array){
                newobj[k]=[];
                deepCopy(newobj[k],item)
            }else if(item instanceof Object){
                 //3.判断这个值是否是对象
                newobj[k]={};
                deepCopy(newobj[k],item)
            }else{
                 //4.属于简单数据类型
                newobj[k]=item
            }
        }
    }
    deepCopy(o,obj);
    console.log(o);
    var arr=[];
    console.log(arr instanceof Object)
    o.msg.age=20;
    console.log(obj)

</script>

posted @ 2022-08-06 11:44 布衣梦蝶1978 阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 学习ES6笔记[尚硅谷教育一]

· 学习ES6[尚硅谷二]笔记

· JavaScript ES6 - 高阶函数

· 复习 - es6语法

· day06-13 es5 和 es6

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

公告

昵称：布衣梦蝶1978
园龄： 2年7个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

python(4)