JavaScript学习笔记（二)

JavaScript学习笔记（二)

仅为个人学习记录所用，学习内容为菜鸟联盟JavaScript

正则表达式

• Regular Expression，在代码中常简写为regex、regexp或RE.
• 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
• 搜索模式可用于文本搜索和文本替换。

语法

• /正则表达式主体/修饰符(可选)

使用字符串方法

• search()
  • 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
• replace()
  • 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

search() 方法使用正则表达式

•   //使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
    
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    
    //输出结果：6
  

search() 方法使用字符串

• search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

  •   //检索字符串中 "Runoob" 的子串：
      
      var str = "Visit Runoob!"; 
      var n = str.search("Runoob");
    

replace() 方法使用正则表达式

•   //使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
    
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    
    //结果输出为：Visit Runoob!
  

replace() 方法使用字符串

•   //replace() 方法将接收字符串作为参数：
    
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");
  

正则表达式修饰符

• 修饰符 可以在全局搜索中不区分大小写:

• 修饰符	描述
  i	执行对大小写不敏感的匹配。
  g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
  m	执行多行匹配。

正则表达式模式

• 方括号用于查找某个范围内的字符

  • 表达式	描述
    [abc]	查找方括号之间的任何字符。
    [0-9]	查找任何从 0 至 9 的数字。
    (x|y)	查找任何以 | 分隔的选项。

• 元字符是拥有特殊含义的字符

  • 元字符	描述
    \d	查找数字。
    \s	查找空白字符。
    \b	匹配单词边界。
    \uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

• 量词

  • 量词	描述
    n+	匹配任何包含至少一个 n 的字符串。
    n*	匹配任何包含零个或多个 n 的字符串。
    n?	匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

• 在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

• test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

•   //以下实例用于搜索字符串中的字符 "e"：
    
    var patt = /e/;
    patt.test("The best things in life are free!");
    // 字符串中含有 "e"，所以该实例输出为：
    // 结果输出：true
  

• 也可以简化为/e/.test("The best things in life are free!")

使用 exec()

• exec() 方法用于检索字符串中的正则表达式的匹配。
• 该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
• 以下实例用于搜索字符串中的字母 “e”:
  • /e/.exec("The best things in life are free!");

实例

• 正则表达式表单验证

  •   /*是否带有小数*/
      function    isDecimal(strValue )  {  
         var  objRegExp= /^\d+\.\d+$/;
         return  objRegExp.test(strValue);  
      }  
      
      /*校验是否中文名称组成 */
      function ischina(str) {
          var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
          return reg.test(str);     /*进行验证*/
      }
      
      /*校验是否全由8位数字组成 */
      function isStudentNo(str) {
          var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
          return reg.test(str);     /*进行验证*/
      }
      
      /*校验电话码格式 */
      function isTelCode(str) {
          var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
          return reg.test(str);
      }
      
      /*校验邮件地址是否合法 */
      function IsEmail(str) {
          var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
          return reg.test(str);
      }
    

• 百度网盘链接匹配

  •   /**
       * [reg 百度网盘链接匹配]
       * 说明：匹配支持百度分享的两种链接格式
       * 格式一：链接: https://pan.baidu.com/s/15gzY8h3SEzVCfGV1xfkJsQ 提取码: vsuw 复制这段内容后打开百度网盘手机App，操作更方便哦
       * 格式二：http://pan.baidu.com/share/link?shareid=179436&uk=3272055266 提取码: vsuw 复制这段内容后打开百度网盘手机App，操作更方便哦
       * 匹配出下载地址和提取码，并且还支持如果没有提取码，也能匹配出下载链接。
       * @type {正则表达式}
       * @return array 返回匹配成功的链接和地址
       */
      
      function baiduDownLinkArr( string ){
        var reg = /([http|https]*?:\/\/pan\.baidu\.com\/[(?:s\/){0,1}|(share)]*(?:[0-9a-zA-Z?=&])+)(?:.+:(?:\s)*)?([a-zA-Z]{4})?/;
        console.log(reg.exec(string));
      }
    

JavaScript 错误处理 - throw、try 和 catch

• try 语句测试代码块的错误。
• catch 语句处理错误。
• throw 语句创建自定义错误。
• finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

JavaScript 错误

• 当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

  • 语法错误，通常是程序员造成的编码错误或错别字。

  • 拼写错误或语言中缺少的功能（可能由于浏览器差异）。

  • 来自服务器或用户的错误输出而导致的错误。

JavaScript 抛出（throw）错误

• 当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
• 描述这种情况的技术术语是：JavaScript 将抛出一个错误。

JavaScript try 和 catch

• try 语句允许我们定义在执行时进行错误测试的代码块。

• catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

• JavaScript 语句 try 和 catch 是成对出现的。

•   //语法
    try {
        ...    //异常的抛出
    } catch(e) {
        ...    //异常的捕获与处理
    } finally {
        ...    //结束处理
    }
  

•   //实例
    var txt=""; 
    function message() 
    { 
        try { 
            adddlert("Welcome guest!"); 
        } catch(err) { 
            txt="本页有一个错误。\n\n"; 
            txt+="错误描述：" + err.message + "\n\n"; 
            txt+="点击确定继续。\n\n"; 
            alert(txt); 
        } 
    }
  

finally语句

• finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

•   function myFunction() {
      var message, x;
      message = document.getElementById("p01");
      message.innerHTML = "";
      x = document.getElementById("demo").value;
      try { 
        if(x == "") throw "值是空的";
        if(isNaN(x)) throw "值不是一个数字";
        x = Number(x);
        if(x > 10) throw "太大";
        if(x < 5) throw "太小";
      }
      catch(err) {
        message.innerHTML = "错误: " + err + ".";
      }
      finally {
        document.getElementById("demo").value = "";
      }
    }
  

Throw 语句

• throw 语句允许我们创建自定义错误。

• 术语是：创建或抛出异常（exception）。

• 如果把 throw 与 try 和 catch 一起使用，就能够控制程序流，并生成自定义的错误消息。

• 语法throw exception

  • 异常可以是 JavaScript 字符串、数字、逻辑值或对象。

• 实例

  •   //本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息。
      function myFunction() {
          var message, x;
          message = document.getElementById("message");
          message.innerHTML = "";
          x = document.getElementById("demo").value;
          try { 
              if(x == "")  throw "值为空";
              if(isNaN(x)) throw "不是数字";
              x = Number(x);
              if(x < 5)    throw "太小";
              if(x > 10)   throw "太大";
          }
          catch(err) {
              message.innerHTML = "错误: " + err;
          }
      }
      //如果 getElementById 函数出错，上面的例子也会抛出一个错误。
    

JavaScript 调试

console.log() 方法

• 可以使用 console.log() 方法在调试窗口上打印 JavaScript 值。

设置断点

• 在调试窗口中，可以设置 JavaScript 代码的断点。
• 在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。
• 在检查完毕后，可以重新执行代码（如播放按钮）。

debugger 关键字

• debugger 关键字用于停止执行 JavaScript，并调用调试函数。
• 这个关键字与在调试工具中设置断点的效果是一样的。
• 如果没有调试可用，debugger 语句将无法工作。
• 开启 debugger ，代码在第三行前停止执行。

JavaScript 变量提升

• hoisting

  • 变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

• JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

• JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

JavaScript 初始化不会提升

• JavaScript 只有声明的变量会提升，初始化的不会。

• JavaScript 严格模式(strict mode)不允许使用未声明的变量。

JavaScript 严格模式

• JavaScript 严格模式（strict mode）即在严格的条件下运行。

使用"use strict"指令

• “use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
• 它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
• “use strict” 的目的是指定代码在严格条件下执行。
• 严格模式下你不能使用未声明的变量。

严格模式声明

• 严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明。

• 为什么使用严格模式:

• • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
• • • 消除代码运行的一些不安全之处，保证代码运行的安全；
      • 提高编译器效率，增加运行速度；
      • 为未来新版本的Javascript做好铺垫。

• "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向

• 另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

严格模式的限制

• “use strict” 指令只允许出现在脚本或函数的开头。

• 不允许使用未声明的变量。

• 对象也是一个变量。

• 不允许删除变量或对象。

• 不允许删除函数。

• 不允许变量重名。

• 不允许使用八进制。

• 不允许使用转义字符。

• 不允许对只读属性赋值。

• 不允许对一个使用getter方法读取的属性进行赋值。

• 不允许删除一个不允许删除的属性。

• 变量名不能使用 “eval” 字符串。

• 变量名不能使用 “arguments” 字符串。

• 不允许使用以下这种语句:

  •   "use strict";
      with (Math){x = cos(2)}; // 报错
    

• 由于一些安全原因，在作用域 eval() 创建的变量不能被调用

• 禁止this关键字指向全局对象。

  • 使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

保留关键字

• implements
• interface
• let
• package
• private
• protected
• public
• static
• yield

JavaScript 使用误区

赋值运算符应用错误

• 在 JavaScript 程序中如果在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号(==)。

比较运算符常见错误

• 数据类型
• 严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型

加法与连接注意事项

• 加法是两个数字相加。
• 连接是两个字符串连接。

浮点型数据使用注意事项

• JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

JavaScript 字符串分行

• 允许在字符串中使用断行语句

• 在字符串中直接使用回车换行会报错

return语句使用注意事项

• JavaScript 默认是在代码的最后一行自动结束。
• 不用对 return 语句进行断行。

数组中使用名字来索引

• JavaScript 不支持使用名字来索引数组，只允许使用数字索引。
• 在 JavaScript 中, 对象 使用 名字作为索引。
  • 如果使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。

定义数组元素，最后不能添加逗号

• 数组最后一个值的后面添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。

定义对象，最后不能添加逗号

Undefined 不是 Null

• 在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
• 对象只有被定义才有可能为 null，否则为 undefined。

程序块作用域

• 在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。

JavaScript 表单

JavaScript 表单验证

• HTML 表单验证可以通过 JavaScript 来完成。

• JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

• 表单数据经常需要使用 JavaScript 来验证其正确性：

  • 验证表单数据是否为空？
  • 验证输入是否是一个正确的email地址？
  • 验证日期是否输入正确？
  • 验证表单输入内容是否为数字型？

•   //判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交
    
    function validateForm() {
        var x = document.forms["myForm"]["fname"].value;
        if (x == null || x == "") {
            alert("需要输入名字。");
            return false;
        }
    }
    
    //以上 JavaScript 代码可以通过 HTML 代码来调用
    
    <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="fname">
    <input type="submit" value="提交">
    </form>
  

JavaScript 验证输入的数字

•   <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <h1>JavaScript 验证输入</h1>
    
    <p>请输入 1 到 10 之间的数字：</p>
    
    <input id="numb">
    
    <button type="button" onclick="myFunction()">提交</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        var x, text;
    
        // 获取 id="numb" 的值
        x = document.getElementById("numb").value;
    
        // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "输入错误";
        } else {
            text = "输入正确";
        }
        document.getElementById("demo").innerHTML = text;
    }
    </script>
    
    </body>
  

HTML表单自动验证

• HTML 表单验证也可以通过浏览器来自动完成。

• 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

•   <form action="demo_form.php" method="post">
      <input type="text" name="fname" required="required">
      <input type="submit" value="提交">
    </form>
  

数据验证

• 数据验证用于确保用户输入的数据是有效的。
• 典型的数据验证有：
  • 必需字段是否有输入?
  • 用户是否输入了合法的数据?
  • 在数字字段是否输入了文本?
• 大多数情况下，数据验证用于确保用户正确输入数据。
• 数据验证可以使用不同方法来定义，并通过多种方式来调用。
• 服务端数据验证是在数据提交到服务器上后再验证。
• 客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML约束验证

• HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
• 约束验证是表单被提交时浏览器用来实现验证的一种算法。
• HTML 约束验证基于：
  • HTML 输入属性
  • CSS 伪类选择器
  • DOM 属性和方法

约束验证 HTML 输入属性

• 属性	描述
  disabled	规定输入的元素不可用
  max	规定输入元素的最大值
  min	规定输入元素的最小值
  pattern	规定输入元素值的模式
  required	规定输入元素字段是必需的
  type	规定输入元素的类型

约束验证 CSS 伪类选择器

• 选择器	描述
  :disabled	选取属性为 “disabled” 属性的 input 元素
  :invalid	选取无效的 input 元素
  :optional	选择没有"optional"属性的 input 元素
  :required	选择有"required"属性的 input 元素
  :valid	选取有效值的 input 元素

必填（或选填）项目

• 用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）

  •   function validateForm()
      {
        var x=document.forms["myForm"]["fname"].value;
        if (x==null || x=="")
        {
          alert("姓必须填写");
          return false;
        }
      }
      
      //以上函数在 form 表单提交时被调用:
      
      <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
      姓: <input type="text" name="fname">
      <input type="submit" value="提交">
      </form>
    

E-mail验证

•   //下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
    //输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
    
    function validateForm(){
      var x=document.forms["myForm"]["email"].value;
      var atpos=x.indexOf("@");
      var dotpos=x.lastIndexOf(".");
      if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
        return false;
      }
    }
    
    //下面是连同 HTML 表单的完整代码
    <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
        Email: <input type="text" name="email">
        <input type="submit" value="提交">
    </form>
  

JavaScript 验证 API

约束验证 DOM 方法

• Property	Description
  checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
  setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity(’’) setCustomValidity(null) setCustomValidity(undefined)

约束验证 DOM 属性

• 属性	描述
  validity	布尔属性值，返回 input 输入值是否合法
  validationMessage	浏览器错误提示信息
  willValidate	指定 input 是否需要验证

Validity 属性

• input 元素的 validity 属性包含一系列关于 validity 数据属性:

  属性	描述
  customError	设置为 true, 如果设置了自定义的 validity 信息。
  patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
  rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
  rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
  stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
  tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
  typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
  valueMissing	设置为 true，如果元素 (required 属性) 没有值。
  valid	设置为 true，如果元素的值是合法的。

JavaScript 保留关键字

保留关键字

• 

JavaScript 对象、属性和方法

• 避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名
  • 

Java 保留关键字

• JavaScript 经常与 Java 一起使用。应该避免使用一些 Java 对象和属性作为 JavaScript 标识符
  • 

Windows 保留关键字

• alert	all	anchor	anchors	area
  assign	blur	button	checkbox	clearInterval
  clearTimeout	clientInformation	close	closed	confirm
  constructor	crypto	decodeURI	decodeURIComponent	defaultStatus
  document	element	elements	embed	embeds
  encodeURI	encodeURIComponent	escape	event	fileUpload
  focus	form	forms	frame	innerHeight
  innerWidth	layer	layers	link	location
  mimeTypes	navigate	navigator	frames	frameRate
  hidden	history	image	images	offscreenBuffering
  open	opener	option	outerHeight	outerWidth
  packages	pageXOffset	pageYOffset	parent	parseFloat
  parseInt	password	pkcs11	plugin	prompt
  propertyIsEnum	radio	reset	screenX	screenY
  scroll	secure	select	self	setInterval
  setTimeout	status	submit	taint	text
  textarea	top	unescape	untaint	window

HTML 事件句柄

• 避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。
• 

非标准 JavaScript

• 除了保留关键字，在 JavaScript 实现中也有一些非标准的关键字。
• const 关键字，用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。
• Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。建议：不要使用它。

JavaScript this 关键字

• 面向对象语言中 this 表示当前对象的一个引用。
• 但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
  • 在方法中，this 表示该方法所属的对象。
  • 如果单独使用，this 表示全局对象。
  • 在函数中，this 表示全局对象。
  • 在函数中，在严格模式下，this 是未定义的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

方法中的this

• 在对象方法中， this 指向调用它所在方法的对象。

• 在上面一个实例中，this 表示 person 对象。

• fullName 方法所属的对象就是 person。

•   fullName : function() {
      return this.firstName + " " + this.lastName;
    }
  

单独使用 this

• 单独使用 this，则它指向全局(Global)对象。

• 在浏览器中，window 就是该全局对象为 [object Window]

• var x = this;

•   //严格模式下，如果单独使用，this 也是指向全局(Global)对象。
    
    "use strict";
    var x = this;
  

函数中使用 this（默认）

• 在函数中，函数的所属者默认绑定到 this 上。

• 在浏览器中，window 就是该全局对象为 [object Window]

•   function myFunction() {
      return this;
    }
  

函数中使用 this（严格模式）

• 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

•   "use strict";
    function myFunction() {
      return this;
    }
  

事件中的this

• 在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素

•   <button onclick="this.style.display='none'">
    点我后我就消失了
    </button>
  

对象方法中绑定

• 下面实例中，this 是 person 对象，person 对象是函数的所有者：

  •   var person = {
        firstName  : "John",
        lastName   : "Doe",
        id         : 5566,
        myFunction : function() {
          return this;
        }
      };
    

显式函数绑定

• 在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

JavaScript let 和 const

• ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
• let 声明的变量只在 let 命令所在的代码块内有效。
• const 声明一个只读的常量，一旦声明，常量的值就不能改变。
• 在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

全局变量

• 在函数外声明的变量作用域是全局的

  •   var carName = "Volvo";
       
      // 这里可以使用 carName 变量
       
      function myFunction() {
          // 这里也可以使用 carName 变量
      }
      
    

  • 全局变量在 JavaScript 程序的任何地方都可以访问。

局部变量

• 在函数内声明的变量作用域是局部的（函数内）

•   // 这里不能使用 carName 变量
     
    function myFunction() {
        var carName = "Volvo";
        // 这里可以使用 carName 变量
    }
     
    // 这里不能使用 carName 变量
  

• 函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。

JavaScript 块级作用域（Block Scope）

• 使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。
• 在 ES6 之前，是没有块级作用域的概念的。
• ES6 可以使用 let 关键字来实现块级作用域。
• let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

重新定义变量

• 使用 var 关键字重新声明变量可能会带来问题。
• 在块中重新声明变量也会重新声明块外的变量。
• let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

循环作用域

• 使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。
• 使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响。

局部变量

• 在函数体内使用 var 和 let 关键字声明的变量有点类似。
• 它们的作用域都是 局部的

全局变量

• 在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。
• 它们的作用域都是 全局的

HTML 代码中使用全局变量

• 在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
• 在 HTML 中, 全局作用域是针对 window 对象。
• 使用 var 关键字声明的全局作用域变量属于 window 对象。
• 使用 let 关键字声明的全局作用域变量不属于 window 对象。

重置变量

• 使用 var 关键字声明的变量在任何地方都可以修改。
• 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量。
• 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量。
• 在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量。
• let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的。

变量提升

• var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明。
• let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

const 关键字

• const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。

• const定义常量与使用let 定义的变量相似：

  • 二者都是块级作用域。
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称。

• 两者还有以下两点区别：

  • const声明的常量必须初始化，而let声明的变量不用。
  • const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

• const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

  •   // 创建常量对象
      const car = {type:"Fiat", model:"500", color:"white"};
       
      // 修改属性:
      car.color = "red";
       
      // 添加属性
      car.owner = "Johnson";
    

• 不能对常量对象重新赋值。

  •   const car = {type:"Fiat", model:"500", color:"white"};
      car = {type:"Volvo", model:"EX60", color:"red"};    // 错误
    

• 不能对常量数组重新赋值

  •   // 创建常量数组
      const cars = ["Saab", "Volvo", "BMW"];
       
      // 修改元素
      cars[0] = "Toyota";
       
      // 添加元素
      cars.push("Audi");
      
      
      const cars = ["Saab", "Volvo", "BMW"];
      cars = ["Toyota", "Volvo", "Audi"];    // 错误
    

JavaScript JSON

JSON的定义

• JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据 。

• JSON 英文全称 JavaScript Object Notation

• JSON 是一种轻量级的数据交换格式。

• JSON是独立的语言 *****

• JSON 易于理解。

• JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

JSON 数据 - 一个名称对应一个值

• JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

• 键/值对包括字段名称（在双引号中），后面一个冒号，然后是值。

• "name":"Runoob"

JSON 对象

• JSON 对象保存在大括号内。

• 就像在 JavaScript 中, 对象可以保存多个 键/值 对：

• {"name":"Runoob", "url":"www.runoob.com"}

JSON 数组

• JSON 数组保存在中括号内。

  就像在 JavaScript 中, 数组可以包含对象：

•   //JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组
    {"sites":[
        {"name":"Runoob", "url":"www.runoob.com"}, 
        {"name":"Google", "url":"www.google.com"},
        {"name":"Taobao", "url":"www.taobao.com"}
    ]}
    
    //在以上实例中，对象 "sites" 是一个数组，包含了三个对象。
    //每个对象为站点的信息（网站名和网站地址）。
  

JSON 字符串转换为 JavaScript 对象

• 从服务器中读取 JSON 数据，并在网页中显示数据。

• 简单起见，在网页中直接设置 JSON 字符串

  •   //创建 JavaScript 字符串，字符串为 JSON 格式的数据
      var text = '{ "sites" : [' +
      '{ "name":"Runoob" , "url":"www.runoob.com" },' +
      '{ "name":"Google" , "url":"www.google.com" },' +
      '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
      
      //使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
      var obj = JSON.parse(text);
      
      //在页面中使用新的 JavaScript 对象
      var text = '{ "sites" : [' +
          '{ "name":"Runoob" , "url":"www.runoob.com" },' +
          '{ "name":"Google" , "url":"www.google.com" },' +
          '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
          
      obj = JSON.parse(text);
      document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
    

相关函数

• 函数	描述
  JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
  JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0) 含义

• javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式

• void func()|void(func())
• javascript:void func()|javascript:void(func())

href="#"与href="javascript:void(0)"的区别

• # 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。
• 而javascript:void(0), 仅仅表示一个死链接。
• 在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
• 如果要定义一个死链接请使用 javascript:void(0) 。

JavaScript 异步编程

异步的概念

• 异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。
• 传统的单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
• 简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

回调函数

• 回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了。

•   function print() {
        document.getElementById("demo").innerHTML="RUNOOB!";
    }
    setTimeout(print, 3000);
  

• 这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “Time out”。

• 也可以不必单独定义一个函数 print

  •   setTimeout(function () {
          document.getElementById("demo").innerHTML="RUNOOB!";
      }, 3000);
    

异步AJAX

•   //XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：
    var xhr = new XMLHttpRequest();
     
    xhr.onload = function () {
        // 输出接收到的文字数据
        document.getElementById("demo").innerHTML=xhr.responseText;
    }
     
    xhr.onerror = function () {
        document.getElementById("demo").innerHTML="请求出错";
    }
     
    // 发送异步 GET 请求
    xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
    xhr.send();
  

•   //XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX
    
    $.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
    });
    
  

JavaScript Promise

• Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

构造Promise

•   new Promise(function (resolve, reject) {
        // 要做的事情...
    });
  

• 分三次输出字符串，第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒：

•   new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("First");
            resolve();
        }, 1000);
    }).then(function () {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log("Second");
                resolve();
            }, 4000);
        });
    }).then(function () {
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    });
  

Promise的使用

• Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以称之为起始函数。起始函数包含两个参数 resolve 和 reject。

• 当 Promise 被构造时，起始函数会被异步执行：

  •   new Promise(function (resolve, reject) {
          console.log("Run");
      });
      //这段程序会直接输出 Run。
    

• resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的

  •   new Promise(function (resolve, reject) {
          var a = 0;
          var b = 1;
          if (b == 0) reject("Diveide zero");
          else resolve(a / b);
      }).then(function (value) {
          console.log("a / b = " + value);
      }).catch(function (err) {
          console.log(err);
      }).finally(function () {
          console.log("End");
      });
    

• Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函

  • .then() 可以将参数中的函数添加到当前 Promise 的正常执行序列

  • .catch() 则是设定 Promise 的异常处理序列

  • .finally() 是在 Promise 执行的最后一定会执行的序列。

  • .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列

  •   new Promise(function (resolve, reject) {
          console.log(1111);
          resolve(2222);
      }).then(function (value) {
          console.log(value);
          return 3333;
      }).then(function (value) {
          console.log(value);
          throw "An error";
      }).catch(function (err) {
          console.log(err);
      });
    

• resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。

• reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。但是

  • resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
  • resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

Promise函数

•   function print(delay, message) {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log(message);
                resolve();
            }, delay);
        });
    }
    
    print(1000, "First").then(function () {
        return print(4000, "Second");
    }).then(function () {
        print(3000, "Third");
    });
  

回答常见的问题（FAQ）

• Q: then、catch 和 finally 序列能否顺序颠倒？

  • A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。

• Q: 除了 then 块以外，其它两种块能否多次使用？

  • A: 可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。

• Q: then 块如何中断？

  • A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断。

• Q: 什么时候适合用 Promise 而不是传统回调函数？

  • A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

• Q: Promise 是一种将异步转换为同步的方法吗？

  • A: 完全不是。Promise 只不过是一种更良好的编程风格。

• Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？

  • A: 当你又需要调用一个异步任务的时候。

JavaScript 代码规范

变量名

• 变量名推荐使用驼峰法来命名(camelCase):

空格与运算符

• 通常运算符 ( = + - * / ) 前后需要添加空格

代码缩进

• 通常使用 4 个空格符号来缩进代码块
• 不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

语句规则

• 一条语句通常以分号作为结束符。

• 复杂语句的通用规则:

  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要以分号结束一个复杂的声明。

•   var values = ["Volvo", "Saab", "Fiat"];
    
    var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };
  

对象规则

• 将左花括号与类名放在同一行。

• 冒号与属性值间有个空格。

• 字符串使用双引号，数字不需要。

• 最后一个属性-值对后面不要添加逗号。

• 将右花括号独立放在一行，并以分号作为结束符号。

•   var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };
  

每行代码字符小于 80

• 如果一个 JavaScript 语句超过了 80 个字符，建议在 运算符或者逗号后换行。

命名规则

• 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
• 全局变量为大写 (UPPERCASE )
• 常量 (如 PI) 为大写 (UPPERCASE )
• 变量命名的几种规则： hyp-hens, camelCase, 或 under_scores
• HTML 和 CSS 的横杠(-)字符:
  • HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。
  • CSS 使用 - 来连接属性名 (font-size)。
• 下划线
• 帕斯卡拼写法(PascalCase)
• 变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

HTML载入外部JavaScript文件

• 使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的)
  • <script src="myscript.js">

使用 JavaScript 访问 HTML 元素

文件扩展名

• HTML 文件后缀可以是 .html (或 .htm)。
• CSS 文件后缀是 .css 。
• JavaScript 文件后缀是 .js 。

使用小写文件名

• 大多 Web 服务器 (Apache, Unix) 对大小写敏感
• 其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感

加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。

•   var values = ["Volvo", "Saab", "Fiat"];
    
    var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };
  

对象规则

• 将左花括号与类名放在同一行。

• 冒号与属性值间有个空格。

• 字符串使用双引号，数字不需要。

• 最后一个属性-值对后面不要添加逗号。

• 将右花括号独立放在一行，并以分号作为结束符号。

•   var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };
  

每行代码字符小于 80

• 如果一个 JavaScript 语句超过了 80 个字符，建议在 运算符或者逗号后换行。

命名规则

• 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
• 全局变量为大写 (UPPERCASE )
• 常量 (如 PI) 为大写 (UPPERCASE )
• 变量命名的几种规则： hyp-hens, camelCase, 或 under_scores
• HTML 和 CSS 的横杠(-)字符:
  • HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。
  • CSS 使用 - 来连接属性名 (font-size)。
• 下划线
• 帕斯卡拼写法(PascalCase)
• 变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

HTML载入外部JavaScript文件

• 使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的)
  • <script src="myscript.js">

使用 JavaScript 访问 HTML 元素

文件扩展名

• HTML 文件后缀可以是 .html (或 .htm)。
• CSS 文件后缀是 .css 。
• JavaScript 文件后缀是 .js 。

使用小写文件名

• 大多 Web 服务器 (Apache, Unix) 对大小写敏感

• 其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感

• 为了统一，建议使用小写的文件名