zoukankan      html  css  js  c++  java
  • 一路慢行的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;


    写在最后:

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

  • 相关阅读:
    vue-router 实践
    修改vue中<router-link>的默认样式
    JSON.parse() 与 JSON.stringify() 的区别
    JS 中的异步操作
    CSS3 box-sizing:border-box的好处
    element ui 栅格布局
    css overflow用法
    koa中间件机制
    canvas 入门
    前端面试题:淘宝首页用了多少种标签
  • 原文地址:https://www.cnblogs.com/xyq1107/p/7465349.html
Copyright © 2011-2022 走看看