一、JavaScript
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
二、JavaScript基本使用方式和常用属性
一、使用JS的三种方式:
1、在HTML中直接内嵌JS(并不提倡使用);
<button οnclick="alert(啦啦啦)">有本事你点我呀!!!</button>
>>>不符合W3C关于内容与行为分离的要求!!!
2、在HTML页面中,使用script标签包裹JS代码;
<script type="text/javascript"></script>
>>><Script></Script>标签可以放到页面的任意位置。
3、引入一个外部单独的JS文件
<script language="JavaScript" src="js/01.js"></script>
[注意事项]
①<script></script>可以嵌入到页面的任意位置。但是,位置的不同会导致JS代码的执行顺序不同;
比如:<script>
</script>放到<body>前面,则代码会在页面加载之前就执行;
②引入一个外部的JS代码,<script></script>必须是成对出现的标签,而且标签中不得出现任何的JS代码;
二、JS中的变量和运算符:
1、JS中变量声明的写法:
var num =10;// 使用var声明的变量,属于局部变量,只是当前作用域内有效;
num = 10; // 不用var声明,默认为全局变量,在整个JS文件中都有效;
var x=8,y,z=10;使用一行语句,同时声明多个变量。上式中,y属于已声明,但是未赋值状态,结果为undefined;
[声明
变量的注意事项]
①JS中所有变量的声明,均使用var关键字。变量具体是什么数据类型,取决于给变量赋值的类型;
②同一个变量,可以在多次不同赋值时,修改变量的数据类型;
var a = 10;// 从初始声明是,a属于整数型;
a = "haha";// 重复赋值时,整数型的a被修改为字符串类型;
③变量可以使用var声明,也可以不使用var声明;
[区别] 使用var声明为局部变量,不使用var声明为全局变量;
④只用var声明,但是不赋值。结果为undefined;
例如: var a; // a为undefined。
但是,如果不声明也不赋值的a,直接使用会报错;
⑤同一变量名,可以多次使用var声明。但是,后年的var并没有任何作用。第二次使用声明时,只会被理解为普通的赋值操作。
2、变量名的命名要求:
①变量名只能有字母、数字、下划线组成;
②开头不能是数字;
③变量名区分大小写,大写字母和小写字母为不同变量;纯大写字母,一般默认为常量;
3、变量名的命名规范:
①要符合小驼峰法则:
首字母小写,之后每个单词的首字母大写;
myNameIsJiangHao 骆驼命名法:
② 所有字母小写,中间用
_my_name_is_jiang_hao 匈牙利写法
③ manameisjianghao 能用 但是不规范
4、JS中的数据类型:
Undefined:未定义、已经使用var声明的变量,但是没有赋值。var a;
Null:表示空的引用。
Boolean:布尔类型。表示真假,只有两个值: true/flase
Number: 数值类型。可以是正数,也可以是小数;
String: 字符串类型。用""或''包裹的内容,称为字符串;
Object: 对象类型,后续讲解。。。。
5、[常用的数值函数]
①isNaN():判断一个变量或常量,是否是NaN( not a num 非数值);
使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转换数字,则不是NaN,结果为false;
②number()函数: 将其他类型的数据,尝试转为数值型;
[字符串类型]
<<<字符串为纯数值字符串,会转为对应的数字;"111"→111
>>>字符串为空字符串,会转为0: " "-> 0
>>>字符串包含任何其它字符时,都不能转;"1a"->NaN
[Boolean类型]
true->1 false->0
[Null/Undefined]
Null->0 Undefined->NaN
[Object]
③ParseInt():将字符串转为整数类型;
>>>纯数值字符串,能转。"12"->12;"12.9"->12(小数转化时,直接抹掉小数点,不进行四舍五入)
>>>空字符串,不能转。" "->NaN
>>>包含其它字符的字符串,会截取第一个非数值字符串前的数字部分;
"123a456"->123;"a123b456"->NaN
>>>ParseInt()只能转字符串,转其它类型,全是NaN.
[number函数与ParseInt函数的区别]
1、Number函数可以转各种数据的类型,ParseInt函数只能转字符串;
2、两者在转字符串时,结果不完全相同。(详见上面解释)
④ParseFloat:将字符串转为数值型;
转换规则与ParseInt相同,只是如果有小数,则保留小数点;如果没有小数,则依然是整数;"12.5"->12.5;"12"->12
⑤typeof:检测变量的数据类型:
字符串->String 数值->Number 未定义->Undefined 对象/NULL->object 函数->function
true/false->Boolean
【JS中常用的输入输出语句】
1.document.write();将()中的内容打印输出到留言器屏幕上;
使用时需要注意:除变量/常量外的所有内容,必须放到""中。变量和常量必须放到""外面;
如果同时有变量和字符串,必须用+连接;
eg:document.write("左手中的纸牌"+left+"<br />");
2.alect();使用弹窗输出;
弹窗警告,()中的内容与上述要求相同。
3.prompt();弹窗输入;
接受两部分参数:
①输入框上面的提示内容,可选;
②输入框里面的默认信息,可选;
当只写一部分时,表示输入框上面的提示内容;
可以定义变量,接受输入的内容。点击确定按钮,变量将被赋值为输入的内容;点击取消按钮,变量将被赋值为null;
6、JS的常用运算符
1、算术运算(单目运算符)
+ 加、-减、*乘、 /除、 %取余、++自增 、--自减
+号:有两种作用,连接字符串/加法运算。当+两边连接数字时,进行加法运算;当+两边有任意一边为字符串时,起连接字符串作用,
链接之后的结果为字符串;
除+外,其余符号运算时,会先尝试将左右两边的变量用Number函数转为数字;
>>>/:结果保留小数点;
>>>++:自增运算时,将变量在原有基础上+1;
>>>--:自减运算符,将变量在自身基础上-1;
【a++和++a的异同点】
①相同点:无论a++还是++a,运算完以后,a的值均会+1;
②不同点: a++,先用a的值去运算,再把a+1;
++a,先把a+1,再用a+1以后的值去运算。
eg:量、var a=3,b,c;
b=a++ +2;//先用a运算,b=3+2 再把a+1,a=4;
c=++a +2;//先把a+1,a=5再用a+1以后的值去运算,c=5+2;
2、赋值运算
= += -= *= /= %=
+=:a+=b;相当于a=a+b;但是前者的运算效率要比后者快,所以推荐使用+=的写法;
3、关系运算
==、 !=、>、<、>=、<=
>>> 关系运算符,运算之后的结果,只能是Boolean类型;
>>> 判断一个数字是否处于一个区间,必须用&&链接;
a<10 && a>0 √ ; 10>a>0 x
>>> ===:严格等于;要求不但类型要相同,值也必须相同;类型不同结果直接为false,类型相同,再进行下一步判断;
== :等于。类型相同,同===一样,类型不同时,会先尝试用Number将两边转为数字,然后再进行判断。
但是,有个别特例: Null==false x ;Null==Undefined √
!=:不等、!== 不全等
4、条件运算符(多目运算)
a>b?true:false
有两个重要符号: ? 和 :
当?前面部分,运算结果为true时,执行:前面的代码;
当?前面部分,运算结果为false时,执行:后面的代码;
冒号两边可以为数值,则整个式子可用于赋值。Var a= 1<2?1:2
冒号两边可以为代码块,将直接执行代码。1<2?alert(1):alert(2);
多目运算符可以多层嵌套。var a = 1<2?alert(1):(1>0?4:5)
5、 位运算符、 逻辑运算符
&、|、~ &&与、||或、!非
&& 两边都成立,结果为true
|| 两边有任意一个成立,结果为true
三、JS中的分支和循环属性
一、JS中的分支
【if-else结构】
1、结构的写法:
if(){
//条件为true时,执行if的{}
}else{
//条件为false时,执行else的{}
}
2、注意事项:
①else{}语句块。可以根据情况进行省略。
②if和else后面的大括号可以省略,但是省略大括号后,if和else后面只能跟一条语句,不建议省略;
3、if的()中的判断条件,支持的情况:
①Boolean:true为真;false为假;
②String:空字符串为假,所有非空字符串为真;
③Number:0为假;一切非零数字为真;
④null/Undefined/NaN:全为假;
⑤object:全为真;
【多重if、阶梯if结构】
1、if(条件一){
//条件一成立,执行的操作
}else if(条件二){
//条件一不成立&&条件二成立,执行的操作
}else if(条件三){
//条件一不成立&&条件二不成立,执行的操作
}
2、多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行。遇到正确选项并执行完以后,直接跳出结构,不再
判断后续分支;
【嵌套if结构】
1、结构写法:
if(条件一){
//条件一成立
if(条件二){
//条件一成立&&条件二成立
}else{
//条件一成立&&条件二不成立
}
}else{//条件一不成立
if(条件二){
条件一不成立&&条件二成立
}else{
条件一不成立&条件二不成立
}
}
2、在嵌套结构中,如果省略{},则else结构永远属于离它最近的一个if结构。
3、嵌套结构可以多层嵌套,但是一般不超过三层,能用多重结构的不用嵌套结构。
二、JS中的循环结构
【while(){}循环结构的步骤】
1、声明循环变量
2、判断循环条件
3、执行循环体操作
4、更新循环变量
然后循环执行2-4,直到条件不成立时跳出循环。
while循环()中的表达式,运算结果可以是多种类型,但是最终都会转为真假,转换规则同if结构
(1)、boolean类型:true为真,false为假
(2)、string类型:所有非空字符串为真,空字符串为假
(3)、number类型:一切非零数字为真,零为假
(4)、null、undefined、NaN:全为假
(5)、object类型:全为真。
var num=1; //声明循环变量
while (num<=10){ //判断循环条件
document.write(num+"<br />");//执行循环体操作
num++; //更新循环变量
}
【 while循环与do-while循环的区别:】
while循环是先判断再循环;
do-while循环是先执行再判断,即便是条件不成立,该循环也最少执行一次.
var num=10;
do{
document.write(num+"<br />");
num--;
}
while(num>=0);
【for循环】
1、for循环有三个表达式:
① 声明循环变量;
② 判断循环条件;
③ 更新循环变量;
三个表达式之间用;分隔开,三个表达式可以省略,但是两个分号不能省略.
2、for循环的执行特点:先判断再执行,和while相同;
执行顺序:1、初始语句 2、执行条件是否符合? 3、循环体 4、增加增量 ;
3、for循环三个表达式均可以由多部分组成,第二部分多个判断条件用&& 、||连接,其他部分可以用,连接。
将上部while循环改为for循环如下:
for(var num=1; num<=10;num++){
document.write(num+"<br />")
}
【循环控制语句】
1、break:跳出本层循环,继续执行后面的语句。
如果循环有多层嵌套,则只能跳出来一层循环;
2、continue:跳过本次循环剩余的代码继续执行下一次循环;
①、对于for循环:continue之后执行的语句,是循环变量更新语句i++;
②、对于while、do-while循环,continue之后执行的语句,是循环条件判断。// 因此在使用这两个循环时,必须将continue放到i++之后使用。否则,continue将跳过i++,变成死循环。
三、JS中的函数和DOM
一、JS中的函数
函数的声明及调用
1、函数的声明格式:
function 函数名(参数一,参数二,...){
//函数体代码
return 返回值;
}
函数的调用:
① 直接调用:函数名加(参数一的值,参数二的值,.......);
② 事件调用:HTML标签中,使用事件名="函数名()"
<button οnclick="saySth('hahha','yellow')">点击按钮,打印内容</button>
2、函数的注意事项:
① 函数必须要符合小驼峰法则!!!(首字母小写,之后每个人单词首字母大写)
② 函数名后面的()中,可以有参数,也可以没有参数。分别称为有参函数和无参函数;
③ 声明函数时的参数列表,称为型参列表,形式参数。(变量的名字)
function saySth(str,color){}
调用函数时的参数列表,称为实参列表,实际参数。(变量的赋值)
saySth("哈哈哈","red");
④ 函数的形参列表个数和实参列表个数没有实际关系。
函数参数的个数,取决于实参列表。
如果实参列表的个数<形参列表,则未赋值的形参,将为Undefined。
⑤ 函数可以有返回值,使用return返回结果;
调回函数时,可以使用一个变量接受函数的返回结果。如果函数没有返回值,则接受的结果为undefined;
function func(){
return = "hahaha";
}
var num = func();//num = "hahaha"
⑥ 函数变量的作用域:
在函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
不使用var声明的变量,为全局变量,在函数外边也能访问;
函数的形象列表,默认为函数的局部变量,只能在函数内部使用;
⑦ 函数的声明与函数的调用,没有先后之分。即,可以在声明函数之前,调用函数。
func();//声明func之前调用也是可以的。
function func(){}
匿名函数的声明和使用
1、声明一个匿名函数直接赋值给某一个事件;
window.onload = function(){}
2、使用匿名函数表达式;将匿名函数,赋值给一个变量。
声明:var func = function(){}
调用:func();
注意:使用匿名函数表达时,函数的调用语句,必须放在函数声明语句之后!!!(与普通函数的区别!!!)
3、自执行函数
① !function(){}();//可以使用多种运算符开头,单一版用!;
!function(形参列表){}(实参列表);
② (function(){}());//使用()将函数及函数后的括号包起来;
③ (function(){})();//使用()值包裹函数部分;
三种写法的特点:
① 第一种使用!开头,结构清晰,不容易混乱,推荐使用;
② 第二种写法能够表明匿名函数与调用的()为一个整体,官方推荐使用;
③ 第三种无法表明函数之后的()的整体性,不推荐使用;
JS代码的执行顺序问题
* JS代码在运行时,会分为两大部分。检查装载和执行阶段
* 检查装载阶段: 会先检测代码的语法错误,进行变量、函数的声明。
*
* 执行阶段:变量的赋值、函数的调用等,都属于执行阶段。
*
* 以下列代码为例:
* consoloe.log();
* var num = 10;//dundefined
*
* func1(); //函数正常执行
* function func1(){};
*
* func2(); //函数不能执行,打印func2时显示undefined
* var func2 = function{}
*
* 原因:上述代码的执行顺序为:
*
* --------------------检查装载阶段--------------------
* var num;
* function func1(){}
* var func2
*
* --------------------代码执行阶段--------------------
* consoloe.log(num); undefined; var num =10;
* function func1(){};
*
* func2(); =function(){}
二、函数中的DOM操作
【DOM节点】
DOM节点分为三大类:元素节点、属性节点、文本节点;
文本节点、属性节点属于元素节点的子节点。操作时,均需要先取到元素节点,再操作子节点。
可以使用getElement系列方法
【查看元素节点】
1、 getElementById:通过id取到唯一节点。如果id重名只能取到第一个;
getElementsByName() :通过name属性
getElementsByTagName() :通过标签名
getElementsByClassName() :通过class名
>>>获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成之后执行。可以有两种方式实现:① 将
JS代码写在body之后; ② 将代码写到window.onload函数之中;
>>>后面三个getElements,取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作。例如:
【查看/设置属性节点】
1、查看属性节点:getAttribute("属性名");
2、设置属性节点:setAttribute("属性名","属性值");
>>>查看和设置属性节点,必须取到元素节点,才能使用。
>>> setAttribute();函数在IE浏览器中可能会存在兼容性问题。比如在IE中不支持使用这个函数设置style/onclick等样式属性和事件属性。
>>> 我们推荐使用点符号法替代上述函数:
eg: dom1.style.color="" dom1.οnclick="" dom1.src=""
【总结-JS修改DOM节点的样式】
1、 使用setAttribute()设置class和style属性,但是存在兼容性问题,不提倡
div.setAttribute("class","cls1");
2、 使用.className直接设置class类,注意是className而不是.class:
div.className = "cls1";
3、 使用.style设置单个属性,注意属性名要是用驼峰命名法:
div.style.backgroundColor = "red";
4、 使用.style 或 .style.cssText 设置多个样式属性:
div.style = "background-color:red; color:yellow;"
div.style.cssText = "background-color:red; color:yellow;" √
【查看设置文本节点】
1、 .innerText: 取到或设置节点 里面文字内容;
.innerHTML: 取到或设置节点里面的HTML代码;
.tagName: 取到当前节点的标签名。 标签名全部大写显示。
【根据层次获取节点】
1 .childNodes: 获取元素的所有子节点。包括回车等文本节点。
.children: 获取当前元素的所有元素节点(只获取标签)。
2 .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
.firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
.lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
.lastElementChild:
3 .parentNode: 获取当前节点的父节点。
4 .previousSibling: 获取当前节点的前一个兄弟节点;包括回车等文本节点。
.previousElementSibling:
5 .nextSibling: 获取当前节点的后一个兄弟节点;包括回车等文本节点。
.nextElementSibling:
6 .getAttributes: 获取当前节点的属性节点。
【创建并新增节点】
1. document.createElement("标签名"):创建节点 。需要配合 setAttribute设置各种新的属性;
2. 父节点.appendChild(新节点):末尾追加方式插入节点
3. 父节点.insertBefore(新节点,目标节点):在目标节点前插入新节点.
4. 被克隆节点.cloneNode(true/false):克隆节点
>>> 传入true: 表示克隆当前节点,以及当前节点的所有字节点;
>>> 传入false或不传: 表示只克隆当前节点,而不克隆子节点。
【删除或替换节点】
1. 父节点.removeChild(被删节点): 删除父节点中的子节点;
2. 父节点.replaceChild(新节点,老节点): 使用新节点,替换掉老节点。
【表格对象】
1、row属性:返回表格中的所有行,是一个数组格式;
2、insertRow(index):在指定位置插入一行,index从0开始;
3、deleteRow(index):删除指定的一行,index从0开始;
【行对象】
1、cells属性:返回这一行中的所有单元格,是一个数组格式;
2、rowIndex属性:返回这一行是表格中的第几行,从0开始;
3、insertCell(index):在这一行指定位置,插入一个单元格,index从0开始;
4、deleteCell(index):删除这一行的指定单元格,index从0开始
【单元格对象】
1、cellIndex属性:返回这个单元格是本行的第几个,从0开始;
2、innerText innerHTML align className
[表格对象]
1、 rows属性: 返回表格中的所有行,是一个数组格式;
2、 insertRow(index): 在指定位置插入一行,index从0开始;
3、 deleteRow(index): 删除指定的一行,index从0开始;
[行对象]
1、 cells属性: 返回这一行中的所有单元格,是一个数组格式;
2、 rowIndex属性: 返回这一行是表格中的第几行,从0开始;
3、 insertCell(index): 在这一行指定位置,插入一个单元格,index从0开始;
4、 deleteCell(index): 删除这一行的指定单元格,index从0开始
[单元格对象]
1、 cellIndex属性: 返回这个单元格是本行的第几个,从0开始;
2、 innerText innerHTML align className
三、JS中的事件
【JS中的事件分类】
1、鼠标事件
click、dbclick、onmouseover、onmouseout
2、HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、键盘事件
keydown:键盘按下时触发
keypress:键盘按下并松开的瞬间触发
keyup:键盘抬起时触发
[注意事项]
①执行顺序:keydown->keypress->keyup
②当长按时:会循环执行keydown->keypress
③有keydown不一定有keyup,当事件触发过程中,鼠标将光标移走,将导致没有keyup
④keypress只能捕获键盘上的数字、字符、符号键,不能捕获各种功能键,而keydown和keyup可以。
⑤keypress支持区分大小写,keydown和keyup并不支持
[确定触发的按键]
①再触发的函数中传入一个参数e,表示键盘事件;
②使用e.keyCode,取得按键的Ascii码值,进而确定触发按键;
③所有浏览器的兼容写法(一般并不需要)
var evn = e || event ;
var code = evn.keyCode || evn.which || evn.charCode;
【JS中的DOM0事件模型】
1、内联模型(行内绑定):直接将函数名作为HTML标签的某个事件属性的属性;
eg:<button οnclick="func()">DOM0内联模型</button>
优点:使用方便;
缺点:违反了W3C关于HTML与JavaScript分离的基本原则;
2、脚本模型(动态绑定):在JS脚本中取到某个节点,并添加事件属性;
eg:window.onload = function(){}
优点:实现了HTML与JavaScript的分离
缺点:同一个节点,只能绑定一个同类型事件。如果绑定多次,则最后一个生效。
【DOM2事件模型】
1、添加事件绑定方式:
①:IE8之前:btn2.attachEvent("onclick",函数);
②:其他浏览器:btn2.addEventListener("click",函数,true/false);
参数三:false(默认) 表示事件冒泡 true 表示事件捕获
③:兼容写法:if(btn2.attachEvent){
btn2.attachEvent();
}else{
btn2.addEventListener();
}
2、优点:①可以给同一个节点,添加多个同类型属性;
②提供了可以取消事件绑定的函数。
3、取消DOM2事件绑定:
注意:如果要取消DOM2的事件绑定,那么在绑定事件时,处理函数必须要使用有名函数,而不能使用匿名函数;
【JS中的事件流】
1、事件冒泡
当某DOM元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点;
>>>什么情况下会产生事件冒泡?
①DOM0模型绑定事件,全部都是冒泡;
②IE8之前,使用attachEvent()绑定的事件,全部是冒泡;
③其他浏览器,使用addEventLinstener()添加事件,当第三个参数省略或者为false时,为事件冒泡;
2、事件捕获:当某DOM元素触发一种事件时,会从文档根节点开始,逐渐向下触发其祖先节点的同类型事件,直到
该节点自身;
>>>什么情况下会产生事件捕获?
①使用addEventLinstener()添加事件,当第三个参数为true时,为事件捕获;
↓ DOM根节点 ↑
↓ ↑
捕 爷爷节点 冒
↓ ↑
获 父节点 泡
↓ ↑
↓ 当前节点 ↑
3、阻止事件冒泡:
在IE浏览器中,使用e.cancelBubble = true ;
在其他浏览器中,使用e.stopPropagation();
兼容所有浏览器中的写法:
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE8之前
}
}
4、取消默认行为:
在IE浏览器中,使用e.returnValue = false;
在其他浏览器中,使用e.preventDefault();
兼容所有浏览器写法:
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
四、JS中的内置对象
一、JS中的数组
1、数组的基本概念?
数组是在内容空间中连续存储的一组有序数据的集合
元素在数组中的顺序,成为下标。可以使用下标访问数组的每个元素。
2、如何声明一个数组:
①使用字面量声明:var arr = [];
在JS中同一数组可以存储各种数据类型。
例如:var arr = [1,"jianghao",true,{},null,func];
②使用new关键字声明:var arr = new Array(参数);
>>>参数可以是:
a.参数省略表示创建一个空数组;
b.参数只放一个整数表示声明一个length为指定长度的数组,但是这个length可以随时可变可追加;
c.参数为逗号分隔的多个数值,表示数组的多个值。
new array(1,2,3) == [1,2,3]
3、数组中元素的读写/增删?
①读写:通过下标访问元素。下标从0开始,arr[1] = "hahaha";
②增删:
a.使用delete关键字,删除数组的某一个值。删除之后,数组的长度不变,对应的位置变为Undefined。
eg:delete arr[1];
b.arr.pop():删除数组的最后一个值。相当于arr.length -= 1;
c.arr.shift():删除数组的第一个值;
d.arr.unshift(值):在数组的第0个位置增加一个值;
4、数组中的其它方法
①join():将数组用指定分隔符链接为字符串。单参数为空时,默认逗号分隔。
②contact():【原数组不会被改变】 将数组,与两个或多个数组的值链接为新数组;
concat连接时,如果有二维数组,则至多能拆一层[]
[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]
③push():数组最后增加一个,unshift()数组开头增加一个。-返回新数组的长度
pop() 数组最后删除一个,shift() 数组开头删除一个。-返回被删除的值
【上述方法均会改变原数组】
④reverse():【原数组被改变】,将数组反转,倒序输出;
⑤slice():【原数组不会被改变】 截取数组中的某一部分,并返回截取的新数组;
>>>传入一个参数,表示开始区间,默认将截到数组最后;
>>>传入两个参数,表示开始和结束的下标,左闭右开区间(包含begin,不包含end)
>>>两个参数可以为负数,表示从右边开始数,最后一个值为-1;
⑥sort():【原数组被改变】将数组进行排列
>>>默认情况下,会按照每个元素首字母的ASII值进行排序;
[3,1,2,15].sort() -> [1,15,2,3];
>>>可以传入一个比较函数,手动指定排序的函数算法;
函数将默认接收两个值a,b 如果函数返回值>0,则证明a>b.
arr.sort(function(){
return a-b;升序排列
return b-a;降序排列
})
⑦ indexof(value,index):返回数组中第一个value值所在的下标,如果没有找到返回-1;
lastIndexof(value,index):返回数组中最后一个value值所在的下标,如果没有找到返回-1;
>>>如果没有制定index,则表示全数组中查找value;
>>>如果指定了index,则表示从index开始,向后查找value;
⑧ forEach():专门用于循环遍历数组。接收一个回调函数,回调函数接收两个参数,第一个参数为该数组的
每一项值,第二个参数为下标;
【IE8之前,不支持此函数】
⑨ map():数组映射,使用方式与foreash()使用方式相同。不同的是,map可以有返回值,表示将原数组的每个值
进行操作后,返回给一个新数组。
5、二维数组和稀疏数组
① 二维数组:数组中的值,依然是一个数组形式。
eg: arr = [[1,2,3],[4,5,6]] 相当于两行三列;
读取二维数组:arr:[行号][列号];
② 稀疏数组:数组中的索引是不联系的。(length要比数组中的实际元素个数大);
6、基本类型和引用数据类型:
① 基本数据类型:赋值时,是将原变量中的值,赋值给另一个变量,赋值完成后,两个变量相互独立,修改其中
一个的值,另一个不会变化;
② 引用数据类型:赋值时,是将原变量在内存中的地址,赋值给另一个变量。赋值完成后,两个变量中存储的时同一个
内存地址,访问的是同一份数据,其中一个改变另一个也会发生改变;
③ 数值型、字符串、布尔类型等变量属于基本数据类型;
数组,对象属于应用数据类型
二、JS中的内置对象
Boolean 类
也有两种声明方式:
可以使用字面量方式声明一个单纯的变量;用typeof检测为Boolean类型
也可以使用new Boolean() 声明一个Boolean类型的对象。用typeof检测为Object类型
.toString:将数值类型转化为字符串类型
.toLocaleString:将数值按照本地格式顺序转换为字符串,一般从右边开始,三个一组加逗号分隔;
.toFixed(n):将数字保留n位小数,并转为字符串格式;
.toPrecision(n):将数字格式化为指定长度。n表示不含小数点的位数长度。如果n<原数字
.valueOf():返回Number对象的基本数字值;
Number类
Number.MAX_VALUE 返回Number类可表示最大值
Number.MIN_VALUE 返回Number类可表示最小值
var num1 = 10
var num2 = new Number(10);
//console.log(typeof num1);
//console.log(Number.MIN_VALUE);
String 类
1、属性:str。length :返回字符串的长度,字符数;
字符串支持类似于数组下标的访问方式:str[0]
2、方法:
.toLowerCase():字符串所有字符转成小写;
.toUpperCase():字符串所有字符转成大写;
.chaAt(0)
.indexOf("str",index):从index位置开始,查找子串在在字符中出现的位置,如果没有返回值-1,
其它数组的indexOf方法;
.lastIndexOf:同数组;
.substring(begin,end):从字符串中截取子串
>>>只传入一个参数,表示从begin开始,到最后;
>>>传入两个参数,表示从begin到end的区间,左闭右开;
.split("分隔符"):将字符串以指定分隔符分隔,存入数组中。
传入空""表示将字符串的每个字符分开放入数组。
.replace("old","new"):将字符串中的第一个old替换为new。
>>>第一个参数,可以是普通字符串,也可以是正则表达式;
>>>如果是普通字符串,则只替换第一个old。如果是正则表达式,则可以根据正则的方法
Date 日期类
1、new Date():返回当前最新时间;
new Date("2017,8,23,12:34:56");
.getFullYear():获取4位年份;
.getMonth():获取月份0-11;
.getDate():获取一个月中的第几天 1-31
.getDay():获取一周中的第几天 0-6,0表示周天
三、JS中的自定义对象
【自定义对象】
1、基本概念:
① 对象:对象是拥有一系列无属性和方法的集合。
② 键值对:对象中的数据是以键值对的形式存在。对象的每个属性和方法都对应着一个键名,我们可以以键
取值。
③ 属性:描述对象特征的一系列变量,称为属性。【对象中的变量】
④ 方法:描述对象行为的一系列函数,称为方法。【对象中的函数】
2、对象的声明:
① 使用字面量声明: var obj = {
key1 :value1,
key2 :value2,
func1:function(){}
}
>>> 对象中的数据是以键值对的形式存储,键与值之间用:分隔。
多个键值对之间用,分隔。
>>> 对象中的键可以是除了数组和对象以外的任何数据类型,但是一般我们只用普通变量名作为键。
>>> 对象中的值可以是任何数据类型,包括数组和对象。
② 使用new关键字声明: var obj = new Object();
obj.key1 = value1;
3、对象中属性和方法的读写:
① .运算符:对象名.属性 对象名.方法();
② 通过中括号["key"]调用: 对象名.["属性名"] 对象名.["方法名"]();
>>>如果键中包含特殊字符则只能使用第二种方式给;
>>>对象中,直接写变量名,默认为调用全局变量。如果需要调用对象自身的属性或者方法。需要使用
对象名.属性,或者this.属性。
person.age this.age 都可以,但推荐使用this关键字。
③ 删除对象的属性和方法: delete 对象名属性名/方法名
的;delete person.age;
写在最后:
感谢读者在繁忙之中欣赏博主菜菜的随笔,希望读者能够对博主提出宝贵的意见,博客定当认真对待!