草庐IT

面向对象编程-终结篇 es6新增语法

Heymar-10 2023-03-28 原文

各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪,看看今天的一个内容,今天是es6新增的一些语法,简单也是真的简单,但是我要是没学今天这一天那看到了也是真的看不懂,就跟昨天的正则表达式一样一样的,今天的案例我都没怎么做,而且也都是一些比较简单的案例,我先把今天的一些有代表性的案例传上来吧,是一些面试题之类的,然后我就说下我今天学了些啥子语法,今天着重采取说的方式来换个方式,不像原来全是代码

1.

首先第一个案例,是一个关于let的经典面试题,既然碰到了我就先把let说了吧,这个案例主要是用来比较var和let两个在不同的作用域各自的表现,这个我要是没听讲解我还真不知道居然是输出些这些个结果,第一个是var声明的for循环

首先全程是用的var来声明的值,然后循环现在主栈道跑到上先执行完,结束过后再来调用数组里面的元素也就是函数,里面存放的i就要向上级一级一级查找,这个时候找到i,是循环结束过后i结束循环的值,也就是2
第二个是let声明的for循环,这里又是输出什么 首先我们要知道,这里全程是用的let来声明的变量,所以就要有一个很关键的印象,每一个let过后都会创造一个属于自己的块级作用域。所以这里的每个i都是在循环往数组里面放元素的时候单独保存的,所以下面的数组访问值就会进入到单独的块级作用域里面访问到属于自己的那个值
<!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 arr = []
        for (var i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);
            }
        }
        arr[0]()
        arr[1]() */
        /* 这个输出的是什么?这个输出的是两个二为什么呢?首先全程是用的var来声明的值,然后循环现在主栈道跑到上先执行完,结束过后再来调用
        数组里面的元素也就是函数,里面存放的i就要向上级一级一级查找,这个时候找到i,是循环结束过后i结束循环的值,也就是2 */
        let arr = []
        for (let i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);
            }
        }
        arr[0]()
        arr[1]()
        /* 这里又是输出什么 首先我们要知道,这里全程是用的let来声明的变量,所以就要有一个很关键的印象,每一个let过后都会创造一个属于自己的块级作用域。
        所以这里的每个i都是在循环往数组里面放元素的时候单独保存的,所以下面的数组访问值就会进入到单独的块级作用域里面访问到属于自己的那个值 */
    </script>
</body>
</html>

2.

第二个我想说一下const的一些注意点,const我们是拿来声明常量的,也就是声明了之后值不能变化,但是这里的值不能变化其实是分两种情况的,如果说const声明的是数值型或者字符串类型,那确实不能变化,如果说是复杂数据类型如数组、对象等,那么就可以通过下标或者属性的方式对修改单个值,但是对整体数组赋值是不行的。

3.

继续是解构赋值,解构赋值就是可以将数组或者对象的值通过顺序依次结构给前面的变量声明并赋值,解构赋值中有一点我需要说一下,就是对对象解构赋值,他有两种写法,一种是前面的变量名与属性名对应,二个就是前面也来个键值对的形式,属性名对应属性名,后面的值就是我们变量的名字

<!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>
        /* let person = {name : '张三', age : 14}
        let {name, age} = person
        console.log(name);
        console.log(age); */
        let person = {name : '张三', age : 14}
        let {name:a, age:b} = person
        console.log(a);
        console.log(b);
    </script>
</body>
</html>

4.

然后是箭头函数,箭头函数是函数的一种简写形式,()=》{}然后参数这里如果只有一个参数,那么这个小括号可以省略,后面函数体如果只有一句代码且这句代码就是输出结果,那么后面的花括号也可以省略,return也可以省略,箭头函数的关键点其实是里面的this,箭头函数是没有this的,如果在箭头函数里面使用了this,那这个this就是定义箭头函数位置的this,一般是他的父级的this,注意是他父级的this并非父级,这里有一个箭头函数的经典面试题可以看一看

<!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 = {
            this : this
        }
        console.log(obj.this); */

        var obj = {
            age : 20,
            say : () => {
                console.log(this.age);
            }
        }
        obj.say()
        /* 这个案例主要是考察对箭头函数this的熟悉程度,大家应该知道箭头函数是没有this的他的this指向的是定义它位置中的this,所以这里的this
        应该是obj的this而并非obj,而obj的this是window所以这里就会报错 */
    </script>
</body>
</html>

5.

接下来是剩余参数,剩余参数就是当我们不知道要传多少实参进来的时候就额可以用到剩余参数,像我们以前是用的函数的内置对象arguments,但是箭头函数没有arg所以就要用到剩余参数,剩余参数就是在形参这里写上。。。arg,arg是你的数组名,三个点是必须要写上的,然后剩余参数可以和解构来一个配合,我们知道解构前面是变量,那如果我们不知道数组有多少元素的时候,这个时候变量可以来一个剩余参数。。。,来接受数组的值

6.

接下来是扩展运算符,扩展运算符可以算作是剩余参数的内容,扩展运算符就是三个点,只是说他其实还有其他的一些用途的

首先他可以将数组或对象拆分为以,分割的参数序列,也就是分割数组后数组就是一个以逗号分割的几个参数,没有了外面的中括号,这点要先明确

然后他第一个应用是可以合并数组,想一想是不是这个道理坝上一句话结合起来

<!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 arr1 = [1, 2, 3]
        var arr2 = [4, 55, 6]
        var arr3 = [...arr1, ...arr2]
    </script>
</body>
</html>

合并数组还有一个方法直接,arr1.push(...arr2)

除了合并数组,它还可以将伪数组转换为真数组,直接将一个维数组添加三个点是不是变成了参数序列,那我直接将这个序列来一个数组字面量赋给一个变量

7.

接下来看到es6新增的一些数组array的方法,第一个是用方法实现将伪数组转换为真数组,Array.form()括号里面两个参数,第一个是你要转换的数组,第二个为可选,可以写一个箭头函数,类似于foreach可以传值和下标,相当于可以在转换过程中对每一个值进行修改再变为真数组

 第二个方法查找数组中第一个满足条件的值未找到返回undefined,Array.find()里面是一个箭头函数可以输入你的条件与之对应的还有一个.fingIndex()是返回的满足第一个条件的索引号

第四个方法是检测该数组是否包含这个元素.includes()

8.

模板字符串,很久之前就看到过但那是一直没有去学过,其实也并不难,就跟普通字符串一样只是他的引号是反引号,它的特点就是可以很方便的添加变量、对象、甚至函数,${name()}类似于这种形式,然后就是它里面的内容可以换行,这点也非常可以,之前复制过来的内容总是报错字符串。

然后是es6新增的一些string的一些方法,.starsWith()endsWith()分别是查看参数在字符串的头部还是尾部,.repeat()是将这个字符串重复n次

9.

今天的最后一个新增语法,set数据结构,他也是复杂数据类型,类似数组,但他里面的值都是唯一的不重复的

创建的话 直接new创建 let s = new Set() 可以在里面放数组,然后有一个属性。size可以查看这个set有多少个值在俩面

他的一个应用是做数组去重,首先我们可以把重复的数组放进set数据结构,因为她的特性 所以这里面,现在也没有重复的了,然后通过扩展运算符在通过【】将其转回数组

他也有四个方法 .add()是添加数据返回的是这个set数据结构所以这个可以像连式编程一样一只添加,第二个delete()删除数据,这个返回的是布尔值,看你删没删成功,第三个是has()检测有咩有这个数据也是一个布尔值,

最后一个是clear()清空所有数据无返回值

最后set也可以遍历,可以通过forEach来遍历,里面来一个箭头函数

有关面向对象编程-终结篇 es6新增语法的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后,我想到了这种方法,可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法,但它确实有效。有没有人有更好的建议,或者这是一个很好的方法?#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法,所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少,我以前从未做过这种事情。我的解析器表现得好像有一个无限循环,但没有堆栈跟踪;事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗?我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上,以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  4. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单,其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在?solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  5. Ruby 写入和读取对象到文件 - 2

    好的,所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象?所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是,我该如何再次将这个id变回一个对象?我知道我可以自己挑选信息并制作一个接受该信

  6. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  7. 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并在看到包时选择

  8. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议?谢谢,马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单,因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法,但您没有调

  9. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调? - 2

    我有一个服务模型/表及其注册表。在表单中,我几乎拥有服务的所有字段,但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  10. ruby - 覆盖相似的方法,更短的语法 - 2

    在Ruby类中,我重写了三个方法,并且在每个方法中,我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗?如何缩短代码? 最佳答案 如何使用别名?classExampleClassdefconfirmation_required?is_a

随机推荐