各位，各位，终于把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. sklearn.preprocessing.LabelEncoder_标准化标签，将标签值统一转换成range(标签值个数-1)范围内

    . LabelEncode(),标签值编码用在将一些类别型的列进行编码,方便用于训练

  2. 常用QQ快捷键

    QQ是腾讯QQ的简称,是一款基于Internet即时通信(IM)软件.目前QQ已经覆盖Microsoft Windows.macOS.Android.iOS.Windows Phone.Linux等多 ...

  3. SQLserver建表规则

    --执行环境:生产环境 / beta环境--备注:文件开头写上描述或者原因.项目USE database --例如 USE LZB GO CREATE TABLE Ymtable1 ( iOrderI ...

  4. Java基础—构造方法

    1.构造方法概述 构造方法是一种特殊的方法,用来创建对象,当我们不定义时,系统会默认给出一个无参构造方法:一旦我们定义了任意的构造方法,系统就不会给出默认的无参构造方法 格式如下: public ca ...

  5. Linux-timedatectl使用

    Linux下使用timedatectl命令时间时区操作详解 timedatectl命令对于RHEL / CentOS 7和基于Fedora 21+的分布式系统来说,是一个新工具,它作为systemd系 ...

  6. Django安装和web框架原理

    Django安装和web框架原理 在PyCharm中安装 在cmd中输入 django-admin startproject 项目名 如果报错 不是内部或外部命令,也不是可运行的程序 需要添加环境变量 ...

  7. Redis 系统学习目录

    Redis 系统学习目录 1.redis是什么2.redis的作者何许人也3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 – 简介8. ...

  8. C++设计模式 - 命令模式（Command）

    行为变化模式 在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...

  9. iOS全埋点解决方案-应用退出和启动

    前言 ​ 通过应用程序退出事件,可以分析应用程序的平均使用时长:通过应用程序的启动事件,可以分析日活和新增.我们可以通过全埋点方式 SDK 实现应用程序的退出和启动事件. 一.全埋点的简介 ​ 目前. ...

  10. Redis集群节点扩容及其 Redis 哈希槽

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value 时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求 ...