JavaScript基础知识

咸鱼没有不粘锅

已于 2023-03-30 18:47:23 修改

阅读量61

点赞数

文章标签： javascript 前端开发语言

于 2023-03-10 21:31:30 首次发布

本文链接：https://blog.csdn.net/weixin_60007218/article/details/129450257

版权

JavaEE基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础语法，包括内联、内嵌和外部式的代码书写形式，控制台输出，变量的定义与类型转换，数字、字符串、布尔值的使用，以及数组、函数、作用域和对象的概念。文章详细讲解了每种数据类型的特性和操作，以及在实际编程中的应用。

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

1 JavaScript语法

<!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>js</title>
</head>
<body>
    <!-- 1 书写形式--内联式，把js代码放到标签的特殊属性中 -->
    <!-- <button onclick="alert('hello')">这是一个按钮</button> -->

    <!-- 2 书写形式--内嵌式，把js代码写到script标签中 -->
    <!-- <script>
        // 弹窗
        // alert('hello world');
    </script> -->

    <!-- 3 书写形式--外部式，把js代码单独写到 .js文件中，在html中引入这个js文件，使用script标签引入，这种写法的好处就是可以引入公共js代码，方便多个页面进行重复使用 -->
    <!-- <script src="a.js"></script> -->

    <!-- 4 控制台输出 在网页检查中能够看到-->
    <!-- <script>
        console.log('hello');
    </script> -->

    <!-- 5 变量的定义和使用 直接写let就可以，可以不用var-->
    <!-- <script>
        var name = '张三';
        let age = 18;
        console.log(name);
        console.log(age);
    </script> -->

    <!-- ！6 js中的变量类型是动态的，程序运行时变量的类型可以发生改变 -->
    <!-- 动态类型提供了更灵活的编程方式，可以支持多种类型的数据；但是由于太过灵活，不适合大型多模块项目 -->
    <!-- <script>
        let a = 10;
        console.log(typeof(a));
        a = 'hello';
        console.log(typeof(a));
    </script> -->

    <!-- 7 number数字类型,不区分整数还是浮点数 -->
    <!-- 这里的运行结果是0.5 在Java中结果应该是0，int/int = int，不存在小数 -->
    <!-- <script>
        let a = 1;
        console.log(a/2);
    </script> -->

    <!-- 8 NaN not a number -->
    <!-- <script>
        console.log('hello'-10);
    </script> -->

    <!-- 9 string字符串 js中字符串可以用单引号表示，也可以用双引号表示,js中的转义字符和Java中的一样-->
    <!-- <script>
        let name ='My name is "haa"';
        console.log(name);
    </script> -->

    <!-- 10 字符串长度 -->
    <!-- <script>
        let name = '张三';
        console.log(name.length);
    </script> -->

    <!-- 11 字符串拼接 直接使用+拼接生成新的字符串对象-->
    <!-- <script>
        let a = 'hello';
        let b = 10;
        console.log(a + b);
    </script> -->

    <!-- 12 字符串比较 js比较两个字符串内容是否相等,直接使用==即可-->

    <!-- 13 boolean布尔类型 js里的Boolean类型是可以隐式转成number的 true--1 false--0 Java中禁止隐式转换 
        像Java这种不太支持隐式转换的称为强类型语言,js这种比较支持隐式转换的叫做弱类型语言 -->
    <!-- <script>
        let a = true;
        console.log(typeof(a));
        console.log(a+10);
    </script> -->

    <!-- 14 undefined 访问某个变量没有被定义不存在,结果就是undefined 
        undefined和数字进行运算结果就是NaN,如果把undefined和字符串拼接,就会把undefined当成一个字符串-->
    <!-- <script>
        let a = 'hello';
        console.log(a.lenght);
    </script> -->

    <!-- 15 null 访问的变量存在但是空值 -->
    <!-- <script>
        let b = null;
        console.log(b);
    </script> -->

    <!-- 16 js运算符和Java类似 但是这里的1/2=0.5 其他大部分语言结果都是0-->
    <!-- <script>
        console.log(1/2);
    </script> -->

    <!-- 17 === js中比较相等用 == 和 === ,前者会进行隐式类型转换,后者不会进行隐式类型转换 
        以下这个例子前者结果是true 后者结果是false-->
    <!-- <script>
        let a = 10;
        let b = '10';
        console.log(a==b);
        console.log(a===b);
    </script> -->

    <!-- 18 逻辑运算符与或非与Java类似  但是Java中与或返回true或者false,JS中的与或返回的是第一个或者第二个表达式 -->
    <!-- <Script>
        let a = 10;
        b = a || 0;
        console.log(b);
    </Script> -->

    <!-- 19 条件语句和Java类似-->


</body>
</html>

<!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>JS</title>
</head>
<body>

    <!-- 1 JS数组 -->
    <Script>
        // 这样写合法但是一般不用
        let arr1 = new Array();

        // 常用写法,[]表示空的数组,且js的数组可以动态变化,更接近与ArryList
        let arr2 = [];

        // 创建数组的时候可以直接指定初始值
        let arr3 = [1,2,3,4]

        // js数组允许里面存在不同的元素类型,归咎于动态类型
        let arr4 = [1,'hh',true,[]];

        // 访问数组元素,在JS中,下标访问越界结果undefined
        let arr = ['机器人','扫地机器人','智能语音助手'];
        console.log(arr[1]);
        console.log(arr.length);
        arr[1] = '过六级';
        console.log(arr);
        console.log(arr[3]);

        // 插入新元素,变为长度为4的数组
        // 假如直接给下标为100的元素赋值,此时数组长度为101,中间用empty*n来表示,假如下标为-1,数组整体长度不变,打印出来键值对
        // 只有下标是非负整数才是操作下表,如果是其他值,就被认为数组的自定义属性
        arr[3] = '必须过六级';
        console.log(arr);

        // 数组新增/删除元素,最常用的是使用push进行尾插,使用pop删除元素
        let arr5 = [];
        for(let i = 0; i < 10; i++) {
            arr5.push(i);
        }
        console.log(arr5);

        let ret = arr5.pop();
        console.log(ret);
        console.log(arr5);

        // 中间位置插入/删除元素 splice 还可以进行元素的替换
        // 第一个元素表示要取的数组的起始下标,第二个参数表示要取的数组的长度,第三个参数表示替换值,表示从下标2开始把长度为0的元素替换成新元素
        let arr7 = [1,2,3,4,5,6]
        arr7.splice(2,0,'hello');
        console.log(arr7);

    </Script>

    <!-- 2 函数 -->
    <script>
        // 函数和方法其实很相似,函数相当于独立的逻辑不依赖对象,方法则是依赖一个对象的

        // 函数的定义 function 由于动态类型这里不必写返回值
        function hello() {
            console.log('hello');
        }
        hello();

        function add(x,y) {
            return x+y;
        }
        let ret2 = add(10,20);
        console.log(ret2);

        // js函数支持不同类型的参数,调用函数传参的时候同一个函数允许不同的类型,只要这些在函数内部能正常使用即可.
        ret2 = add('hello','world');
        console.log(ret2);

        // js不要求形参和实参个数匹配
        // function a(a,b,c,d,e,f,g) {
        //     a = a || 0;
        //     b = b || 0;
        //     c = c || 0;
        //     d = d || 0;
        //     e = e || 0;
        //     f = f || 0;
        //     g = g || 0;
        //     return a+b+c+d+e+f+g;
        // }

        // 简化上述代码
        // function a() {
        //     let ret3 = 0;
        //     // 此处arguments这个数组就包含了调用a方法的多有实参的值
        //     for(let i = 0; i < arguments.length; i++) {
        //         ret3 += arguments[i];
        //     }
        //     return ret3;
        // }

        // 上述代码的另外一种写法
        // 这里先定义了一个变量,给变量进行赋值,赋的值是一个function,a的类型就是函数,在js中,函数可以像普通变量一样进行赋值,还可以作为另一个函数的参数,或者是另一个函数的返回值
        let a = function() {
            let ret3 = 0;
            for (let i = 0; i < arguments.length; i++) {
                ret3 += arguments[i]
            }
            return ret3;
        }

        // 当实参比形参多的时候,多出来的实参就不能通过形参获取到
        // 当实参比形参少的时候,多出来的形参就是undefined,得到NaN
        let ret3 = 0;
        ret3 = a(10,20);
        console.log(ret3);
        ret3 = a(10,20,30);
        console.log(ret3);
        ret3 = a(10,20,30,40);
        console.log(ret3);
        ret3 = a(10,20,30,40,50,60,70,80);
        console.log(ret3);

    </script>

    <!-- 3 作用域 作用域链-->
    <!-- js中代码尝试访问一个变量,会首先在当前代码块中查找,如果当前代码块中没有,就会继续往上级查找,一直查找到全局领域 -->
    <script>
        let num = 999;
        function test() {
            console.log(num);
        }
        test();

    </script>

    <!-- 4 对象 -->
    <script>
        // js对象类似于Java对象,更加简化 js中的对象使用{}来表示
        let student = {
            name:'jt',
            age:18,
            gender:'male',
            sing:function() {
                console.log('hhh');
            }
        };
        console.log(student.name);
        student.sing();

        // 构造函数
        function St(name,age,gender,singMsg) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sing = function() {
                console.log(singMsg);
            }
        }
        let st = new St('jt',18,'male','hhh');

    </script>

    <!-- 在js中虽然有类的概念,但是不能进行封装,也不能进行继承,更不能多态,因此不是一个面向对象的编程语言 -->
    
</body>
</html>