0

0

详细介绍JavaScript提高学习之ES6

WBOY

WBOY

发布时间:2022-02-07 17:38:41

|

2108人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了关于es6的相关知识,其中包括严格模式、高阶函数以及闭包和递归等相关问题,希望对大家有帮助。

详细介绍JavaScript提高学习之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'

    立即学习Java免费学习笔记(深入)”;

因为"use strict"加了引号,所以老版本的浏览器会把它当作一行普通字符串而忽略。

有的 script 基本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。

1.1.2、为函数开启严格模式

  • 若要给某个函数开启严格模式,需要把"use strict"'use strict'声明放在函数体所有语句之前

    
    
    
    
    
  • "use strict" 放在函数体的第一行,则整个函数以 "严格模式"运行。

2、严格模式中的变化

  • 严格模式对JavaScript的语法和行为,都做了一些改变

2.1、变量规定

  • 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量
  • 严格模式禁止这种用法,变量都必须先用var 命令声明,然后再使用
  • 严禁删除已经声明变量,例如,``delete x` 语法是错误的

    

2.2、严格模式下this指向问题

  1. 以前在全局作用域函数中的this指向window对象
  2. 严格模式下全局作用域中函数中的thisundefined
  3. 以前构造函数时不加 new 也可以调用,当普通函数,this指向全局对象
  4. 严格模式下,如果构造函数不加 new 调用,this指向的是 undefined ,如果给它赋值,会报错
  5. new 实例化的构造函数指向创建的对象实例
  6. 定时器this 还是指向window
  7. 事件、对象还是指向调用者

    

2.3、函数变化

  1. 函数不能有重名的参数
  2. 函数必须声明在顶层,新版本的JavaScript会引入“块级作用域”(ES6中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数

    

3、高阶函数

  • 高阶函数是对其他函数进行操作的函数,它接收函数作为参数将函数作为返回值输出

接收函数作为参数


    

将函数作为返回值

  • 此时 fn 就是一个高阶函数
  • 函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数
  • 同理函数也可以作为返回值传递回来

4、闭包

4.1、变量作用域

变量根据作用域的不同分为两种:全局变量和局部变量

  1. 函数内部可以使用全局变量
  2. 函数外部不可以使用局部变量
  3. 当函数执行完毕,本作用域内的局部变量会销毁。

4.2、什么是闭包

闭包指有权访问另一个函数作用域中的变量的函数

简单理解:一个作用域可以访问另外一个函数内部的局部变量


    

4.3、在chrome中调试闭包

  1. 打开浏览器,按 F12 键启动 chrome 调试工具。

  2. 设置断点。

  3. 找到 Scope 选项(Scope 作用域的意思)。

  4. 当我们重新刷新页面,会进入断点调试,Scope 里面会有两个参数(global 全局作用域、local 局部作用域)。

  5. 当执行到 fn2() 时,Scope 里面会多一个 Closure 参数 ,这就表明产生了闭包。

在这里插入图片描述

4.4、闭包的作用

  • 延伸变量的作用范围

    

4.5、闭包练习

4.5.1、点击li输出索引号


    
    

在这里插入图片描述

4.5.2、定时器中的闭包


    
    

在这里插入图片描述

5、递归

如果一个函数在内部可以调用其本身,那么这个函数就是递归函数

简单理解: 函数内部自己调用自己,这个函数就是递归函数

由于递归很容易发生"栈溢出"错误,所以必须要加退出条件 return


    

6、浅拷贝和深拷贝

  1. 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用
  2. 深拷贝拷贝多层,每一级别的数据都会拷贝
  3. Object.assign(target,....sources) ES6新增方法可以浅拷贝

6.1、浅拷贝

// 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }};var o = {}for(var k in obj){
    // k是属性名,obj[k]是属性值
    o[k] = obj.[k];}console.log(o);// 浅拷贝语法糖Object.assign(o,obj);

6.2、深拷贝

// 深拷贝拷贝多层,每一级别的数据都会拷贝var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
    color: ['pink','red']};var o = {};// 封装函数function deepCopy(newobj,oldobj){
    for(var k in oldobj){
        // 判断属性值属于简单数据类型还是复杂数据类型
        // 1.获取属性值   oldobj[k]
        var item = obldobj[k];
        // 2.判断这个值是否是数组
        if(item instanceof Array){
            newobj[k] = [];
            deepCopy(newobj[k],item)
        }else if (item instanceof Object){
              // 3.判断这个值是否是对象
            newobj[k] = {};
            deepCopy(newobj[k],item)
        }else {
            // 4.属于简单数据类型
            newobj[k] = item;
            
        } 
    }}deepCopy(o,obj);

7、 正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。

正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。

7.1、特点

  • 实际开发,一般都是直接复制写好的正则表达式
  • 但是要求会使用正则表达式并且根据自身实际情况修改正则表达式

7.2、创建正则表达式

在JavaScript中,可以通过两种方式创建正则表达式

  1. 通过调用 RegExp 对象的构造函数创建

  2. 通过字面量创建

    详细介绍Linux shell脚本基础学习 中文WORD版
    详细介绍Linux shell脚本基础学习 中文WORD版

    本文档主要讲述的是详细介绍Linux shell脚本基础学习;Linux shell脚本基础学习我们将分几讲来慢慢细说,希望能对想学习Linux shell脚本编程的初学者有一个明确的帮助,水平得到提高。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

    下载

7.2.1、通过调用 RegExp 对象的构造函数创建

通过调用 RegExp 对象的构造函数创建

var 变量名 = new RegExp(/表达式/);

7.2.2、通过字面量创建

通过字面量创建

var 变量名 = /表达式/;

注释中间放表达式就是正则字面量

7.2.3、测试正则表达式 test

  • test()正则对象方法,用于检测字符串是否符合该规则,该对象会返回truefalse,其参数是测试字符串
regexObj.test(str)
  • regexObj 写的是正则表达式
  • str 我们要测试的文本
  • 就是检测str文本是否符合我们写的正则表达式规范

示例


    

7.3、正则表达式中的特殊在字符

7.3.1、边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符

边界符 说明
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结束)

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

// 边界符 ^ $
var rg = /abc/;   //正则表达式里面不需要加引号,不管是数字型还是字符串型
// /abc/只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));

var reg = /^abc/;
console.log(reg.test('abc'));   //true
console.log(reg.test('abcd'));	// true
console.log(reg.test('aabcd')); // false

var reg1 = /^abc$/
// 以abc开头,以abc结尾,必须是abc

7.3.2、字符类

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

①[] 方括号

/[abc]/.test('andy');     // true

后面的字符串只要包含 abc 中任意一个字符,都返回true

②[-]方括号内部 范围符

/^[a-z]$/.test()

方括号内部加上-表示范围,这里表示a - z26个英文字母都可以

③[^] 方括号内部 取反符 ^

/[^abc]/.test('andy')   // false

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

注意和边界符 ^ 区别,边界符写到方括号外面

④字符组合

/[a-z1-9]/.test('andy')    // true

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


    

7.3.3、量词符

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

量词 说明
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次

    

7.3.4、用户名验证

功能需求:

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

分析:

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

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

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

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

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


     请输入用户名
    

7.4、括号总结

  1. 大括号 量词符 里面面表示重复次数
  2. 中括号 字符集合 匹配方括号中的任意字符
  3. 小括号 表示优先级
// 中括号 字符集合 匹配方括号中的任意字符
var reg = /^[abc]$/;
// a || b || c
// 大括号 量词符 里面表示重复次数
var reg = /^abc{3}$/;   // 它只是让c 重复3次 abccc
// 小括号 表示优先级
var reg = /^(abc){3}$/;  //它是让 abc 重复3次

在线测试正则表达式: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}$


    

7.6、正则表达式中的替换

7.6.1、replace 替换

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

stringObject.replace(regexp/substr,replacement)
  1. 第一个参数: 被替换的字符串或者正则表达式
  2. 第二个参数:替换为的字符串
  3. 返回值是一个替换完毕的新字符串
// 替换 replacevar str = 'andy和red';var newStr = str.replace('andy','baby');var newStr = str.replace(/andy/,'baby');

7.6.2、正则表达式参数

/表达式/[switch]

switch按照什么样的模式来匹配,有三种

  • g: 全局匹配
  • i:忽略大小写
  • gi: 全局匹配 + 忽略大小写

相关推荐:javascript学习教程

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

544

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

393

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

654

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

544

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号