从0开始学web-day24-js06

最新推荐文章于 2024-05-12 12:05:38 发布

oxygen_ls

最新推荐文章于 2024-05-12 12:05:38 发布

阅读量272

点赞数

分类专栏：前端 # js 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122842601

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

1.复习
day23复习-js05
2.递归函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //递归函数：函数内部调用函数本身
    //作用：可以解决一些数学问题
    // 1+2+3+4+5
    // for循环
    var sum = 0;
    for(var i = 0;i<5;i++) {
        sum += i;
    }
    console.log(sum);

    // 递归
    function add(num) {
        // 必须要有一个结束点 没有结束点将会报错 如果是循环的话将是死循环
        if (num==1) {
            return 1
        }
        return num+add(num-1);
    }
    console.log(add(5));
    //函数 第一次执行的时候 5 add(5) 5+add(4)
    //                    5+4+add(3)
    //                    5+4+3+add(2)
    //                    5+4+3+2+add(1)  ===   5+4+3+2+1

    // 斐波那契数列
    // 1、1、2、3、5、8、13、21、34
    // num代表的是第几个数字
    function fn(num) {
    if(num==1 || num==2) {
        return 1;
    }
        return fn(num-1) + fn(num-2);
    }
    console.log(fn(9));
</script>
</html>

3.IIFE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        IIFE：自执行函数 函数创建完成之后不需要调用就可以执行
     -->
</body>
<script>
    function fn() {
        console.log(123);
    }
    fn();
    //自执行函数 IIFE
    (function fn1(){
        console.log("abc");
    })();
    // fn1() 函数如果是自执行函数 再想调用就不能生效了 不能当做普通函数调用
    // 自执行函数一般也是用匿名函数 自执行函数 闭包函数 赋值式定义函数
    (function(){
        console.log("bcd");
    }());
    !function() {
        console.log("cbd");
    }();
    +function() {
        console.log("cbd");
    }();
    -function() {
        console.log("cbd");
    }();
    // 不能使用* 只能使用+ - ！（）s
</script>
</html>

4.数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        数组：可以看作是一个盒子 盒子里面可以存放任何内容 
        数组如何定义 var a = [] 定义一个空数组
                    var a = ["zhangsan","lishi",123] 定义一个带有数据的数组
        数组有一个自带的length 代表数组中数据的个数
        length是一个可读可写属性
        数组中的每一个数据都是有规律排列的 数组中也存在下标 从0开始到length-1结束
        数组[下标] 可以访问对应的数据
        数组[下标] 可以修改对应的数据
        如何获取数组中的所有数据 可以通过 数组[下标]
        可以通过for循环去遍历数组
     -->
</body>
<script>
    var a = [];
    //读
    console.log(a.length);
    //写  如果没有那么多数据会填充empty
    a.length=10;
    console.log(a);
    var b = ["zhangsan","lishi",123];
    console.log(b);
    console.log(b.length);

    console.log(b[0]);
    b[0]="哈哈";
    console.log(b);

    for(var i=0;i<b.length;i++) {
        console.log(b[i]);
    }
</script>
</html>

5.常用数组方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a = ["zhangsan","lishi",123];
    // a[3] = "hh";
    //1.push("添加的数据") 在数组末尾进行添加 可以添加一个数据 也可以添加多个数据中间用逗号隔开
    //语法：数组.push(数据)
    //返回值 返回的是新数组中的数据个数 
    var res = a.push("哈哈","hehe");
    console.log(a);
    console.log(res);
    //2.pop() 从数组中删除最后一个数据
    //语法 数组.pop()
    //返回值 返回被删除的数据
    var res = a.pop();
    console.log(a);
    console.log(res);
    //3.shift() 删除数组中的第一个数据
    //语法 数组.shift()
    //返回值 返回被删除的数据
    var res = a.shift();
    console.log(a);
    console.log(res);
    //4.unshift("你要添加的数据") 在数组前面进行添加 可以添加一个数据 也可以添加多个数据中间用逗号隔开
    //语法：数组.unshift(数据)
    //返回值 返回的是新数组中的数据个数 
    var res = a.unshift("哈哈");
    console.log(a);
    console.log(res);
    //5.concat() 拼接数组
    //语法 数组1.concat(数组2或者其他数据)
    //返回值 返回的是拼接完成的数组
    var arr = [1,2,3];
    var arr1 = ["zhanshi","abc",true];
    var res = arr.concat(arr1)
    console.log(arr);
    console.log(res);
    //6.sort() 数组的排序
    //语法 数组.sort()
    //返回值 排列完成的数组
    //默认情况下按位排列
    var arr = [1,11,3,55,33,88,123];
    var res = arr.sort();
    console.log(arr);
    console.log(res);
    //升序排列
    var res1 = arr.sort(function(a,b) {return a-b});
    console.log(res1);
    //降序排列
    var res2 = arr.sort(function(a,b) {return b-a});
    console.log(res1);

    //7.reverse() 翻转
    //语法 数组.reverse()
    //返回值 翻转之后的数据
    var arr = [1,11,3,55,33,88,123];
    var res = arr.reverse();
    console.log(arr);
    console.log(res);
    //8.join() 将数组转换成字符串
    //语法 数组.join()
    //返回值 转换完成之后的字符串
    //小括号里面为空则按照数组中的写法转换成字符串
    //如果添加“”则将所有的数据转换成字符串 中间的逗号去掉
    //如果添加引号 里面写一个空字符串 将逗号去掉转换成字符串
    //如果你添加内容则按照你添加的内容将逗号换成你写的内容转换成字符串（里面的内容代表数据直接用什么分隔开）
    var arr = [1,11,3,55,33,88,123];
    var res = arr.join();
    console.log(arr);
    console.log(res);

    //9.splice() 数组的分割
    //语法 数组.splice()
    //返回值 如果小括号里面为空 则返回空数组
    var arr = ["展示","lisi","hh","heh"];
    var res = arr.splice();
    //从哪个下标开始分割
    var res1 = arr.splice(1);
    //写两个值 第一个代表从哪个开始截取 第二个代表截取多少个
    var res2 = arr.splice(1,3);
    //如果第一个数是负值 那么第一个数应该是length+这个负值
    var res3 = arr.splice(-1);
    console.log(arr);
    console.log(res);
    console.log(res1);
    console.log(res2);
    console.log(res3);

    //10.slice()数组的分割
    //语法 数组.slice()
    //返回值 如果小括号为空 则返回原数组 复制原数组

    var arr1 = ["展示","lisi","hh","heh"];
    var s = arr1.slice();
    //从哪个下标开始分割
    var s1 = arr1.slice(1);
    //写两个值 第一个代表从哪个下标开始 第二个值代表到哪个下标结束 包前不包后（左闭右开）
    var s2 = arr.slice(1,3);
    //如果第一个数是负值 那么第一个数应该是length+这个负值 两个值不能截取出来内容
    var s3 = arr.slice(-1);
    console.log(arr1);
    console.log(s);
    console.log(s1);
    console.log(s2);
    console.log(s3);

</script>
</html>

6.对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        对象 可以看作是一个盒子 盒子里面可以放置任何数据
        这个数据是没有规律的 里面的数据都是成对出现的 名称：值 key：value
        创建一个空对象 var obj={}
        创建的同时添加数据
        var obj {
            name:"zhangsan",
            age:18
        }
        操作方式：点语法 数组关联语法
        增加 对象名.你要增加的成员=值
             对象名["你要增加的成员"] = 值
        删除 delete 对象名.你要删除的成员
             delete 对象名["你要删除的成员"]
        修改(对象中存在成员就是修改 不存在就是添加) 对象名.你要修改的成员 = 值
             对象名["你要修改的成员"] = 值
        查询 对象名.你要查询的对象
             对象名["你要查询的对象"]
             如果这个成员存在 返回这个成员所对应的值 如果不存在返回undefined
     -->
</body>
<script>
    var obj = {};
    console.log(obj);
    var obj1 = {
        name:"zhangsan",
        age:18
    };
    console.log(obj1);
    obj1.height=180;
    console.log(obj1);
    obj1["weight"] = 50;
    console.log(obj1);
    delete obj1.height;
    console.log(obj1);
    //删除不成功？？？
    delete obj1["age:18"]; 
    obj.name = "lisi";
    console.log(obj1);
    obj1["age"] = 20;

</script>
</html>

7.类数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        类数组（伪数组）：和数组很像 都存在下标 都存在lenght属性 下标的最大值都是lenght-1
        但是类数组不是数组 不能使用数组的常用方法
        js中如果两个函数名相同 生效的是最后定义的js中没有重载这一现象
     -->
</body>
<script>
    function fn() {
        console.log(arguents.lenght);
        console.log(arguments[0]);
    }
    fn();
    fn(1);
    //重载
    function add(a,b) {
        console.log(a+b);
    }
    function add(a,b,c) {
        console.log(a+b+c);
    }
    add(1,2);

    //使用类数组模拟重载
    function text() {
        if(arguments.length===1) {
            console.log(arguments[0]);
        } else if(srguments.lenght===2) {
            console.log(arguments[0]+arguments[1]);
        } else {
            console.log(arguments[0]+arguments[1]+arguments[2]);
        }
    }
    text(1);
    text(1,2);
    text(1,2,5);
</script>
</html>