一、函数
- 函数作用
- 自定义函数
- 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>