---------走过夏天,一路慢行的JavaScript之旅(add)!!!

一、JavaScript

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

二、JavaScript基本使用方式和常用属性

一、使用JS的三种方式:

1、在HTML中直接内嵌JS(并不提倡使用);
<button onclick="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 onclick="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.onclick="" 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 onclick="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;

写在最后:

      感谢读者在繁忙之中欣赏博主菜菜的随笔,希望读者能够对博主提出宝贵的意见,博客定当认真对待!

时间: 2024-10-22 15:53:00

---------走过夏天,一路慢行的JavaScript之旅(add)!!!的相关文章

走过夏天,一路慢行的CSS之旅

1.CSS常用选择器 /*[CSS常用选择器]*/ /* 标签选择器 * 写法: HTML标签名{} * 作用: 可以选中页面中,所有与选择器同名的HTML标签. */ li{ /*color: red; font-size: 24px;*/ } /* 类选择器(class选择器) * 写法: .class名{} * 调用: 在需要调用选择器样式的标签上,使用class="class名"调用选择器 * 优先级: >标签选择器 */ .first{ /*color: blue;*/

-------走过夏天,一路慢行的HTML5之旅!

一.HTML5的概念 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 二.HTML5文档的结构  HTML文档主要包括三大部分:文档声明部分.<head>头部部分.<body>主体部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </

Javascript之旅——第十站:为什么都说闭包难理解呢?

原文:Javascript之旅--第十站:为什么都说闭包难理解呢? 研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个是否浅显易懂... 一:闭包含义 闭包是个专业词汇,这样才能显得在js中是高大上的货色,官方定义我这里就不敢修改它,定义如下:就是有权访问另一个函数作用域的变量的函数. 二:一个简单的场景 上面的定义大概也能看得懂,但是不知道为什么

Javascript之旅——第七站:说说js的调试

最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企业差旅的时候,通常都有一个成本中心的js公共模块,客户在预定机票 的时候来填写这个成本中心,而这种成本中心分布在online,offline和app等预定端,这样也是方便后期和客户公司进行月结算. 我们还知道,项目做大了,复杂化了,SOA化了之后,很多问题就来了,就像web中的一个理论,所有前端的数

Javascript之旅——终点站:困惑的settimeout

有时候结局不是很美好,但起码这也算是一种结局,这个系列的最后一篇settimeout,这是一个让人困惑的函数,也是我一直在吐槽JS的 原因,我们看不到JS的源代码,setimeout同样也是,从始到终都是黑盒子的使用. 一:settimeout单线程的质疑? 所有的教科书都在说js是单线程模型,也说settimeout的执行函数会丢给js的内部执行队列,这其中还包括onlick事件以及一些xhr的回调函数. 乍一看貌似是这么一回事,既然要排队嘛,那肯定是FIFO的原则了,谁也无法保证准确的定时触

Javascript之旅——第八站:说说instanceof踩了一个坑

前些天写js遇到了一个instanceof的坑,我们的页面中有一个iframe,我在index页面中计算得到了一个array,然后需要传递到Flight页面 这个嵌套的iframe中的一个函数(SearchFlight)中,作为防御性编程,我需要在SearchFlight函数中进行参数检测,也就是判断过来的参数一 定是Array类型. 一:抛出问题 举个例子,下面有两个页面. Index.html页面 1 <!DOCTYPE html> 2 <html xmlns="http:

Javascript之旅——第四站:parseInt中要注意的坑

前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息 一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效期判断,为了不必要的麻烦,就是判断过期时间一定不能在 一个月内,由于输入的年月日在三个文本框中,再加上我嫌转成时间麻烦,就索性直接拿年,月,日的文本内容直接强转成int类型来判断,此为 背景. 说了这么多,终于说到文章主题了,我们知道有效期有这样的:2015-09-20,我就毫不犹豫的从月文本框中拿

Javascript之旅——第十一站:原型也不好理解?

写到这篇,我的js系列也快接近尾声了,所以这个系列不会遗留js来实现面向对象的核心——原型,有些人说原型不好理解,其实嘛,要想系统 的理解原型,最便捷的方式就是看看经典的书,少看些博客,博客这东西只是博主自己的个人理解,充其量是些配味的佐料. 一:继承 如果你熟悉C#的话,你肯定会知道,所有的类都是继承于Object的,这样我就拥有Object所具有的功能了,如下图中我定义的Person类. 从图中可以看到,在C#中到处都是继承,下一步我要做的就是自定义继承,如下图中我定义的Student类,让

Javascript之旅——第二篇:对象和数组

一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象   说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也是遵循这个守则,在web编程中几乎天天用到的就是JSON.是的, 这就是一个对象,不过这个对象下面的字段都是字符串和值类型,如下图. 1 var delivery = { 2 no: 1, 3 sendtime: "2014-11-25", 4 way: "PJS" 5