• JS高级02：ES5数组新增方法、函数、闭包

    ES5数组新增方法、函数、闭包

    ES5新增方法

    ES5数组新增了filter、map、some、every这几个方法
    字符串新增了trim()去除空白的方法，返回一个新的字符串

    筛选数组filter方法

    filter()方法创建一个新的数组，新数组中的元素时通过检查数组中符合条件的元素，主要用于筛选数组

    • 筛选出数组中的偶数
     <script>
        var array=[1,2,3,4,5,6];
        array.filter((value, index, array1) => {
            return value%2===0;
        })
        for (let number of numbers) {
            console.log(number);
        }
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    some()

    some方法用于检测数组中的元素是否满足指定条件(查找数组中是否有满足条件的元素)
    返回值是boolean值，如果找到满足条件的元素返回true，找不到返回false

    • 查找元素中是否有偶数
     <script>
        var array=[1,2,3,4,5,6];
        let b = array.some((value, index, array1) => {
            return value%2===0;
        });
        console.log(b);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    商品查询案例

    如果查询数组中唯一的元素，用some()方法更合适，因为它找到和这个元素，就不在进行循环，效率更高

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }

        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }

        input {
            width: 50px;
        }

        .search {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
<div class="search">
    按照价格查询: <input type="text" class="start"> - <input type="text" class="end">
    <button class="search-price">搜索</button>
    按照商品名称查询: <input type="text" class="product">
    <button class="search-pro">查询</button>
</div>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>产品名称</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    var data = [{
        id: 1,
        pname: '小米',
        price: 3999
    }, {
        id: 2,
        pname: 'oppo',
        price: 999
    }, {
        id: 3,
        pname: '荣耀',
        price: 1299
    }, {
        id: 4,
        pname: '华为',
        price: 1999
    },];

    let tBody = document.querySelector('tbody');
    let searchPrice = document.querySelector('.search-price');
    let searchPro = document.querySelector('.search-pro');

    let startPrice = document.querySelector('.start');
    let endPrice = document.querySelector('.end');
    let product = document.querySelector('.product');
    setData = (array) => {
        tBody.innerHTML = ``;
        array.forEach(value => {
            var tr = `

${value.id}
${value.pname}
${value.price}

`;
            tBody.insertAdjacentHTML('beforeend', tr);
        })
    }
    setData(data);

    searchPrice.addEventListener('click', function () {
        let nArray = data.filter(value => {
            let price = value.price;
            return price >= startPrice.value && price <= endPrice.value;
        });
        setData(nArray);
    });

    searchPro.addEventListener('click',function () {
        var nArray=[];
        data.some(value => {
            if (value.pname===product.value){
                nArray.push(value);
                //记得return true 把循环结束掉
                return true;
            }
        })

        setData(nArray);
    })
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116

    Object.defineProperty

    Object.defineProperty:往对象中添加或者属性或修改原有属性
    如果属性没有则新加，如果有则修改

      <script>
        var obj={name:'daga'};
        Object.defineProperty(obj,'age',{
            value:25
        });
        console.log(obj);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
       <script>
        var obj={name:'daga'};
        Object.defineProperty(obj,'age',{
            value:25
        });
        Object.defineProperty(obj,'age',{
            //不允许修改值
            writable:false
        })
        console.log(obj);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    Object.keys

    获取对象的属性名，返回值为对象属性名的数组

        <script>
        var obj={name:'daga',age:25};
        let strings = Object.keys(obj);
        for (let string of strings) {
            console.log(string);
        }
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    delete obj.name(删除属性名)

     <script>
        var obj={name:'daga',age:25};
        delete obj.name;
        let strings = Object.keys(obj);
        for (let string of strings) {
            console.log(string);
        }
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    bind

    改变函数内this指向， js提供了三种方法 call() apply() bind()
    bind()方法不会调用函数，但是能改变函数内部this指向，返回由指定的this值和初始化参数改造的原函数的拷贝

     <script>
        var o={name:'andy'};
        function fn() {
            console.log(this);
        }
        let fn1 = fn.bind(o);
        //新的拷贝函数
        fn1();
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向此时的bind

    • 案例
      有一个按钮，当我们点击了之后就禁用这个按钮，3秒之后开启这个按钮
     <script>
        window.onload=function () {
            let button = document.querySelector('.button');

            button.addEventListener('click',function () {
                this.disabled=true;
                setTimeout(function () {
                    this.disabled=false;
                }.bind(this),3000); //这个this指向的是button
            });
        }
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    call apply bind总结

    相同点：都可以改变函数内部的this指向
    区别点：call和apply会调用函数，并且改变函数内部this指向
    call和apply传递的参数不一样，call传递参数，apply必须以数组形式
    bind不会调用函数，可以改变函数内部this指向

    • 应用场景
      call经常做继承
      apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值
        <script>
        var array=[25,36,8,98,0,36];
        let number = Math.max.apply(Math,array);
        alert(number);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5

    bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向，并且返回值是一个函数

    高阶函数

    高阶函数：高阶函数是对其他函数进行操作的函数，它接受函数昨晚参数或将函数作为返回值输出

    • 函数作为参数(应用于回调函数)
    <script>
        function fn1(callback) {
            callback&&callback();
        }
        fn1(function () {
            alert('hi')
        })
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 函数作为返回值(应用于闭包)
     <script>
        function fun() {
            return function (){};
        }
        fun();
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    闭包

    定义：指有权访问另一个函数作用域中变量的函数

    简单理解就是，一个作用域可以访问另外一个函数内部的局部变量,闭包就是函数
    内部函数访问外部作用域函数变量的时候，只有当闭包函数被调用完毕，该变量才会被销毁，否则将一直存放在闭包函数中(闭包对象)

     <script>
        function f1() {
            var a=5;
            return function () {
                console.log(a);
            }
        }
        let f = f1();
        f();
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    闭包的主要作用：延伸了变量的作用范围

    闭包应用一

    点击li输出当前li的索引号
    立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i变量

        <script>
        window.onload=function () {
            let lis = document.querySelector('.nav').querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
                (function (i) {
                    lis[i].onclick=function () {
                        console.log(i);
                    }
                })(i);
            }
        }
    </script>
</head>
<body>
<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
</ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    闭包应用二

    3秒后，打印li元素的内容

        <script>
        window.onload=function () {
            let 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>
</head>
<body>
<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
</ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    闭包应用三

    计算打车价格

     <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;
                }
            }
        })();
        console.log(car.price(5));
        console.log(car.yd(true));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    思考题

    思考题1产生了闭包，思考题2没有产生闭包

     <script>
        // 思考题 1：

        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function() {
                return function() {
                    return this.name; //this指向window
                };
            }
        };

        console.log(object.getNameFunc()())
        var f = object.getNameFunc();
        // 类似于
        var f = function() {
            return this.name;
        }
        f();

        // 思考题 2：

        // var name = "The Window";　　
        // var object = {　　　　
        //     name: "My Object",
        //     getNameFunc: function() {
        //         var that = this;
        //         return function() {
        //             return that.name;
        //         };
        //     }
        // };
        // console.log(object.getNameFunc()())
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    闭包总结

    闭包是一个函数(一个作用域可以哦访问另外一个函数的局部变量)
    闭包的主要作用是延伸变量的作用范围(可以通过闭包保存外部变量)

    递归

    如果一个函数在内部可以调用其自身，那么这个函数就是递归函数。
    简单理解：函数内部自己调用自己。这个函数就是递归函数
    递归函数的作用和循环效果一样

    由于递归很容易发生栈溢出错误，所以必须要加退出条件 return

    利用递归求阶乘

    <script>
        // 1*2*3*4*5;  f(n)=f(n-1)*n  f(3)=(f2)*3  f(2)=f(1)*2
        function f(n) {
            if (n===1){
                return 1;
            }
            return f(n-1)*n;
        }
        console.log(f(3));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    利用递归求斐波那契数列

     <script>
        // 1 1 2 3 5  f(n)=f(n-1)+f(n-2)
        function f(n) {
            if (n===1||n===2){
                return 1;
            }
            return f(n-1)+f(n-2);
        }
        console.log(f(24));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    根据id号返回数据对象

    数据遍历

    <script>
        var data = [{
            id: 1,
            name: '家电',
            goods: [{
                id: 11,
                gname: '冰箱',
                goods: [{
                    id: 111,
                    gname: '海尔'
                }, {
                    id: 112,
                    gname: '美的'
                },]
            }, {
                id: 12,
                gname: '洗衣机'
            }]
        }, {
            id: 2,
            name: '服饰'
        }];

        function readData(data, id) {
            var o = {};
            data.forEach(value => {
                if (value.id === id) {
                    o = value;
                } else if (value.goods && value.goods.length > 0) {
                    o = readData(value.goods, id);
                }
            })
            return o;
        }

        console.log(readData(data, 1));
        console.log(readData(data, 2));
        console.log(readData(data, 111));
        console.log(readData(data, 12));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    拷贝

    浅拷贝

    浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用

    • ES5实现
    <script>
        var obj={
            id:1,
            name: 'andy',
            msg:{
                age:18
            }
        };
        var o={};
        for (let key in obj) {
            o[key]=obj[key];
        }
        console.log(o);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • ES6实现
      Object.assign(o,obj);
    <script>
        var obj={
            id:1,
            name: 'andy',
            msg:{
                age:18
            }
        };
        var o={};
        Object.assign(o,obj);
        console.log(o);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    深拷贝

    深拷贝拷贝多层，每一级别的数据都会拷贝

    • ES5实现
        <script>
        var obj={
            id:1,
            name: 'andy',
            msg:{
                age:18
            }
        };
        var o={};
        //深拷贝
        function deepCopy(o,obj) {
            for (let k in obj) {
                let item = obj[k];
                //如果是数组
                if (item instanceof  Array){
                    //开辟数组空间
                    o[k]=[];
                    deepCopy(o[k],item);
                }else if (item instanceof Object){
                    //开辟新的对象空间
                    o[k]={};
                    deepCopy(o[k],item);
                }else {
                    o[k]=item;
                }
            }
        }
        deepCopy(o,obj);
        console.log(o);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
  • 相关阅读:
    CSGO的那些事儿：CS2这么差，为什么不改回CS1?
    前后端小项目链接
    redis 分布式锁
    python实例 - 猜数字游戏
    指针和数组试题解析（2）字符数组部分
    Python实现视频转音频
    盲盒商城系统玩法大讲坛
    实时选品系统实现的难点
    阿里5年经验之谈 —— 记录一次jmeter压测的过程！
    传输机房的基本结构
  • 原文地址：https://blog.csdn.net/weixin_43216437/article/details/127558779