乐趣区

关于javascript:面向对象编程终结篇-es6新增语法

各位,各位,终于把 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 来遍历,外面来一个箭头函数
前端爱好者,望大佬给个内推机会!!!

退出移动版