标签:目录 gets obj indexof 正则 比较运算符 get nal 用户
目录:
typeof, null, undefined, valueOf()
类型转换
正则表达式
错误: try, catch, throw
调试工具
变量提升
strict 严格模式
使用误区
表单 & 表单验证
JavaScript void
typeof, null, undefined, valueOf()
typeof "John"; // 返回 string
在 JavaScript 中有 5 种不同的数据类型:string, number, boolean, object, function
3 种对象类型: Object, Date, Array
2 个不包含任何值的数据类型:null, undefined
强调:
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
var person; // 值为 null(空), 但仍然是一个对象。 用 typeof 检测 null 返回是object。
可用于清空对象,eg:
var person = null; // 值为 null(空), 但类型为对象
# 对比 使用 undefined 来清空对象: var person = undefined; // 值为 undefined, 类型为 undefined
Undefined 和 Null 的区别 typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var v=fruits.valueOf(); # fruits.valueOf() 与 fruits 返回值一样。 # 输出结果为: Banana,Orange,Apple,Mango
valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。
注意:valueOf() 方法不会改变原数组。
类型转换:
5 + null // 返回 5 null 转换为 0 "5" + null // 返回"5null" null 转换为 "null" "5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5
.........
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)。
调试工具:
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x; # 代码在该行前停止执行
变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
var x = 5; // 初始化 x elem = 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; // 声明 y elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y y = 7; // 设置 y 为 7
JavaScript 严格模式(use strict):
<!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>
<!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";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // 报错
"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14; // 报错
"use strict";
with (Math){x = cos(2)}; // 报错
"use strict";
eval ("var x = 2");
alert (x); // 报错
function f(){
return !this;
}
// 返回false,因为"this"指向全局对象,"!this"就是false
function f(){
"use strict";
return !this;
}
// 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。
function f(){
"use strict";
this.a = 1;
};
f(); // 报错,this未定义
implements,interface,let,package,private,protected,public,static,yield
提醒:"use strict" 指令只运行出现在脚本或函数的开头。
JavaScript 的使用误区:
var x = 10;
var y = "10";
if (x == y) # 返回 true
在严格的比较运算中,=== 为恒等计算符,同时检查表达式的值与类型。这种错误经常会在 switch 语句中出现,switch 语句会使用恒等计算符(===)进行比较,如下,由于类型不一致不会执行 alert 弹窗:
var x = 10;
switch(x) {
case "10": alert("Hello"); # 不会执行该弹窗
}
var x = 10 + 5; // x 的结果为 15 var x = 10 + "5"; // x 的结果为 "105"
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!";
function myFunction(a) {
var
power = 10;
return
a * power;
}
其等价于:
function myFunction(a) {
var
power = 10;
return; // 分号结束,返回 undefined
a * power;
}
原因:如果是一个不完整的语句,如下所示:
var
JavaScript 将尝试读取第二行的语句:
power = 10;
但是由于这样的语句是完整的:
return
JavaScript 将自动关闭语句:
return;
在 JavaScript 中,分号是可选的 。由于 return 是一个完整的语句,所以 JavaScript 将关闭 return 语句。
注意:不用对 return 语句进行断行。
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"
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
if (myObj !== null && typeof myObj !== "undefined")
正确的方式:是我们需要先使用 typeof 来检测对象是否已定义:
if (typeof myObj !== "undefined" && myObj !== null)
for (var i = 0; i < 10; i++) { // some code } return i; # 返回 i 为 10,而不是 undefined
JavaScript 表单验证:HTML 表单验证可以通过 JavaScript 来完成。
数据验证可以使用不同方法来定义,并通过多种方式来调用:
属性 描述
disabled 规定输入的元素不可用
max 规定输入元素的最大值
min 规定输入元素的最小值
pattern 规定输入元素值的模式
required 规定输入元素字段是必需的
type 规则输入元素的类型
完成列表,请查看 HTML 输入属性
约束验证 CSS 伪类选择器
选择器 描述
:disabled 选取属性为 "disabled" 属性的 input 元素
:invalid 选取无效的 input 元素
:optional 选择没有"required"属性的 input 元素
:required 选择有"required"属性的 input 元素
:valid 选取有效值的 input 元素
完整列表,请查看 CSS 伪类
表单数据经常需要使用 JavaScript 来验证其正确性:
# 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 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="点我" onclick="getValue();" /> // 运行结果:a = undefined b = 5 c = 7 </form> </body>
(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":
JavaScript 笔记(2) -- 类型转换 & 正则表达 & 变量提升 & 表单验证
标签:目录 gets obj indexof 正则 比较运算符 get nal 用户
原文地址:http://www.cnblogs.com/ostrich-sunshine/p/6782997.html