javascript
Web前端开发JavaScript基础(3)
JavaScript 一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,內置支持類型,它的解釋器被稱為JavaScript引擎,是瀏覽器的一部分,并且是被廣泛用于客戶端的腳本語言,JavaScript最早是在HTML網頁上使用,它是屬于網絡的腳本語言,現在已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果,通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的,現在隨著node.js引擎的出現,使得JavaScript逐步成為了一種全棧開發語言了.
JavaScript 代碼引入
JS通常有兩種引入方式,理論上引入命令在body和head中都可以,但是推薦放在body代碼塊底部,因為Html代碼是從上到下執行,如果Head中的js代碼耗時嚴重,就會導致用戶長時間無法看到頁面,如果放置在body代碼塊底部,那么即使js代碼耗時嚴重,也不會影響用戶看到頁面效果,只是js實現特效慢而已,規范化我們就直接將JS代碼統統放在body的最底部.
引入方式(1): 第一種引入方式就是在body標簽的區域內直接使用<script></script>方式來引用代碼.
<body><script type="text/javascript">alert("hello lyshark")</script> </body>引入方式(2): 這是第二種引入方式,也就是在需要使用的地方直接引入一個外部js文件,通常寫在<head>標簽里.
<head><meta charset="UTF-8"><script src="test.js" type="text/javascript"></script><script src="/js/test.js" type="text/javascript"></script><script src="//cnd.mkdirs.com/test.js" type="text/javascript"></script> </head>JavaScript 定義變量
變量是程序設計語言里最重要、最基本的概念,與強類型語言不同的是 JavaScript 是弱類型語言,同一個變量可以一會存儲數值,一會存儲字符串,變量聲明有兩種方式,即顯式聲明和隱式聲明,根據變量定義的范圍不同,變量有全局變量和局部變量之分,直接定義的變量是全局變量,全局變量可以被所有的腳本訪問,在函數里定義的變量稱為局部變量,局部變量只在函數內有效.如果全局變量和局部變量使用相同的變量名,則局部變量將覆蓋全局變量.
定義局部變量: 如下函數內局部變量必須以var開頭,如果在函數內未使用var,系統默認也是定義局部變量.
<body><script type="text/javascript">function func() {names = "lyshark"; //函數內部默認轉成局部變量var age = 21; //定義局部變量標準寫法gender = "Man"; //默認局部變量alert("姓名:" + names);alert("年齡:" + age);alert("性別:" + gender);}func() //調用函數,不掉用則不執行</script> </body>定義全局變量: 如果我們想要定義全局變量,只需要在函數體外部定義,解釋器默認將外部變量當成全局變量.
<body><script type="text/javascript">var func_names = "lyshark" //定義全局變量func_novar = "hello" //定義全局變量function func() {alert("打印全局變量:" + func_names)alert("打印全局變量:" + func_novar)}func() //調用函數,不掉用則不執行</script> </body>JavaScript 數據類型
JavaScript 是弱類型腳本語言,聲明變量時無需指定變量的數據類型, JavaScript 變量的數據類型是解釋時動態決定的,但 JavaScript 的值保存在了內容中,也是有數據類型的 JavaScript 的基本數據類型有以下5種:
● 數值類型: 數值類型包含整數和浮點數
● 布爾類型: 布爾類型包括True和False
● 數組類型: 數組是一系列數據的集合
● 字符串類型: 字符串類型必須以雙引號引起來
● undefined: 用來確定一個已經創建但沒有初始值的變量
● null: 用于表明某個變量的值為空
◆數值類型◆
與強類型語言,如C,JAVA,C++不同 JavaScript 的數值類型不僅包括所有的整型變量,也包括所有的浮點型變量, JavaScript 語言中的數值都以 IEEE754一1985 雙精度浮點數格式保存. JavaScript 中的數值形式非常豐富,完全支持用科學計數法表示.
整數變量: 使用顯式方式聲明三個變量,num1=1024,num2=5E2,num3=1.23e-3.
<body><script type="text/javascript">var num1 = 1024;var num2 = 0x1A;var num3 = 10;var num4 = 20;document.write("兩個數相加:" + (num3 + num4 ))</script> </body>浮點數變量: 分別聲明四個浮點數變量,其中表示方式可以有以下四種形式.
<body><script type="text/javascript">var num1 = 3.5659;var num2 = -8.1E12;var num3 = .1e12;var num4 = 32E-12;document.write("輸出一個浮點數:" + num2)</script> </body>特殊的數值: 除了上面的數值表示類型外,JS默認定義了一些常量用來表示更多的類型值.
<body><script type="text/javascript">document.write("表示無窮大的特殊值:" + Infinity)document.write("特殊的非數字值:" + NaN)document.write("表示最大值:" + Number.MAX_VALUE)document.write("表示最小值:" + Number.MIN_VALUE)document.write("特殊的非數字值:" + Number.NaN)document.write("表示正無窮大的特殊值:" + Number.POSITIVE_INFINITY)document.write("表示負無窮大的特殊值:" + Number.NEGATIVE_INFINITY)</script> </body>數字轉換: parseInt(..)方法,可以實現將一個字符串轉換成整數,如果不成功則返回NaN.
<body><script type="text/javascript">str = "1024";console.log(typeof str) //輸出字符串格式num = parseInt(str) //將字符串轉成數值,賦值給numconsole.log(num) //打印這個數值</script> </body>轉浮點數轉換: parseFloat(..)方法,可以實現將一個字符串轉換成浮點數,如果不成功則返回NaN.
<body><script type="text/javascript">str = "1024";console.log(typeof str) //輸出字符串格式num = parseFloat(str) //將字符串轉成浮點數,賦值給numconsole.log(num) //打印這個數值</script> </body>常用數值函數: 這里舉三個例子,分別代表判斷有限值,保留小數點,和保留小數點后幾位.
<body><script type="text/javascript">var num1 = 1024;var num2 = 3.16159;var num3 = 100;document.write("判斷是否為有限值: " + isFinite(num1) + "<br>")document.write("指定要保留的小數點位數: " + num2.toFixed(2) + "<br>")document.write("保留小數點后2位: " + num3.toFixed(2))</script> </body>◆字符串型◆
字符串是 JavaScript 中最常用的數據類型,幾乎每個程序都會用到字符串,字符串是由字符組成的數組,但在 JavaScript 中字符串是不可變的,可以訪問字符串任意位置的文本,但是JavaScript并未提供修改已知字符串內容的方法,JS中有豐富的對字符串的操作函數,常用的包括連接,查找替換,大小寫轉換等操作,如下是常用的操作格式:
obj.length 獲取字符串長度 obj.toString() 將數組轉換成字串 obj.trim() 移除字符串中空白 obj.trimLeft() 移除字符串中左邊空白 obj.trimRight() 移除字符串中右邊空白 obj.charAt(n) 返回字符串中的第n個字符 obj.concat(value, ...) 兩個或者多個字符串拼接obj.indexOf(substring,start) 返回指定字符串在字符串中首次出現的位置 obj.lastIndexOf(substring,start) 返回該元素在字符串中最后一次出現的位置 obj.substring(from,to) 提取字符串中介于兩個指定下標之間的字符obj.slice(start,end) 從已有字符串數組中返回選定的元素,切片 obj.split(delimiter,limit) 用于把一個字符串分割成字符串數組,分割 obj.toLowerCase() 將小寫字符串轉換成大寫 obj.toUpperCase() 將大寫字符串轉換成小寫obj.search(regexp) 從頭開始匹配,返回匹配成功的第一個字符串位置,g無效 obj.match(regexp) 全局搜索,如果正則中有g表示找到全部,否則只找到第一個 obj.replace(regexp,replacement) 正則替換,正則中有g則替換所有,否則只替換第一個匹配項$數字：匹配的第n個組內容$&：當前匹配的內容$`：位于匹配子串左側的文本$'：位于匹配子串右側的文本$$：直接量$符號統計字串長度: 使用length方法獲取字符串的長度,并返回,可以直接返回,也可以賦值給變量.
<body><script type="text/javascript">var string = " hello lyshark 歡迎來到中國!";var num = string.length;document.write("統計字符串長度: " + string.length + "<br>")document.write("另一種統計長度的方法: " + num)</script> </body>移除字串空格: 通過使用trim()移除字符串兩邊空格,trimLeft(),trimRight()可以分別移除左邊和右邊空格.
<body><script type="text/javascript">var obj = " lyshark ";document.write("統計字符串大小: " + obj.length + "<br>")document.write("去除兩邊的空格: " + obj.trim() + "<br>")document.write("統計字符串大小: " + obj.length + "<br>")</script> </body>字符串拼接: 使用concat(,)將兩個或者多個字符串拼接在一起形成一個新的字符串.
<body><script type="text/javascript">var string1 = "hello ";var string2 = "lyshark";var string3 = "welcome";document.write("拼接一個字串: " + string1.concat(string2) + "<br>")document.write("拼接多個字串: " + string1.concat(string2,string3) + "<br>")</script> </body>字符串提取: 使用indexOf定位首次出現的位置,lastIndexOf定位最后出現的位置,substring實現提取任意字符串.
<body><script type="text/javascript">var str = "Hello World!";document.write("Hello 首次出現的位置: " + str.indexOf("Hello") + "<br/>")document.write("World 首次出現的位置: " + str.indexOf("World") + "<br/>")document.write("如果沒有出現過默認-1: " + str.indexOf("world"))</script> </body><body><script type="text/javascript">var str = "Hello World! Hello lyshark!";document.write("Hello 最后出現的位置: " + str.lastIndexOf("Hello") + "<br/>")document.write("World 最后出現的位置: " + str.lastIndexOf("World") + "<br/>")document.write("如果沒有出現過默認-1: " + str.lastIndexOf("world"))</script> </body><body><script type="text/javascript">var str = "Hello World!";document.write("從0偏移取數據,向后取5個: " + str.substring(0,5) + "<br>")document.write("從0偏移取數據,向后取11個: " + str.substring(0,11) + "<br>")document.write("從3偏移取數據,向后取7個: " + str.substring(3,7))</script> </body>切片與分割: 通過使用slice()方法切割數組,split()方法用來切割字符串轉換成數組.
<body><script type="text/javascript">var array = new Array(5)array[0] = "LyShark";array[1] = "Admin";array[2] = "John";array[3] = "Adrew";document.write("返回整個數組: " + array + "<br>")document.write("返回[1]-[2]元素: " + array.slice(1,3) + "<br>")</script> </body><body><script type="text/javascript">var str = "hello world my names lyshark !";var test = "a:b:c:d:e:f:g:h"document.write("以空格作為分隔符分割字串: " + str.split(" ") + "<br>")document.write("將每個字母單獨變成一個數組: " + str.split("") + "<br>")document.write("以空格分隔,只分割前三個單詞: " + str.split(" ",3) + "<br>")document.write("以冒號作為分隔符,分割元素: " + test.split(":"))</script> </body>字符串查找: 查找字符串并返回所在位置,search() 和 match()方法作用基本一致,查找時支持正則匹配.
<body><script type="text/javascript">var string = "hello world my names lyshark my world !";document.write("精確查找字符串: " + string.search("lyshark") + "<br>")document.write("精確檢索字符串: " + string.search(/my/) + "<br>")document.write("忽略大小寫檢索: " + string.search(/world/i) + "<br>")</script> </body><body><script type="text/javascript">var string = "hello world my names lyshark my world 123 456 !";document.write("精確查找字符串: " + string.match("lyshark") + "<br>")document.write("全局匹配\d數字: " + string.match(/\d+/g) + "<br>")</script> </body>字符串替換: 查找并替換字符串,可以使用replace()方法,該方法也支持正則表達式.
<body><script type="text/javascript">var string = "hello world welcome to mkdirs.com hello lyshark HELLO mkdirs!";document.write("查找welcome替換成xxxx: " + string.replace(/welcome/,"xxxx") + "<br>")document.write("全局查找替換hello并替換: " + string.replace(/hello/g,"oooo") + "<br>")document.write("匹配替換并區分大小寫: " + string.replace(/HELLO/,"gggg") + "<br>")</script> </body>◆數組類型◆
任何編程語言中都存在數組,數組是一系列變量的集合,與其他強類型語言不同的是 JavaScript 中的數組元素的類型可以不相同,這也是動態語言的好處 JavaScript 語言本身只支持一維數組,但是也可以將兩個一維數組合起來變成一個二維數組使用,首先看一下常用的數組操作方法:
obj.length 獲取數組的大小 obj.push(ele) 給數組尾部追加元素 obj.pop() 從尾部獲取一個元素 obj.unshift(ele) 在數組頭部插入元素 obj.shift(ele) 在數組頭部移除元素obj.slice() 數組元素的切片 obj.concat(val,..) 多個數組相連接 obj.join(sep) 將數組連接起來變成字符串 obj.sort() 對數組元素進行排序 obj.reverse() 反轉數組中的元素obj.splice(n,0,val) 在數組指定位置插入元素 obj.splice(n,1,val) 在數組指定位置替換元素 obj.splice(n,1) 在數組指定位置刪除元素定義一維數組: 以下案例定義了3個數組,并且分別給數組賦值,然后打印結果.
<body><script type="text/javascript">var array = [1,2,3,4,5]; //創建數組,并有5個元素var array1 = []; //創建空數組var array2 = new Array() //同樣創建空數組array1[0] = "hello";array1[2] = "world";array2[0] = null;document.write("數組array大小: " + array.length + "<br>")document.write("數組array1大小: " + array1.length + "<br>")document.write("數組array2大小: " + array2.length)</script> </body>定義二維數組: 以下案例定義了3個數組,并且分別給數組賦值,然后通過循環語句打印數組值.
<body><script type="text/javascript">var value = [[1,2,3],[4,5,6],[7,8,9,10]]; //創建二維數組document.write("數組value大小: " + value.length + "<br>") //打印數組大小document.write("數組value[2]大小: " + value[2].length + "<br>") //打印數組大小for(var i=0;i<3;i++) //循環輸出數組元素{for(j in value[i]) //輸出每個數組元素的值{document.write(" " + value[i][j]);}document.write("<br>")}</script> </body>插入修改與刪除: 通過使用splice()方法,實現對元素的插入,增加,修改,刪除.
<body><script type="text/javascript">var array = new Array(5)array[0] = "admin";array[1] = "guest";array[2] = "lyshark";array[3] = "wall";document.write("當前列表: " + array + "<br>")array.splice(2,1,"替換成我") //把第2個元素提換,替換1次document.write("替換列表: " + array + "<br>")array.splice(5,1,"插入元素") //在第5個位置上插入新元素document.write("插入列表: " + array + "<br>")array.splice(1,3,"刪除元素") //刪除第2個位置以后2個元素document.write("刪除列表: " + array + "<br>")</script> </body>PUSH/POP操作元素: 通過該命令可實現在數組結尾追加新元素,也可從結尾刪除元素.
<body><script type="text/javascript">var list = [1,2,3,4,5];document.write("數組元素: " + list + " 總大小:" + list.length + "<br>")list.push(6)list.push(7) //在結尾添加新元素document.write("數組元素: " + list + " 總大小:" + list.length + "<br>")list.pop()list.pop() //在結尾刪除元素document.write("數組元素: " + list + " 總大小:" + list.length + "<br>")</script> </body>Shift/Unshift: 該命令可以實現在數組元素的頭部添加元素,或者是刪除頭部的元素.
<body><script type="text/javascript">var list = [4,5,6];document.write("數組元素: " + list + " 總大小:" + list.length + "<br>")list.unshift(3)list.unshift(2)list.unshift(1) //在開頭添加元素document.write("數組元素: " + list + " 總大小:" + list.length + "<br>")list.shift()list.shift() //從開頭刪除一個元素document.write("數組元素: " + list + " 總大小:" + list.length + "<br>")</script> </body>切片與連接: 使用slice()方法實現數組的切片,concat()實現數組連接,join()數組轉成字符串.
< ----------------------------[數組切片]---------------------------- > <body><script type="text/javascript">var array = new Array()array[0] = "admin";array[1] = "lyshark";array[2] = "Thomas";array[3] = "John";array[4] = "George";document.write("數組切片(從1號索引開始顯示元素): " + array.slice(1) + "<br>")document.write("數組切片(從3號索引開始顯示元素): " + array.slice(3) + "<br>")document.write("數組切片(只顯示1-2號元素切片): " + array.slice(1,3) + "<br>")</script> </body> < ----------------------------[數組連接]---------------------------- > <body><script type="text/javascript">var array = new Array();var a = [1,2,3,4,5];var b = [7,8,9,10];document.write("將數組連接: " + array.concat(a,b) + "<br>")document.write("直接連接并打印: " + a.concat(b) + "<br>")</script> </body> < ----------------------------[數組轉換]---------------------------- > <body><script type="text/javascript">var array = new Array(3);array[0] = "admin";array[1] = "guest";array[2] = "lyshark";document.write("直接連接成字符串: " + array.join() + "<br>")document.write("連接成字符串并添加一個分隔符: " + array.join("*") + "<br>")</script> </body>數組元素排序: 使用sort()方法實現數組的正向排列,reverse()則實現數組的反向排列.
<body><script type="text/javascript">var array = [12,65,77,89,32,-19,54,33,78]document.write("未排序前: " + array + "<br>")document.write("正向排序: " + array.sort() + "<br>")document.write("反向排序: " + array.reverse() + "<br>")</script> </body>◆布爾類型◆
在前面的案例中我們看了數值類型和字符串類型,該類型數據都有無窮大的數值,但是布爾行數據類型只有兩個取值,通常情況下布爾類型直接表示方式有兩個,True/False這兩個表示方式,分別代表真和假,它主要用于描述一種狀態或者標志,通常用來比較所得到的結果.
相等于不相等: 使用==雙等于號判斷兩數字是否相等,使用!=不等于號判斷兩數字是否不相等.
<body><script type="text/javascript">num1 = 1;num2 = 0;if(num1 == num2){document.write("兩數相等...")}else if(num1 != num2){document.write("兩數不相等...")}</script> </body>與運算與或運算: 使用||或運算符實現或運算,使用&&與運算符實現與運算.
<body><script type="text/javascript">num1 = "true";num2 = "false";num3 = "ok";if(num1 == num2 || num2 == num2){document.write("或運算的比較結果...")}if(num1 == num1 && num2 == num2){document.write("與運算的比較結果...")}</script> </body>◆類型轉換◆
JS是一種松散類型的程序設計語言,并沒有嚴格地規定變最的數據類型,己經定義數據類型的變量可以在表達式中自動轉換數據類型,或通過相應的方法來轉換數據類型,自動類型轉換有一定的規則,如果按照 JS的類型轉換規則,沒有轉換或者轉換的類型不對,就需要通過相應的方法來進行轉換.
基本類型轉換: 基本類型轉換String:將字數字轉成字符串,Number:將其他類型轉為整數,Boolean:其他類型轉成布爾類型.
<body><script type="text/javascript">document.write("其他類型轉換為字符串: " + String(1024) + "<br>");document.write("其他類型轉換為數值:" + Number("hello") + "<br>");document.write("其他類型轉換為布爾:" + Boolean(1) + "<br>");</script> </body>字符串轉成整數: 字符串之間的數據轉換,與進制轉換實例.
<body><script type="text/javascript">document.write("將a轉換成整數: " + parseInt("a") + "<br>");document.write("將a轉換成8進制,整數: " + parseInt("a",8) + "<br>");document.write("將a轉換成2進制,整數: " + parseInt("a",2) + "<br>");document.write("將a轉換成浮點數: " + parseFloat("a") + "<br>");</script> </body>eval()計算: EVAL用于計算字符串表達式或語句的值.
<body><script type="text/javascript">var num = 10;var str = "1024";document.write("eval連接字符串: " + eval(str+num) + "<br>");</script> </body>JavaScript 流程控制
所謂流程就是程序代碼所執行的順序,在任何一種語言中,程序控制流程是必須的,他能夠是整個程序減少混亂,使之順利的按照一定得方式執行工作,在 JavaScript 中常用的程序流程有三種,順序結構,選擇結構,和循環結構,下面將依次演示他們的使用技巧.
if-else: 判斷if(num1>num2)如果條件滿足則執行,否則判斷if(num2>num3),滿足執行否則執行else里面的代碼.
<body><script type="text/javascript">var num1 = 100;var num2 = 200;var num3 = 10;if(num1 > num2){var temp = num1 - num2;document.write("num1 大于 num2" + " 比num2多出:" + temp)}else if(num2 > num3){var temp = num2 - num3document.write("num2 大于 num3" + " 比num2多出:" + temp)}else{document.write("沒有合適的結果..")}</script> </body>switch: switch通常用于選擇結構,以下代碼用戶輸入一個數值,進入選擇結構根據輸入數值執行相應代碼片段.
<body><script type="text/javascript">var temp;temp = prompt("請選擇輸入(1,2,*):","");switch(temp){case "1":document.write("你選擇了1號");break;case "2":document.write("你選擇了2號");break;default:document.write("你選擇了其他選項");break;}</script> </body>while: 循環執行結構,while會一直循環下去,直到滿足(num <=100)的條件則跳出循環,語句語法結構如下.
<body><script type="text/javascript">var num = 0;var sum = 0;while(num <=100){sum = sum +num;num = num +1;document.write("當前循環: "+ num + " 當前累加: " + sum);document.write("<br>")}document.write("從1+100...結果是:" + sum)</script> </body>for: 以下案例,通過for循環遍歷names列表,每次循環i++遞增,直到滿足(i<names.length)則退出循環.
<body><script type="text/javascript">var names = ["admin","guest","lyshark","alex"]for(var i=0;i<names.length;i++){document.write("當前位置: "+ i +"元素值: " + names[i])document.write("<br>")}</script> </body>for in: 這是一種類似python的語法格式,使用效果和python中的循環語句并無差異.
<body><script type="text/javascript">var names = ["admin","guest","lyshark","alex"]for(var index in names){document.write("當前位置: "+ index +"元素值: " + names[index])document.write("<br>")}</script> </body>try..catch: 異常處理,當try里面代碼出現問題的時候自動執行catch拋出異常,最后無論是否異常都會執行finally.
<body><script type="text/javascript">try {// 這段代碼從上往下運行,其中任何一個語句拋出異常該代碼塊就結束運行}catch(e){// 如果try代碼塊中拋出了異常,catch代碼塊中的代碼就會被執行// e是一個局部變量，用來指向Error對象或者其他拋出的對象}finally{// 無論try中代碼是否有異常拋出(甚至是try代碼塊中有return語句),finally代碼塊中始終會被執行}</script> </body>JavaScript 關于函數
函數為編程者提供了在整個程序中重復使用一個單元結構的能力,在這個單元中封裝了完成指定任務或者功能的程序代碼,為了使用函數,需要知道如何定義函數,如何將變量傳遞給函數,以及如何返問函數計算出的結果,另外 JavaScript 以其靈活性的特點,我們可以將一些開發環境中常用到的模塊進行封裝,然后再使用時直接調用即可,節約了開發周期.
◆函數的定義◆
JavaScript 中函數基本上可以分為三類,普通函數,匿名函數,自執行函數,此外需要注意的是對于 JavaScript中 函數參數,實際參數的個數可能小于形式參數的個數,函數內的特殊值arguments中封裝了所有實際參數.
普通無參函數: 以下代碼,通過使用關鍵字function聲明了func()無參數的函數.
<body><script type="text/javascript">function func(){document.write("這個無參數函數被執行了..." + "<br>");return "ok";}var ret = func() //調用函數,并將返回值賦值給ret變量document.write("函數的返回值是: " + ret);</script> </body>普通有參函數: 以下代碼,通過使用關鍵字function聲明了func()有參數的函數,其中形式參數有name,age,sex.
<body><script type="text/javascript">function func(name,age,sex){document.write("姓名: " + name + "年齡:" + age + "性別: " + sex + "<br>");return 0;}var ret = func("lyshark","22","Man") //調用函數document.write("函數的返回值是: " + ret);</script> </body>傳遞數組地址: 我們不僅僅可以傳遞單個的參數,還可以將一個預定義好的數組傳遞到函數體內部.
<body><script type="text/javascript">function show(temp){for(i in temp)document.write(temp[i] + " ");document.write("<br>");}var array = new Array(1,2,3,4,5,6,7,8,9,10);show(array) //傳遞一個數組到函數體,并執行</script> </body>定義匿名函數: 匿名函數,就是沒有名字的函數,需要我們手動進行調用,一般情況不會使用.
<body><script type="text/javascript">var func = function(x,y){document.write("參數1= " + x + "參數2= " + y);}func(10,20) //調用匿名函數</script> </body>自執行函數: 自執行函數,也就是說無論我們是否調用它,它都會被執行,適合做初始化工作.
<body><script type="text/javascript">(function(name,url){document.write("姓名: " + name + "URL: " + url);})("lyshark","mkdirs.com")</script> </body>arguments: 使用特殊對象arguments,開發者無需明確指出參數名,就能訪問數據的內部元素.
<body><script type="text/javascript">function func() {document.write("當前參數長度: " + arguments.length + "<br>");}func(1,2,3,4,5);</script> </body>◆嵌套與遞歸◆
函數嵌套與遞歸式很多編程語言的通用屬性,同樣的 JavaScript 雖然是腳本語言,但是也支持嵌套和遞歸函數的實現,函數嵌套是語言特性,遞歸調用是邏輯思想,這兩者有關但并不互斥,一個遞歸過程可以包含函數嵌套,同樣一個遞歸函數也可當做是自身嵌套函數,一般情況下不會使用這些特性.
函數的嵌套: 函數的嵌套是指在函數體的內部再次嵌套一層函數體,并依次返回執行結果,就是嵌套函數.
<body><script type="text/javascript">function ext_func(){function func(){document.write("內部函數執行結果...." + "<br>")return 1024;}ret = func()return ret}ret = ext_func()document.write("內部函數返回值: " + ret)</script> </body>函數的遞歸: 函數的遞歸是指函數不停地調用自身,直到滿足一定得條件才會自動的跳出循環體.
<body><script type="text/javascript">function func(temp){if(temp == 1){return 1;}else{return func(temp-1)+2;}}ret = func(5)document.write("內部函數返回值: " + ret)</script> </body>函數的閉包: 通常情況下,我們想調用一個函數內部的嵌套方法,我們可以使用閉包的形式來實現.
<body><script type="text/javascript">function func1(){var array = [1,2,3,4,5];function func2() {return array;}return func2;}temp = func1() //調用語句返回函數func2對象document.write("函數返回對象: " + temp + "<br>");ret = temp() //調用這個對象,最終得到結果document.write("最終返回值: " + ret);</script> </body>◆常用內置函數◆
除了可以在 JavaScript 中自己定義函數以外 JavaScript 自身也提供了一些內部函數,也稱為內部方法,程序可以直接調用這些函數來完成某些功能,下面是 JavaScript 中的一些內部函數的介紹.
encodeURI: 返回一個對URI字符串編碼后的結果,URI表示的范圍比URL要大.
<body><script type="text/javascript">var urlstr = encodeURI("http://www.mkdirs.com/index.html country=中國")document.write("URI中的轉義字符: " + urlstr + "<br>")var urlstr = encodeURIComponent("http://www.mkdirs.com/index.html country=中國")document.write("轉義URI組件中的字符: " + urlstr)</script> </body>decodeURI: 對一個編碼后的URI字符串進行解釋,翻譯成一個正常格式.
<body><script type="text/javascript">var urlstr = decodeURI("http://www.mkdirs.com/index.html%20country=%E4%B8%AD%E5%9B%BD")document.write("URI翻譯: " + urlstr + "<br>")var urlstr = decodeURIComponent("%2Findex.html%20country%3D%E4%B8%AD%E5%9B%BD")document.write("URI組件翻譯: " + urlstr)</script> </body>字符串轉換: 使用escape()方法對字符串進行轉義處理,unescape()則負責將代碼解碼.
<body><script type="text/javascript">var encode = escape("中國")document.write("字符串轉換: " + encode + "<br>")var decode = unescape("%u4E2D%u56FD")document.write("字符串解碼: " + decode)</script> </body>JSON序列化: 使用JSON方法將數組序列化存儲,方便數據傳輸.
<body><script type="text/javascript">array = [1,2,3,4,5]ret = JSON.stringify(array) //序列化,將其他類型轉換成字符串document.write("序列化后的類型: " + typeof(ret) + "<br>")document.write("反序列化,加載結果: " + JSON.parse(ret))</script> </body>轉載于:https://www.cnblogs.com/LyShark/p/11136268.html
總結
以上是生活随笔為你收集整理的Web前端开发JavaScript基础(3)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DE1-LINUX运行
- 下一篇： 【Spring源码分析】Bean加载流程