一步步学习javascript基础篇(1):基本概念
一、数据类型
数据类型
基本数据类型(五种)
- 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); //
//*********************
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); //
//*************
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)//
四、
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
一步步学习javascript基础篇(1):基本概念的更多相关文章
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
- 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)
上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...
- 一步步学习javascript基础篇(4):面向对象设计之创建对象(工厂、原型和构造函数等模式)
前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...
- 一步步学习javascript基础篇(7):BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
- 一步步学习javascript基础篇(6):函数表达式之【闭包】
回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; } //函数声明语法定义 2. var sum = funct ...
- 一步步学习javascript基础篇(2):作用域和作用域链
作用域和作用域链 js的语法用法非常的灵活,且稍不注意就踩坑.这集来分析下作用域和作用域链.我们且从几道题目入手,您可以试着在心里猜想着答案. 问题一. if (true) { var str = & ...
- 一步步学习javascript基础篇(9):ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
随机推荐
- LeetCode 22. Generate Parentheses
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- Oracle跟踪文件
1.跟踪文件分类 1)计划内的.由用户请求所产生的跟踪文件 2)计划外的.数据库服务器自动产生的跟踪文件 2.计划内的.由用户请求所产生的跟踪文件 2.1 生成 ①alter session set ...
- Python初探-购物车程序
要求: 1,用户进入后,有欢迎语并提示用户输入本金 2.用户输入正确的内容后有购物菜单显示给用户 3.当用户的本金不足以购买商品的时候有提示余额不足并告知差额 4.成功购物后提示已购买内容和购买后的余 ...
- winform快速开发平台 -> 基础组件之分页控件
一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...
- Makefile笔记之一 ------ 变量的引用及赋值
1.变量的引用方式: "$(变量名)"或者"¥{变量名}" 例如: ${Objs}就是取变量Objs的值 注意: 当变量名为单字符是可以采用:"$a& ...
- Java多线程之构造与发布
资料来源 http://www.ibm.com/developerworks/library/j-jtp0618/ http://www.javaspecialists.eu/archive/Issu ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
- .net 开发---windows服务
因为想把quartz.net自动run的程式挂到windows服务中去,遇到问题记录 1.创建windows服务后,利用C:\Windows\Microsoft.NET\Framework\v4.0. ...
- hihocoder挑战赛13A
#1191 : 小W与网格 描述 给定一个n*m的网格,左上角(1, 1),右下角(n, m). 小w在(i, j),他会从"上左下右"四个方向中选定两个不同但正交的方向,然后他只 ...
- 原生js实现查询天气的小应用
demo:https://zsqosos.github.io/weather/ 截图: 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的AP ...