目录总览
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输出索引号<body> <ul class="nav"> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> <li>大猪蹄子</li> </ul> <script> // 闭包应用-点击li输出当前li的索引号 // 1. 我们可以利用动态添加属性的方式 var lis = document.queryselector('.nav').queryselectorall('li'); for (var i = 0; i < lis.length; i++) { lis[i].index = i; lis[i].onclick = function() { // console.log(i); console.log(this.index); } } // 2. 利用闭包的方式得到当前小li 的索引号 for (var i = 0; i = 1 可以出现1次或者很多次 // var reg = /^a+$/; // console.log(reg.test('')); // false // console.log(reg.test('a')); // true // console.log(reg.test('aaaa')); // true // ? 相当于 1 || 0 // var reg = /^a?$/; // console.log(reg.test('')); // true // console.log(reg.test('a')); // true // console.log(reg.test('aaaa')); // false // {3 } 就是重复3次 // var reg = /^a{3}$/; // console.log(reg.test('')); // false // console.log(reg.test('a')); // false // console.log(reg.test('aaaa')); // false // console.log(reg.test('aaa')); // true // {3, } 大于等于3 var reg = /^a{3,}$/; console.log(reg.test('')); // false console.log(reg.test('a')); // false console.log(reg.test('aaaa')); // true console.log(reg.test('aaa')); // true // {3,16} 大于等于3 并且 小于等于16 var reg = /^a{3,6}$/; console.log(reg.test('')); // false console.log(reg.test('a')); // false console.log(reg.test('aaaa')); // true console.log(reg.test('aaa')); // true console.log(reg.test('aaaaaaa')); // false </script></body>
7.3.4、用户名验证功能需求：
如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色分析：
用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.
首先准备好这种正则表达式模式 /$[a-za-z0-9-_]{6,16}^/
当表单失去焦点就开始验证.
如果符合正则规范, 则让后面的span标签添加 right 类.
如果不符合正则规范, 则让后面的span标签添加 wrong 类.
<body> <input type="text" class="uname"> <span>请输入用户名</span> <script> // 量词是设定某个模式出现的次数 var reg = /^[a-za-z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1 // {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')); // console.log(reg.test('andy_red')); // console.log(reg.test('andy007')); // console.log(reg.test('andy!007')); var uname = document.queryselector('.uname'); var span = document.queryselector('span'); uname.onblur = function() { if (reg.test(this.value)) { console.log('正确的'); span.classname = 'right'; span.innerhtml = '用户名格式输入正确'; } else { console.log('错误的'); span.classname = 'wrong'; span.innerhtml = '用户名格式输入不正确'; } } </script></body>
7.4、括号总结大括号 量词符 里面面表示重复次数中括号 字符集合 匹配方括号中的任意字符小括号 表示优先级// 中括号 字符集合 匹配方括号中的任意字符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}$
<body> <script> // 座机号码验证: 全国座机号码 两种格式: 010-12345678 或者 0530-1234567 // 正则里面的或者 符号 | // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/; var reg = /^\d{3,4}-\d{7,8}$/; </script></body>
7.6、正则表达式中的替换7.6.1、replace 替换replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式
stringobject.replace(regexp/substr,replacement)
第一个参数: 被替换的字符串或者正则表达式第二个参数：替换为的字符串返回值是一个替换完毕的新字符串// 替换 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学习教程
以上就是详细介绍javascript提高学习之es6的详细内容。