JavaScript基础

JavaScript

引入方式

熟悉的老三样:标签内嵌,直接使用,外部引入

(1)HTML标签中内嵌JavaScript

<button onclick="JavaScript('hello world')">点击这里!</button>

(2)HTML页面中直接使用JavaScript

<script type="text/javascript">
    //JavaScript代码
</script>

(3)引入外部JavaScript文件

<script language="JavaScript" src="JavaScript文件路径"></script>

注意:(2)(3)两种方式中script标签插入位置的不同会影响到JavaScript代码的执行顺序

变量相关

  1. 使用 var 声明的变量只在当前函数作用域有效,在其他作用域无法使用,而不用 var,直接复制声明的变量会被默认为全局变量,在整个JavaScript文件中都有效

  2. 同一变量可以进行多次不同的赋值,每次重新赋值时会修改变量的数据类型

    var a=10;
    a="我是小王" //a在声明时为整形,咋子第二次赋值时变成了字符串
    
  3. 同一变量名可以多次用var声明,但是第二次之后的声明只会被理解为赋值

    var a=10; //a=10
    var a=3; //a=3
    
  4. 变量名命名要符合以下要求:

    (1)由字母,数字,下划线,美元符号组成,且数字不能开头

    (2)命名要符合小驼峰法则或匈牙利命名法

    helloJavaScript //小驼峰法则:变量首字母小写,之后每个单词首字母大写(最常用)
    hello_java_script //匈牙利命名法:变量所有字母都小写,单词之间用下划线分隔
    hellojavascript //错误写法,啥也不是
    

    (3)不能使用JavaScript中的关键字

  5. 数据类型

    值类型:

    (1)undefined:未定义,即使用了var来声明变量,但没有进行初始化赋值

    <script type="text/javascipt">
        var a;
        console.log(a); //使用了var声明变量a,但未赋值,则a为undefined
        console.log(b); //没有声明就直接使用变量b,会报错
    </script>
    

    (2)null:空引用,即这个变量中什么都没有

    (3)Boolean:布尔类型,只有 true 和 false 两个值

    (4)number:数值类型,整数和小数都统一输入number类型

    (5)string:字符串类型,用 " " 或 ’ ’ 包裹,两种字符串没有区别,可相互包含

    var a="我在'汤姆布利柏的小屋'居住";
    var b='我在"汤姆布利柏的小屋"居住';
    console.log(a); //我在'汤姆布利柏的小屋'居住
    console.log(b); //我在"汤姆布利柏的小屋"居住
    

    (6)symbol

    引用数据类型:

    (1)object:对象类型。包括函数、数组、自定义对象等

    (2)Array:数组

    (3)function:函数

  6. Number函数:将其他数据类型变量转换为数值类型

    (1)字符串转数值

    Number("111"); //转换结果为111:字符串为纯数值字符串,会转为对应的数字
    Number(""); //转换结果为0:字符串为空字符串时,会转为0
    Number("123hhhh"); //转换结果为NaN:字符串包含其他非数字字符时,不能转换
    

    (2)布尔类型转数值

    Number(true); //将布尔型true转换为1
    Number(false); //将布尔型false转换为0
    

    (3)Null 和 Undefined 转数值

    Number(null); //将空引用null转换为0
    Number(undefined); //将未定义undefined转换为NaN
    

    (4)Object 类型转数值

    先调用 ValueOf 方法,确定函数是否有返回值,再根据上述各种情况判断

  7. isNaN函数:判断一个变量或常量是否为NaN(非数值)。使用 isNaN 进行判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,结果为false

    isNaN("111"); //false
    isNaN(""); //false
    isNaN("123hhhh"); //true
    isNaN("true"); //false
    
  8. parseInt函数:将字符串类型转换为整数数值类型。parseInt函数课解析一个字符串,并返回一个整数

    (1)空字符串:parseInt函数不能转换空字符串,会输出NaN

    parseInt(""); //NaN
    

    (2)纯数值字符串:转化小数时会直接抹掉小数点,不进行四舍五入

    parseInt("123")   //123
    parseInt("123.11") //123
    

    (3)包含其他字符的字符串:截取第一个非数值字符前的数值部分进行输出

    parseInt("123.45a");  //123
    parseInt("a123.45"); //NaN
    

    注意:parseInt 函数只能转换string类型,对其他类型进行转换结果均为 NaN

  9. parseFloat函数:将字符串转换为小数数值类型。在转化整数字符串时,保留整数,当转化包含小数点的字符串时,保留小数点

    (1)空字符串:parseFloat函数不能转换空字符串,会输出NaN

    parseFloat(""); //NaN
    

    (2)纯数值字符串

    parseFloat("123")   //123
    parseFloat("123.11") //123.11
    

    (3)包含其他字符的字符串:截取第一个非数值字符前的数值部分进行输出

    parseFloat("123.45a");  //123.45
    parseFloat("123a45"); //123
    parseFloat("a123"); //NaN
    parseFloat("a123.45"); //NaN
    

    注意:parseFloat 函数也只能转换string类型,对其他类型进行转换结果均为 NaN

  10. typeof 函数:检测一个变量的数据类型。传入一个变量,返回变量所属的数据类型。一般都有以下几种情况

    (1)未定义:数据类型为 Undefined

    (2)数值:数据类型为 Number

    (3)字符串:数据类型为 String

    (4)True / False:数据类型为 Boolean

    (5)Null /对象:数据类型为 Object

    (6)函数:数据类型为 function

    typeof函数有两种常用写法:函数写法和指令写法

    //1.函数写法:需要保留(),变量通过()传入
    typeof("xiaowang"); //函数调用方式需要将变量通过函数后面的()传入
    //2.指令写法:可以省略(),直接将变量紧跟typeof
    typeof "xiaowang"; //指令调用方式可以省略(),直接将变量紧跟typeof
    

输入输出

  1. document.write:文档内打印输出

    //1.直接输出
    document.write("我是小王")
    //2.拼接字符串:用+连接,字符串用""包裹
    var str="hello";
    document.write(str+" "+"world"); //hello world
    //3.输出html标签,将标签写入双引号中即可
    document.write("<p style="background:pink">我是小王</p>")
    
  2. alert函数:浏览器弹窗输出,带有一个“确定”按钮,()内语句使用方式与document.write()中的相同

  3. prompt函数:浏览器弹窗输入,用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,点“确认”或“取消”按钮后才能继续操纵。若用户点击“确认”,则返回值为用户输入的值;若用户点击“取消”,则返回值为null

    prompt("输入框上的提示信息,可选","输入框里的默认信息,可选") //如果只写一部分,默认为提示信息
    //还可以定义变量来接收输入内容
    var name=prompt("请输入你的名字:")
    
  4. confirm:浏览器弹窗确认

    确认弹窗,可以一定程度避免用户手误的操作

    var is=confirm("确定删除嘛");
    if(is){
        alert("删了昂");
    }else{
        alert("不删不删");
    }
    

    运行结果:
    在这里插入图片描述

  5. console.log:浏览器控制台输出

    输出的内容会出现在浏览器的控制台,即点击F12后的console栏里

运算符

  1. 算术运算符:+、- 、* 、/ 、% 、++ 、–

  2. 赋值运算符:=、+=、-=、*=、/=、%=

  3. 关系运算符:= =(等于)、===(严格等于)、!= 、> 、< 、>= 、<=

    = =和===的区别:

    ===:左右两边的数据类型不同时,直接返回false;类型相同时再进行下一步值的判断

    = =:左右两边数据类型不同时,尝试将等式两边转为数值类型再进行判断;类型相同时进行下一步值的判断

    var a="123";
    var b=123;
    console.log(a===b); //false
    console.log(a==b); //true
    
  4. 逻辑运算符:&&(与)、||(或) 、!(非),用法规律跟Java一样,不再多说

  5. 条件运算符:表达式1 ?表达式2 :表达式3 (表达式1为 true 时运行表达式2,否则运行表达式3)

  6. 逗号运算符:就是逗号,看个例子吧

    var a=2;
    var b=0;
    var c;
    c=(++a,a*=2;b=a*5); //依次计算++a得a为3; a*=2得6; b=a*5得b=30,则c等于最后一个表达式的值,为30
    console.log(c); //30
    
  7. 优先级:优先级高的运算符会被首先执行,下面根据运算符优先级由高到低顺序排列一个表格
    在这里插入图片描述

流程控制

条件判断之真假判断:各种数据类型的真假表示
在这里插入图片描述
下面开始流程控制的几种结构:

  1. 分支结构

    (1)if 结构

    if(判断条件){
        //if条件成立时代码执行的语句块
    }
    

    (2)if-else 结构

    if(判断条件){
        //条件为true时执行的代码块
    }else{
        //条件为false时执行的代码块
    }
    

    (3)if-else if-else结构

    if(条件1){
       //条件1成立
    }else if(条件2){
        //条件1不成立&&条件2成立
        //else if部分可以有N个
    }else{
        //条件1不成立&&条件2不成立
    }
    

    (4)嵌套if结构

    if(条件1){
       if(条件2){
        if(条件3){
           //语句块
           //条件1、条件2、条件3都成立时执行  
           }
         }
      }else{
          //语句块
          //上面的条件有1个不成立都来执行这个
      }
    

    (5)Switch-case结构

    switch(表达式){
       case 常量表达式1:  //case之后的表达式值和下面的表达式值不能相同,否则只会执行第一个case结构
            语句1;
            break;
       case 常量表达式2:
            语句2;
            break;
            ......
       default:
            语句N;
            break;
           }
    
  2. 循环结构

    (1)while循环结构

    while(条件){
          需要执行的代码块
          }
    

    (2)do-while循环结构

    do{
        需要执行的代码块 
    }while(条件); //无论循环变量的初始值是否符合循环条件,do-while循环都至少执行一次
    

    (3)for循环结构

    for(初始化循环变量;循环条件;修改循环变量的值){
        需要执行的代码块
    }
    for(;;){
        //for循环可省略表达式,此循环省略了三个表达式,被称为死循环,要靠其他流程控制语句控制其结束
    }
    
    //for-in循环:主要用于遍历对象的属性。简单举例:
    var arr=[1,2,3,4,5]; //声明一个数组
    for(item in arr){
        //读出数组中的每一个值(数组有几个值,for-in就循环几次)
        console.log(item); 
        }
    
    
  3. 流程控制语句

    (1)break语句:跳过本层循环,即直接终止循环,继续执行循环后面的语句

    for(var i=1;i<=5;i++){      
        //i=3时,break语句将跳过本层循环
        if(i==3){
            break;
        }
        console.log(i);   //输出1,2后,当i==3时,跳出了for循环,直接执行了循环后面语句,输出“循环
    }                     //结束”,结束了循环
    console.log("循环结束啦!");
    

    (2)continue语句:跳过本次循环中循环体剩余的语句,继续执行下一次循环

    for(var i=1;i<=5;i++){   
        //i=3时,continue语句只会跳过本次循环,然后继续执行下一次循环
        if(i==3){
            continue;
        }
        console.log(i);   //输出1,2后,当i==3时,跳过了本次for循环,然后继续执行下次循环,输出4,5
    }                     //最后输出“循环结束”,结束了循环
    console.log("循环结束啦!");
    

    注意:对于while循环和do-while循环,必须将循环变量更新语句放在continue语句上,否则会造成死循环

    (3)return语句:只能用于函数中,将会直接终止当前函数执行,包括循环后面的语句也不再执行

    !function(){
       for(var i=1;i<=5;i++){
           if(i==3){  //当i==3时,return语句会直接终止当前函数,包括循环后面的“循环结束”也不会执行
               return;
           }
           console.log(i);
       }
        console.log("循环结束啦!");
    }();
    

函数

  1. 函数声明及调用

    //有参函数
    function 函数名(参数1,参数2,……){      //形参列表(变量的名)
        //函数体
        return 结果;
    }
    function add(num1,num2){
        var sum=num1+num2;
        return sum;
    }
                              //通过函数封装起来的代码就可以在后续使用过程中通过函数名直接调用
    //无参函数                //并且可以重复使用
    function 函数名(){
        //函数体
        return 结果;
    }
    function add(){
        var sum=1+1;
        return sum;
    }
    
    //直接调用有参函数
    add(3,5);   //3,5将分别赋给函数的两个形参,num1和num2     //实惨列表(变量的值)
    
    //直接调用无参函数
    add();   //无参函数不需要传递参数列表,但是()一定不能省略
    
    //通过事件方式调用函数
    //给按钮添加onclick属性,表示当触发onclick事件(单击按钮)时调用函数
    <button onclick="add(3,5)">点我调用方法</button>
    

    注意:(1)函数的声明和调用没有先后之分

    (2)函数形参与实参个数并无直接关联

    // 形参列表个数>实参列表个数。 num3 的值为 Undefined
    function func1(num1,num2,num3){}
    func1(1,2);
    // 实参列表个数>形参列表个数。 多余的实参将存储在 arguments 对象中
    function func2(num1){}
    func2(1,2,3);
    
  2. 函数的作用域

    (1)在函数外,无论是否使用 var 声明变量,都是全局变量,在整个 JavaScript 文件可用

    (2)在函数内,使用 var 声明的变量为局部变量,只在当前函数可用

    (3)在函数内,不用 var 声明的变量依然为全局变量,在整个 JavaScript 文件可用

    (4)在 JavaScript 中,函数内部能够使用全局变量;而函数外部不能使用局部变量

  3. 匿名函数:没有函数名的函数

    (1)匿名函数表达式:将一个匿名函数赋值给一个变量,在后续调用函数时此变量就可以当函数名使用

    var func=function(){}  //声明函数表达式
    func()  //调用函数表达式
    

    注意:使用匿名函数表达式时,函数调用语句必须在声明语句之后

    (2)事件调用匿名函数:配合事件使用,表示当触发哪一个事件时执行哪一个匿名函数

    //window.onload 表示当文档加载完成后自动调用匿名函数
    window.onload=function(){
        alert("我是小王");          //形如 function(){} 的结构称为匿名函数,这类函数没有函数名,
    }                              //不能通过函数名直接调用
    
  4. 自执行函数:无须手动调用,在声明函数时自动调用,有三种语法结构:

    (1)!function(形参列表){}(实参列表) :自动调用当前匿名函数,函数实参可以通过最后圆括号传入

    !function(num1,num2){
        var sum=num1+num2;
    }(1,2);
    

    (2)(function(形参列表){ }(实参列表))

    (function(num1,num2){
        var sum = num1 + num2;
    }(1,2));
    

    (3)(function(形参列表){ })(实参列表)

    (function(num1,num2){
        var sum = num1 + num2;
    })(1,2);
    
  5. 函数内置对象

    (1)arguments对象:伪数组对象,可以通过一下方式从arguments对象中取值

    var num1=argument[0]     //读取arguments数组中的第一个值
    

    arguments对象主要有两个作用

    1)保存在调用函数时所赋值的实参列表。当调用函数并使用实参赋值时,实际上参数已经保存到arguments数组中。即使没有形参,也可以使用arguments[n]的形式调用函数

    function func(){
        //无论是否有形参,都可以使用arguments对象取到实参列表所赋值的数据
        console.log(arguments[0]);  //小王
        console.log(arguments[1]);  //土豆
        console.log(arguments[2]);  //糖醋里脊
        console.log(arguments[3]);  //只有三个实参,则读取第四个值为undefined
    }
    func("小王","土豆","糖醋里脊");
    

    注意:arguments的个数是由实参决定的,不由形参决定。对于arguments和形参都存在的情况下,形参和arguments是同步的

    function func(num1){
        console.log(arguments[0]); //实参赋值为时,则此时arguments[0]=10
        num1=10;  //将形参第一个值修改为20
        console.log(arguments[0]); //再次打印,此时arguments[0]与形参第一个值同步变化为20
    }
    func(10);
    

    2)arguments对象的callee属性用于返回arguments所在函数的引用。arguments.callee()可以调用自身函数执行,是递归调用

    var num=1;
    function func(){
        console.log(num);
        num++;
        if(num<=5){  //当num<=5时,函数递归将调用自身
            arguments.callee();  //表示调用函数自身,效果与func()相同
        }
    }
    func();
    

    (2)this关键字:指向当前函数调用语句所在的作用域,谁调用函数,this指向谁

    function func(){
        console.log(this); //直接用函数名调用函数,相当于在window对象中调用函数,this指向window对象
    }
    func();
    

BOM和DOM

JavaScript之BOM和DOM_ZERO312_王的博客-CSDN博客

JavaScript事件

JavaScript事件三大类

  1. 鼠标事件:需要通过鼠标进行触发的事件,常用的鼠标事件如下:
    在这里插入图片描述
    事件使用时一般需要配合函数的调用,可以给标签添加事件属性,让标签触发事件的时候调用一个函数

    <button onclick="func()">单击这里触发事件</button>
    <script type="text/javascript">
        function func(){
            alert("触发按钮的onclick事件");
        }
    </script>
    

    还可以通过选中一个标签节点,通过JavaScript动态绑定一个匿名函数触发事件

    <button id="btn">单击这里触发事件</button>
    <script type="text/javascript">
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            alert("触发按钮的onclick事件");
        }
    </script>
    
  2. 键盘事件:通过按下键盘按键所触发的事件
    在这里插入图片描述
    注意事项

    (1)三个键盘事件是按onkeydown、onkeypress、onkeyup顺序执行的

    (2)长按一个按键时,会不断触发onkeydown和onkeypress,只有按键抬起后会触发onkeyup事件

    (3)onkeydown/onkeyup和onkeypress的区别

    ​ 。onkeypress只能捕获字母、数字、符号键,不能捕获功能键(Enter、F1~F12等);而另外两个基本可以捕获所有功能键(特殊键盘的某些按键除外)

    ​ 。捕获字母键时,onkeypress可以区分大小写,而另外两个不区分

    ​ 。捕获数组键时,onkeypress不能区分主键盘和小键盘,而另外两个可以区分

    (4)在使用键盘事件时,通常会直接将键盘事件监测到document上,而且onkeydown和onkeyup通常监测一个即可

    document.onkeydown=function(){
        //键盘按键按下时触发的函数
    }
    

    判断键盘按键

    在使用键盘事件时,除了要检测触发的是onkeydown还是onkeyup,更重要的是判断用户按下去的是哪一个按键

    当监测键盘事件时,浏览器会默认将事件因子e传入事件触发函数中,事件因子可以通过keyCode等属性确认按键的ASCⅡ码值,进而确定用户按下的是哪一个按键

    //判断用户按键是否为Enter键
    document.onkeydown=function(e){
        var evn=e.event;
        var code=ecn.keyCode;
        if(code==13){
            alert("Enter键被按下啦!"); //用户按下Enter键后需要执行的操作
        }
    }
    

    下面是常用的ASCⅡ码值的参照表
    在这里插入图片描述

  3. HTML事件:网页中的HTML标签发生变化时自动触发的事件。常用事件如下:
    在这里插入图片描述

  4. event事件因子

    取到事件因子除了键盘事件外,还可以在任何事件的触发函数中使用window.event取到事件因子对象

    <button id="btn">单击事件因子</button>
    <script type="text/javascript">
    	var btn = document.getElementById("btn");
    	btn.onclick = function(e){
    		var evn = e || window.event;
    		console.log(evn);
    	} 
    </script>
    

    event对象的属性除了上面说的keyCode属性取ASCⅡ码值之外,还有很多别的属性
    在这里插入图片描述

JavaScript事件模型

  1. DOM()事件模型:有两种绑定事件的方式,内联模型和脚本模型

    (1)内联模型:即行内绑定,直接将函数名作为HTML标签某个事件的属性值

    <button onclick="func()">按钮</button>
    //缺点:违反W3C关于HTML和JavaScript分离的基本原则
    

    (2)脚本模型:即动态绑定,通过在JavaScript中选中一个节点,给节点的onclick事件添加监听函数

    window.onload=function(){} //给window对象添加onload事件
    document.getElementById("div").onclick=function(){} //选中div节点,并添加onclick事件
    //优点:实现了HTML和JavaScript分离
    //缺点:同一节点只能绑定一个同类型事件,若绑定多次,则只有最后一次生效。并且一旦绑定事件就无法取消
    
  2. DOM2事件模型:解决DOM()事件模型的局限性

    (1)添加事件绑定

    var btn=document.getElementById("btn");
    btn.addEventListener("click",function(){
        //click触发是执行的回调函数
    },true/false)
    
    //其中,addEventListener接收三个参数
    1.第一个参数是触发的事件类型,主要事件名称不需要用“on”开头
    2.第二个参数是触发事件时执行的回调函数
    3.第三个参数是模型函数,表示事件冒泡或事件捕获,默认的false表示事件冒泡,true表示事件捕获
    

    (2)取消事件绑定:若要取消事件绑定,在绑定事件时回调函数必须使用有名函数,而不能使用匿名函数

    var btn=document.getElementById("btn");
    btn.addEventListener("click",clickFuction,true);
    function clickFunction(){
        //单击事件的回调函数
    }
    //removeEventListener()取消事件绑定
    btn.removeEventListener("click",函数名) //取消绑定时要传入取消的函数名,若用匿名函数,则没有函数名,无法取消
    

    DOM2事件模型优点:实现了HTML和JavaScript的分离;可以取消事件绑定;可以为同一节点添加多个同类型事件。多个事件可以同时生效,而不会被覆盖掉

JavaScript事件流模型

事件流就是当一个节点触发事件时,事件会从当前节点流向其他节点。而根据事件流动的方向,事件流模型可以分为事件冒泡和事件捕获

  1. 事件冒泡:当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点
    在这里插入图片描述
    在平常接触到的事件绑定方式中,绝大部分都是事件冒泡

    (1)DOM()事件模型绑定的事件均为事件冒泡

    (2)addEventListener()添加的事件,当第三个参数为false或省略时,为事件冒泡

  2. 事件捕获:当某DOM元素触发某事件时,会从根节点开始逐个触发其祖先元素的同类型事件,直到当前节点
    在这里插入图片描述
    事件捕获只有一种方式能触发:addEventListener()添加的事件第三个参数为true时为事件捕获

  3. 事件委派:基于事件冒泡而产生,是将本该添加在节点自身的事件选择添加到其父节点上,同时委派给当前元素来执行。其原理就是事件冒泡。由于给多个子元素添加事件,会沿着事件冒泡流触发其父元素的同类型事件,所以可以直接将事件添加在父元素上,并在事件函数中判断单击的是哪一个子元素,进而进行具体操作。其具体作用如下:

    (1)提高性能 将事件绑定在父节点上,只需要绑定一个事件就可以;而将事件依次添加给子节点,则需要绑定多个事件。因此,事件委派具有更优的性能

    (2)新添加的元素会具有同类型元素的事件如果使用其他方式绑定事件,当页面新增同类的节点时,这些节点不会获得之前绑定的事件。但是,使用事件委派可以让新添加的元素获得之前绑定的事件

  4. 阻止事件冒泡

    function myParagraphEventHandler(e) {
    	e = e || window.event;
    	if (e.stopPropagation) {
    		e.stopPropagation(); // IE8 以外的浏览器
    	} else {
    		e.cancelBubble = true; // IE8 之前
    	}
    }
    
  5. 阻止默认事件

    function eventHandler(e) {
    	e = e || window.event;
    	// 阻止默认行为
    	if (e.preventDefault) {
    		e.preventDefault(); //IE 以外
    	} else {
    		e.returnValue = false; //IE 
    	}
    }
    

数组

数组的声明

  1. 字面量声明

    var arr=[];
    //JavaScript中同一数组可以储存多种不同的数据类型,但一般同一数组只用于存放同一种数据类型
    var arr=[1,"2",true,{"name":"小王"},[1,2]];
    
  2. new关键字声明:通过new关键字实例化一个数组对象,并把这个数组对象的句柄赋值给一个变量

    var arr=new Array(参数);
    //其中参数有以下情况:
    1.不写,表示声明一个没有指定长度的数组
    var arr=new Array();
    2.写入数值,即数组长度,表示声明一个指定长度的数组,但是数组长度随时可变,可追加
    var arr=new Array(20);  //声明长度为20个数的数组
    3.写入数组默认的N个值
    var arr=new Array("1",2,true);  //相当于数组有三个默认值[1,"2",true]
    
  3. 引用数据类型和基本数据类型

    (1)引用数据类型:数组或对象赋值时,将原变量的地址赋给新变量。两个变量实际操作的是同一份数据,所以修改其中一个变量,另一个会跟着变化

    var arr=new Array(1,2,3);  //创建一个引用数据类型的数组arr
    var brr=arr;  //将arr赋值给brr,实际上是将数组的地址赋值给了brr
    brr[0]="a";  //brr通过地址修改数组第0个值
    console.log(arr[0]);  //再次打印arr的第0个值,实际访问的是同一个数组,因此arr[0]也是"a"
    

    (2)基本数据类型:赋值时是将原变量的值赋给新的变量。两个变量属于不同的内存空间,修改其中一个,不会影响另一变量的值

    var a=10;  //创建一个基本数据类型的变量a
    var b=a;  //将a的值赋值给b
    b=20;  //将b的值修改为20
    console.log(a);  //a,b为两个不同的变量,a的值不会受影响
    

数组的访问

数组的访问主要分为两种操作,一种是通过数组下标读取数组的元素值、通过数组下标给数组赋予新值;另一种是通过JavaScript提供的方法实现对数组元素的增删操作

  1. 数组对象的读写

    (1)读:通过下标来访问元素

    var arrValue=arr[2];  //访问数组下标为2的元素值,即数组的第三个值
    

    (2)写:通过下标写入元素

    arr[1]="要赋予新值";  //给数组下标为1的元素赋予新的值,也就是数组的第二个值 
    
  2. 数组对象的增删

    (1)delete arr[n]:删除数组的第 n 个值,但数组长度不变,对应位置值变为 Undefined

    (2)arr.push(值):数组最后增加一个值,数组长度加 1,相当于 arr.length += 1

    (3)arr.unshift(值):数组的第 0 位插入一个值,其余位顺延

    (4)arr.pop():删除数组最后一位。与 delete 不同的是,pop 执行后数组长度也会减少一 个,相当于 arr.length -= 1

    (5)arr.shift():删除数组第 0 位,长度也会减 1,其余位的下标依次改变

    注意:调用上述方法后会直接修改原数组的值

数组常用方法

  1. join(“separator”):将数组用指定分隔符分隔,连接为字符串。参数为空时默认用逗号分隔

    var array=arr.join("separator");
    //注意:参数separate表示字符串中元素的分隔符,可以为空,默认为半角逗号。且该方法并不修改原数组,需要返回一个新的变量
    //示例:
    <script type="text/javascript"> 
     	var arr = new Array(3); // 声明一个数组arr
    	arr[0] = "wyy" 
     	arr[1] = "wyb" 
     	arr[2] = "ttandll"  
     	var array = arr.join("———"); // 将更改后的数组赋值给一个新变量后,传回新变量
     	console.log(array);
    </script>
    

    运行结果:
    在这里插入图片描述

  2. concat():将两个或两个以上的数组连接成一个数组,并返回连接后的数组。原数组不会改变,需要返回一个新的变量

    var newArr=arr.concat(arr1);  //将arr和arr1连接成新数组
    [1,2].concat([3,4],[5,6])=[1,2,3,4,5,6];  //连接时中括号最多拆一层
    [1,2].concat([1,2,[3,4]])=[1,2,1,2,[3,4]];  //多层中括号,以二维数组形式存在
    

    注意:

    (1)该方法并不会改变现有数组,而是返回被连接的多个数组的一个副本

    (2)如果多个数组里有值相同的元素,则不会重复出现,而会把重复元素过滤掉

     var arr = new Array(3); 
     arr[0] = "wyy"; 
     arr[1] = "wyb"; 
     arr[2] = "wtt"; 
     var arr1 = new Array(1); // 声明一个新数组 arr1
     arr1[0] = "wll"; 
     var newArr = arr.concat(arr1); 
     // 原数组不改变,需要将更改后的数组赋值给一个新变量newArr,传回新变量 newArr
     console.log(newArr);
    

    运行结果:
    在这里插入图片描述

  3. reverse():用于数组翻转,逆序排列,把数组的所有元素顺序反转

    arr.reverse();  //翻转,使数组中的值倒序输出
    //注意:该方法会直接修改数组,而不会创建新的数组
    
  4. slice(start,end):截取数组中指定位置的元素,并返回一个新的子数组,

    var sliceArr=arr.slice(1,2);  //左开右闭
    

    注意:

    (1)该方法不会改变现有的数组,而是原数组的一个子数组

    (2)参数start必选,表示开始下标。若start为负,则表示从末尾开始

    (3)参数end是可选,表示结束下标。若没有指定,则表示到结尾元素

  5. sort(function):对数组进行排序

    arr.sort();  //默认,将原数组按照ASCII码进行升序排列
    

    注意:

    (1)不指定排序函数:按照元素的ASCII码值进行升序排列

    (2)传入排序函数:默认传入两个参数a和b,如果返回值大于0,则a>b,升序排列,反之降序

  6. splice():从数组指定位置删除指定数量的元素,并返回被删除的元素

    arr.splice(2,1);  //删除下标为2的值
    arr.splice(1,0,"新值");  //在下标为1的位置插入一个新值
    arr.splice(2,1,"新值");  //将下标为2的值替换为新值
    

    注意:

    splice()方法和slice()方法的作用不同。splice()方法会直接对数组进行修改,而slice()方法只是截取原数组的一部分后返回一个子数组,并不会修改原数组

  7. indexOf(value,index) / lastIndexOf(value,index)

    (1)indexOf(value,index) :返回数组中第一个value值对应的下标位置,若未找到,则返回-1

    var index1=arr.indexOf(查询的数值,index);
    

    (2)lastIndexOf(value,index):返回数组最后一个value值对应的下标位置,若未找到,则返回-1

    var index2=arr.lastIndexOf(查询的数值,index);
    

    注意:

    (1)若未指定index参数,则默认在数组所有元素中查询

    (2)若指定index参数,则从当前index开始向后查询

    var arr = [1,2,3,4,5,6,6,6]; 
    var index = arr.indexOf(6,2); // 从 arr[2]开始查找 6 出现的第一个位置
    var index1 = arr.lastIndexOf(6,-2); // 查找 6 出现的最后一个位置,到倒数第二个位置停止
    console.log(index);  //5
    console.log(index1);  //6
    
  8. forEach():专门用于循环遍历数组。接收一个回调函数,回调函数可以接收两个参数,第一个为数组每一项的值,第二个参数为数组的下标

    arr.forEach(function(item,index){
        console.log(item);
    });
    //示例:
    var arr=[1,2,3];
    arr.forEach(function(item,index){
        console.log(item);  //1  2   3
    });
    
  9. map():数组映射,使用方式与forEach()相同,但也有与其不同的点就是map()有return返回值,表示将数组的每个值进行操作,返回一个新数组

    var arr1=arr.map(function(item,index){
        return item-1;  //将原数组的每个值-1之后返回
    });
    //示例:
    var arr=[1,2,3];
    var arr0=arr.map(function(item,index){  //数组映射,返回一个新数组
        return item-1;   //将原数组的每个值-1后返回
    });
    console.log(arr0);
    

    运行结果:
    在这里插入图片描述

二维数组和稀疏数组

  1. 二维数组:又称为矩阵,如var arr=[[1,2],[3,4],[5,6]]; 相当于三行两列的矩阵

    arr[行号][列号];  //读取二维数组的方法
    //可以用嵌套循环遍历取得数组的所有元素
    
  2. 稀疏数组:数组并不含有从0开始到 length-1的所有索引,即length值比实际元素个数多(数组中大部分的内容值都未使用或都为零,在数组中仅有少部分的空间使用)

对象

JavaScript之对象_ZERO312_王的博客-CSDN博客

正则表达式

参考:https://www.runoob.com/js/js-regexp.html

补充:
在这里插入图片描述
元字符:
在这里插入图片描述
在这里插入图片描述
特殊字符:
在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值