JavaScript(二)函数、内置函数

b本章主要内容

一、函数

函数作用
自定义函数
arguments

二、数组

介绍
创建
遍历数组

三、数组内置方法

push
unshift
pop
shift
join
reverse
sort
concat
slice
强大的splice
indexOf
lastIndexOf

四、string的内置方法

charAt
charCodeAt
indexOf
lastIndexOf
slice
substring
substr
split
toUpperCase
toLowerCase

五、Math的内置方法

min
max
ceil
floor
round
abs
random

六、Date的内置方法

创建一个当前时间对象
获取时间对象的年月日时分秒及星期
设置时间对象的年月日时分秒及星期
小案例

一、函数

1、函数：

　　就是把反复多次使用的脚本语言用函数封装起来，随时都可以使用，减少了代码量方便。

2、定义函数：

　　function functionName([参数]){

　　　　代码块　　

}

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

2.1、调用： functionName([参数]) 即可　

2.2、返回值：

函数通过return语句，后面跟着的值就是这个函数的返回值；

函数在执行完return语句后停止return以下的函数语句，并退出该函数；

return也可以不带任何值，只用做与停止该函数；

3、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.1、arguments类似与是个参数的数组，可以对参数进行数组的操作；

二、数组

1、介绍：

用来存储一组数据的容器
存储的元素可以是不同类型的数据

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/>

3、遍历

<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>

三、数组的内置方法

1、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>

2、unshift

语法：arrayObject.unshift(newele1,newele1,newele1,.....,newelex)
作用：头部添加
返回值：追加后数组的length值

例子：.....

3、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>

4、shift

语法：arrayObject.shift(）
作用：删除数组第一个值
返回值：被删除的元素

例子：....

5、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>

6、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>

7、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>

8、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>

9、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>

10、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.2、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>

11、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>

12、lastIndexOf

语法：arrayObject.lastIndexOf(searchvalue,startIndex)

作用：搜索指定的内容在数组中所占的索引位置（从前往后）；

返回值：索引数值；　　

参数：同11

*当数组中出现多个搜索值时，只取最后一个值的索引；

*当查找的内容不再搜索范围内或者数组中不存在，则返回-1；

*indexOf与lastIndexOf有兼容性问题；

示例：......

四、String

1、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>

2、charCodeAt　

语法：stringObject.charCodeAt(inde)

作用：查询指定位置的字符的编码；

*当不传入参数时，返索引为0的字符；

返回值；编码序号；

示例：

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

3、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>

4、lastIndexOf

语法：stringObject.lastIndexOf(searchvalue,startIndex)

作用：搜索指定的内容在字符串中所占的索引位置（从后往前）

返回值：索引值

参数：...

*当字符串或者指定的范围内没有要搜索的值时，返回-1；

*当字符串中出现多个搜索值时，只取第一个搜索值的索引；

示例：.....

5、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>

6、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>

7、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>

8、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>

9、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>

10、toUpperCase

语法：stringObject.toUpperCase()

作用：把整个字符串中的字母转成大写；

参数：无参

返回值：str

示例：

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

11、toLowerCase

语法：stringObject.toLowerCase()

作用：与toUpperCase相反

参数：无参

返回值：str

*10和11他们不会在原基础上做修改；

示例：....

五、Mthon

1、min

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

作用：把所有参数做比较，提取最小的那个；

返回值：number

*当参数为字符串时返回NaN

2、max

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

作用：把所有参数做比较，提取最大的那个；

返回值：number

*当参数为字符串时返回NaN

3、ceil

语法：Math.ceil(num)

作用：向上取整

返回值：Number

4、floor

语法：Math.floor(num)

作用：向下取整

返回值：Number

5、round

语法：Math.round(num)

作用：四舍五入

返回值：Number

6、abs

语法：Math.abs(num)

作用：求绝对值

返回值：Number

7、radom

语法：Math.random()

作用：随机生成0≤a＜1的浮点数；

返回值：0≤a＜1的浮点数

参数：无参

示例：（自定义一个随机生成在指定范围内的整数函数）烧脑子

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

六、Date

1、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>

2、提取当前时间对象中的年月日时分秒及星期

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>

3、设置时间

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>

posted @ 2017-10-12 10:44 鸽子灬阅读(394) 评论(0) 编辑收藏举报

刷新页面返回顶部

丰の博客园

一个自学者的前行之路。

JavaScript(二)函数、内置函数

一、函数

1、函数：

2、定义函数：

3、arguments

二、数组

1、介绍：

2、创建

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

四、String

1、charAt

2、charCodeAt

3、indexOf

4、lastIndexOf

5、slice

6、substring

7、substr

8、split

9、replace

10、toUpperCase

11、toLowerCase

五、Mthon

1、min

2、max

3、ceil

4、floor

5、round

6、abs

7、radom

六、Date

1、new Date

2、提取当前时间对象中的年月日时分秒及星期

3、设置时间

9、slice　

2、charCodeAt　