复习 - es6语法

Heymar-10 2023-03-28 原文

这几天电脑有点问题，一直在弄，而且论文也逼近了也在时间弄那个，前面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>
        /* 
        将字符串'小明：大神么么哒，正好是我想要的，我的邮箱是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>

正则差不多就这样了

然后是一些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 span color rgba JavaScript

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

ruby - 树顶语法无限循环 - 2
我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby - 覆盖相似的方法，更短的语法 - 2
在Ruby类中，我重写了三个方法，并且在每个方法中，我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗？如何缩短代码？最佳答案如何使用别名？classExampleClassdefconfirmation_required?is_a
ruby 语法糖 : dealing with nils - 2
可能已经问过了，但我找不到它。这里有2个常见的情况(对我来说，在编程Rails时......)用ruby编写是令人沮丧的:"astring".match(/abc(.+)abc/)[1]在这种情况下，我得到一个错误，因为字符串不匹配，因此在nil上调用[]运算符。我想找到的是比以下内容更好的替代方法:temp="astring".match(/abc(.+)abc/);temp.nil??nil:temp[1]简而言之，如果不匹配，则简单地返回nil而不会出错第二种情况是这样的:var=something.very.long.and.tedious.to.writevar=some
ruby - Ruby 语法糖有 "rules"吗？ - 2
我正在学习Ruby的基础知识(刚刚开始)，我遇到了Hash.[]method.它被引入a=["foo",1,"bar",2]=>["foo",1,"bar",2]Hash[*a]=>{"foo"=>1,"bar"=>2}稍加思索，我发现Hash[*a]等同于Hash.[](*a)或Hash.[]*一个。我的问题是为什么会这样。是什么让您将*a放在方括号内，是否有某种规则可以在何时何地使用“it”？编辑:我的措辞似乎造成了一些困惑。我不是在问数组扩展。我明白了。我的问题基本上是:如果[]是方法名称，为什么可以将参数放在括号内？这看起来几乎——但不完全是——就像说如果你有一个方法Foo.d
Matlab imread（）读到了什么（浅显当复习文档了） - 2
matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1
使用canal同步MySQL数据到ES - 2
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
ruby - 如何让Ruby捕获线程中的语法错误 - 2
我正在尝试使用ruby编写一个双线程客户端，一个线程从套接字读取数据并将其打印出来，另一个线程读取本地数据并将其发送到远程服务器。我发现的问题是Ruby似乎无法捕获线程内的错误，这是一个示例:#!/usr/bin/rubyThread.new{loop{$stdout.puts"hi"abc.putsefsleep1}}loop{sleep1}显然，如果我在线程外键入abc.putsef，代码将永远不会运行，因为Ruby将报告“undefinedvariableabc”。但是，如果它在一个线程内，则没有错误报告。我的问题是，如何让Ruby捕获这样的错误？或者至少，报告线程中的错误？
ruby -::在 Ruby 语法中是什么意思？ - 2
这个问题在这里已经有了答案:WhatisRuby'sdouble-colon`::`?(12个答案)关闭8年前。什么是::？@song||=::TwelveDaysSong.new

复习 - es6语法

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

随机推荐