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

2022/4/6 11:48:59

编程Tag： 数组箭头函数 ES6 参数 let var 语法面向对象编程

本文主要是介绍面向对象编程-终结篇 es6新增语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

首先第一个案例，是一个关于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>

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

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

<!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>

然后是箭头函数，箭头函数是函数的一种简写形式，（）=》｛｝然后参数这里如果只有一个参数，那么这个小括号可以省略，后面函数体如果只有一句代码且这句代码就是输出结果，那么后面的花括号也可以省略，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>

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

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

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

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

<!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）

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

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

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

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

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

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

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

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

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

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

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

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

这篇关于面向对象编程-终结篇 es6新增语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章