前端学习 DAY05

最新推荐文章于 2024-09-13 23:32:49 发布

Nancy在努力

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量107

点赞数

分类专栏：前端学习文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/Nancyuojuiivk/article/details/125769196

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括如何在HTML中引入JS、字符串操作、数组操作、对象创建、流程控制、Map与Set的使用以及函数定义。此外，还涵盖了常量、对象方法和标准对象Date。内容深入浅出，适合初学者学习。

摘要由CSDN通过智能技术生成

JavaScript

执行在网页中的脚本语言
遵循规范ECMAScript

引入JavaScript
第一种方式：在HTML文件head中添加script标签，直接编写JavaScript代码。

<script>
        alert("hi,JavaScript");
    </script>

第二种方式：在HTML文件head标签里添加script标签，使用script的src属性引入外部文件.js文件。一个页面引用多个js文件，从上到下依次执行。
使用浏览器的控制台调试js代码。

<script type="text/JavaScript" src="./js/test.js"></script>
alert("hi");

基本用法

字符串

<!DOCTYPE html>
<html >
<head>
    <title>字符串</title>
    <script>
        
        var s = 'i\'m\‘ok\"!';
        //多行字符串 反引号` `
        var s2=`a
        b
        c
        d`;
        alert(s2);
       //字符串拼接
       //+
       //使用模板字符串  用反引号``${变量名}
    
       var name = '张三';
       var age = 20;
       var message = `你好,${name},你今年${age}岁了！`
       alert(message);

     //字符串的基本操作
     var s1 = "Hello world";
     console.log(s1.length);

     //索引找到指定位置的字符
     console.log(s1[3]);
     s1[0] = 'w';
    console.log(s1);// 不能被替换

    //大小写转换 返回新的字符串
    consolo.log(s1.toUpperCase);
    console.log(s1.toLowerCase);

    //查找子串的位置  IndexOf()
    console.log(s1.indexOf('e1'));
    consolo.log(s1.lastIndexOf('e1'));

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

数组

<!DOCTYPE html>
<html>
<head>
    <title>数组</title>
    <script>
        var arr = [1, 2.15, true, "hell0", null];
        // 数组长度
        console.log(arr.length);
        // 为length重新赋值，会导致数组大小发生变化。
        // arr.length=6;
        // console.log(arr);
        // 通过索引获取内容
        console.log(arr[6]);
        // 超出数组索引  进行赋值的时候  数组大小也会改变
        arr[6] = "w";
        console.log(arr);

        // indexof  返回指定元素的索引
        console.log(arr.indexOf(true));
        // 未找到返回-1
        console.log(arr.indexOf(false));

        // slice  截取  返回一个新的数组
        var arr2 = ['A', 'B', 'C', 'D', 'E'];
        console.log(arr2.slice(0, 3));
        // 从索引1开始 一直到结束
        console.log(arr2.slice(1));

        // 添加和删除元素  push   pop
        var arr3 = [1, 2, 3];
        // arr3[3] = 4;
        // console.log(arr3);
        // push添加元素到数组末尾
        arr3.push(4, 5, 6);
        console.log(arr3);
        //  pop 删除元素  删除最后一个位置的元素
        arr3.pop();
        console.log(arr3);
        arr3.pop();
        console.log(arr3);
        
        // 数组头部添加元素删除元素  unshift  shift
        var arr4 = [1, 2, 3];
        // 添加元素到数组的头部
        arr4.unshift("A", "B");
        console.log(arr4);
        // shift 删除头部元素
        arr4.shift();
        console.log(arr4); 

        // sort 排序
        var arr5 = [3, 7, 5, 1, 'A', 'd', 'C'];
        arr5.sort();
        console.log(arr5);

        // reverse 翻转数组
        var arr6 = ['A', 'B', 'C', 'D'];
        arr6.reverse();
        console.log(arr6);

        // splice  
        var arr7 = ['A', 'B', 'C', 'D', 'E', 'F'];
        // splice(2, 3)  2代表索引   3代表删除几个
        arr7.splice(2, 3);
        console.log(arr7);
        // 'G' 'H'  添加的元素 从删除的位置开始添加的
        arr7.splice(1, 1, 'G', 'H');
        console.log(arr7);

        // join 把数组的每个元素用指定的字符串连接起来，返回连接后的字符串
        var arr8 = ['H', 'e', 'l', 'l', 'o'];
        var s = arr8.join('-');
        console.log(s);

        // 多维数组
        var arr9 = [[1, 2], [3, 4]];
        console.log(arr9[0][1]);

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

对象

<!DOCTYPE html>
<html>
<head>
    <title>对象</title>
    <script>
        // 对象
        var student = {
            name: "张三"
        }
        // 添加属性  
        student.age = 20;
        console.log(student);
        // 删除属性
        // delete student.name;
        // delete student['age'];
        // delete student.gender;
        // console.log(student);

        // 检测对象是否拥有某个属性 返回布尔值 继承属性也会算对象拥有的
        var b1 = 'name' in student;
        console.log(b1);
        var b2 = 'gender' in student;
        console.log(b2);
        var b3 = 'toString' in student;
        console.log(b3);

        // 检测属性 对象自身拥有的
        var b4 = student.hasOwnProperty('toString');
        var b5 = student.hasOwnProperty('name');
        console.log("b4:"+b4);
        console.log("b5:"+b5);
    </script>
</head>
<body>
    
</body>
</html>

流程控制

<!DOCTYPE html>
<html>
<head>
    <title>流程控制</title>
    <script>
        // 条件判断
        // if 判断
        var a = 10;
        if(a>10){
            alert("大于10");
        }else if(a<10){
            alert("小于10");
        }else{
            alert("等于10");
        }


        // 循环
        // for循环
        var sum = 0;
        for(var i=1; i<=100; i++){
            sum = sum + i;
        }
        console.log(sum);

        // for in  把对象属性依次循环出来
        var student = {
            name:"张三",
            age:18,
            gender:"男"
        };
        for(var key in student){
            if(student.hasOwnProperty(key)){
                console.log(key);
                console.log(student[key]);
            }
        }

        // while循环
        var b = 0;
        var n = 100;
        while(n>0){
            b = b + n;
            n = n - 5;
        }
        console.log(b);

        var n2 = 0;
        do{ 
            n2 = n2 + 1;
        }while(n2 < 100);
        console.log(n2);

        


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

Map和set

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        // map
        var m  = new Map([['name', '张三'], [2, 3], ['age', 18]]);
        console.log(m);

        // set方式 添加数据
        var m2 = new Map();
        m2.set('name', '李四');
        m2.set('age', 30);
        console.log(m2);

        // 键是否存在
        console.log(m2.has('name'));
        console.log(m2.has('gender'));
        // 根据键获取值
        console.log(m2.get('name'));
        // 删除键
        console.log(m2.delete('name'));
        console.log(m2);


        // Set
        // 只存key 不存value 
        var s = new Set([1, 2, 3, 2, 4]);
        // 自动过滤掉重复的内容
        console.log(s);
        // 添加key
        s.add("a");
        console.log(s);
        // 删除key
        s.delete(2);
        console.log(s);


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

函数

<!DOCTYPE html>
<html>
<head>
    <title>函数</title>
    <script>
        // 关键字function 
        // function 函数名(参数){
        //     函数体
        // }
        function abs(x){
            if(typeof x != 'number'){
                throw 'Not a number';
            }
            if(x>=0){
                console.log(x);
            }else{
                console.log(-x);
            }
        }
        // 函数调用时  传递的参数可以是任意数据类型的，可以不传递，可以传递比设定的参数个数多的值
        //abs(1, 2);

        // arguments 
        function fun(x){
            // 传递的参数个数
            console.log(arguments.length);
            // 参数的值
            for(var i=0; i<arguments.length; i++){
                console.log(arguments[i]);
            }

        }
        fun(10, 20, 30);


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

常量

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        // var  申明变量
        // let  申明变量    块级作用域
        // const  定义常量   块级作用域

        var a = 10;
        let b = 10;
        const C = 20;

        function fun(){
            for(let i=0; i<100; i++){
                
            }
            i +=100;
            console.log(i);
        }

        fun();

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

对象方法

<!DOCTYPE html>
<html>
<head>
    <title>方法</title>
    <script>
        // 为对象添加函数 作为当前对象的方法
        var student = {
            name:"张三",
            age:20,
            play: function(a){
                console.log(a);
            }
        }
        student.play("玩游戏!");
    </script>
</head>
<body>
    
</body>
</html>

标准对象

<!DOCTYPE html>
<html lang="en">
<head>
    <title>标准对象</title>
    <script>
        console.log(typeof true);

        //日期对象 Date
        var d = new Date();
        console.log(d);
        


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

json

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script>
        // 将json字符串转换为 javascript对象
        var json = '{"date": "2022-7-8", "name":"张三", "age":20}';
        var j = JSON.parse(json);
        console.log(j);

        
        // 将javascript对象转换为json
        var obj =  {
            name:"张三",
            age:20,
            gender:"男"
        }
        var json2 = JSON.stringify(obj);
        console.log(json2);
    </script>
</head>
<body>
    
</body>
</html>