JavaScript(二)函數、內置函數

b本章主要內容

1、函數

1. 函數做用
2. 自定義函數
3. arguments

2、數組

1. 介紹
2. 建立
3. 遍歷數組

3、數組內置方法

1. push
2. unshift
3. pop
4. shift
5. join
6. reverse
7. sort
8. concat
9. slice
10. 強大的splice
11. indexOf
12. lastIndexOf

4、string的內置方法

1. charAt
2. charCodeAt
3. indexOf
4. lastIndexOf
5. slice
6. substring
7. substr
8. split
9. toUpperCase
10. toLowerCase

5、Math的內置方法

1. min
2. max
3. ceil
4. floor
5. round
6. abs
7. random

6、Date的內置方法

1. 建立一個當前時間對象
2. 獲取時間對象的年月日時分秒及星期
3. 設置時間對象的年月日時分秒及星期
4. 小案例

1、函數

一、函數：

　　就是把反覆屢次使用的腳本語言用函數封裝起來，隨時均可以使用，減小了代碼量方便。

 

二、定義函數：

　　function functionName([參數]){

　　　　代碼塊　　

}

<script type="text/javascript">
   	 function fun(arg){
	var word='hello'+arg;
	return word
	}
       var inp=prompt('請輸入你的名字')
       document.write(fun(inp))
</script>

2.一、調用：  functionName([參數])  便可　

2.二、返回值：  

函數經過return語句，後面跟着的值就是這個函數的返回值；

函數在執行完return語句後中止return如下的函數語句，並退出該函數；

return也能夠不帶任何值，只用作與中止該函數；

 

三、arguments

用於函數傳進來多個參數，arguments能夠經過索引的形式調取參數

function fun(){
 	for (var i=0,sum=0;i<arguments.length;i++){
 		sum+=arguments[i]
 	}
 	return sum;
 }
 	document.write(fun(1,2,3,4,5,6,7,8,9))   //45

3.一、arguments相似與是個參數的數組，能夠對參數進行數組的操做；

 

2、數組

一、介紹：

• 用來存儲一組數據的容器
• 存儲的元素能夠是不一樣類型的數據

 

二、建立

a、new Array()

• 當參數只有一個的時候且爲數值時，默認爲指定長度；
• 當沒參數時，默認建立一個空數字，等待存儲數據；
• 在建立的時候就能夠傳進多個數據；

<script type="text/javascript">


 	var colors=new Array('red','blue','yellow');
 	var len=new Array(2);
 	console.log(colors,len)  // ["red", "blue", "yellow"]  []


</script>

b、[]

• 和python的list同樣
• new Array() 會實例化一個對象變量，而var arr=[],等因而直接聲明一個變量。很明顯實例一個對象對性能的損耗比直接聲明一個對象來的大些（建議使用var arr=[]）；

var colors=[1,2,3]

c、length

• 能夠用來計算數組的長度
• 也能夠用來規定數組的長度
• 數組的長度是數組中最後一位元素的索引+1

例子：

<script>	
        var arr=['a','b','c','d','e']
 	arr.length=3;
 	console.log(arr)    // ["a", "b", "c"]
<script/>

例子二

<script> 	
       var arr=['a','b','c','d','e']
 	arr[99]='1'
 	console.log(arr.length,arr)    // 100  ["a", "b", "c", "d", "e", 99: "1"]
<script/> 	

 

三、遍歷

<script> 	
    var arr=['a','b','c','d','e']
 	for (var i=0;i<arr.length;i++){
 			console.log(arr[i])
 	} 
 		// a 
 		// b
 		// c
 		// d
 		// e
 	
</script>

 

3、數組的內置方法

一、push

• 語法：arrayObject.push(newele1,newele1,newele1,.....,newelex)
• 做用：數組尾部追加值
• 返回值：追加後數組的length值

例子：

<script type="text/javascript">
	// var colors=new Array('red','green')
	var colors=['red','green']
	var len=colors.push('blue','yello','red')
	console.log(colors,len)  //['red','green,'blue','yello','red'] 5
</script>

 

二、unshift

• 語法：arrayObject.unshift(newele1,newele1,newele1,.....,newelex)
• 做用：頭部添加
• 返回值：追加後數組的length值

例子：.....

 

三、pop

• 語法：arrayObject.pop(）
• 做用：刪除數組最後一個值
• 返回值：被刪除的元素

例子：

<script type="text/javascript">
	// var colors=new Array('red','green')
	var colors=['red','green','blue','yello','red']
	var len=colors.pop()
	console.log(colors,len) //["red", "green", "blue", "yello"]  "red"
</script>

 

四、shift

• 語法：arrayObject.shift(）
• 做用：刪除數組第一個值
• 返回值：被刪除的元素

例子：....

 

五、join

語法：arrayObject.join(separator)

做用：數組內元素轉成字符串，元素與元素之間能夠把參數看成鏈接符號鏈接起來；

返回值：字符串；

*當沒有參數時，默認用逗號鏈接；

*若是不想要中間的鏈接符，就填個空字符串把

<script type="text/javascript">
	// var colors=new Array('red','green')
	var colors=['red','green','blue','yello','red']
	var len=colors.join('-')
	console.log(colors,len)  //["red", "green", "blue", "yello", "red"] "red-green-blue-yello-red"
</script>

 

六、reverse

語法：arrayObject.reverse()

做用：數組元素順序顛倒

返回值：無返回值，在自身作反轉，返回值也是自身；

例子：

<script type="text/javascript">
	// var colors=new Array('red','green')
	var colors=['1','2','3','4','5']
	var len=colors.reverse()
	console.log(colors,len)  //["5", "4", "3", "2", "1"] ["5", "4", "3", "2", "1"]
</script>

 

七、sort

語法：arrayObject.sort([function])

做用：數組成員排序

返回值：在自身作排序；

*不傳參數默認的排序規則，是先把元素轉成字符串而後進行排序；

例子：默認規則

<script type="text/javascript">
	// var colors=new Array('red','green')
	var colors=['1','300','4','-50','a','在','b']
	var len=colors.sort()
	console.log(colors,len)  //["-50", "1", "300", "4", "a", "b", "在"]
</script>

例子：制定排序規則 a-b爲升序，b-a降序；

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=['1','300','4','-50','a','在','b']
	colors.sort(function(a,b){return a-b})
	console.log(colors)  //["-50", "1", "4", "300", "a", "在", "b"]
</script>

 

八、concat

語法：arrayObject.sor(array1,array2)

做用：合併多個數組

返回值：生成一個新數組

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=['red','blue','yellow']
	var num=[1,2,3,4]
	var newArray=colors.concat(colors,num)
	console.log(newArray)  //["red", "blue", "yellow", "red", "blue", "yellow", 1, 2, 3, 4]
</script>

 

九、slice　

語法：arrayObject.slice(start,end)

做用：從數組中截取，指定範圍的全部元素；

參數：start 起始位置，end 結束位置；

返回值：所截取元素組成的新數組；

*star end 實際比end是一位即截取end-1個元素

示例：

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=["red", "blue", "yellow", "red", "blue", "yellow", 1, 2, 3, 4]
	var newArray=colors.slice(1,3)
	console.log(newArray)  //["blue", "yellow"]
</script>

 

十、splice

10.1splice的刪除功能

語法：arrayObjet.splice(index,count)

做用：刪除從index開始的零個或多個元素；

返回值：被刪除元素組成的數組；

參數：index 刪除的開始位置；count 刪除幾個；

*若是參數count爲0，則表示不刪除

*若是count不設置，則表示從index開始一直刪完；

例子：

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=["red", "blue", "yellow", 1, 2, 3, 4]
	var newArray=colors.splice(1,2)
	console.log(colors,newArray)  //["red", 1, 2, 3, 4] ["blue", "yellow"]
</script>

10.二、splice 插入

語法：arrayObjet.splice(index,0，item1，item2，......itemx)

做用：在指定的位置插入指定的元素；

返回值：一個空數組

參數：item  表示插入的新元素；0  表明不刪除，只插入；

*splice爲插入功能時 count要設置爲0；

示例：

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=["red", "blue", "yellow", 1, 2, 3, 4]
	var newArray=colors.splice(1,0,'hahah')
	console.log(colors,newArray)  //["red", "hahah", "blue", "yellow", 1, 2, 3, 4] []
</script>

10.3 splice替換

語法：arrayObjet.splice(index,count，item1，item2，......itemx)

做用：在指定的位置替換指定的元素；

返回值：替換掉的元素組成的數組；

示例：

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=["red", "blue", "yellow", 1, 2, 3, 4]
	var newArray=colors.splice(2,1,'hahah')
	console.log(colors,newArray)  //["red", "blue", "hahah", 1, 2, 3, 4] ["yellow"]
</script>

 

十一、indexOf

語法：arrayObject.indexOf(searchvalue,startIndex)

做用：搜索指定的內容在數組中所佔的索引位置（從後往前）；

返回值：索引數值；

參數： searchvalue  查找的內容，startIndex  指定查找的起始位置；

*當數組中出現多個搜索值時，只取第一個搜索值的索引；

*當查找的內容再也不搜索範圍內或者數組中不存在，則返回-1；

示例：

<script type="text/javascript">
	// var colors=new Array('red','green'
	var colors=["red", "blue", "yellow", 1, 2, 3, 4]
	var newArray=colors.indexOf('yellow',2)
	console.log(newArray)  //2
</script>

 

十二、lastIndexOf

語法：arrayObject.lastIndexOf(searchvalue,startIndex)

做用：搜索指定的內容在數組中所佔的索引位置（從前日後）；

返回值：索引數值；　　

參數： 同11

*當數組中出現多個搜索值時，只取最後一個值的索引；

*當查找的內容再也不搜索範圍內或者數組中不存在，則返回-1；

*indexOf與lastIndexOf有兼容性問題；

示例：......

 

4、String

一、charAt

語法：stringObject.charAt(index)

做用：查詢字符串指定位置的字符；

返回值：字符

參數：index  一個想要查看的索引

*當不傳入參數時，返索引爲0的字符；

示例：

<script type="text/javascript">
	var str="hello i'm tom."
	var value=str.charAt(6)
	console.log(value)  //i
</script> 

 

二、charCodeAt　

語法：stringObject.charCodeAt(inde)

做用：查詢指定位置的字符的編碼；

*當不傳入參數時，返索引爲0的字符；

返回值；編碼序號；

示例：

<script type="text/javascript">
	var str="hello i'm tom."
	var value=str.charCodeAt()
	console.log(value)  //104
</script>  

 

三、indexOf

語法：stringObject.indexOf(searchvalue,startIndex)

做用：搜索指定的內容在字符串中所佔的索引位置（從前日後）  

返回值：索引值

參數：....

*當字符串或者指定的範圍內沒有要搜索的值時，返回-1；

*當字符串中出現多個搜索值時，只取第一個搜索值的索引；

示例：

<script type="text/javascript">
	var str="hello i'm tom."
	var value=str.indexOf('m')
	console.log(value)  //8
</script>  

 

四、lastIndexOf

語法：stringObject.lastIndexOf(searchvalue,startIndex)

做用：搜索指定的內容在字符串中所佔的索引位置（從後往前）

返回值：索引值

參數：...

*當字符串或者指定的範圍內沒有要搜索的值時，返回-1；

*當字符串中出現多個搜索值時，只取第一個搜索值的索引；

示例：.....

 

五、slice

語法：stringObject.slice(start,end)

做用：截取指定範圍內的字符；

返回值：字符

參數： start  起  end 止

*end實際截取止end-1位

示例：

<script type="text/javascript">
	var str="hello i'm tom."
	var value=str.slice(0,5)
	console.log(value)  //hello
</script>  

 

六、substring

語法：stringObject.substring(start,end)

做用：同slice

返回值：字符

參數：.....

*end實際截取止end-1位

*當參數爲負數時，自動將其置爲0；

*（2，-7）----（2，0）----（0，2）

示例:

<script type="text/javascript">
	var str="hello i'm tom."
	var value=str.substring(5,-10)
	console.log(value)  //hello
</script>  

 

七、substr

語法：stringObject.substring(start,count)

做用：同slice

返回值：字符

參數：start 起  count 截取的個數；

*不傳參 將整個字符串所有截取

*count 小於0  返回一個空字符串

*count 超出自身的length時 ，取完start之後的字符串；

示例：

<script type="text/javascript">
	var str="hello i'm tom."
	var value=str.substr(0,2)
	console.log(value)  //he
</script>  

 

八、split

語法：stringObject.split(separator)

做用：把字符串分割成元素，組成數組；

返回值：Array

參數：separator  指定的分割符號

*當參數是一個空字符串時，會把字符串的每一個字母分割成一個元素；

*當不傳入參數時，把整個字符串當成數組的一個元素，生成只有一個元素的數組；

示例：

<script type="text/javascript">
	var str="welcome-to-shanghai."
	var value=str.split('-')
	console.log(value)  //["welcome", "to", "shanghai."]
</script>  

 

九、replace

語法：stringObject.replace(regexp/substr, replacement)

做用：替換字符串中的某些字符，若是不是正則匹配，則只替換一次；

返回值：一個新的字符串

參數：第一個參數必填  regexp 正則  substr 被替換的字符；第二個參數必填 replacement 替換的字符；

示例：

<script type="text/javascript">
	var str="welcome-to-shanghai."
	var value=str.replace('-','>')
	console.log(value)  //welcome>to-shanghai.
</script>  

 

十、toUpperCase

語法：stringObject.toUpperCase()

做用：把整個字符串中的字母轉成大寫；

參數：無參

返回值：str

示例：

<script type="text/javascript">
	var str="welcome-to-shanghai."
	var value=str.toUpperCase()
	console.log(value)  //WELCOME-TO-SHANGHAI.
</script> 

 

十一、toLowerCase

語法：stringObject.toLowerCase()

做用：與toUpperCase相反

參數：無參

返回值：str

*10和11他們不會在原基礎上作修改；

示例：....

 

5、Mthon

一、min

語法：Math.min(num1,num1,num1,.....,numn)

做用：把全部參數作比較，提取最小的那個；

返回值：number

*當參數爲字符串時 返回NaN

 

二、max

語法：Math.max(num1,num1,num1,.....,numn)

做用：把全部參數作比較，提取最大的那個；

返回值：number

*當參數爲字符串時 返回NaN

 

三、ceil

語法：Math.ceil(num)

做用：向上取整

返回值：Number

 

四、floor

語法：Math.floor(num)

做用：向下取整

返回值：Number

 

五、round

語法：Math.round(num)

做用：四捨五入

返回值：Number

 

六、abs

語法：Math.abs(num)

做用：求絕對值

返回值：Number

 

七、radom

語法：Math.random()

做用：隨機生成0≤a＜1的浮點數；

返回值：0≤a＜1的浮點數

參數：無參

示例：（自定義一個隨機生成在指定範圍內的整數函數） 燒腦子

function getRandom(n,m){
	return Math.floor(Math.random()*(m-n+1)+n)
}

 

6、Date

一、new Date

語法：new Date()

做用：建立一個當前時間的對象

返回值：當前時間的對象

示例

<script type="text/javascript">

	var date=new Date()
	console.log(date) //Thu Oct 12 2017 16:54:57 GMT+0800 (中國標準時間)
</script>  

 

二、提取當前時間對象中的年月日時分秒及星期

getFullYear()      返回時間對象中的  年份

getMonth()     返回時間對象中的  月   （0~11）

getDate()     返回時間對象中的  日

getDay()     返回時間對象中的  星期    （0~6）

getHours()     返回時間對象中的  時

getMinutes()     返回時間對象中的  分

getSeconds()     返回時間對象中的  秒

getTimes()　     返回時間對象中的  國際毫秒

示例：

<script type="text/javascript">

	var date=new Date(),
		year=date.getFullYear(),
		month=date.getMonth(),
		day=date.getDate();
		console.log(year,month,day)  //2017 9 12

</script>  

 

三、設置時間

setFullYear()      返回時間對象中的  年份

setMonth()     返回時間對象中的  月   

setDate()     返回時間對象中的  日

setDay()     返回時間對象中的  星期    

setHours()     返回時間對象中的  時

setMinutes()     返回時間對象中的  分

setSeconds()     返回時間對象中的  秒

返回值： 國際毫秒

* 時間對象是具備容錯能力的

示例：

<script type="text/javascript">

	var date=new Date();
	date.setFullYear(2018);
	date.setMonth(13);
	date.setDate(20);

	console.log(date)  //Wed Feb 20 2019 17:13:11 GMT+0800 (中國標準時間)

</script>