JavaScript进阶

发布于：2024-05-11 ⋅ 阅读:(142) ⋅ 点赞:(0)

函数

函数（方法）：是被设计执行特定任务的代码块

定义：通过function关键字进行定义

如

定义格式一：

funcion fname(参数1,参数2...)

{

}

注意：形式参数不需要类型

        返回值不需要定义类型，可以在函数内直接使用return 返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //定义函数
        function f()
        {
            console.log("f..");
        }
        //调用
        f();//f..

        function add(a,b)
        {
            console.log(a+"----"+b);
            return a+b;
        }

        let c=add(1,2);//1----2
        console.log(c);//3

    </script>
</body>
</html>

定义格式二：

将匿名函数赋值给另一个变量

        let add2=function(x,y)
        {
            console.log(x+"---"+y);
            return x+y;
        }
        let result=add2(1,2);
        console.log(result);

函数的注意事项

1.匿名函数可以作为参数传递 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(x)
        {
            // x=function(){console.log("匿名函数");}
            console.log("fn...");

            //调用x函数
            x();
        }
        fn(function(){
            console.log("匿名函数");
        })
    </script>
</body>
</html>

2.在js中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数

3.在js中调用无参函数可以传递实参，调用有参函数可以不传递实参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //有参函数不传递参数
        function fn(a,b)
        {
            //相当于：let a;//没传递数值
            console.log("----"+a+b);//----undefinedundefined

        }
        fn();

        //无参函数传递实参，实参没有丢失，而是会放到js的一个内置数组中 arguments
        function fn2()//let aruments=[1,2]
        {
            console.log("fn2...");
            for(let i=0;i<arguments.length;i++)
            {
                console.log(arguments[i]);
            }
        }
        fn(1,2);
    </script>
</body>
</html>

JavaScript对象

Array对象

Array对象用于定义数组

定义：

        let 变量名 = new Array(元素列表);//方式一

        let 变量名 =[元素列表]；//方式二

注意：

1.如果采用方式一定义数组：如果只给一个number类型的值，那么此时数值表示数组长度（不能传小数），要求不能给小数，数组长度不能是小数     

 2.采用方式一定义数组时：如果传的是一个非number数值，那么此时数组表示数组的元素

3.js的array数组长度是可变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=new Array(1,2,3.4,"哈哈");
        //增强for循环
        for(let x of arr)//x是arr的数据
        {
            console.log(x);
        }

        let arr2=new Array(10);
        console.log(arr2.length);
        for(let x of arr2)
        {
            console.log(x);//undefined
        }

        let arr3=new Array("何何何");
        console.log(arr3.length);
        for(let x of arr3)
        {
            console.log(x);
        }

        let arr4=new Array(1,2,3);
        //给索引7的位置添加数据
        arr4[7]=6;
        console.log(arr4.length);//8,其他没值的索引处是empty
    </script>
</body>
</html>

        

4.创建数组方式二时，只传一个number类型的数，与方式一不同，这里表示元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建数组方式二
        let arr=[10];//只传一个number类型的数，与方式一不同，这里表示元素
        console.log(arr.length);//1
    </script>
</body>
</html>

 Array的方法

push() 方法向数组末尾添加新项目，并返回新长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr= new Array(1,2,3);
        console.log(arr.push(true,100,'哈哈'));//6
    </script>
</body>
</html>

splice(index，n) 方法向/从数组添加/删除项目，并返回删除的项目。

        index表示从哪个索引删除

        n表示删除的个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=new Array(1,'hh',3);
        //要求删除'hh',3
        arr.splice(1,2);//1表示从索引1开始，2表示删除2个个数
        console.log(arr.length);//1
    </script>
</body>
</html>

RegExp对象

正则表达式方法

 

概念：正则表达式定义了字符串组成的规则

定义

        1.直接量：注意不要加引号

        var reg=/^正则表达式$/;

        2.创建RegExP对象

        var reg=new RegExp("正则表达式");

RexExp的方法

test() 方法测试字符串中的匹配项。

如果找到匹配项，则返回 true，否则返回 false。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //验证指定字符串长度为6
        let regex=new RegExp("^.{6}$");//方式一
        let regex2=/^.{6}$/;

       let result= regex.test("abcdef");

       if(result){
        console.log("数据符合")
       }else{
        console.log("数据不符合");
       }
    </script>
</body>
</html>

String对象

定义：

        let 变量名 =new String("");//方式一（不推荐） 

        let 变量名="";//方式二

String 的方法

toString() 方法将字符串作为字符串返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //方式一创建String对象
        let s1=new String("abcd");
        console.log(s1);//打印的是地址
        console.log(s1.toString());//abcd

        //方式二创建String对象
        let s2="abcde";
        console.log(s2);//abcde,不用调用toString()方法
        console.log(s2.length);//5
        let s3='acv';//字符串可以用单引号
    </script>
</body>
</html>

charAt() 方法返回字符串中指定索引（下标）处的字符。

indexOf() 方法返回值在字符串中第一次出现的位置。

如果未找到该值，则 indexOf() 方法返回 -1。

indexOf() 方法区分大小写。

lastIndexOf() 从右往左查找，方法返回字符串中指定值最后一次出现的索引（下标）。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let s="abcde";
        let c=s.charAt(1);
        console.log(c);//b

        let index=s.indexOf("b");
        console.log(index);//1

        let s2="你好呀好呀，javascript";
        console.log(s2.indexOf("好呀"));//1
        console.log(s2.lastIndexOf("好呀"));//3

    </script>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布