JS基础知识二(函数、全局/局部变量、对象、方法)
一. 函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //定义一个函数 function sayHello(name) { //注意：函数参数的声明不需要加上var关键字。 alert("hello " + name); } function getName() { return "小宝"; //如果需要返回数据就使用return。否则就不需要写return。 } var getName = function(name) { //如果存在同名函数，那么后面定义函数会覆盖前面定义的函数。 return "大宝"; }; //sayHello("python"); //如果函数有参数，调用函数的时候需要传入参数。 var username = getName(); alert(username); </script> </head> <body> </body> </html>
二. 全局变量和局部变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //var num = 10; //全局变量，可以被改页面中所有的函数引用 function test1() { num = 10; //局部变量，只能够在当前函数中有效。 // 在函数中定义变量时候不加var，浏览器就会在全局中定义该变量。 alert(num); } function test2() { alert(num); //可以访问到test1函数中定义的num。为什么？ } test1(); test2(); </script> </head> <body> </body> </html>
三. 自定义对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //自定义对象 function Person() {} //使用New关键字创建对象 var person = new Person(); //创建User对象，赋值给user变量 //对象可以有属性（事物特征）和方法（事物行为） person.name = "张三"; //给person对象添加name属性 person.age = 18; //给person对象添加age属性 person.eat = function() { //给person对象添加eat方法(行为) alert(this.name + "正在吃饭..."); //this代表当前方法的调用者对象 }; //调用对象的属性 //alert(person.name + ", " + person.age); //调用对象的方法 person.eat(); </script> </head> <body> </body> </html>
四. 创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function Person(name, age) { this.name = name; //this就是代表当前对象。 this.age = age; this.sleep = function() { alert(this.name + "正在睡觉..."); //this代表当前函数的调用者对象 } } var person = new Person("李四", 20); //alert(person.name + "," + person.age); person.sleep(); </script> </head> <body> </body> </html>
五. 使用Object创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var person = new Object(); person.name = "小钟"; person.age = 25; person.code = function() { alert(this.name + "正在写代码..."); }; // alert(person.name + ", " + person.age); person.code(); </script> </head> <body> </body> </html>
六. 使用json语法创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //json语法创建对象 var person = { name : "太白金星", age : 20, run: function() { alert(this.name + "正在跑步..."); } }; // alert(person.name + ", " + person.age); person.run(); </script> </head> <body> </body> </html>
七. string对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var s1 = "10"; var s2 = new String("10"); var s3 = new String("10"); //alert(typeof(s1)); //string //alert(typeof(s2)); //object //alert("s1 == s2 ?" + (s1 == s2)); //true //alert("s2 == s3 ?" + (s2 == s3)); //false </script> </head> <body> </body> </html>
八. string对象的常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var country = "中国".fontcolor("red"); //<font color=“red”>中国</font> document.write(country.concat("<br/>")); var str = "Hello World Hello World"; document.write(str.charAt(6) + "<br/>"); //根据索引查找字符 document.write(str.charCodeAt(6) + "<br/>"); //根据索引查找字符的unicode编码 document.write(str.indexOf("World") + "<br/>"); //查找字符串中指定子串的第一次出现的索引值 document.write(str.lastIndexOf("World") + "<br/>"); //查找字符串中子串最后出现的索引值 document.write(str.substring(12, 17) + "<br/>"); //提取字符串指定开始和结束位置的内容 document.write(str.substr(12, 5) + "<br/>"); //提取字符串中指定内容，第一个参数开始位置，第二个参数提取字符的长度 document.write(str.valueOf()); //返回字符串的内容 </script> </head> <body> </body> </html>
九. 案例：实现字符串的反转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //案例：定义一个函数，实现字符串的反转功能 function reverse(srcStr) { //定义一个循环，从字符串的右边开始获取每一个字符 var tempStr = ""; for (var i = srcStr.length - 1; i >= 0; i--) { var c = srcStr.charAt(i); //把获取到的字符重新拼接成新的字符串 // tempStr = tempStr + c; tempStr += c; } return tempStr; } var s = reverse("abcd"); alert(s); </script> </head> <body> </body> </html>
十. Number对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*var num = 10; // var num = new Number(10); document.write("二进制：" + num.toString(2) + "<br/>"); document.write("三进制：" + num.toString(3) + "<br/>"); document.write("八进制：" + num.toString(8) + "<br/>"); document.write("十进制：" + num.toString() + "<br/>"); document.write("十六进制：" + num.toString(16) + "<br/>");*/ /* 执行parseInt函数的时候，默认它只会把字符串第一个非数字（包含空格）前面字符进行转换。 如果第一个字符是非数字（不包含空格），那么转换结果为NaN。 */ var s = "1 0"; //把字符串转换成Number var num = parseInt(s); //把字符串转换成number document.write("num的类型：" + typeof(num) + "<br/>"); document.write(num + "<br/>"); //NaN </script> </head> <body> </body> </html>
十一. Math对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> document.write("绝对值: " + Math.abs(-10) + "<br/>"); document.write("向上取整: " + Math.ceil(3.14) + "<br/>"); document.write("向下取整: " + Math.floor(3.14) + "<br/>"); document.write("四舍五入: " + Math.round(3.14) + "<br/>"); document.write("求最大值: " + Math.max(3, 5) + "<br/>"); document.write("求最小值: " + Math.min(3, 5) + "<br/>"); document.write("生成随机数: " + Math.random() + "<br/>"); //生成0~1之间的随机数，不包含1. </script> </head> <body> </body> </html>
十二. 生成四位数验证码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //案例：在网页上生成一个四位数的验证码 var vrcode = ""; for (var i = 0; i < 4; i++) { var num = Math.floor(Math.random() * 10); //0~9.99999999999999999 vrcode += num; } document.write(vrcode); </script> </head> <body> </body> </html>
十三. Date对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function getDate(d) { //alert(d.getTime()); //获取当前时间的毫秒数 var yy = d.getFullYear(); //获取年份 var mm = d.getMonth() + 1; //获取月份 var dd = d.getDate(); //获取日 var hh = d.getHours(); //获取小时 var min = d.getMinutes(); //获取分钟 var sec = d.getSeconds(); //获取秒 //document.write(yy + "年" + mm + "月" + dd + "日 " // + hh + "时" + min + "分" + sec + "秒"); return yy + "年" + mm + "月" + dd + "日 " + hh + "时" + min + "分" + sec + "秒"; } var d = new Date(); //代表当前时间的Date对象 var dateStr = getDate(d); document.write(dateStr); </script> </head> <body> </body> </html>
十四. Array对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*var arr1 = new Array(); //定义空数组 var arr2 = new Array(10); //定义默认长度的数组 var arr3 = new Array(10, 20, 30); //定义数组时候指定数组元素*/ var arr4 = [10, 20, 30]; var arr5 = [11, 22, 33]; //arr4 = arr4.concat(40, 50); //该方法返回拼接后的新数组 arr4 = arr4.concat(arr5, 99, 100); //document.write("第一个元素: " + arr4[0] + "<br/>"); //document.write("第二个元素: " + arr4[1] + "<br/>"); //循环数组 for (var i = 0; i < arr4.length; i++) { document.write(arr4[i] + ","); } </script> </head> <body> </body> </html>
十五. Array对象的常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //把数组转换成字符串 //第一个参数代表待转换的数组，第二参数代表分隔符 //返回数组的字符串表示形式 function join(arr, sep) { var arrStr = ""; for (var i = 0; i < arr.length; i++) { arrStr = arrStr + arr[i] + sep; } return arrStr.substring(0, arrStr.length - 1); } var arr = ["java", "python", "go"]; //var str = join(arr, ":"); var str = arr.join(";"); alert(str); </script> </head> <body> </body> </html>
十六. 扩展对象功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*//查询数组的某个元素，返回该元素在数组中的索引值。如果没有该元素，就返回-1。 function search(arr, key) { //key代表要查找的元素 for (var i = 0; i < arr.length; i++) { if (arr[i] == key) { return i; } } return -1; } var arr = [20, 33, 9, 11, 100]; var i = search(arr, 99); alert(i);*/ Array.prototype.search = function(key) { for (var i = 0; i < this.length; i++) { //this代表当前数组对象 //谁调用search方法，this就代表谁 if (this[i] == key) { return i; } } return -1; }; var arr = [20, 33, 9, 11, 100]; var i = arr.search(33); alert(i); </script> </head> <body> </body> </html>
十七. push和pop方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var arr = new Array(); arr.push("小宝"); arr.push(18); arr.push(new Date()); //alert(arr); var temp = arr.pop(); //移除并返回最后一个元素 alert(temp); alert(arr); </script> </head> <body> </body> </html>
十八. reverse方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var arr = [10, 20, 30]; /*var newArr = new Array(); for (var i = arr.length - 1; i >= 0; i--) { newArr.push(arr[i]); } alert(newArr);*/ arr.reverse(); //反转数组 alert(arr); </script> </head> <body> </body> </html>
十九. slice方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //slice: 返回指定开始和结束位置元素所组成的新数组 var arr = [10, 20, 30, 40, 50, 99, 100]; function slice(arr, start, end) { var newArr = new Array(); while (start < end) { newArr.push(arr[start]); start++; } return newArr; } var tempArr = slice(arr, 2, 5); //var tempArr = arr.slice(2, 5); //提取数组中开始和结束位置之间的元素， // 并返回这些元素锁组成的新数组 alert(tempArr); </script> </head> <body> </body> </html>
二十. splice方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var arr = [10, 20, 30, 40, 50, 99, 100]; var delArr = arr.splice(2, 3, 11, 22, 33); //从下标为2的元素开始移除3个元素， // 并且在原来移除位置插入11， 22， 33 alert(delArr); alert(arr); </script> </head> <body> </body> </html>
二十一. sort方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var arr = ['a', 'c', 'h', 'e']; //var arr = [10, 44, 22, 15] //arr.sort(); //按照元素的ascii码进行升序排列 //alert('a' - 'b'); //alert("a".charCodeAt(0)); arr.sort(function(a, b) { // return a - b; //升序 //return b - a; //序列 return b.charCodeAt(0) - a.charCodeAt(0); }); alert(arr); </script> </head> <body> </body> </html>
二十二. tofixed方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var num = 13 / 3; alert(num.toFixed(2)); //返回2位小数的字符串 </script> </head> <body> </body> </html>
