各位，各位，终于把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. tensorflow core 核心目标依赖图

    Tensorflow的核心代码在core模块中,56w行的代码量让人望而生畏,熟悉了bazel工具之后,发现BUILD文件是理清代码结构的很好的资源,但使用bazel query语法提取出来//ten ...

  2. c++ 11 线程池---完全使用c++ 11新特性

    前言: 目前网上的c++线程池资源多是使用老版本或者使用系统接口实现,使用c++ 11新特性的不多,最近研究了一下,实现一个简单版本,可实现任意任意参数函数的调用以及获得返回值. 0 前置知识 首先介 ...

  3. LINUX安装 RPM与YUM

    1 Linux软件安装概述 安装程序的方式: 通用二进制格式:直接解压压缩文件,就可以使用.但一定要注意安装平台. 软件包管理器:如RPM. 软件包管理器的前端工具:如YUM. 源代码编译. 1 1. ...

  4. Lua中如何实现类似gdb的断点调试—09支持动态添加和删除断点

    前面已经支持了几种不同的方式添加断点,但是必须事先在代码中添加断点,在使用上不是那么灵活方便.本文将支持动态增删断点,只需要开一开始引入调试库即可,后续可以在调试过程中动态的添加和删除断点.事不宜迟, ...

  5. kkFileView部署到windows服务出现问题解决

    1.部署之后执行出现api-ms-win-crt-runtime-l1-1-0.dll丢失的办法 微软官网下载vc_redist.x64.exe vc_redist.x86.exe 64位的操作系统需 ...

  6. vue监听页面中的某个div的滚动事件，并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  7. LGP3126题解

    这道题还有点意思. 路径要求是一个回文串,回文串立马枚举中点.中点只可能在对角线上. 枚举对角线上的一个点,然后两边的路径必须完全相同. 既然路径上的字符必须完全相同,那么每个前缀也必须完全相同. 考 ...

  8. LGP6788题解

    太慢了!太慢了!我的替身 [The World] 是最强的替身! \(O(n^{\frac 2 3})\) 的解法!不清楚用 sbt 能不能更快一些,可能会吧.灵感来源于BZOJ4176,同时也可看到 ...

  9. K8S原来如此简单（四）Service+Ingress

    上一篇我们通过deployment实现了pod的横向扩展,但是仍然不能负载,也不能对外提供服务,现在我们来看看如何通过k8s实现负载与外网访问 Service service为一组pod提供一个统一的 ...

  10. JVM分析工具与查看命令

    1.概述 无可避免地,我们都需要用到多线程的一天.单纯地使用多线程的参数设置,比如-Xms.-Xmx.-Xss等,还不足够,我们还要学会如何分析JVM里面的线程状况. 在进行java程序问题定位时,内 ...