这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了带领大家学习 javascript 基础篇 (一) 之基本概念的相关资料, 需要的朋友可以参考下
学习目录
一、数据类型
数据类型
二、操作符
递增和递减操作符:
位操作符: 布尔操作符: 加性操作符: 相等操作符
三、语句 for-in 语句 label 语句
一、数据类型
数据类型
基本数据类型(五种)
Undefined Null Boolean Number String
复杂数据类型(一种)
Object Undefined:只有一个值 undefined(定义了没有赋值)。
例:
- var str;
- alert(str); //undefined
注意:如果没有用 var 申明,直接使用会报异常( ... is not defined)。
建议:每次 var 声明都赋初始值,可以减少很多意外情况。
如:
- var str;
- var str2 = "张三";
- str = str + str2;
- alert(str); //并不是我们意料中的"张三"
Null: 略
Boolean:只有两个字面值: true 和 false。
任何数据类型通过 Boolean()函数都可以转成 Boolean 类型。
String:非空字符 =>true 空字符 =>false Number:任何非零 =>true 0 和 NaN=>false Object: 任何对象 =>true null=>false Undefined undefined=>false
如:
- var str = Boolean(NaN);
- var str2 = Boolean("张三");
- var str3 = Boolean(undefined);
- alert(str + " " + str2 + " " + str3);
既然如此,我们在使用 if 语句的时候会自动执行相应的 Boolean 转换。
- if (str) {
- //str只要是非空字符、任何非零数字、任何非null对象 都是true
- //str只要是空字符、0、NaN、null、undefined 都是false
- //这样就省去了 我们一个个的判断了
- alert("true");
- }
String:略
二、操作符
递增和递减操作符:
【++num、--num、num++、num--】
- var age = 3,
- age2 = 3;
- age++; ++age2;
- alert(age + " " + age2);
都是 4,好像看不出有什么不同。
- var age = 3,
- age2 = 3,
- num1, num2;
- num1 = age+++1;
- num2 = ++age2 + 1;
- alert(num1 + " " + num2);
好,区别来了。一个任然是 4,一个变成了 5。为什么会这样呢?优先级不同而已,age++ 先执行运算符 + 然后在自身加 1,++age 先自身加 1 然后再通过 + 运算符加 1。
位操作符:
【按位非 NOT(~)、按位与 AND(&)、按位或 OR(|)、按位异或 XOR(^)、左移 (<<)、有符号的右移 (>>)、无符号右移 (>>>)】 其实平时我们很少用到,这里稍作了解。
例:按位非
var num1 = 25; // 二进制 00000000000000000000000000011001 var num2 = ~num1; // 二进制 11111111111111111111111111100110 alert(num2); // -26
例:按位与
- var result = 25 & 3;
- alert(result); //1
- //*********************
- 25 = 0000 0000 0000 0000 0000 0000 0001 1001
- 3 = 0000 0000 0000 0000 0000 0000 0000 0011
- ---------------------------------------------
- AND = 0000 0000 0000 0000 0000 0000 0000 0001
例:按位异或
- var result = 25 ^ 3;
- alert(result); //26
- //*************
- 25 = 0000 0000 0000 0000 0000 0000 0001 1001
- 3 = 0000 0000 0000 0000 0000 0000 0000 0011
- ---------------------------------------------
- XOR = 0000 0000 0000 0000 0000 0000 0001 1010 //十进制值 26
例:左移
- var oldValue = 2; // 等于二进制的 10
- var newValue = oldValue << 5; // 等于二进制的 1000000,十进制的 64
例:有符号右移
- var oldValue = 64; // 等于二进制的 1000000
- var newValue = oldValue >> 5; // 等于二进制的 10 ,即十进制的 2
例:无符号右移(这个差异有点大,因为第 32 为 1 代表负数的值也移过来了)
- var oldValue = -64; // 等于二进制的 11111111111111111111111111000000
- var newValue = oldValue >>> 5; // 00000111111111111111111111111110 等于十进制的 134217726
布尔操作符:
【逻辑非 (!)、逻辑与(&&)、逻辑或(||)】
这里需要说的就是 && 和 || 是短路操作。|| 如果前面一个满足条件了就不检测后面的条件了,&& 相反前面一个不满足条件就不检测后面的条件了。
例:
- var age = 3;
- if (age || aaa) { //这里的age转Boolean为ture,所以后面的aaa就不检测了。
- alert(age);
- }
- if (aaa || age) { //这里将会报错
- alert(age);
- }
测试:
- var age = 3;
- if (age || aaa) { //这里的age转Boolean为ture,所以后面的aaa就不检测了。alert(age);}if(aaa||age){//这里将会报错alert(age);}
这里可以告诉大家一个小小的技巧,很多时候我们并不知道某个变量是否有值,但是我们又需要正常使用,那么我们可以给个备胎。
如:浏览器的兼容问题,在旧式浏览器中是用 window.event 来取事件的相关属性值,新式浏览器中是直接通过形参的形式传过来的。我们就可以。
- function myonclick(ev) {
- var myevent = ev || window.event;//这样就可以保证新旧浏览器的兼容了
- }
实验:
- var obj = null;
- var obj2 = obj || "备胎";
- alert(obj2);
加性操作符:
【加法(+)、减法(-)】
这个再熟悉不过了,不过还是有一点需要注意。
- var strnum1 = "5";
- var num2 = strnum1 + 3;
- var num3 = strnum1 - 3;
- alert("num2=" + num2 + " num3=" + num3); //这里会是什么结果呢?
让我们来测试一下吧。
- var strnum1 = "5";
- var num2 = strnum1 + 3;
- var num3 = strnum1 - 3;
- alert("num2=" + num2 + " num3=" + num3); //这里会是什么结果呢?
为什么会这样?字符串和数字相加,数字会转为字符串。字符串和数字相减,字符串转为数字。
相等操作符
- var num1 = "5";
- var num2 = 5;
- var isEqual = num1 == num2;
- alert("num1是否等于num2:" + isEqual);
奇怪吧,字符串怎么和数字相等。是的,这里用到了自动转型。但是,我们不想看到这样的结果怎么办?
- var num1 = "5";
- var num2 = 5;
- var isEqual = num1 === num2;
- alert("num1是否等于num2:" + isEqual);
是的,我们可以用 === 全等于。不仅比较数值,还比较类型。
三、语句
for-in 语句
for 循环语句用得多,for-in 可能平时就用的较少了。(for-in 循环应该用在非数组对象的遍历上,使用 for-in 进行循环也被称为 "枚举"。)
例:
- var obj = {
- id: 2,
- name: "张三"
- };
- var str = "";
- for (o in obj) {
- str += "属性:" + o + " 值:" + obj[o] + " ";
- }
- alert(str);
label 语句
感觉和 C# 中的 goto 很像,但又不一样。
我们平时有没有过在多个循环嵌套里面想跳出第二层循环?一般我们只能用 break 或者 continue 跳出最里面的循环,或者 return 跳出整个函数。万万没想到的是,还有一个 label 语句,可以跳出任意层循环。 例:
- var num = 0;
- outermost: for (var i = 0; i < 10; i++) {
- for (var j = 0; j < 10; j++) {
- if (i == 5 && j == 5) {
- break outermost;
- }
- num++;
- }
- }
- alert(num); //55
好了,第一篇差不多就整理到这里了。最后出几个有趣的题目给大家。
一、为什么 1=0.9999999999…… 二、为什么 alert(0.1 + 0.2)//0.30000000000000004 三、为什么 alert(0123 + 4)//87
四、
var obj1 = {}; obj1.name2 =" 张三 "; var str1 = "test"; str1.name2 = "李四"; alert(obj1.name2 +" "+ str1.name2); // 弹出值是什么
五、
var obj1 = {name2:"111"}; var obj2 = obj1; obj1.name2 = "222"; alert(obj2.name2);// 这里弹出什么? obj1 = {name2:"333"}; alert(obj2.name2);// 这里弹出什么?
六、
var fun = function (num1) {if (num1 <= 1) {return 1;} else {return num1 * fun(num1 - 1); } } var fun2 = fun; fun = function () {return 1;} alert(fun2(5));// 这里弹出什么?
还有点时间在给大家介绍 JavaScript 基本数据类型
JavaScript 的基本数据类型包括 6 种:number/string/boolean/object/function/undefined。
2.1 number 类型
number 类型用来存储数值,它描述的是 64 位的浮点型数值。但 Javascript 并不能表示 0-2e64 之间的所有数值,因为它还需要表示非整数,包括复数、分数等。对于 64 位来说,需要使用 11 位来存储数字的小数部分,使用 1 位来表示正负,所以 JavaScript 实际上可以表示 - 2e52 到 2e52 之间的值。
2.2 string 类型
string 类型用来表示文本,可以使用单引号或者双引号来包括文本,任何放在引号内的符号,都会被认为是 string,但对于特殊符号,可能需要转义处理。
2.3 boolean 类型
boolean 类型只包括两个值:true 和 false。我们可以在程序中使用各种 boolean 表达式来得到 true 或者 false,从而实现不同的业务分支处理。
我们可以在表达式中包含多个条件,条件之间可以是与或非的关系,在计算时,优先级如下:|| 的优先级最低,其次是 &&,然后是比较运算符,最后是其他运算符(例如!)。
和其他许多语言一样,对于 && 来说,当前面的条件为 false 时,后面的条件不再计算,对于 || 来说,当前面的条件为 true 时,后面的条件不再计算。
来看下面的例子:
- function conditionTest() {
- var a = ;
- var b = ;
- var c = {
- "key": "old"
- };
- print(c["key"]);
- if (a == ) print("a = ");
- if (a == &&b == ) print("a == && b == ");
- if (a == ||changeValue(c)) print(c["key"]);
- if (a == &&changeValue(c)) print(c["key"]);
- }
- function changeValue(obj) {
- obj["key"] = "changed";
- return true;
- }
它的输出结果如下:
- old
- a = 1
- a == 1 && b == 1
- old
- changed
可以看出,在使用 || 时,没有调用 changeValue 方法。
2.4 undefined 类型
当我们声明了一个变量,但是没有对其赋值时,它就是 undefined 的,就像下面这样
var b; print(b);
在 Javascript 中,还有一个和 undefined 类似的值:null。undefined 表示 "变量已声明但是没有复制",null 表示 "变量已赋值但为空",需要注意的是 undefined==null 的值为 true。
2.5 类型转换
我们在上面提到了 undefined == null 的值是 true,但我们使用 typeof 操作时可以发现,null 是 object 类型,这说明在比较的过程中,发生了类型转换。
类型转换是指将一种类型的值转换成另外一种类型的值。我们使用 == 进行比较时,会有类型转换,我们可以使用 === 来禁止类型转换。
来看下面的例子:
- function convertTypeTest(){
- var a = ;
- var b = "";
- print ("a:" + a);
- print ("b:" + b);
- print ("type of a:" + typeof a);
- print ("type of b:" + typeof b);
- print ("a==b:" + (a == b));
- print ("a===b:" + (a === b));
- print ("a===Number(b):" + (a === Number(b)));
- print ("String(a)===b:" + (String(a) === b));
- print ("type of undefined:" + typeof undefined);
- print ("type of null:" + typeof null);
- print ("undefined==null:" + (undefined == null));
- print ("undefined===null:" + (undefined === null));
- }
输出结果如下:
- a:1
- b:1
- type of a:number
- type of b:string
- a==b:true
- a===b:false
- a===Number(b):true
- String(a)===b:true
- type of undefined:undefined
- type of null:object
- undefined==null:true
- undefined===null:false
可以很明显看到 == 和 === 的区别。
来源: http://www.phperz.com/article/17/0408/268545.html