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

1.

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

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

2.

今天的主打内容

闭包首先要知道严格模式,use srict放在局部或者全局作用域都可以,然后有哪些变化,变量必须声明赋值啊、this普通函数为undefined啊、函数形参不能重名啊、函数生命必须在顶层啊等等、

高阶函数:就是函数里面嵌套一个函数或者return为一个函数

然后就是闭包,什么事闭包?

闭包就是一个能够访问函数局部变量的函数,两个注意点,一个是函数,一个是访问局部变量。

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <ul>
  11. <li>1</li>
  12. <li>2</li>
  13. <li>3</li>
  14. <li>4</li>
  15. <li>5</li>
  16. </ul>
  17. <script>
  18. /* let ul = document.querySelector('ul')
  19. for(var i = 0; i < ul.children.length; i++) {
  20. ul.children[i].setAttribute('data-index',i)
  21. ul.children[i].onclick = function() {
  22. console.log(this.getAttribute('data-index'));
  23. }
  24. } */
  25. // 这里我自己做了一下没有用到闭包来完成,如果规定不能添加自己的属性呢
  26. // 这个时候你只能用i 但是当你一点击就打印出i的值那肯定是最后一个i退出循环的值,为什么,因为这里for是主栈道上的代码,会先执行完,
  27. // 才会去执行事件里面的异步任务也就是回调函数,所以这里可以先用一个立即执行函数,一执行到这个i就先把这个i保存起来有几个循环就有几个立即执行函数,
  28. // 当你一点击就把函数里面存着的i给到他 两个函数 两个作用域 用到了局部变量 所以闭包产生
  29. let ul = document.querySelector('ul')
  30. for(var i = 0; i < ul.children.length; i++) {
  31. /* ul.children[i].onclick = function() {
  32. console.log(i);
  33. } */
  34. (function(i) {
  35. ul.children[i].onclick = function() {
  36. console.log(i);
  37. }
  38. })(i)
  39. }
  40. </script>
  41. </body>
  42. </html>

然后是闭包算价格这个,看得出来还有点没有完全吃透闭包的原理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <!-- 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
  11. 如果有拥堵情况,总价格多收取10块钱拥堵费 -->
  12. <script>
  13. function getMoney() {
  14. let total = 13
  15. let price = 0
  16. return {
  17. price : function(n) {
  18. // console.log(total, mile);
  19. if(n > 3) {
  20. price = total + Math.ceil(n - 3) * 5
  21. } else {
  22. price = total
  23. }
  24. return price
  25. },
  26. congestionPrice : function(n,congestion) {
  27. this.price(n)
  28. if (congestion) {
  29. price += 10
  30. } else {
  31. price = total
  32. }
  33. return price
  34. }
  35. }
  36. }
  37. console.log(getMoney().price(1));
  38. console.log(getMoney().congestionPrice(1,true));
  39. console.log(getMoney().price(4));
  40. console.log(getMoney().congestionPrice(4, true));
  41. </script>
  42. </body>
  43. </html>

3.

递归

递归就是在函数内部在调用自身,类似于循环,通过return来结束。递归有几个经典案例我觉得可以看一下,这次做还是熟练了好多

第一个求阶乘

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
  12. function getResult(n) {
  13. if (n == 1) {
  14. return 1
  15. }
  16. return n * getResult(n - 1)
  17. }
  18. console.log(getResult(3));
  19. </script>
  20. </body>
  21. </html>

然后斐波拉起亚数列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. /* 利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21...
  12. // 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
  13. // 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值 */
  14. function getResult(n) {
  15. if (n == 1 || n == 2) {
  16. return 1
  17. }
  18. return getResult(n - 1) + getResult(n - 2)
  19. }
  20. console.log(getResult(5));
  21. </script>
  22. </body>
  23. </html>

这个有一点问题,我明说我没执行出来,但是我真的很想知道我错在哪里了,原理都摆在这里是没问题的,代码也没问题,求大神指教

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. /* 我们想要做输入id号,就可以返回的数据对象*/
  12. var data = [{
  13. id: 1,
  14. name: '家电',
  15. goods: [{
  16. id: 11,
  17. gname: '冰箱',
  18. goods: [{
  19. id: 111,
  20. gname: '海尔'
  21. }, {
  22. id: 112,
  23. gname: '美的'
  24. },
  25.  
  26. ]
  27.  
  28. }, {
  29. id: 12,
  30. gname: '洗衣机'
  31. }]
  32. }, {
  33. id: 2,
  34. name: '服饰'
  35. }];
  36. var o = {}
  37. function getData(arr, id) {
  38. arr.forEach(function(item) {
  39. if (item.id == id) {
  40. o = item
  41. return o
  42. } else if(item.goods && item.goods.length > 0) {
  43. getData(item.goods, id)
  44. }
  45. })
  46. }
  47. console.log(getData(data, 1));
  48. console.log(getData(data, 11));
  49. </script>
  50. </body>
  51. </html>

说到了递归就顺便说一下浅拷贝和深拷贝。

浅拷贝就是只拷贝表面的一层,深层次的东西就拷贝引用,就是不管你改哪边的数据,双方都会受影响

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 浅拷贝只拷贝一层 更深层次只拷贝引用 也就是你改或者他改值双方都受影响
  12. var obj = {
  13. id: 1,
  14. name: 'andy',
  15. msg: {
  16. age: 18
  17. }
  18. }
  19. var o = {}
  20. for (k in obj) {
  21. o[k] = obj[k]
  22. }
  23. console.log(o);
  24. console.log('------------------')
  25. // es6快速浅拷贝语法
  26. Object.assign(obj, o)
  27. console.log(o);
  28. </script>
  29. </body>
  30. </html>

然后就是深拷贝,深拷贝就是可以单独开辟空间,各管各的,互不影响,深拷贝的函数用到了递归,这个还是要记一下的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 深拷贝就是更深层的数据 也会单独开辟空间 比如数组、函数等
  12. var obj = {
  13. id: 1,
  14. name: 'andy',
  15. msg: {
  16. age: 18
  17. },
  18. color: ['pink', 'red']
  19. }
  20. let o = {}
  21. function getCopy(usedCopy, useCopy) {
  22. for (k in usedCopy) {
  23. if (usedCopy[k] instanceof Array) {
  24. useCopy[k] = []
  25. getCopy(usedCopy[k], useCopy[k])
  26. } else if (usedCopy[k] instanceof Object) {
  27. useCopy[k] = {}
  28. getCopy(usedCopy[k], useCopy[k])
  29. } else {
  30. useCopy[k] = usedCopy[k]
  31. }
  32. }
  33. }
  34. getCopy(obj, o)
  35. console.log(o);
  36. </script>
  37. </body>
  38. </html>

4.

接下来是正则表达式。

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. /*
  12. 将字符串'小明:大神么么哒,正好是我想要的,我的邮箱是xiaoming@qq.com小红:我老公最爱看这个了,我想给他一个惊喜,么么么哒,
  13. 邮箱是xiaohong@sina.com我:好人一生平安,邮箱是wuyou@163.com'中所有的邮箱号码提取出来
  14. */
  15. // 注意 要使用exec进行多次匹配不仅正则要添加全局匹配 而且还有用一个while循环
  16. let str = `小明:大神么么哒,正好是我想要的,我的邮箱是xiaoming@qq.com小红:我老公最爱看这个了,我想给他一个惊喜,么么么哒,
  17. 邮箱是xiaohong@sina.com我:好人一生平安,邮箱是wuyou@163.com`
  18. let reg = /\w+@\w+.[a-zA-z]+/g
  19. var result = reg.exec(str)
  20. while(result!== null) {
  21. console.log(result[0]);
  22. result = reg.exec(str)
  23. }
  24. </script>
  25. </body>
  26. </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进行一个遍历操作

复习 - es6语法的更多相关文章

  1. es6语法重构react代码

    1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...

  2. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  3. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  4. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  5. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  6. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  7. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  8. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  9. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  10. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

随机推荐

  1. 【简说Python WEB】Jinja2模板

    目录 [简说Python WEB]Jinja2模板 目前环境的代码树 抽离出来的Html模板 渲染模板 条件语句 循环语句 系统环境:Ubuntu 18.04.1 LTS Python使用的是虚拟环境 ...

  2. ElasticView 是一款用来监控elasticsearch状态和操作elasticsearch索引的web可视化工具。

    ElasticView 是一款用来监控elasticsearch状态和操作elasticsearch索引的web可视化工具. 它由golang开发而成,具有部署方便,占用内存小等优点 es连接树管理( ...

  3. Docker服务搭建个人音乐播放器Koel(及马里奥游戏)

    Koel简介 Koel是一种简单的基于Web的个人音频流服务,用客户端的Vue和服务器端的Laravel编写.针对Web开发人员,Koel采用了一些更现代的Web技术来完成其工作 搭建步骤 docke ...

  4. PostgreSQL世界上最先进的开源关系型数据库

    PostgreSQL 的 Slogan 是 "世界上最先进的开源关系型数据库". PostgreSQL是一个功能非常强大.源代码开放的对象关系数据库系统(ORDBMS),在灵活的B ...

  5. mybatis-plus id在高并发下出现重复

    mybaits-plus ASSIGN_ID生成 id生成策略 在分布式高并发环境下出现重复id https://github.com/baomidou/mybatis-plus/issues/307 ...

  6. Vue cli之项目目录结构

    src 主开发目录,要开发的单文件组件全部在这个目录下的components目录下 static 静态资源目录,所有的css,js文件放在这个文件夹 dist 项目打包发布文件夹,最后要上线单文件项目 ...

  7. WPF 滚动条ScrollViewer样式记录

    WPF 应用程序中有两个支持滚动的预定义元素:ScrollBar 和 ScrollViewer. ScrollViewer 控件封装了水平和垂直 ScrollBar 元素以及一个内容容器(如 Pane ...

  8. 深入浅出Java异常机制

    一次对Java异常机制的理解 近期有一个对接三方接口的任务,在这个过程中用到了许多 try-catch 处理,发现自己对异常处理是一知半解,浅浅研究了一下,记录一下,也帮助小伙伴如何正确使用 try- ...

  9. 莫烦pytorch学习记录

    感谢莫烦大神Pytorch B站视频:https://www.bilibili.com/video/av15997678?p=11 一个博主的笔记:https://blog.csdn.net/Will ...

  10. VmWare虚拟机和主机配置为同一网段IP

    参考博客:将虚拟机IP与主机IP设置在同一网段的方法 - 天懿 - 博客园 (cnblogs.com) 主机地址 主机通过WiFi连接,地址信息为: 虚拟机配置 选择编辑-->虚拟网络编辑器-- ...