关于javascript:复习-es6语法

这几天电脑有点问题，始终在弄，而且论文也迫近了也在工夫弄那个，后面node有一个大我的项目，曾经做完了，我当初是筹备把上次温习断下的持续温习始终到这个我的项目，而后就开始vue了。

首先是函数的一个进阶，要明确函数也是对象，所以是能够通过new的办法来创立实例的。

而后是调用函数的三个办法：call能够扭转this加调用、apply能够扭转this然而传的参数是数组也能够调用、bind能够扭转this传的参数也跟第一个call一样然而就是不会本人调用。

明天的主打内容

闭包首先要晓得严格模式，use srict放在部分或者全局作用域都能够，而后有哪些变动，变量必须申明赋值啊、this一般函数为undefined啊、函数形参不能重名啊、函数生命必须在顶层啊等等、

高阶函数：就是函数外面嵌套一个函数或者return为一个函数

而后就是闭包，什么事闭包？

闭包就是一个可能拜访函数局部变量的函数，两个留神点，一个是函数，一个是拜访局部变量。

还是跟以前一样传一些我第二次做有些感想的案例吧，就不全副传上来了。第一个是点击li打印索引号通过闭包来做

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        /* let ul = document.querySelector('ul')
        for(var i = 0; i < ul.children.length; i++) {
            ul.children[i].setAttribute('data-index',i)
            ul.children[i].onclick = function() {
                console.log(this.getAttribute('data-index'));
            }
        } */
        // 这里我本人做了一下没有用到闭包来实现，如果规定不能增加本人的属性呢 
        // 这个时候你只能用i 然而当你一点击就打印出i的值那必定是最初一个i退出循环的值，为什么，因为这里for是主栈道上的代码，会先执行完，
        // 才会去执行事件外面的异步工作也就是回调函数，所以这里能够先用一个立刻执行函数，一执行到这个i就先把这个i保存起来有几个循环就有几个立刻执行函数，
        // 当你一点击就把函数外面存着的i给到他 两个函数 两个作用域 用到了局部变量 所以闭包产生
        let ul = document.querySelector('ul')
        for(var i = 0; i < ul.children.length; i++) {
            /* ul.children[i].onclick = function() {
                console.log(i);
            } */
            (function(i) {
                ul.children[i].onclick = function() {
                console.log(i);
            }
            })(i)
        }
    </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>
    <!-- 打车起步价13(3公里内),  之后每多一公里减少 5块钱.  用户输出公里数就能够计算打车价格
如果有拥挤状况,总价格多收取10块钱拥挤费 -->
<script>
    function getMoney() {
        let total = 13
        let price = 0
        return {
            price : function(n) {
                // console.log(total, mile);
                if(n > 3) {
                    price = total + Math.ceil(n - 3) * 5
                } else {
                    price = total
                }
                return price
            },
            congestionPrice : function(n,congestion) {
                this.price(n)
                if (congestion) {
                    price += 10
                } else {
                    price = total
                }
                return price
            }
        }
    }
    console.log(getMoney().price(1));
    console.log(getMoney().congestionPrice(1,true));
    console.log(getMoney().price(4));
    console.log(getMoney().congestionPrice(4, true));
</script>
</body>
</html>

递归

递归就是在函数外部在调用本身，相似于循环，通过return来完结。递归有几个经典案例我感觉能够看一下，这次做还是纯熟了好多

第一个求阶乘

<!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>
        // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
        function getResult(n)  {
            if (n == 1) {
                return 1
            }
            return n * getResult(n - 1)
        }
        console.log(getResult(3));
    </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>
        /* 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
// 用户输出一个数字 n 就能够求出 这个数字对应的兔子序列值
// 咱们只须要晓得用户输出的n 的后面两项(n-1 n-2)就能够计算出n 对应的序列值 */
        function getResult(n) {
            if (n == 1 || n == 2) {
                return 1
            }
            return getResult(n - 1) + getResult(n - 2)
        }
        console.log(getResult(5));
    </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>
        /*  咱们想要做输出id号,就能够返回的数据对象*/
        var data = [{
   id: 1,
   name: '家电',
   goods: [{
     id: 11,
     gname: '冰箱',
     goods: [{
       id: 111,
       gname: '海尔'
     }, {
       id: 112,
       gname: '美的'
     },

            ]

   }, {
     id: 12,
     gname: '洗衣机'
   }]
 }, {
   id: 2,
   name: '服饰'
}];
    var o = {}
    function getData(arr, id) {
        arr.forEach(function(item) {
            if (item.id == id) {
                o = item
                return o
            } else if(item.goods && item.goods.length > 0) {
                getData(item.goods, id)
            }
        })
    }
    console.log(getData(data, 1));
    console.log(getData(data, 11));
    </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>
        // 浅拷贝只拷贝一层 更深层次只拷贝援用 也就是你改或者他改值单方都受影响
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        }
        var o = {}
        for (k in obj) {
            o[k] = obj[k]
        }
        console.log(o);
        console.log('------------------')
        // es6疾速浅拷贝语法
        Object.assign(obj, o)
        console.log(o);
    </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>
        // 深拷贝就是更深层的数据 也会独自开拓空间 比方数组、函数等
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        },
        color: ['pink', 'red']
    }
    let o = {}
    function getCopy(usedCopy, useCopy) {
        for (k in usedCopy) {
            if (usedCopy[k] instanceof Array) {
                useCopy[k] = []
                getCopy(usedCopy[k], useCopy[k])
            } else if (usedCopy[k] instanceof Object) {
                useCopy[k] = {}
                getCopy(usedCopy[k], useCopy[k])
            } else {
                useCopy[k] = usedCopy[k]
            }
        }
    }
    getCopy(obj, o)
    console.log(o);
    </script>
</body>
</html>

接下来是正则表达式。

这个其实各种语法我就不多说了，参考mdn、菜鸟教程这些多得很，我说一下明天的案例有一个替换敏感字符嘛，正则外面的规定是中文的话不必写引号，间接写进去就是，一个案例邮箱提取，说一下exec这个办法怎么来屡次调用

<!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>
        /* 
        将字符串'小明：大神么么哒，正好是我想要的，我的邮箱是[email protected]小红：我老公最爱看这个了，我想给他一个惊喜，么么么哒，
        邮箱是[email protected]我：坏蛋毕生安全，邮箱是[email protected]'中所有的邮箱号码提取进去
 */
// 留神 要应用exec进行屡次匹配不仅正则要增加全局匹配 而且还有用一个while循环
        let str = `小明：大神么么哒，正好是我想要的，我的邮箱是[email protected]小红：我老公最爱看这个了，我想给他一个惊喜，么么么哒，
        邮箱是[email protected]我：坏蛋毕生安全，邮箱是[email protected]`
        let reg = /\[email protected]\w+.[a-zA-z]+/g
        var result = reg.exec(str)
        while(result!== null) {
            console.log(result[0]);
            result = reg.exec(str)
        }
    </script>
</body>
</html>

正则差不多就这样了

而后是一些es6语法：let、const、解构赋值、箭头函数。

其实我始终搞不懂let这个块级作用域到底是限度在哪里，我感觉作用域范畴跟var一样哪里都能够用，所以我前面根本都用let申明的变量。当然我这个是错误思想哈，我是想当前缓缓通过实例来理解。

而后残余参数也就是扩大运算符三个点，而后就是array新增的一些办法、form能够将维数组或者对象转为数组，第二个参数能够循环对每一个进来的值做操作，arr.find能够找满足第一个条件的值，没有就返回undefined，参数也是写item\而后对应的findindex就是找

满足第一个条件的参数的下标，还有就是查找数组外面有没有蕴含这个值.includes

而后就是模板字符串。

string页新增了一些办法：str.strtwith endstith看这个字符有没有在这个字符串的结尾或结尾。

.repeat能够将字符创反复n次返回一个新数组。

最初就是set数据结构因为跟数组类似，通过new 外面的参数能够传数组，又因为本身的没有反复值的特点所以给数组起到一个去重的操作

而后他的一个属性.size能够查看set数据结构有多少值

add办法连式编程的模式新增数据

delete办法删除返回的是布尔值

has查看有无返回布尔值

clear清空数据结构

最初set也能够用forEach进行一个遍历操作

关于javascript:复习-es6语法

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:复习-es6语法

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复