一步步学习javascript基础篇（1）:基本概念

本文做为第一篇javascript学习系列文章，首先介绍一些基本的知识点和一些平时我们不知道的小技巧、冷知识。（数据类型、操作符、语句）。

一、数据类型

数据类型

基本数据类型（五种）

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));//这里弹出什么？

有兴趣的同学可以思考或者翻阅资料。

这是学习记录，不是教程。文中错误难免，您可以指出错误，但请不要言辞刻薄。

原文链接：http://haojima.net/zhaopei/511.html

本文已同步至目录索引：一步步学习javascript

欢迎上海“程序猿/媛”、”攻城狮”入群：【沪猿】229082941 入群须知

本文链接：https://www.cnblogs.com/zhaopei/p/4986017.html