JavaScript语法总结(Imooc)

JS语法基础

Number

-Number:表示整数和浮点数
-NaN:即非数值(Not a Number)是一个特殊的数值

说明:
1、任何涉及NaN的操作(例如NaN/10)都会返回NaN。
2、NaN与任何值都不相等,包括NaN本身。

逻辑与

&&与(只要有一个条件不成立,返回false)
说明:在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回值,此时它遵循下列规则:
1、如果一个操作数隐式类型转换后为ture,则返回第二个操作数
2、如果第一个操作数隐式类型转换后为false,则返回第一个操作数
3、如果有一个操作数是null/NaN/undefined,则分别会返回null/NaN/undefined

逻辑非

||或(只要一个条件成立,返回true)、
说明:在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回值,此时它遵循下列规则:
1、如果第一个操作数隐式类型转换后为true,则返回第一个操作数。
2、如果第一个操作数隐式类型转换后为false,则返回第二个操作数。
3、如果两个操作数是null/NaN/undefined,则分别会返回null/NaN/undefined

!非
说明:
1、无论操作数是什么数据类型,逻辑非都会返回一个布尔值
2、!!同时使用两个逻辑非操作符时:
-第一个逻辑非操作会基于无论什么操作数都会返回一个布尔值
-第二个逻辑非则对该布尔值求反


循环语句

for语句

语法:
for(语句1;语句2;语句3){
// 循环的初始值;循环条件;变量的变化
被执行的代码块;
}

for嵌套

当循环与循环发生嵌套时遵循下列规则:
1、外层为假时内层不执行;
2、先执行外层再执行内层,直至内层的条件为假时再返回外层去执行。

while语句

语法:
while(条件){
需要执行的代码;
}

do-while语句

语句:
do{
需要执行的代码;
}while(条件)
说明:这种语法的循环至少要被执行一次。

for适合已知循环次数的循环,而while适合 未知 循环次数的循环

bereak语句
break:立即退出循环
contitune语句
continue:结束本次循环,继续开始下一次。


函数

函数的定义

函数使用function声明,后跟一组参数以及函数体,语法如下:
function functionNname([arg0,arg1,…argn]){
statements
}
说明:
1、functionNname是要定义的函数名,属于标识符
2[]中的arg0,arg1,…argn为函数的参数

函数的调用

语法:
函数名([arg1,arg2,…argn])

函数的返回值

任何函数通过return语句,后面跟着返回的值来实现返回值。
说明:

  1. 函数会在执行完return语句之后停止并立即退出。
  2. return语句也可以不带有任何返回值,用于提前停止函数执行又不需要返回值的情况。

arguments

ECMAScript中的参数在内部用一个数组来表示,在函数体内通过arguments对象来访问这个数组参数。
说明:

  1. arguments对象只是与数组类似,并不是Array的实例。
  2. []语法访问它的每一个元素。
  3. length属性确定传递参数的个数。

JavaScript对象

数组

创建数组的基本方式有两种:
1、使用Array构造函数
语法:new Array()
小括号()说明:
(1)预先知道数组要保存的项目数量
(2)向Array构造函数中传递数组应包含的项
2、使用数组字面量表示法
由一对包含数组项的方括号[]表示,多个数组项之间用逗号隔开。

数组元素的读写
读取和设置值时,使用方括号[]并提供相应的索引
说明:索引是从0开始的正整数

数组长度

语法:array.length
功能:获取数组array的长度
返回值:number
说明:
1、通过设置length可以从数组的末尾移除项或向数组中添加新项。
2、 把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一项索引加1。

push()
语法:arrayObject.push(newele1,newele2…newex)
功能:把它的参数顺序添加到arrayObject的尾部
返回值:把指定的值添加到数组后的新长度。

unshift()
语法:arrayObject.unshift(newele1,newele2…newex)
功能:把它的参数顺序添加到arrayObject的开头
返回值:把指定的值添加到数组后的新长度。

pop()
语法:arrayObject.pop()
功能:删除arrayObject的最后一个元素
返回值:被删除的那个元素

shift()
语法:arrayObject.shift()
功能:删除arrayObject中的第一个元素
返回值:被删除的那个元素

join()
语法: arrayObject.join(separator)
功能:用于把数组中的所有元素放入一个字符串。
返回值:字符串。

reverse()
语法: stringObject.reverse()
功能: 用于颠倒数组中元素的顺序。
返回值:数组。

sort()
语法:arrayObject.sort(sortby)
功能:用于对数组的元素进行排序。
返回值:数组
说明:
1、即使数组中的每一项都是数组,sort()方法比较也是字符串。
2、sort()方法可以接收一个比较函数作为参数。

concat()
语法: arrayObject.concat(arrayX,arrayX,…,arrayX)
功能:用于连接两个或多个数组。
返回值:数组。

slice()
语法:arrayObject.slice(start,end)
功能:从已有的数组中返回选定的元素
参数:
start(必须)规定从何处开始选取,如是负数,从数组尾部开始算起
end(可选)规定从何处结束选取,是数组片段结束处的数组下标

splice()
删除语法: arrayObject.splice(index,count)
功能:删除从index处开始的零个或多个元素
返回值:含有被删除的元素的数组。
说明:count是要删除的项目数量,如果设置为0,则不会删除项目。如果不设置,则删除从index开始的所有值。

插入语法:
arrayObject.splice(index,0,item1,itemX)
功能:在指定位置插入值
参数: index:起始位置,0:要删除的项数,item1…itemX:要插入的项
返回值:数组

替换语法:
arrayObject.splice(index,count,item1,itemX)
功能:在指定位置插入值,且同时删除任意数量的项
参数:index:起始位置,count:要删除的项数,item1…itemX:要插入的项
返回值:从原始数组中删除的项(没有删除任何项,返回空数组)

indexOf()
语法:arrayObject.indexOf(searchvalue,startIndex)
功能:从数组的开头(位置0)开始向后查找
参数:
searchvalue: 必需,要查找的项;
startindex: 可选,起点位置的索引。
返回值:number,查找的项在数组中的位置,没有找到返回-1

lastIndexOf()
语法:arrayObject.lastIndexOf(searchvalue,startIndex)
功能:从数组的末尾开始向前查找
参数:
searchvalue: 必需,要查找的项;
startindex: 可选,起点位置的索引。
返回值:number,查找的项在数组中的位置,没有找到返回-1

String对象

charAt()与charCodeAt()
语法: stringObject.charAt(index)
功能:返回stringObject中index位置的字符。
语法: stringObject.charCodeAt(index)
功能:返回stringObject中index位置字符的字符编码。

indexOf()
语法:stringObject.indexOf(“0”)
功能:从一个字符串中搜索给定的子字符串,返回字符串的位置。
返回值:数值。
说明:如果没有找到该字符串,则返回-1。

lastIndexOf()
语法:stringObject.lastIndexOf(“0”)
功能:从一个字符串中搜索给定的子字符串,返回字符串的位置。
返回值:数值。
说明:如果没有找到该字符串,则返回-1。

slice()
语法:stringObject.slice(start,end)
功能:截取子字符串
参数:

  1. start(必须)指定子字符串的开始位置
  2. end(可选)表示子字符串到哪里结束,end本身不在截取范围之内,省略时截取至字符串的末尾。
  3. 当参数为负数时,会将传入的负值与字符串的长度相加。

substring()
说明:语法及功能同slice()完全一样
区别在于:
1、当参数为负数时,自动将参数转换为0。
2、substring()会将较小的数作为开始位置,将较大的数作为结束位置。

substr()
语法:stringObject.substr(start,len)
功能:截取子字符串
参数:

  1. start(必须)指定子字符串的开始位置
  2. len(可选)表示截取的字符总数,省略时截取至字符串的末尾。
  3. 当start为负数时,会将传入的负值与字符串的长度相加。
  4. 当len为负数时,返回空字符串。

split()
语法:stringObject.split(separator)
功能:把一个字符串分割成字符串数组
返回值: Array
说明:separator:必须,分隔符

replace()
语法:stringObject.replace(regexp/substr,replacement)
功能:在字符串中用一些字符替代凌一些字符,或替换一个与正则表达式匹配的子串。
返回值:string
参数: regexp:必须。规定子字符串或要替换的模式的RegExp对象
replacement:必须。一个字符串值

toUpperCase()
语法:stringObject.toUpperCase()
功能:把字符串转换为大写

toLowerCse()
语法:stringObject.toLowerCase()
功能:把字符转换为小写。

Math对象

Math.min() / Math.max()
语法:Math.min(num1,num2…numN)
功能:求一组数中的最小值。
返回值:Number

Math.ceil()
语法:Math.ceil(num)
功能:向上取整,即返回大于num的最小整数
返回值:Number

Math.floor()
语法:Math.floor(num)
功能:向下取整,返回num的整数部分。
返回值:Number

Math.round()
语法:Math.round(num)
功能:将数值四舍五入最接近的整数
返回值:Number

Math.abs()
语法:Math.abs(num)
功能:返回num的绝对值
返回值:Number

Math.random()
语法:Math.random()
功能:返回大于等于0小于1的的一个随机数
返回值:Number
说明:
求n到m之间的随机整数的公式:
random=Math.floor(Math.random()*(m-n+1)+n);

Date对象

如何创建一个日期对象
语法:new Date()
功能:创建一个日期时间对象
返回值:不传参的情况下,返回当前的日期时间对象。

获取date的方法
1、getFullYear():返回4位数的年份
2、getMonth():返回日期中的月份,返回值为0-11
3、getDate():返回月份中的天数
4、getDay():返回星期,返回值为0-6
5、getHours():返回小时
6、getMinutes():返回分
7、getSeconds():返回秒
8、getTime():返回表示日期的毫秒数

DOM

DOM基础

查找方法
语法一:document.getElementById(“id”)
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
语法二:document.getElementsByTagName(“tag”)
功能:返回一个对所有tag标签引用的集合
返回值:数组(调用记得加索引号)
说明:tag为要获取的标签名称

设置元素样式
语法:ele.style.styleName=styleValue
功能:设置ele元素的CSS样式
说明:
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称
3、styleValue为设置的样式值

innerHTML
语法:ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML
语法:ele.innerHTML=”html”
功能:设置ele元素开始和结束标签之间的HTML内容为html

className
语法:ele.className(重新设置类,替换元素本身的class)
功能:返回ele元素的class属性
语法:ele.className=”cls”
功能:设置ele元素的class属性为cls

获取属性
语法:ele.getAttribute(“attribute”)
功能:获取ele元素的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要获取的html属性

设置属性
语法:ele.setAttribute(“attribute”,value)
功能:在ele元素上设置属性
说明:
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
注意:
1、必须要有两个值
2、如果value是字符串,需加引号
3、setAttribute()有兼容问题

删除属性
语法:ele.removeAttribute(“attribute”)
功能:删除ele上的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要删除的属性名称

DOM事件

HTML事件
语法:< tag 事件=“执行脚本 >…< /tag >
功能:在HTML元素上绑定事件。
说明:执行脚本可以是一个函数的调用。

0级事件
1、通过DOM获取HTML元素
2、(获取HTML元素).事件=执行脚本

语法:ele.事件=执行脚本
功能:在DOM对象上绑定事件
说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用

鼠标事件:
-onload:页面加载时触发
-onclick:鼠标点击时触发
-onmouseover:鼠标滑过时触发
-onmouseout:鼠标离开时触发
-onfoucs:获得焦点时触发
(用于input标签type为text、password,textarea标签)
-onblur:失去焦点时触发
-onchange:域的内容改变时发生
-onsubmit:表单中的确认按钮被点击时触发

键盘事件:
onkeydown:用户按下一个键盘按键时发生
onkeypress:键盘按键被按下并释放一个键时发生
onkeyup:键盘按键被松开时发生
keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码。

BOM

BOM(browser object model)浏览器对象模型

Window对象

语法:window.alert(“content”)
功能:显示带有一段消息和一个确认按钮的警告框

语法:window.confirm(“message”)
功能:显示一个带有指定消息的OK及取消按钮的对话框

语法:window.prompt(“text,defaultText”)
参数说明:
text:要在对话框中显示的纯文本(而不是HTML格式的文本)
defaultText:默认的输入文本
返回值:如果点击取消按钮,返回null;点击确认按钮,返回输入字段当前显示的文本

语法:window.open(pageURL,name,parameters)
功能:打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明:
pageURL:子窗口路径
name:子窗口据柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters:窗口参数(各参数用逗号分隔)

语法:window.close( )
功能:关闭浏览器窗口

超时调用
语法:setTimeout(code,millisec)
功能:在指定的毫秒数后调用函数或计算表达式
参数说明:
1、code:要调用的函数或要执行的JavaScript代码串
2、millisec:在执行代码前需等待的毫秒数
说明:setTimeout()只执行code一次。如果要多次调用,可以让code自身再次调用setTimeout( )

清除超时调用
语法:clearTime(id_of_settimeout)
功能:取消由setTimeout()方法设置的timeout
参数说明:
1、id_of_settimeout:由setTimeout( )返回的ID值,该值标识要取消的延迟执行代码块

间歇调用
语法:setInterval(code,millisec)
功能:每隔指定的时间执行一次代码
参数说明:
1、code:要调用的函数或要执行的代码串
2、millisec: 周期性 执行或调用code之间的时间间隔,以毫秒计

清楚间歇调用
语法:clearInterval(id_of_setinterval)
功能:取消由setInterval( )方法设置的interval
参数说明:
1、id_of_setinterval:由setInterval( )返回的id值

location对象

location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,即使window对象的属性,也是document对象的属性。

常用属性
语法:location.href
功能:返回当前加载页面的完整URL
说明:location.href与window.location.href等价,这两种设置会在浏览器的历史记录生成一条新纪录(会有回退按钮)。

语法:location.hash
功能:返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串。

语法:loacation.host
功能:返回服务器名称和端口号(如果有)

语法:location.hostnmae
功能:返回不带端口号的服务器名称。

语法:location.pathname
功能:返回URL中的目录和(或)文件名。

语法:location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串。

语法:location.protocol
功能:返回页面使用的协议

语法:location.search
功能:返回URL的查询字符串。这个字符串以问好开头。

location.replace( )
语法:location.replace(url)
功能:重新定向URL
说明:使用location.replace不会再历史记录中生成新纪录。

location.reload( )
语法:location.reload()
功能:重新加载当前显示页面。
说明:
-location.reload()有可能从缓存中加载
-location.reload(true)从服务器重新加载

Screen对象

语法:screen.availWidth
功能:返回可用的屏幕宽度

语法:screen.availHeight
功能:返回可用的屏幕高度

History对象

语法:history.back( )
功能:回到历史记录的上一步
说明:相当于使用了history.go(-1)

语法:history.forward( )
功能:回到历史记录的下一步
说明:相当于使用了history.go(1)

语法:history.go(-n)
功能:回到历史记录的前n步

语法:history.go(n)
功能:回到历史记录的后n步

UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容