JavaScript 笔记(2) -- 类型转换 正则表达 变量提升 表单验证

目录：

　　 typeof, null, undefined, valueOf()

　　类型转换

　　正则表达式

　　错误： try, catch, throw

　　调试工具

　　变量提升

　　strict 严格模式

　　使用误区

　　表单 & 表单验证

　　JavaScript void

 

 typeof, null, undefined, valueOf()

• typeof：用于检测变量的数据类型，eg： typeof "John"; // 返回 string
  在 JavaScript 中有 5 种不同的数据类型：string, number, boolean, object, function
  3 种对象类型： Object, Date, Array
  2 个不包含任何值的数据类型：null, undefined
  
  强调:
  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object， 在JavaScript中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。
  • 日期(Date)的数据类型为 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined
  • 如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 Object。此时需用使用 constructor  属性

constructor 属性：返回所有 JavaScript 变量的构造函数。实例：

"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }

可以使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array") ，日期 (包含字符串 "Date"):

function isArray(myArray) { # 是否为数组 (包含字符串 "Array")return myArray.constructor.toString().indexOf("Array") > -1; }
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(isArray(fruits)); # true
function isDate(myDate) { # 是否为日期 (包含字符串 "Date")return myDate.constructor.toString().indexOf("Date") > -1; }
isDate(new Date()); # true

 

• null：在 JavaScript 中表示 "什么都没有"。null 是一个只有一个值的特殊类型，表示一个空对象（Object）引用。eg： var person; // 值为 null(空), 但仍然是一个对象。 用 typeof 检测 null 返回是object。

可用于清空对象，eg：

var person = null; // 值为 null(空), 但类型为对象 # 对比 使用 undefined 来清空对象: var person = undefined; // 值为 undefined, 类型为 undefined

• undefined：在 JavaScript 中, undefined 是一个没有设置值的变量。 一个没有值的变量会返回 undefined。任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.
• Undefined 和 Null 的区别 typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
• valueOf()：是数组对象的默认方法，返回 Array 对象的原始值，该原始值由 Array 对象派生的所有对象继承。eg： var fruits = ["Banana", "Orange", "Apple", "Mango"]; var v=fruits.valueOf();# fruits.valueOf() 与 fruits 返回值一样。 # 输出结果为： Banana,Orange,Apple,Mango

  valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。 

　　  注意：valueOf() 方法不会改变原数组。

类型转换：

• 通过使用 JavaScript 函数 5 + null // 返回 5 null 转换为 0 "5" + null // 返回"5null" null 转换为 "null" "5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5
  .........
• 通过 JavaScript 自身自动转换 String(): 可将 数字/布尔值/时间... 转换为字符串，eg：String(123); String(false); //返回 "false" toString(): Number/Boolean/Date() 方法 toString() 也是有同样的效果。eg: (123).toString; false.toString();     Number 方法中，其他可将数字转换为字符串的方法：

  toExponential()	把对象的值转换为指数计数法。
  toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
  toPrecision()	把数字格式化为指定的长度。

  　　Date 方法中，其他可将日期转换为字符串的函数：

  getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
  getFullYear()	从 Date 对象以四位数字返回年份。
  getHours()	返回 Date 对象的小时 (0 ~ 23)。
  getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
  getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
  getMonth()	从 Date 对象返回月份 (0 ~ 11)。
  getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
  getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

  Number(): 可将字符串/布尔值/日期/...转换为数字，eg：Number(false); //返回0  

      eg2: Number(new Date()); //返回 Unix 时间戳, 日期方法 getTime() 也有相同的效果,使用 (new Date()).getTime();

       Number 方法中，其他字符串转换为数字的方法：

  parseFloat()	解析一个字符串，并返回一个浮点数。
  parseInt()	解析一个字符串，并返回一个整数。

  Operator +： 可用于将变量转换为数字， eg：var x = +"5";      // x 是一个数字

正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式，用于文本搜索search()和文本替换replace()。

• search() 方法：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

• replace() 方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

正则表达式表单验证实例：

/*是否带有小数*/
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=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;return reg.test(str); }

 

错误：throw, try, catch

• try 语句测试代码块的错误。

• catch 语句处理错误。 JavaScript 语句 try 和 catch 是成对出现的，catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

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

• throw 语句创建或抛出异常(exception)。

 

 调试工具：

• 浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
• console.log();
• IDE 设置断点 或者 代码设置(使用 Debugger 关键字,用于停止执行 JavaScript，并调用调试函数),eg: var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x; # 代码在该行前停止执行

   

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

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

• JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
• JavaScript 只有声明的变量会提升，初始化的不会。eg： var x = 5; // 初始化 xelem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y， 结果为： 5 undefined； y 输出了 undefined var y = 7; // 初始化 y

  实例结果：y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。其类似以下代码：

  var x = 5; // 声明 并 初始化 x var y; // 声明 yelem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 yy = 7; // 设置 y 为 7
• 为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。JavaScript 严格模式(strict mode)不允许使用未声明的变量。

 

JavaScript 严格模式(use strict)：

• 严格模式通过在脚本 或 函数的头部添加 "use strict"; 表达式来声明。eg： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body><h1>使用 "use strict":</h1> <h3>不允许使用未定义的变量。</h3> <p>浏览器按下 F12 开启调试模式，查看报错信息。</p> <script>"use strict";x = 3.14; // 报错 (x 未定义) </script></body> </html> use strict
• 在函数内部声明是局部作用域 (只在函数内使用严格模式)，eg: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body><p>在函数内使用 "use strict" 只在函数内报错。 </p> <p>浏览器按下 F12 开启调试模式，查看报错信息。</p> <script>x = 3.14; // 不报错 myFunction();function myFunction() {"use strict";y = 3.14; // 报错 (y 未定义) } </script></body> </html> 局部 use strict
• 严格模式的限制
  • 不允许使用未声明的变量（对象也是一个变量）；
  • 不允许删除变量或对象；
  • 不允许删除函数；
  • 不允许变量重名；
  • 不允许使用八进制；
  • 不允许使用转义字符；
  • 不允许对只读属性赋值，eg： "use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14; // 报错
  • 不允许对一个使用 getter方法 读取的属性进行赋值，eg： "use strict"; var obj = {get x() {return 0} };obj.x = 3.14; // 报错
  • 不允许删除一个不允许删除的属性；
  • 变量名不能使用 "eval" 字符串；
  • 变量名不能使用 "arguments" 字符串；
  • 不允许使用以下这种语句，eg: "use strict"; with (Math){x = cos(2)}; // 报错
  • 由于一些安全原因，在作用域 eval() 创建的变量不能被调用，eg： "use strict"; eval ("var x = 2"); alert (x); // 报错
  • 禁止this关键字指向全局对象，eg： function f(){return !this; } // 返回false，因为"this"指向全局对象，"!this"就是falsefunction f(){ "use strict";return !this; } // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

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

    function f(){"use strict";this.a = 1; }; f(); // 报错，this未定义
  • 为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字： implements，interface，let，package，private，protected，public，static，yield

    提醒："use strict" 指令只运行出现在脚本或函数的开头。

 

 JavaScript 的使用误区：

• 赋值运算符应用错误： if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。
• 比较运算符常见错误：在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true： var x = 10; var y = "10"; if (x == y) # 返回 true

  在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型。这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较，如下，由于类型不一致不会执行 alert 弹窗：

  var x = 10; switch(x) {case "10": alert("Hello"); # 不会执行该弹窗 }
• 加法连接注意事项：JavaScript 的加法和连接都使用 + 运算符。如下，查看两个数字相加及数字与字符串连接的区别： var x = 10 + 5; // x 的结果为 15 var x = 10 + "5"; // x 的结果为 "105"
• 浮点型数据使用注意事项：JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定，如下： var x = 0.1; var y = 0.2; var z = x + y // z 的结果为 0.3 if (z == 0.3) // 返回 false

  解决以上问题，可以用整数的乘除法来解决：

  var x = 0.1; var y = 0.2; var z = (x * 10 + y *10) / 10; document.getElementById("demo").innerHTML = z;
• 字符串分行：在字符串中直接使用回车换行是会报错的，字符串断行需要使用反斜杠(\)，如下所示： var x = "Hello \ World!";
• 错误的使用分号
• return 语句使用注意事项：JavaScript 默认是在代码的最后一行自动结束。但，以下实例结果会返回 undefined： function myFunction(a) { varpower = 10; returna * power; }

  其等价于：

  function myFunction(a) {varpower = 10; return; // 分号结束，返回 undefineda * power; }

原因：如果是一个不完整的语句，如下所示:

var

JavaScript 将尝试读取第二行的语句：

power = 10;

但是由于这样的语句是完整的:

return

JavaScript 将自动关闭语句:

return;

　　在 JavaScript 中，分号是可选的 。由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。

　　注意：不用对 return 语句进行断行。

• 数组中使用名字来索引：许多程序语言都允许使用名字来作为数组的索引，使用名字来作为索引的数组称为关联数组(或哈希)。
  • JavaScript 不支持使用名字来索引数组，只允许使用数字索引。正确使用，如下： var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var x = person.length; // person.length 返回 3 var y = person[0]; // person[0] 返回 "John"
  • 在 JavaScript 中, 对象 使用 名字作为索引。如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误: var person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; var x = person.length; // person.length 返回 0 var y = person[0]; // person[0] 返回 undefined

• 定义数组元素/对象，最后不能添加逗号

• Undefined 不是 Null

  • null 用于对象, undefined 用于变量，属性和方法。
  • 对象只有被定义才有可能为 null，否则为 undefined。
  • 如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。错误使用： if (myObj !== null && typeof myObj !== "undefined")

    正确的方式：是我们需要先使用 typeof 来检测对象是否已定义：

    if (typeof myObj !== "undefined" && myObj !== null)
• 程序块作用域：在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。如下，以下代码的的变量 i 返回 10，而不是 undefined： for (var i = 0; i < 10; i++) { // some code } return i; # 返回 i 为 10，而不是 undefined

   

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

• 数据验证用于确保用户输入的数据是有效的。典型的数据验证有：
  • 必需字段是否有输入?
  • 用户是否输入了合法的数据?
  • 在数字字段是否输入了文本?

　　　　数据验证可以使用不同方法来定义，并通过多种方式来调用:

• • 服务端数据验证是在数据提交到服务器上后再验证
  • 客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证
• HTML 约束验证：HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。约束验证是表单被提交时浏览器用来实现验证的一种算法。HTML 约束验证基于：
  • HTML 输入属性
  • CSS 伪类选择器
  • DOM 属性和方法 属性 描述 disabled 规定输入的元素不可用 max 规定输入元素的最大值 min 规定输入元素的最小值 pattern 规定输入元素值的模式 required 规定输入元素字段是必需的 type 规则输入元素的类型 完成列表，请查看 HTML 输入属性
    约束验证 CSS 伪类选择器 选择器 描述 :disabled 选取属性为 "disabled" 属性的 input 元素 :invalid 选取无效的 input 元素 :optional 选择没有"required"属性的 input 元素 :required 选择有"required"属性的 input 元素 :valid 选取有效值的 input 元素
    完整列表，请查看 CSS 伪类
• JavaScript 表单验证：JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

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

  • 验证表单数据是否为空？
  • 验证输入是否是一个正确的email地址？
  • 验证日期是否输入正确？
  • 验证表单输入内容是否为数字型？ # 下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）： function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必须填写"); return false;} } # 下面的函数检查输入的数据是否符合电子邮件地址的基本语法。意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号： 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; } }

    .........

 javaScript void：

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

<head> <script type="text/javascript"> <!-- void func() javascript:void func()//或者void(func()) javascript:void(func()) //--> </script> </head>

实例1：下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

<a href="javascript:void(0)">单击此处什么也不会发生</a> // 当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

 实例2：以下实例中，在用户点击链接后显示警告信息：

<a href="javascript:void(alert('Warning!!!'))">点我!</a> // 在用户点击链接后显示警告信息

实例3：以下实例中参数 a 将返回 undefined :

<script type="text/javascript"> function getValue(){var a,b,c;a = void ( b = 5, c = 7 );document.write('a = ' + a + ' b = ' + b +' c = ' + c ); } // </script> </head> <body><p>点击以下按钮查看结果：</p> <form><input type="button" value="点我" οnclick="getValue();" /> // 运行结果：a = undefined b = 5 c = 7 </form></body>

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

  实例：

  <a href="javascript:void(0);">点我没有反应的!</a> <a href="#pos">点我定位到指定位置!</a> <br> ... <br> <p id="pos">尾部定位点</p>

   

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

转载于:https://www.cnblogs.com/ostrich-sunshine/p/6782997.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的JavaScript 笔记(2) -- 类型转换 正则表达 变量提升 表单验证的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。