广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家带来了关于es6的相关知识，其中包括严格模式、高阶函数以及闭包和递归等相关问题，希望对大家有帮助。
目录总览
1、严格模式JavaScript 除了提供正常模式外，还提供了严格模式ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码严格模式在IE10 以上版本的浏览器才会被支持，旧版本浏览器会被忽略严格模式对正常的JavaScript语义做了一些更改：消除了Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为消除代码运行的一些不安全之处，保证代码运行的安全提高编译器效率，增加运行速度禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名1.1、开启严格模式严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况1.1.2、为脚本开启严格模式
为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句
"use strict" 或'use strict'
<script> 'user strict';console.log("这是严格模式。");</script>登录后复制
因为"use strict"加了引号，所以老版本的浏览器会把它当作一行普通字符串而忽略。
有的 script 基本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>登录后复制1.1.2、为函数开启严格模式若要给某个函数开启严格模式，需要把"use strict"或'use strict'声明放在函数体所有语句之前
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>登录后复制将"use strict" 放在函数体的第一行，则整个函数以 "严格模式"运行。2、严格模式中的变化严格模式对JavaScript的语法和行为，都做了一些改变2.1、变量规定在正常模式中，如果一个变量没有声明就赋值，默认是全局变量严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用严禁删除已经声明变量，例如，``delete x` 语法是错误的
<body> <script> 'use strict'; // 1. 我们的变量名必须先声明再使用 // num = 10; // console.log(num); var num = 10; console.log(num); // 2.我们不能随意删除已经声明好的变量 // delete num; </script></body>
登录后复制2.2、严格模式下this指向问题以前在全局作用域函数中的this指向window对象严格模式下全局作用域中函数中的this 是undefined以前构造函数时不加 new 也可以调用，当普通函数，this指向全局对象严格模式下，如果构造函数不加 new 调用，this指向的是 undefined ，如果给它赋值，会报错new 实例化的构造函数指向创建的对象实例定时器this 还是指向window事件、对象还是指向调用者
<body> <script> 'use strict';//3. 严格模式下全局作用域中函数中的 this 是 undefined。 function fn() { console.log(this); // undefined。 } fn(); //4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错. function Star() { this.sex = '男'; } // Star(); var ldh = new Star(); console.log(ldh.sex); //5. 定时器 this 还是指向 window setTimeout(function() { console.log(this); }, 2000); </script></body>登录后复制2.3、函数变化函数不能有重名的参数函数必须声明在顶层，新版本的JavaScript会引入“块级作用域”（ES6中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数
<body> <script> 'use strict'; // 6. 严格模式下函数里面的参数不允许有重名 function fn(a, a) { console.log(a + a); }; // fn(1, 2); function fn() {} </script></body>登录后复制3、高阶函数高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出
接收函数作为参数
<body> <p></p> <script> // 高阶函数- 函数可以作为参数传递 function fn(a, b, callback) { console.log(a + b); callback && callback(); } fn(1, 2, function() { console.log('我是最后调用的'); }); </script></body>登录后复制
将函数作为返回值
<script> function fn(){ return function() {} }</script>登录后复制此时 fn 就是一个高阶函数函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数同理函数也可以作为返回值传递回来4、闭包4.1、变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量
函数内部可以使用全局变量函数外部不可以使用局部变量当函数执行完毕，本作用域内的局部变量会销毁。4.2、什么是闭包
闭包指有权访问另一个函数作用域中的变量的函数
简单理解：一个作用域可以访问另外一个函数内部的局部变量
<body> <script> // 闭包（closure）指有权访问另一个函数作用域中变量的函数。 // 闭包: 我们fn2 这个函数作用域 访问了另外一个函数 fn1 里面的局部变量 num function fn1() {// fn1就是闭包函数 var num = 10; function fn2() { console.log(num); //10 } fn2(); } fn1(); </script></body>登录后复制4.3、在chrome中调试闭包
打开浏览器，按 F12 键启动 chrome 调试工具。
设置断点。
找到 Scope 选项（Scope 作用域的意思）。
当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。
当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。
4.4、闭包的作用延伸变量的作用范围
<body> <script> // 闭包（closure）指有权访问另一个函数作用域中变量的函数。 // 一个作用域可以访问另外一个函数的局部变量 // 我们fn 外面的作用域可以访问fn 内部的局部变量 // 闭包的主要作用: 延伸了变量的作用范围 function fn() { var num = 10; return function() { console.log(num); } } var f = fn(); f(); </script></body>登录后复制4.5、闭包练习4.5.1、点击li输出索引号
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>0登录后复制
4.5.2、定时器中的闭包
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>1登录后复制
5、递归
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
简单理解： 函数内部自己调用自己，这个函数就是递归函数
由于递归很容易发生"栈溢出"错误，所以必须要加退出条件 return
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>2登录后复制6、浅拷贝和深拷贝浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用深拷贝拷贝多层，每一级别的数据都会拷贝Object.assign(target,....sources) ES6新增方法可以浅拷贝6.1、浅拷贝
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>3登录后复制6.2、深拷贝
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>4登录后复制7、 正则表达式
正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
7.1、特点实际开发，一般都是直接复制写好的正则表达式但是要求会使用正则表达式并且根据自身实际情况修改正则表达式7.2、创建正则表达式
在JavaScript中，可以通过两种方式创建正则表达式
通过调用 RegExp 对象的构造函数创建
通过字面量创建
7.2.1、通过调用 RegExp 对象的构造函数创建
通过调用 RegExp 对象的构造函数创建
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>5登录后复制7.2.2、通过字面量创建
通过字面量创建
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>6登录后复制
注释中间放表达式就是正则字面量
7.2.3、测试正则表达式 testtest()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false,其参数是测试字符串
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>7登录后复制regexObj 写的是正则表达式str 我们要测试的文本就是检测str文本是否符合我们写的正则表达式规范
示例
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>8登录后复制7.3、正则表达式中的特殊在字符7.3.1、边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置，主要有两个字符
^表示匹配行首的文本(以谁开始)$表示匹配行尾的文本(以谁结束)
如果^ 和 $ 在一起，表示必须是精确匹配
<script>(function (){ 'use strict'; var num = 10; function fn() {}})(); </script>9登录后复制7.3.2、字符类字符类表示有一系列字符可供选择，只要匹配其中一个就可以了所有可供选择的字符都放在方括号内①[] 方括号
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>0登录后复制
后面的字符串只要包含 abc 中任意一个字符,都返回true
②[-]方括号内部 范围符
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>1登录后复制
方括号内部加上-表示范围，这里表示a - z26个英文字母都可以
③[^] 方括号内部 取反符 ^
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>2登录后复制
方括号内部加上^表示取反，只要包含方括号内的字符，都返回 false
注意和边界符 ^ 区别，边界符写到方括号外面
④字符组合
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>3登录后复制
方括号内部可以使用字符组合，这里表示包含a 到 z的26个英文字母和1到9的数字都可以
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>4登录后复制7.3.3、量词符
量词符用来设定某个模式出现的次数
*重复零次或更多次+重复一次或更多次?重复零次或一次{n}重复n次{n,}重复n次或更多次{n,m}重复n到m次
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>5登录后复制7.3.4、用户名验证
功能需求：
如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色
分析：
用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.
首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/
当表单失去焦点就开始验证.
如果符合正则规范, 则让后面的span标签添加 right 类.
如果不符合正则规范, 则让后面的span标签添加 wrong 类.
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>6登录后复制7.4、括号总结大括号 量词符 里面面表示重复次数中括号 字符集合 匹配方括号中的任意字符小括号 表示优先级
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>7登录后复制
在线测试正则表达式：https://c.runoob.com/
7.5、预定义类
预定义类指的是某些常见模式的简写写法
\d匹配0-9之间的任一数字，相当于[0-9]\D匹配所有0-9以外的字符，相当于[ ^ 0-9]\w匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ]\W除所有字母、数字、和下划线以外的字符，相当于[ ^A-Za-z0-9_ ]\s匹配空格（包括换行符，制表符，空格符等），相当于[\t\t\n\v\f]\S匹配非空格的字符，相当于[ ^ \t\r\n\v\f]7.5.1、表单验证
分析：
1.手机号码: /^1[3|4|5|7|8][0-9]{9}$/
2.QQ: [1-9][0-9]{4,} (腾讯QQ号从10000开始)
3.昵称是中文: ^[\u4e00-\u9fa5]{2,8}$
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>8登录后复制7.6、正则表达式中的替换7.6.1、replace 替换
replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式
<body> <!-- 为整个脚本(script标签)开启严格模式 --> <script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码 </script> <script> (function() { 'use strict'; })(); </script> <!-- 为某个函数开启严格模式 --> <script> // 此时只是给fn函数开启严格模式 function fn() { 'use strict'; // 下面的代码按照严格模式执行 } function fun() { // 里面的还是按照普通模式执行 } </script></body>9登录后复制第一个参数: 被替换的字符串或者正则表达式第二个参数：替换为的字符串返回值是一个替换完毕的新字符串
<body> <script> 'use strict'; // 1. 我们的变量名必须先声明再使用 // num = 10; // console.log(num); var num = 10; console.log(num); // 2.我们不能随意删除已经声明好的变量 // delete num; </script></body>0
登录后复制7.6.2、正则表达式参数
<body> <script> 'use strict'; // 1. 我们的变量名必须先声明再使用 // num = 10; // console.log(num); var num = 10; console.log(num); // 2.我们不能随意删除已经声明好的变量 // delete num; </script></body>1
登录后复制
switch按照什么样的模式来匹配，有三种
g: 全局匹配i:忽略大小写gi: 全局匹配 + 忽略大小写
相关推荐：javascript学习教程
以上就是详细介绍JavaScript提高学习之ES6的详细内容，更多请关注9543建站博客其它相关文章！
| 边界符 | 说明 |
|---|---|
| 量词 | 说明 |
| 预定类 | 说明 |
发表评论