微语：代码适合中午敲，早晚出BUG

相册图库图片相册介绍
站长工具各种快捷工具
我的邻居我的小伙伴们
热门文章关注点最多文章
账号注册注册本站账号
技术支持大佬指导员

深拷贝 JavaScript

 // 浅拷贝存在的问题:浅拷贝只能拷贝一层数据。
        let obj1 = {
            name: "小白",
            color: "#ff0000",
            like: ["爬山", "旅游"]
        }
        let obj2 = {}
        for (let key in obj1) {
            obj2[key] = obj1[key]
        }
        // 修改拷贝后的boj2里面值
        obj2.like[0] = "赏花 "
        // 发现修改之后会影响到boj1,所以没有拷贝成功
        console.log(obj1);
        console.log(obj2);

        // 解决办法:遍历数组或对象的所有子数据，每一层都单独拷贝
        let obj3 = JSON.parse(JSON.stringify(obj1))
        obj3.like[0] = "钓鱼"
        // 这里修改之后，发现并没有影响到obj1和obj2的数据，说明拷贝成功了
        console.log(obj3);

小诸葛深拷贝 4-23

评论(0) 浏览(331)

变量的拷贝 JavaScript

    // 引用类型的拷贝

        let obj1 = {
            name: "小红",
            age: 18,
            sex: "女",
        }
        let obj2 = obj1;

        console.log(obj1);
        console.log(obj2);

        /*
                | 执行流程 |

                        1).定义了一个obj1对象
                        2).定义了一个obj2,吧obj1的值赋值给obj2(这里赋值的是obj1的地址，由于obj1是一个对象，也就是引用型数据，会存放到堆中，栈区存放的是堆中数据的地址，由栈区的地址，找到堆中的实体)
                        3).执行console.log() 分别打印obj1,obj2
                        执行结果:{name: '小红', age: 18, sex: '女'}
                        注：此处拷贝的只是一个地址，不是一个全新的实体，指向的还是同一个实体。
        */

小诸葛变量的拷贝 4-23

评论(0) 浏览(318)

基本类型和引用类型 JavaScript

        // 基本数据类型(存放在栈里面)
        let a1 = 50;
        let b1 = a1;
        a1 = 40;
        console.log("a1=", a1, "b1=", b1);

        /*     | 执行流程 |
                    1).定义变量a1赋值50
                    2).定义变量b1 把a1的50赋值给b1，此时b1=50;
                    3).对a1重新赋值，此时a1为40
                    4).执行 console.log();
                    结果为：a1= 40 ,b1= 50
        */

        //引用类型：存储在堆里面
        let c1 = [1, 2, 3, 4];
        let d1 = c1;
        c1[0] = 10; //修改数组C1下标0的值为10
        console.log(c1);
        console.log(d1);

        /*

                | 执行流程  |

                        1).定义一个数组为c1 传入数组元素[1, 2, 3, 4]
                        2).把数组C1的值赋值给d1(由于是引用类型，这里的赋值指的是地址（实体存在堆里面，栈里面存放的是一个地址，指向堆中的实体）)
                        3).对数组c1的下标为0的元素进行元素修改为 10
                        4).执行 console.log()打印c1和c2;

                        结果为：C1=[10, 2, 3, 4] ,b1=[10, 2, 3, 4]
                        注:这里虽然修改了c1下标为0的数组元素，但是由于c1赋值给d1的值是地址，所以他们始终指向的是同一个实体，这里对c1的元素进行了修改，所以d1也一样会发生改变。
        */

小诸葛数据类型 4-23

评论(0) 浏览(313)

IIFE JavaScript

在ES5中为了避免全局污染所用的手法。

 (function () {
            var sum = 0;
            for (var i = 0; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        })();

小诸葛 IIFE 4-19

评论(0) 浏览(328)

例如封装一个函数求N个数相加之和 JavaScript

方法一：arguments方法【伪数组】

        function add() {
            let sum = 0;
            for (i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

方法二:rest参数【真数组】

      function add(...arr) {
            let sum = 0;
            arr.forEach(v => {
                sum += v;
            })
            return sum;
        }

调用函数

        console.log(add(1, 5, 3, 4));
        console.log(add(1, 8, 3, 4, 21));
        console.log(add(1, 25, 6));

小诸葛 N数相加之和 4-19

评论(0) 浏览(289)

Js箭头函数 JavaScript

ES5

 let show = function () {
            console.log("show");
            }
            show()

ES6箭头函数

 let show = () => {
            console.log("show");
        }
        show()

当形式参数只有一个的时候，可以省略（）

 let arr = [1, 2, 3]
        arr.forEach(v => {
            console.log(v);
        })

当代码只有一句话的时候，可以省略{}，自动返回，return可以不写

let arr2 = arr.map(v => v + 10)
        console.log(arr2);

小诸葛箭头函数 4-19

评论(0) 浏览(302)

阻止事件传播 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            button {
                border: 0;
                width: 350px;
                height: 80px;
                position: fixed;
                font-size: 16px;
                font-weight: bold;
                color: rebeccapurple;
                color: #fff;
                background-color: saddlebrown;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            button:hover {
                background-color: cadetblue;
                color: #fff;
            }

            .mc {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: #00000054;
                        z-index: 9;
                        display: none;

            }

            .lodo {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                height: 300px;
                width: 500px;
                background-color: #fff;
                        z-index: 99;
            }
            h1{
                text-align: center;
                padding: 10px;
                border-bottom: 1px dashed #000;
            }
            input{
                border: 0;
                padding:0 20px;
                background-color: steelblue;
                width: 80%;
                height: 50px;
                outline:none;
                color: #fff;
            }
            input::placeholder{
                color: #fff;
            }
            p{
                padding: 0 10px;
                font-weight: bold;

            }
        </style>
    </head>
    <body>
        <button>点击登录</button>
        <div class="mc">
            <div class="lodo">
                <h1>登录</h1>
                <p>账号：<input type="text" name="" id="" placeholder="请输入账号"></p>
                <p>密码：<input type="text" name="" id="" placeholder="请输入密码"></p>
            </div>
        </div>
        <script>
            let button =document.querySelector("button")
            let mc = document.querySelector(".mc")
            let lodo = document.querySelector(".lodo")
            button.addEventListener("click",function(){
                mc.style.display="block"
            })

            mc.addEventListener("click",function(){
                mc.style.display="none"
            })
             lodo.addEventListener("click",function(e){
                e.stopPropagation()
            })
        </script>
    </body>
</html>

小诸葛阻止事件传播 4-16

评论(0) 浏览(308)

JS删除指定数组元素 JavaScript

   //封装函数删除数组中所有的指定的数字
        let arr1 = [3, 2, 1, 2, 5, 1];
        //定义函数
        const deleteNum = (arr, num) => {
            //判断传入值是否为数组
            if (arr instanceof Array) {
                arr.splice(arr.indexOf(num), 1); //获取指定数字的索引并删除
                if (arr.indexOf(num) !== -1) deleteNum(arr, num); //如果数组内还有指定数字进行递归删除
            } else {
                console.warn("请传入数组"); //在控制台输出警告
            }
            return arr1
        };
        deleteNum(arr1, 1)
        console.log(deleteNum(arr1, 1))

小诸葛数组操作 4-15

评论(0) 浏览(368)