关于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语法

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）