复习 – es6语法

  • 复习 – es6语法已关闭评论
  • 193 次浏览
  • A+
所属分类:Web前端
摘要

这几天电脑有点问题,一直在弄,而且论文也逼近了也在时间弄那个 ,前面node有一个大项目,已经做完了,我现在是准备把上次复习断下的继续复习一直到这个项目,然后就开始vue了。

这几天电脑有点问题,一直在弄,而且论文也逼近了也在时间弄那个 ,前面node有一个大项目,已经做完了,我现在是准备把上次复习断下的继续复习一直到这个项目,然后就开始vue了。

1.

首先是函数的一个进阶,要明白函数也是对象,所以是可以通过new的方法来创建实例的。

然后是调用函数的三个方法:call可以改变this加调用、apply可以改变this但是传的参数是数组也可以调用、bind可以改变this传的参数也跟第一个call一样但是就是不会自己调用。

2.

今天的主打内容

闭包首先要知道严格模式,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>

3.

递归

递归就是在函数内部在调用自身,类似于循环,通过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>

4.

接下来是正则表达式。

这个其实各种语法我就不多说了,参考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>         /*          将字符串'小明:大神么么哒,正好是我想要的,我的邮箱是xiaoming@qq.com小红:我老公最爱看这个了,我想给他一个惊喜,么么么哒,         邮箱是xiaohong@sina.com我:好人一生平安,邮箱是wuyou@163.com'中所有的邮箱号码提取出来  */ // 注意 要使用exec进行多次匹配不仅正则要添加全局匹配 而且还有用一个while循环         let str = `小明:大神么么哒,正好是我想要的,我的邮箱是xiaoming@qq.com小红:我老公最爱看这个了,我想给他一个惊喜,么么么哒,         邮箱是xiaohong@sina.com我:好人一生平安,邮箱是wuyou@163.com`         let reg = /w+@w+.[a-zA-z]+/g         var result = reg.exec(str)         while(result!== null) {             console.log(result[0]);             result = reg.exec(str)         }     </script> </body> </html>

正则差不多就这样了

5.

然后是一些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进行一个遍历操作