各位，各位，终于把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. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  2. Python 第六篇(中)：面向对象编程中级篇

    面向对象编程中级篇: 编程思想概述: 面向过程:根据业务逻辑从上到下写垒代码  #最low,淘汰 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 #混口饭吃 def add(ho ...

  3. 面向对象编程(C++篇2)——构造

    目录 1. 引述 2. 详述 2.1. 数据类型初始化 2.2. 类初始化 1. 引述 在C++中,学习类的第一课往往就是构造函数.根据构造函数的定义,构造函数式是用于初始化类对象的数据成员的.无论何 ...

  4. 面向对象编程(C++篇1)——引言

    目录 1. 概述 2. 详论 2.1. 类与对象 2.2. 数据类型 3. 目录 1. 概述 现代C++与最原始的版本已经差不多是两种不同的语言了.不断发展的C++标准给C++这门语言带来了更多的范式 ...

  5. 面向对象编程(C++篇3)——析构

    目录 1. 概述 2. 详论 2.1. 对象生命周期 2.2. 不一定需要显式析构 2.3. 析构的必要性 3. 总结 1. 概述 类的析构函数执行与构造函数相反的操作,当对象结束其生命周期,程序就会 ...

  6. 面向对象编程(C++篇4)——RAII

    目录 1. 概述 2. 详论 2.1. 堆.栈.静态区 2.2. 手动管理资源的弊端 2.3. 间接使用 2.4. 自下而上的抽象 3. 总结 4. 参考 1. 概述 在前面两篇文章<面向对象编 ...

  7. Python 第六篇(上)：面向对象编程初级篇

    面向:过程.函数.对象: 面向过程:根据业务逻辑从上到下写垒代码! 面向过程的编程弊:每次调用的时候都的重写,代码特别长,代码重用性没有,每次增加新功能所有的代码都的修改!那有什么办法解决上面出现的弊 ...

  8. python - 面向对象编程(初级篇)

    写了这么多python 代码,也常用的类和对象,这里准备系统的对python的面向对象编程做以下介绍. 面向对象编程(Object Oriented Programming,OOP,面向对象程序设计) ...

  9. ES6新增语法和内置对象（let,const, Array/String/Set 扩展方法(解构赋值，箭头函数，剩余参数)）

    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...

随机推荐

  1. laravel报错 : laravel Please provide a valid cache path

    这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置,默认存在storage文件夹中 'file' => [ 'driver' =&g ...

  2. CSAPP shell Lab 详细解答

    Shell Lab的任务为实现一个带有作业控制的简单Shell,需要对异常控制流特别是信号有比较好的理解才能完成.需要详细阅读CS:APP第八章异常控制流并理解所有例程. Slides下载:https ...

  3. kafka 第一次小整理(草稿篇)————整理一下自己的认知

    前言 简单整理一些自己使用kafka的一些感受. 正文 一切都要回到真实的世界上, 计算机世界只是真实事件的一个缩影. 计算机世界有一个重要的东西,那就是数据库. 数据库记录着真实世界发生了什么,准确 ...

  4. turtle海龟库

    •turtle的使用 #设置窗体大小 startx,starty非必需,默认在屏幕中间 turtle.setup(width,height,startx,starty) #海龟到(x,y)坐标 tur ...

  5. 修改vue的url

    1.修改router的index.js文件,增加base url的配置 2.修改config的index.js文件. bulid的index,assetsRoots和assetsPublicPath的 ...

  6. [转载]实战 SSH 端口转发

    实战 SSH 端口转发 通过本文的介绍,读者可以从中了解到如何应用 SSH 端口转发机制来解决日常工作 / 生活中的一些问题.学会在非安全环境下使用端口转发来加密网络应用,保护个人隐私以及重要商业信息 ...

  7. ES6-ES12部分简单知识点总结，希望对大家有用~

    ES6-ES12简单知识点总结 1.ES6相关知识点 1.1.对象字面量的增强 ES6中对对象字面量的写法进行了增强,主要包含以下三个方面的增强: 属性的简写:当给对象设置属性时,如果希望变量名和属性 ...

  8. Eureka和ZooKeeper都可以提供服务注册与发现的功能,请说说两个的区别?

    1.ZooKeeper保证的是CP,Eureka保证的是AP ZooKeeper在选举期间注册服务瘫痪,虽然服务最终会恢复,但是选举期间不可用的 Eureka各个节点是平等关系,只要有一台Eureka ...

  9. Spring 框架中都用到了哪些设计模式？

    (1)工厂模式:BeanFactory就是简单工厂模式的体现,用来创建对象的实例: (2)单例模式:Bean默认为单例模式. (3)代理模式:Spring的AOP功能用到了JDK的动态代理和CGLIB ...

  10. 如何给Spring 容器提供配置元数据?

    这里有三种重要的方法给Spring 容器提供配置元数据. XML配置文件. 基于注解的配置. 基于java的配置.