JavaScript进阶(三)

已于 2022-01-30 16:27:04 修改
阅读量959 收藏 6
点赞数
文章标签： javascript 正则表达式 前端
于 2022-01-30 15:45:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45745964/article/details/122753399
版权

JavaScript进阶(三)

2019版黑马程序员javaScript进阶面向对象ES6 122集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1Kt411w7MP?from=search&seid=936655930091245798&spm_id_from=333.337.0.0

2020版尚硅谷Web前端ES6教程，涵盖ES6-ES11 68集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1uK411H7on?spm_id_from=333.999.0.0

四、正则表达式

JavaScript正则表达式的学习推荐通过我的其他博客进行学习，点击前往

1. 正则表达式概述

1.1 什么是正则表达式
正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。
在 JavaScript中，正则表达式也是对象。

正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：
用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。
此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们
想要的特定部分(提取)，比如京东搜索框中输入手机下面就会显示相应的手机壳、手机膜之类的等 。

其他语言也会使用正则表达式，本阶段我们主要是利用 JavaScript 正则表达式完成表单验证。
1.2 正则表达式的特点
\1. 灵活性、逻辑性和功能性非常的强。

\2. 可以迅速地用极简单的方式达到字符串的复杂控制。

\3. 对于刚接触的人来说，比较晦涩难懂。比如： ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

\4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式
    并且根据实际情况修改正则表达式.  比如用户名:  /^[a-z0-9_-]{3,16}$/

2. 正则表达式在 JavaScript 中的使用

2.1 创建正则表达式
在 JavaScript 中，可以通过两种方式创建一个正则表达式。

1. 通过调用 RegExp 对象的构造函数创建
   var 变量名 = new RegExp(/表达式/); 

2. 通过字面量创建
   var 变量名 = /表达式/;   // 注释中间放表达式就是正则字面量
2.2 测试正则表达式test

test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

regexObj.test(str) 
	
	regexObj 是写的正则表达式
	str 我们要测试的文本
	就是检测str文本是否符合我们写的正则表达式规范.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 正则表达式在js中的使用

        // 1. 利用 RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);   // 输出为  /123/

        // 2. 利用字面量创建 正则表达式
        var rg = /123/;
        // 3.test 方法用来检测字符串是否符合正则表达式要求的规范
        console.log(rg.test(123));  //true
        console.log(rg.test('abc'));  //false
        console.log(rg.test(12345));   //true
        console.log(rg.test("sdf1235"));   //true
        console.log(rg.test("sdf125"));   //false
    </script>
</body>

</html>

3.正则表达式中的特殊字符

3.1 正则表达式的组成
一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。
其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

特殊字符非常多，可以参考： 
	MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
	jQuery 手册：正则表达式部分
	正则测试工具: http://tool.oschina.net/regex

这里我们把元字符划分几类学习 。
3.2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

image-20200717104054479

如果 ^ 和 $ 在一起，表示必须是精确匹配。

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 边界符 ^ $ 
        var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
        // /abc/ 只要包含有abc这个字符串返回的都是true
        console.log(rg.test('abc')); //true
        console.log(rg.test('abcd'));//true
        console.log(rg.test('aabcd'));//true
        console.log('---------------------------');
        var reg = /^abc/;
        console.log(reg.test('abc')); // true
        console.log(reg.test('abcd')); // true
        console.log(reg.test('aabcd')); // false
        console.log('---------------------------');
        // 以abc开头并且abc结尾，精确匹配 要求必须是 abc字符串才符合规范,其他的都不符合
        var reg1 = /^abc$/; 
        console.log(reg1.test('abc')); // true
        console.log(reg1.test('abcd')); // false
        console.log(reg1.test('aabcd')); // false
        console.log(reg1.test('abcabc')); // false
    </script>
</body>

</html>
3.3 字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

\1. [] 方括号
/[abc]/.test('andy')     // true 
	
	后面的字符串只要包含 abc 中任意一个字符，都返回 true 。
\2. [-] 方括号内部 范围符-
/^[a-z]$/.test(c')     // true
	
    方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以（大写的不行）。
\3. [^] 方括号内部 取反符^
/[^abc]/.test('andy')     // false

	方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

	注意和边界符 ^ 区别，边界符写到方括号外面。
\4. 字符组合
/[a-z1-9]/.test('andy')     // true

	方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //var rg = /abc/;  只要包含abc就可以 
        // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
        var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
        console.log(rg.test('andy'));//true
        console.log(rg.test('baby'));//true
        console.log(rg.test('color'));//true
        console.log(rg.test('red'));//false
        var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
        console.log(rg1.test('aa'));//false
        console.log(rg1.test('a'));//true
        console.log(rg1.test('b'));//true
        console.log(rg1.test('c'));//true
        console.log(rg1.test('abc'));//false
        console.log('------------------');

        var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
        console.log(reg.test('a'));//true
        console.log(reg.test('z'));//true
        console.log(reg.test(1));//false
        console.log(reg.test('A'));//false
        // 字符组合
        // 26个英文字母(大写和小写都可以)任何一个字母、0-9、_、- 都返回 true  
        var reg1 = /^[a-zA-Z0-9_-]$/; 
        console.log(reg1.test('a'));//true
        console.log(reg1.test('B'));//true
        console.log(reg1.test(8));//true
        console.log(reg1.test('-'));//true
        console.log(reg1.test('_'));//true
        console.log(reg1.test('!'));//false
        console.log('----------------');
        // 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a'));//false
        console.log(reg2.test('B'));//false
        console.log(reg2.test(8));//false
        console.log(reg2.test('-'));//false
        console.log(reg2.test('_'));//false
        console.log(reg2.test('!'));//true
        console.log(reg2.test('_1'));//false
    </script>
</body>

</html>
3.4 量词符

量词符用来设定某个模式出现的次数。

image-20200717110707113

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 量词符: 用来设定某个模式出现的次数
        // 简单理解: 就是让下面的a这个字符重复多少次
        // var reg = /^a$/;  表示精确匹配，以a开头以a结尾，只有a才会返回true


        //  * 相当于 >= 0 可以出现0次或者很多次 
        var reg = /^a*$/;
        console.log(reg.test(''));//true
        console.log(reg.test('a'));//true
        console.log(reg.test('aaaa'));//true
        console.log(reg.test('aaaab'));//false

        //  + 相当于 >= 1 可以出现1次或者很多次
        var reg2 = /^a+$/;
        console.log(reg2.test('')); // false
        console.log(reg2.test('a')); // true
        console.log(reg2.test('aaaa')); // true

        //  ?  相当于 1 || 0 ,即1或者0次
        var reg3 = /^a?$/;
        console.log(reg3.test('')); // true
        console.log(reg3.test('a')); // true
        console.log(reg3.test('aaaa')); // false

        //  {3 } 就是重复3次才为true
        var reg4 = /^a{3}$/;
        console.log(reg4.test('')); // false
        console.log(reg4.test('a')); // false
        console.log(reg4.test('aaaa')); // false
        console.log(reg4.test('aaa')); // true
        
        //  {3, }  大于等于3
        var reg5 = /^a{3,}$/;
        console.log(reg5.test('')); // false
        console.log(reg5.test('a')); // false
        console.log(reg5.test('aaaa')); // true
        console.log(reg5.test('aaa')); // true
        
        //  {3,16}  大于等于3 并且 小于等于16
        var reg6 = /^a{3,6}$/;
        console.log(reg6.test('')); // false
        console.log(reg6.test('a')); // false
        console.log(reg6.test('aaaa')); // true
        console.log(reg6.test('aaa')); // true
        console.log(reg6.test('aaaaaaa')); // false
    </script>
</body>

</html>
**案例：**用户名验证

功能需求:

1.如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色

2.如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色

分析:

1.用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.

2.首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/

3.当表单失去焦点就开始验证.

4.如果符合正则规范, 则让后面的span标签添加 right 类.

5.如果不符合正则规范, 则让后面的span标签添加 wrong 类.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        //  量词是设定某个模式出现的次数
        // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; 
        // {6,16}  中间不能有空格，表示前面的模式可以出现6-16次
        // console.log(reg.test('a'));
        // console.log(reg.test('8'));
        // console.log(reg.test('18'));
        // console.log(reg.test('aa'));
        // console.log('-------------');
        // console.log(reg.test('andy-red')); //true
        // console.log(reg.test('andy_red')); //true
        // console.log(reg.test('andy007')); //true
        // console.log(reg.test('andy!007')); //false,因为！不满足条件
        var uname = document.querySelector('.uname');   //获取类名
        var span = document.querySelector('span');  //获取span标签
        uname.onblur = function() {  //onblur表示鼠标移开
            if (reg.test(this.value)) {
                console.log('正确的');
                span.className = 'right';  //修改span的类名
                span.innerHTML = '用户名格式输入正确';  //修改span内的的内容
            } else {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

</html>

image-20200717113010444

3.5 括号总结

1.大括号 量词符. 里面表示重复次数

2.中括号 字符集合。匹配方括号中的任意字符.

3.小括号 表示优先级

可以在线测试: https://c.runoob.com/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 中括号 字符集合.匹配方括号中的任意字符. 
        // var reg = /^[abc]$/;
        // a 也可以 b 也可以 c 可以  a ||b || c ，即只能是a或b或c
        
        // 大括号  量词符. 里面表示重复次数
        var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
        console.log(reg.test('abc'));//false
        console.log(reg.test('abcabcabc'));//false
        console.log(reg.test('abccc'));//true

        // 小括号 表示优先级
        var reg2 = /^(abc){3}$/; // 它是让abc重复三次
        console.log(reg2.test('abc'));//false
        console.log(reg2.test('abcabcabc'));//true
        console.log(reg2.test('abccc'));//false
    </script>
</body>

</html>
3.6 预定义类

预定义类指的是某些常见模式的简写方式。

image-20200717113127642

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 座机号码验证:  全国座机号码  两种格式:010-12345678 或者 0530-1234567
        // 正则里面的 或者 符号  |  
        // 第一种写法
        var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;  
        
        // 第二种写法
        var reg2 = /^\d{3,4}-\d{7,8}$/;
    </script>
</body>

</html>
**案例：**表单验证
分析:
	手机号码:     /^1[3|4|5|7|8][0-9]{9}$/

	QQ: [1-9][0-9]{4,} (腾讯QQ号从10000开始)
                   
	昵称是中文:     ^[\u4e00-\u9fa5]{2,8}$    
                  表示第一个汉字到最后一个汉字的Unicode编码，允许重复2-8次

reg.js

window.onload = function() {
    var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式
    var regqq = /^[1-9]\d{4,}$/; // 10000
    var regnc = /^[\u4e00-\u9fa5]{2,8}$/;
    var regmsg = /^\d{6}$/;
    var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;
    var tel = document.querySelector('#tel');
    var qq = document.querySelector('#qq');
    var nc = document.querySelector('#nc');
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    regexp(tel, regtel); // 手机号码
    regexp(qq, regqq); // qq号码
    regexp(nc, regnc); // 昵称
    regexp(msg, regmsg); // 短信验证
    regexp(pwd, regpwd); // 密码框
    // 表单验证的函数
    function regexp(ele, reg) {
        ele.onblur = function() {
            if (reg.test(this.value)) {
                // console.log('正确的');
                //nextElementSibling表示下一个兄弟元素
                this.nextElementSibling.className = 'success';  
                this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
            } else {
                // console.log('不正确');
                this.nextElementSibling.className = 'error';
                this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请从新输入 ';
            }
        }
    };
    // 确认密码操作
    surepwd.onblur = function() {
        if (this.value == pwd.value) {
            this.nextElementSibling.className = 'success';
            this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
        } else {
            this.nextElementSibling.className = 'error';
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 两次密码输入不一致';
        }
    }
}

register.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 初始化css -->
    <link rel="stylesheet" href="css/base.css">
    <!-- register css文件 -->
    <link rel="stylesheet" href="css/register.css">
    <script src="js/reg.js"></script>
</head>

<body>
    <div class="w">
        <!-- header -->
        <div class="header">
            <div class="logo">
                <a href="index.html">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
        </div>
        <!-- registerarea -->
        <div class="registerarea">
            <h3>
                注册新用户
                <em>
					我有账号，去<a href="login.html">登陆</a>
				</em>
            </h3>
            <div class="reg_form">

                <form action="demo.php">
                    <ul>
                        <li>
                            <label for="tel">手机号:</label>
                            <input type="text" class="inp" id="tel">
                            <span class="">		
						
						</span>
                        </li>
                        <li>
                            <label for="">QQ:</label>
                            <input type="text" class="inp" id="qq">
                            <span></span>
                        </li>
                        <li>
                            <label for="">昵称:</label>
                            <input type="text" class="inp" id="nc">
                            <span></span>
                        </li>
                        <li>
                            <label for="">短信验证码:</label>
                            <input type="text" class="inp" id="msg">
                            <span></span>
                        </li>
                        <li>
                            <label for="">登陆密码:</label>
                            <input type="text" class="inp" id="pwd">
                            <span>
                            </span>
                        </li>
                        <li class="safe">
                            安全程度
                            <em class="ruo">弱</em>
                            <em class="zhong">中</em>
                            <em class="qiang">强</em>
                        </li>

                        <li>
                            <label for="">确认密码:</label>
                            <input type="text" class="inp" id="surepwd">
                            <span></span>
                        </li>
                        <li class="agree">

                            <input type="checkbox">同意协议并注册
                            <a href="#">《知果果用户协议》</a>
                        </li>
                        <li>
                            <input type="submit" value="完成注册" class="over">
                        </li>
                    </ul>
                </form>

            </div>
        </div>
        <div class="footer">
            <p class="links">
                关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
            </p>

            <p class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
            </p>
        </div>
    </div>
</body>

</html>

image-20200717122454980

register.css

.w {
    width: 1200px;
    margin: auto;
}

.header {
    height: 82px;
    border-bottom: 2px solid #b1191a;
}

.logo {
    padding-top: 15px;
}

.registerarea {
    height: 580px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.registerarea h3 {
    height: 40px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    padding: 0 10px;
    font-weight: 400;
    line-height: 40px;
    font-size: 18px;
}

.registerarea h3 em {
    float: right;
    font-size: 14px;
}

.registerarea a {
    color: #c81623;
}

.reg_form {
    width: 600px;
    height: 400px;
    margin: 40px auto 0;
}

.reg_form li {
    margin-bottom: 15px;
}

.reg_form label {
    display: inline-block;
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: right;
}

.inp {
    width: 238px;
    height: 34px;
    border: 1px solid #ccc;
    margin-left: 10px;
}

.error {
    color: #df3033;
    margin-left: 10px;
}

.error_icon,
.success_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/error.png) no-repeat;
    vertical-align: middle;
    margin-top: -2px;
}

.success {
    color: #40b83f;
    margin-left: 10px;
}

.success_icon {
    background-image: url(../img/success.png);
}

.safe {
    padding-left: 187px;
    color: #b2b2b2;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

.ruo {
    background-color: #de1111;
}

.zhong {
    background-color: #40b83f;
}

.qiang {
    background-color: #f79100;
}

.agree {
    padding-top: 20px;
    padding-left: 100px;
}

.agree input {
    vertical-align: middle;
    margin-right: 5px;
}

.agree a {
    color: #1ba1e6;
}

.over {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    margin: 30px 0 0 130px;
    border: none;
    color: #fff;
    font-size: 14px;
}

.footer {
    height: 120px;
    text-align: center;
}

.links {
    margin-top: 20px;
    height: 30px;
}

.copyright {
    line-height: 20px;
}

4. 正则表达式中的替换

4.1 replace 替换

replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

stringObject.replace(regexp/substr,replacement)

	第一个参数:   被替换的字符串 或者  正则表达式
    
	第二个参数:   替换为的字符串
    
	返回值是一个替换完毕的新字符串
4.2 正则表达式参数
/表达式/[switch]
	
	switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：
		g：全局匹配 
		i：忽略大小写 
		gi：全局匹配 + 忽略大小写
案例：敏感词过滤
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        textarea {
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <textarea name="" id="message"></textarea> <button>提交</button>
    <div></div>
    <script>
        // 替换 replace
        // var str = 'andy和red';
        // var newStr = str.replace('andy', 'baby');  //将andy替换为baby
        // var newStr = str.replace(/andy/, 'baby');  //正则表达式的写法
        // console.log(newStr);  //baby和red

        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            //后面的g表示全局匹配，不加的话replace默认只会替换一个
            div.innerHTML = text.value.replace(/激情|gay/g, '**');  
        }
    </script>
</body>

</html>

image-20200717115906280

五、ES6语法

1、ES6简介

什么是 ES6 ?

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。

年份版本
2015年6月ES2015
2016年6月ES2016
2017年6月ES2017
2018年6月ES2018
……
为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

  1. ​ 变量提升特性增加了程序运行时的不可预测性
  2. ​ 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

2、ES6 的新增语法

let

ES6中新增的用于声明变量的关键字，主要用来替换var。

1.let声明的变量只在所处于的块级有效

if (true) { 
     let a = 10;
 }

console.log(a) // a is not defined

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

2.不存在变量提升

 console.log(a); // a is not defined ，不可像var一样先使用在声明

 let a = 20;

3.暂时性死区

 var tmp = 123;

 if (true) { 
     tmp = 'abc';  //报错，不能先使用后声明
     let tmp; 
 } 
//暂时性死区：一旦在块级作用域中用let声明的变量，这个变量就会和块级区进行绑定，
//里面的num和外面的num是没有任何关系的

html代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用let关键字声明变量</title>
</head>
<body>
	<script type="text/javascript">
		/*
			let关键字就是用来声明变量的，是用来替换var的

			使用let关键字声明的变量具有块级作用域

			在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

			防止循环变量变成全局变量

			使用let关键字声明的变量没有变量提升

			使用let关键字声明的变量具有暂时性死区特性
		*/
		
		/* --------let关键字就是用来声明变量的-------- */
		 let a = 10;
		 console.log(a);  //10 
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */
		if (true) {
			let b = 20;
			console.log(b) //20
			if (true) {
				let c = 30;
			}
			console.log(c); //报错，只能在块级作用域中访问，即{}
		}
		console.log(b) //报错
		
/* --在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的-- */

		if (true) {
			let num = 100;
			var abc = 200;
		}
		console.log(abc); //200
		console.log(num)  //报错，报错信息为：num is not defined


		/* -------防止循环变量变成全局变量--------- */
		for (var i = 0; i < 2; i++) {

		}
		console.log(i); //2

		for (let ii = 0; ii < 2; ii++) {
			
		}
		console.log(ii); //报错
		

		/*-----使用let关键字声明的变量没有变量提升，即不能像var一样------*/
		console.log(a);  //报错，a is not defined
		let a = 100;
		

		/* -------使用let关键字声明的变量具有暂时性死区特性，即一旦在块级作用域中用let声明的变量，
		这个变量就会和块级区进行绑定，里面的num和外面的num是没有任何关系的------- */
		var num = 10
		if (true) {
			console.log(num);  //报错
			let num = 20;
		}
	</script>
</body>
</html>

经典面试题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>经典面试题</title>
</head>
<body>
	<script type="text/javascript">

		var arr = [];
		for (var i = 0; i < 2; i++) {
			arr[i] = function () {
				console.log(i);
			}
		}
		arr[0]();  //2
		arr[1]();  //2

		
        let arr1 = [];
		for (let ii = 0; ii < 2; ii++) {
			arr1[ii] = function () {
				console.log(ii);
			}
		}
		arr1[0]();  //0
		arr1[1]();  //1
	</script>
</body>
</html>

image-20200706073830305

image-20200706074516003

const

作用：声明常量，常量就是值（内存地址）不能变化的量。

1.具有块级作用域

if (true) { 
     const a = 10;
 }

console.log(a) // a is not defined

2.声明常量时必须赋值

const PI; // Missing initializer in const declaration

3.常量赋值后，值不能修改

 const PI = 3.14;
 
 PI = 100; // Assignment to constant variable. 

 const ary = [100, 200];
 ary[0] = 'a’;   
 ary[1] = 'b';

 console.log(ary); // [‘a’, ‘b’]; 修改成功，因为没有更改arr常量在内存中的存储地址
 // Assignment to constant variable.因为改变了arr常量（用const声明的都是常量）在内存中的存储地址
 ary = [‘a’, ‘b’];

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用const关键字声明常量</title>
</head>
<body>
	<script type="text/javascript">
		//使用const关键字声明的常量具有块级作用域
		if (true) {
			const a = 10;
			if (true) {
                //此处声明的a不会影响上面的a，因为a只在当前的块级作用域中有效
				const a = 20;  
				console.log(a); //20
			}
			console.log(a);  //10
		}
		console.log(a);  //报错
		
		// 使用const关键字声明的常量必须赋初始值
		// const PI 报错
		// const PI = 3.14;
		
		// 常量声明后值（内存地址）不可更改 
		const PI = 3.14;
	    PI = 100;  //报错

		const ary = [100, 200];
		ary[0] = 123;   //没有更改内存地址，可以修改值
		console.log(ary);  //[123,200]

		ary = [1, 2]  //直接给常量ary赋值，更改了内存地址
		console.log(ary); //报错，
	</script>
</body>
</html>
let、const、var的区别

\1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。

\2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。

\3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。

varletconst
函数级作用域块级作用域块级作用域
变量提升不存在变量提升不存在变量提升
值可更改值可更改值（内存地址）不可更改

1.变量提升即先使用在声明

2.用const声明的如果是基本数据类型的不可更改，如果是复杂数据类型（数组）的值，不可以重新赋值（即更改内存地址），但内部的数据可更改

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

1.数组解构
let [a, b, c] = [1, 2, 3];
 
 console.log(a)  //a=1
 console.log(b)  //b=2
 console.log(c)  //c=3

如果解构不成功，变量的值为undefined。

 let [foo] = [];
 let [bar, foo] = [1];

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组解构</title>
</head>
<body>
	<script type="text/javascript">
		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary; //此处的abcde皆为变量
		console.log(a)  //a=1
		console.log(b)  //b=2
		console.log(c)  //c=3
		console.log(d)  //d=undefined
		console.log(e)  //e=undefined
	</script>
</body>
</html>
2.对象解构
let person = { name: 'zhangsan', age: 20 }; 
let { name, age } = person;

 console.log(name); // 'zhangsan' 
 console.log(age); // 20

// 用name属性匹配person对象中的name属性，匹配完成后将“zhangsan”赋值给myName这个变量
 let {name: myName, age: myAge} = person; 
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对象解构</title>
</head>
<body>
	<script type="text/javascript">
		// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
	
		let person = {name: 'lisi', age: 30, sex: '男'};
		let { name, sex, age } = person;
		console.log(name)  //lisi
		console.log(sex)   //男
		console.log(age)   //30
		//用name属性匹配person对象中的name属性，匹配完成后将“lisi”赋值给myName这个变量
		let {name: myName,sex: mySex,age: myAge} = person;  
		console.log(myName,mySex,myAge)  // lisi 男 30

	</script>
</body>
</html>
箭头函数

ES6中新增的定义函数的方式。

() => {} 

const fn = () => {}  //我们一般定义一个常量表示一个箭头函数

1.函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

 function sum(num1, num2) { 
     return num1 + num2; 
 }

 const sum = (num1, num2) => num1 + num2; //括号中为形参

2.如果形参只有一个，可以省略小括号

function fn (v) {
     return v;
 } 

const fn = v => v;

3.箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

this：是谁将函数调用起来的，函数内部的this关键字就指向谁

 const obj = { name: ‘张三’} //obj的值是一个对象，对象中有一个name属性，值为张三
 
 function fn () { 
     console.log(this); 
     return () => { //返回一个匿名函数
         console.log(this)
     } 
 } 
//使用call方法调用fn函数，call方法可以改变fn函数内部的this指向，将fn函数中的this关键字指向								obj，此时this关键字的值指向的就是obj对象
 const resFn = fn.call(obj); 
 resFn();

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>箭头函数</title>
</head>
<body>
	<script type="text/javascript">
		// 箭头函数是用来简化函数定义语法的
		const fn2 = () => {
			console.log(123)
		}
		fn2();
		
		// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 
        // 函数体大括号可以省略
		const sum = (n1, n2) => n1 + n2;	 
		const result = sum(10, 20);
		console.log(result)
		
		// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
		const fn1 = v => {
			alert(v);
		}
		fn1(20)
		
		// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中
        //使用this this关键字将指向箭头函数定义位置中的this
		const obj = {name: 'zhangsan'};

		function fn () {
			console.log(this);
			return () => {  //返回一个匿名函数，由于箭头函数定义在fn函数的内部，
                //箭头函数内部的this指向的是fn函数内部的this，
                //所以箭头函数中的this指向的也是obj对象
				console.log(this)
			}
		}
        //使用resFn接收fn函数返回的结果，即相当于匿名函数的名字
		const resFn = fn.call(obj); 

		resFn(); //调用这个匿名函数
	</script>
</body>
</html>

箭头函数面试题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>箭头函数面试题</title>
</head>
<body>
	<script type="text/javascript">
	
		var age = 100;

		var obj = {
			age: 20,
			say: () => {
				alert(this.age)  //这里弹出的this.age实际上是window下的age，
                //say方法实际上被定义在了全局作用域下，this指向的是window
			}
		}
		 /*如果不添加上方的 var age = 100; 则弹出的为undefined，
		 因为箭头函数没有自己的this，箭头函数当中的this指向的是箭头函数定义区域的this， 
		 即obj对象，obj是一个对象，对象不能产生作用域，所以这个箭头函数被定义在了全局作用域下，
		 我们在掉say方法时，this指向的是window,而window下又没有age属性，所以弹出undefined，
		 */
		obj.say();
	</script>
</body>
</html>
剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

 function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
 }

 sum(10, 20, 30)

剩余参数和解构配合使用

 let students = ['wangwu', 'zhangsan', 'lisi'];
 let [s1, ...s2] = students; //此时s2这个变量就接收了数组剩余的元素
 
 console.log(s1);  // 'wangwu' 
 console.log(s2);  // [‘zhangsan’, ‘lisi‘]，s2也是一个数组，存储了zhangsan、lisi

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>剩余参数</title>
</head>
<body>
	<script type="text/javascript">
        //args表示一个形参，加三个点代表接收所有的实参，args是一个数组
		const sum = (...args) => { 
			let total = 0;
			/*args.forEach( (item) => {
				total += item;
			});
			*/
            //forEach方法用来循环数组,此处接收一个回调函数,数组中有几个值，
            //这个回调函数就会被执行几次,item就是当前这次循环的当前项
		    args.forEach(item => total += item); 
			return total;
		};

		console.log(sum(10, 20));  //30
		console.log(sum(10, 20, 30));  //60
		

		let ary1 = ['张三' , '李四', '王五'];
		let [s1, ...s2] = ary1;
		console.log(s1)  //张三
		console.log(s2)  //0: "李四" 1: "王五"

	</script>
</body>
</html>

3、ES6 的内置对象扩展

Array 的扩展方法
1.扩展运算符（展开语法）：…

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

 let ary = [1, 2, 3];

 ...ary  // 1, 2, 3
 console.log(...ary);    // 1 2 3
 console.log(1, 2, 3)    // 1 2 3

扩展运算符可以应用于合并数组。

// 方法一 
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 
// 方法二 
 ary1.push(...ary2);  //通过push方法追加到arry1中，可以接收多个，用,分开即可

将类数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>扩展运算符</title>
</head>
<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</div>
	<div>5</div>
	<script type="text/javascript">
		//扩展运算符可以将数组拆分成以逗号分隔的参数序列
		let ary1 = ["a", "b", "c"];
		//...ary1 // "a", "b", "c"
		console.log(...ary1)          //a b c
		console.log("a", "b", "c")   //a b c
		
		// 扩展运算符应用于数组合并
		let ary11 = [1, 2, 3];
		let ary22 = [4, 5, 6];
		// ...ary11 // 1, 2, 3
		// ...ary22 // 4, 5, 6
		let ary33 = [...ary11, ...ary22];
		console.log(ary33)

		// 合并数组的第二种方法
		let ary111 = [1, 2, 3];
		let ary222 = [4, 5, 6];

		ary111.push(...ary222); //相当于ary111.push(4,5,6)
		console.log(ary111)
		
		// 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div'); //通过标签名称获取元素
		console.log(oDivs)
		var ary = [...oDivs];  //利用扩展运算符将伪数组转换为真正的数组
		ary.push('a');
		console.log(ary);
	</script>
</body>
</html>
2.构造函数方法：Array.from()

将类数组或可遍历对象转换为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3  
}; 

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

 let arrayLike = { 
     "0": 1,
     "1": 2,
     "length": 2
 }
 
 let newAry = Array.from(aryLike, item => item *2)

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Array.from方法</title>
</head>
<body>
	<script type="text/javascript">
		// var arrayLike = {
		// 	"0": "张三",
		// 	"1": "李四",
		// 	"2": "王五",
		// 	"length": 3
		// }

		// var ary = Array.from(arrayLike);
		// console.log(ary)
		
		var arrayLike = {
			"0": "1",
			"1": "2",
            //必须要有length表示伪数组的长度，不然返回的将是一个空数组，length有无双引号皆可
			"length": 2  
		}
        //item*2表示把数组的每一项都乘以2，即变为2和4
		var ary = Array.from(arrayLike, item => item * 2)  
		console.log(ary)
	</script>
</body>
</html>
3.实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

 let ary = [{ //ary是一个数组，数组中有两个对象
     id: 1,
     name: '张三‘
 }, { 
     id: 2,
     name: '李四‘
 }]; 
//item为当前循环到的值，index为当前这次循环的索引
 let target = ary.find((item, index) => item.id == 2);

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>find方法</title>
</head>
<body>
	<script type="text/javascript">
		var ary = [{
			id: 1,
			name: '张三'
		}, {
			id: 2,
			name: '李四'
		}];
		let target = ary.find(item => item.id == 2);
		console.log(target) //{id: 2,name: "李四"}
		let target2 = ary.find(item => item.id == 3);
		console.log(target2) //undefined
	</script>
</body>
</html>
4.实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 

console.log(index); // 2

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>findIndex方法</title>
</head>
<body>
	<script type="text/javascript">
		let ary = [10, 20, 50];
		let index = ary.findIndex(item => item > 15);
		console.log(index) //1，即为数组中20的索引
	</script>
</body>
</html>
5.实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true 

[1, 2, 3].includes(4) // false

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>includes方法</title>
</head>
<body>
	<script type="text/javascript">
		let ary = ["a", "b", "c"];

		let result = ary.includes('a')
		console.log(result)  //true
		result = ary.includes('e')
		console.log(result)  //false
	</script>
</body>
</html>
String 的扩展方法
1.模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

 let name = `zhangsan`;  //注意这里的符号，是键盘上1的左边的那个

模板字符串中可以解析变量。

 let name = '张三'; 
// hello, my name is zhangsan，不需要字符串拼接
 let sayHello = `hello,my name is ${name}`;

模板字符串中可以换行

 let result = { 
     name: 'zhangsan', 
     age: 20, 
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

在模板字符串中可以调用函数。

 const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`; 
 
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板字符串</title>
</head>
<body>
	<script type="text/javascript">
		let name = `张三`;
		let sayHello = `Hello, 我的名字叫${name}`;
		console.log(sayHello);  //Hello, 我的名字叫张三

        
		let result = {
			name: "zhangsan",
			age: 20
		};
		let html = `
			<div>
				<span>${result.name}</span>
				<span>${result.age}</span>
			</div>
		`;
		/*会在控制台原样输出
			<div>
				<span>zhangsan</span>
				<span>20</span>
			</div>
		*/
		console.log(html);  
		
        
		const fn = () => {
			return '我是fn函数' //返回一串字符串 “我是fn函数”
		}
        // ${fn()}表示对fn函数进行调用
		let html2 = `我是模板字符串 ${fn()}`;  
		console.log(html2)  //我是模板字符串 我是fn函数
	</script>
</body>
</html>
2.实例方法：startsWith()和 endsWith()

lstartsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

lendsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

 let str = 'Hello world!';

 str.startsWith('Hello') // true 
 str.endsWith('!')       // true

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>startsWith方法和endsWith方法</title>
</head>
<body>
	<script type="text/javascript">
		let str = 'Hello ECMAScript 2015';
		let r1 = str.startsWith('Hello');
		console.log(r1);  //true
		
		let r2 = str.endsWith('2016');
		console.log(r2)  //false
	</script>
</body>
</html>
3.实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

'x'.repeat(3)      // "xxx" 

'hello'.repeat(2)  // "hellohello"

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>repeat方法</title>
</head>
<body>
	<script type="text/javascript">
		console.log("y".repeat(5)) //yyyyy
	</script>
</body>
</html>
Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);
实例方法
add(value)：添加某个值，返回 Set 结构本身

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

has(value)：返回一个布尔值，表示该值是否为 Set 的成员

clear()：清除所有成员，没有返回值

 const s = new Set();

 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2)             // 删除 set 结构中的2值 
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值
遍历

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

s.forEach(value => console.log(value))

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Set</title>
</head>
<body>
	<script type="text/javascript">
		const s1 = new Set();
		console.log(s1.size) //0

		const s2 = new Set(["a", "b"]);
		console.log(s2.size)  //2


		const s3 = new Set(["a","a","b","b"]);
		console.log(s3.size) //2
		const ary = [...s3];
		console.log(ary)  //["a", "b"]  
		
		const s4 = new Set();
		// 向set结构中添加值 使用add方法
		s4.add('a').add('b');
		console.log(s4.size)  //2

		// 从set结构中删除值 用到的方法是delete
		const r1 = s4.delete('c');
		console.log(s4.size)  //2
		console.log(r1);  //false,因为c不存在，删除失败

		// 判断某一个值是否是set数据结构中的成员 使用has
		const r2 = s4.has('a');
		console.log(r2)  //true

		// 清空set数据结构中的值 使用clear方法,这个方法没有返回值
		s4.clear();
		console.log(s4.size); //0
		
		// 遍历set数据结构 从中取值
		const s5 = new Set(['a', 'b', 'c']);
		/*forEach方法接收一个函数作为参数，forEach方法会对set数据结构中的值进行循环，
		每一次循环都会调用这个函数，在调用这个函数时他会传递一个参数，就是
		当前循环的那个值，在函数体内部我们即可拿到set数据结构中的值
		*/
		s5.forEach(value => {
			console.log(value)  //分别输出a，b，c
		})

	</script>
</body>
</html>

源码获取

至此，我们的JavaScript进阶(三)就讲解完成了。下篇将基于尚硅谷2020版Web前端ES6教程，涵盖ES6-ES11进行讲解ES6特性，源码素材可以通过关注我的微信公众号我爱学习呀嘻嘻 ，回复关键字JavaScript进阶源码素材进行获取哦。

JavaScript进阶(四)：ES6特性

JavaScript进阶(五)：ES7、ES8、ES9、ES10、ES11新特性

JavaScript进阶(一)：类、对象、构造函数、原型对象、继承

JavaScript进阶(二)：函数、this、严格模式、高阶函数、闭包、递归

JavaScript入门链接：

JavaScript入门(一)：JavaScript基础知识

JavaScript入门(二)：结合代码讲解①

JavaScript入门(三)：结合代码讲解②

JavaScript入门(四)：结合代码讲解③

JavaScript入门(五)：结合代码讲解④

JavaScript入门(六)：结合代码讲解⑤

image-20211108230322493

js中正则表达式的理解
qq_44242084的博客
10-20 409
// 正则表达式在js中的使用 // 1. 利用 RegExp对象来创建 正则表达式 var regexp = new RegExp(/123/); console.log(regexp); // 2. 利用字面量创建 正则表达式 var rg = /123/; // 3.test 方法用来检测字符串是否符合正则表达式要求的规范 con...
JavaScript - 用户名表单验证
Codefreyy
04-02 1831
效果 代码 html： <input type="text" class="uname"> <span>请输入用户名</span> <div class="hint"></div> css： label { color: #ccc; } .right { color: green; }
《JAVA程序设计》期末考试复习题
qq_29423387的博客
12-11 6515
java复习题
kali 利用msf通过win7永恒之蓝漏洞获取权限
Snakewood的博客
10-06 8185
kali 利用msf通过win7永恒之蓝漏洞获取权限 老师留的信息安全课大作业：要通过漏洞来实现原本权限做不到的事 本菜狗就选了永恒之蓝漏洞来应付下，也是第一次搞这种网安类型的实验，下面正文的描述中应该有不少错误，还请各位大佬多包含！好久没有写过博客记录自己的学习了，今天顺手也记录一下。 Eternalblue通过TCP端口445和139来利用SMBv1和NBT中的远程代码执行漏洞，恶意代码会扫描开放445文件共享端口的Windows机器，无需用户任何操作，只要开机上网，不法分子就能在电脑和服务器中植入勒索
JS正则表达式
weixin_47492981的博客
05-16 311
一、正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）。注意：正则表达式里面不需要加引号，不管是数字还是字符串型 1、正则表达式的特点 (1)灵活性、逻辑性和功能性非常的强 (2)可以迅速地用极简单的方式达到字符串的复杂控制
Javascript——常用正则表达式和表单验证
mintsolace的博客
08-31 216
用户名：/^[a-z0-9_-]{3,16}$/ 密码：/^[a-z0-9_-]{6,18}$/ 十六进制值：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ URL：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ IP 地址：/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][
JavaScript 进阶问题列表，包含完整答案
05-10
《JavaScript进阶问题列表》是一份全面覆盖JavaScript高级知识点的问题集合，旨在帮助开发者深入理解JavaScript语言的各个方面，并掌握进阶技巧。每个问题都提供了详细的答案和解析，涵盖了JavaScript的高级特性、...
javascript进阶版纯手写课件
04-09
### JavaScript进阶知识点详解 #### 1. 函数防抖与节流 在JavaScript中，函数防抖（debounce）和节流（throttle）是两种常见的性能优化手段，主要应用于处理高频触发的事件。 **防抖**技术是通过设置一个延时器，...
Javascript 面向对象的JavaScript进阶
08-13
### JavaScript面向对象进阶知识点详解 #### 8.1 面向对象编程的基本特性 在探讨面向对象的JavaScript之前，我们首先需要了解面向对象编程（Object-Oriented Programming, OOP）的基本特性：封装性、抽象性、继承...
JavaScript进阶面试题_30题.pdf_前端面试题
09-01
JavaScript进阶面试题_30题.pdf_前端面试题 从这份文件中，我们可以总结出以下的知识点： 1. ECMAScript6 中的类语法糖：ECMAScript6 中引入了类语法糖，这使得有 OOP 基础的人更容易上手 JavaScript。虽然对熟悉 ...
JavaScript进阶教程(第三课)第1/2页
10-30
### JavaScript进阶教程(第三课) #### 事件的定时以及浏览器的识别 随着JavaScript技能的不断深化，我们能够开发出更为复杂的应用程序。在前一课中，我们探讨了如何利用JavaScript来创建Cookies。本课将重点介绍...
javascript验证用户名不能为空_JavaScript 设计模式之策略模式
weixin_39763033的博客
12-02 598
什么是策略模式？策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。使用策略模式计算奖金很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例 如，绩效为S的人年终奖有4倍工资，绩效为A的人年终奖有3倍工资， 而绩效为B的人年终奖是2倍工资。假设财务部要求我们提供一段代码， 来方便他们计算员工的年终奖。不使用策略模式我们可以编写一个名为calculateBon...
dc元数据和html描述资源,在HTML中使用DC元数据
weixin_32199821的博客
05-30 6000
/i) {while (<>) {$meta .= $_;last if (/>/);}}$name = $meta =~ /name\s*=\s*"([^"]*)"/i? $1 : "MISSING ELEMENT NAME";$content = $meta =~ /content\s*=\s*"([^"]*)"/i? $1 : "MISSING ELEMENT VALUE"...
JavaScript面试题
qq_57112519的博客
07-06 1万+
一、单选题（共20题，每题2分）得分：2.0分 1.下面可以获取浏览器在卷动后，隐藏的文档部分的高度的属性是 A window.body.scrollTop B document.body.scrollTop; C document.scrolTop; D documentElement.body.scrollTop 正确答案: B 解析:基础属性 2.在HTML页面中，下列选项不属于键盘相关事件的是 A onkeyup B onkeydown C oncontextmenu D onkey
基本面试问题
wanghuohuo1998的博客
07-14 844
面试问题 1.移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
80道前端面试经典选择题
热门推荐
qq_40588413的博客
02-08 1万+
前言 看了一下各种面试题，选择题是必有的 所以我整理了一些经典的前端面试选择题，希望能对大家日后找工作有所帮助！ HTML/CSS 1、在 css 选择器当中，优先级排序正确的是（） A、id选择器>标签选择器>类选择器 B、标签选择器>类选择器>id选择器 C、类选择器>标签选择器>id选择器 D、id选择器>类选择器>标签选择器 解析： 选D...
vue3自定义上传功能；手写上传组件；input实现上传
i_am_a_div的博客
12-23 285
vue3自定义上传功能；手写上传组件；input实现上传
在js中实现下载base64数据，兼容低版本
最新发布
HGX-DJK
12-25 224
【代码】在js中实现下载base64数据，兼容低版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>