基础语法 · TUNA-daily

[TOC] ## 1. 变量和数据类型 ### 1.1 定义和赋值变量 var 变量名=值; > 1. 使用var关键词定义变量，var可以省略的，但是不建议省略var > 2. 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。 > 3. js是弱类型语言，使用var来定义任何数据类型 > 4. js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用 > 5. typeof(变量)：查看变量的数据类型 > #### 变量的作用域变量的作用域无非就是两种：全局变量和局部变量。 1. 函数内部可以直接读取全局变量。 2. 在函数外部自然无法读取函数内的局部变量。 3. 函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！ ### 1.2 js的数据类型分类(四种)： > 1. number：无论整数还是小数，都是number类型 > 2. string: 无论字符还是字符串，都是string类型 > 3. boolean > 4. object 对象类型 ~~~ var a = 10; //var a = 20; var b = 3.14; var c = 'c'; var d = "hello"; var e = true; var f = new Object(); document.write("a的值为："+a +",a的数据类型是:"+typeof(a)+" "); document.write("b的值为："+b +",b的数据类型是:"+typeof(b)+" "); document.write("c的值为："+c +",c的数据类型是:"+typeof(c)+" "); document.write("d的值为："+d +",d的数据类型是:"+typeof(d)+" "); document.write("e的值为："+e +",e的数据类型是:"+typeof(e)+" "); document.write("f的值为："+f +",f的数据类型是:"+typeof(f)+" "); ~~~ ### 1.3 类型转换函数 1. string->整数： parseInt(变量) 使用parseInt函数转换时，转换的内容中的第一个是数值类型，就可以继续转换，直到遇到非数组类型为止。 2. string->小数： parseFloat(变量) ~~~ */ var a = "10"; a = "10a"; document.write("a的类型是(转换前)："+typeof(a)+" "); //转换 a = parseInt(a); document.write("a的类型是(转换后)："+typeof(a)+",值为："+a+" "); var b = "3.14"; b = parseFloat(b); document.write("b的类型是(转换后)："+typeof(b)+",值为："+b+" "); ~~~ ### 1.4 运算符 > 1. 算术运算符： + - * / % > 2. 比较运算符： > < >= <= == > 3. 逻辑运算符： && || ! > 4. 三目运算符: 表达式 ? true的结果 : false的结果在js中，布尔值可以用true用1来代表，false用0来代表(可用于数学运算) ~~~ var a = 10; var b = false; document.write("结果为："+(a/b)+" "); document.write("结果为："+(a+b)+" "); ~~~ ### 1.5 流程控制语句 #### 1.5.1 if 语句 ~~~ if语句 if(表达式){ 语句 }else{ 语句 } ~~~ 条件可以是： 1. 布尔值 true：成立； false:不成立 2. number 非0（包括负数）：成立； 0：不成立 3. string 非空字符串：成立；空字符串：不成立 4. object 非null: 成立； null：不成立 #### 1.5.2 swtich语句 ~~~ swtich(变量){ case 选项1: 语句; break; # 不break，就会继续下面选项的语句 case 选项2:：语句; break; default: 默认; } ~~~ ** case的条件： ** > 1. 可以是常量. string,number > 2. 可以是变量。（java是不能是变量） > 3. 可以是表达式（java不能这样） #### 1.5.3 for语句 ~~~ for(初始化语句;判断进入条件;步长语句){ 语句 } ~~~ #### 1.5.4 while语句 ~~~ while(表达式){ true的时候才进入循环语句 } ~~~ #### 1.5.5 do-while ~~~ do{ 语句 }while(表达式) ~~~ #### 1.5.6 for-in语句： 1. 遍历数组 2. 遍历对象属性（遍历对象的成员变量和方法） ~~~ for(var 遍历 in 数组|对象){ } ~~~ ~~~ var arr = [10,20,30,40]; //遍历数组 //使用for循环 for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } document.write("<hr/>"); //使用for-in遍历数组 for(var i in arr){ document.write(arr[i]+","); } */ //定义对象 function Person(name,age){ this.name = name; this.age = age; } //创建对象 var p = new Person("eric",20); //遍历对象 for(var i in p){ document.write(p[i]+" "); } ~~~ #### 1.5.7 with 每次在向浏览器写入东西的时候，document.write("内容")，每次都要写document，使用with就可以简化书写 ~~~ with(对象){ 直接写该对象的方法实现调用，而不用写对象点的形式调用 } ~~~ 例如： ~~~ with(document){ for(var i=1;i<=5;i++){ for(var j=1;j<=i;j++){ write("* "); // 不用document.write } write(" "); } write("<hr/>"); for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ write(i+"*"+j+"="+(i*j)+" "); } write(" "); } ~~~ ### 1.6 函数 ~~~ 函数定义： function 函数名称(形式参数列表){ 语句 } ~~~ > 1. js的函数使用function定义，但是形式参数列表不能使用var关键词 > 2. js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型 > 3. js没有方法重载的概念，后面定义的函数会覆盖前面的函数。 > 4. js中的形式参数和实际参数的数量可以不一致，依然可以调用。 > 5. js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。 > 6. arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数 ### 1.7 基于对象编程（内置对象） #### 1.7.1 String对象 ##### 生成String对象的方法 1. new String（） ~~~ var str1 = new String("hello"); var str2 = new String("hello"); document.write("结果："+(str1==str2)+" "); //false,比较对象地址 document.write("结果："+(str1.valueOf()==str2.valueOf())); //true,比较对象内容 ~~~ 2. 字符串 ~~~ var str1 = "hello"; var str2 = "hello"; document.write("结果："+(str1==str2)+" "); //true,存在于常量池中的同一个String对象 ~~~ ##### 常用方法 > 1. charAt(): 返回指定索引的内容 > 2. indexOf(): 返回首次出现指定字符的索引位置 > 3. lastIndexOf(): 返回最后出现指定字符的索引位置 > 4. fontcolor(): 直接给字符串添加颜色 > 5. replace(): 替换指定的字符串 > 6. split(): 使用指定字符串切割字符串，返回字符串数组 > 7. substring(start,end); 截取字符串，start：开始索引， end:结束索引 > 8. substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度 #### 1.7.2 Number对象类似于String ~~~ var num1 = new Number(20); var num2 = new Number(20); var num1 = 20; var num2 = 20; ~~~ #### 1.7.3 Boolean对象 #### 1.7.5 Math对象 > 1. ceil()：向上取整。如果有小数部分的话，直接+1 > 2. floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位 > 3. round(): 四舍五入取整。满5进一 > 4. random(): 生成一个随机的0-1的小数 .包含0，不包含1 > 5. max(): 返回最大值 > 6. min(): 返回最小值 > ~~~ var num = 3.50; document.write(Math.ceil(num)+" "); //4 document.write(Math.floor(num)+" "); //3 document.write(Math.round(num)+" "); //4 document.write(Math.round(Math.random()*100)+" "); document.write(Math.max(10,6,54,23,76)+" "); //76 document.write(Math.min(10,6,54,23,76)+" "); //6 ~~~ #### 1.7.6 Date对象 ##### 创建对象 ~~~ var date = new Date(); //取当前系统日期时间 java: SimpleDateFormat对象 yyyy-MM-dd 格式化 //document.write(date); //默认格式 //年份 document.write(date.getFullYear()+"年"); //月 document.write((date.getMonth()+1)+"月"); //日 document.write(date.getDate()+"日"); //星期 document.write("星期"+date.getDay()+" "); //时 document.write(date.getHours()+"时"); //分 document.write(date.getMinutes()+"分"); //秒 document.write(date.getSeconds()+"秒"); ~~~ ##### 网页时钟 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页时钟</title> </head> <body> 当前的日期为： </body> <script type="text/javascript"> function genNewDate(){ //生成一个系统的当前时间，格式：2015-06-01 15:22:30 var date = new Date(); //当前日期时间的字符串 var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); //把日期字符串放到span中 //得到span对象 var dateTip = document.getElementById("dateTip"); //读到了没有加载的标签，无法读取的 //设置span的innerHTMl属性给span赋值 dateTip.innerHTML=dateStr; } //设置定时器，每个多少毫秒调用1次任务（函数） window.setInterval("genNewDate()",1000); //每秒钟调用一次genNewDate函数去更新时间 </script> </html> ~~~ #### 1.7.7 Array数组对象 1. 数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。 2. js的数组可以存放任意类型的元素。 ##### 创建数组 1. new ~~~ //1.1 指定数组长度 //var arr = new Array(3); //1.2 不指定数组长度、默认0个元素 //var arr = new Array(); //1.3 指定具体内容 //var arr = new Array(10,"hello",true); ~~~ 2. 直接指定内容 ~~~ var arr = [10,"java",false]; arr[0]=10; arr[1]="hello"; arr[2]=true; for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } ~~~ ##### 常用的方法： 1. join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串 2. reverse(): 反转数组中的元素 ~~~ var arr = ["java","net","php","ios"]; var str = arr.join("-"); document.write(str); for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } document.write("<hr/>"); //反转 arr = arr.reverse(); for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } ~~~ ### 1.8 自定义对象 java：使用class来定义对象 javascript：使用function来定义对象 #### 1.8.1 有参数的构造函数 ~~~ //定义对象 function 对象名称(形式参数){ 定义属性定义方法 } //创建对象 var 变量 = new 对象名称(实际参数); ~~~ 例：定义人对象 ~~~ function Person(name,age){ //this: 表示当前调用的对象 //定义属性赋值 this.name = name; this.age = age; //定义方法 this.say = function(){ alert("这个对象的方法"); } } //创建人对象 var p = new Person("狗娃",12); ~~~ #### 1.8.2 无参数的构造函数通过追加属性填值 ~~~ //定义对象 function Person(){ } //创建对象 var p = new Person(); //追加属性 p.name = "狗剩"; p.age = 14; //追加方法 p.say = function(){ alert("狗剩的函数"); } ~~~ #### 1.8.3 使用Object对象。 Object对象可以作为任意对象的模板 ~~~ //创建对象 var p = new Object(); //追加属性 p.name = "狗蛋"; p.age = 16; //追加方法 p.say = function(){ alert("狗蛋的函数"); } ~~~ #### 1.8.4 使用字面量的形式创建对象（json） ~~~ //直接创建人对象 var p = { //定义属性（属性名：属性值） "name":"铁蛋", "age": 20, //定义方法 "say":function(){ alert("铁蛋的函数"); } }; //查看属性值 document.write(p.name); document.write(p.age); //调用对象方法 p.say(); document.write(" "); //使用for-in遍历对象（成员变量和方法） for(var i in p){ document.write(p[i]+" "); } ~~~ ### 1.9 原型 1. js的每个对象中都包含有了原型属性（prototype） 2. 如果往某个对象的原型属性添加了方法，那么添加的这个方法就会自动地添加到当前对象的方法中。 3. 原型的作用：给内置对象追加方法的 ~~~ /* 给Array追加一个search和max方法 */ Array.prototype.search = function(target){ //遍历 for(var i=0;i<this.length;i++){ if(this[i]==target){ return i; } } return -1; //找不到就是-1 } Array.prototype.max = function(){ //存储最大值 var max = this[0]; for(var i=1;i<this.length;i++){ if(this[i]>max){ max = this[i]; } } return max; } var arr = [10,43,21,65,3,87]; var index = arr.search(87); document.write("位置是："+index+" "); var max = arr.max(); document.write("最大值："+max); ~~~