Web前端----JavaScript的基础学习第三天

本文链接：https://blog.youkuaiyun.com/m0_70612148/article/details/126017287

此文章是对JavaScript进行的一些基础的学习，用来帮助刚刚学习JavaScript的同学。

前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下JavaScript的语法，用来对JavaScript进行基础的学习。

一、JavaScript是什么？

JS是一种编程语言，主要生成一些特效，完成用户和页面的交互，Javascript（JS）是一种脚本语言，主要用于Web。它用于增强HTML页面，通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此，它不需要编译。JavaScript以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据。

二、JavaScript的基础

2.1 一元运算符

一元运算符的有优点有缺点，优点就是写出来的代码，简洁好看，缺点就是可读性差。

num+=1就等于num = num + 1

num-=1就等于num = num - 1

这个就是一元运算符，因为只用了一个运算

下面就是代码示例：

    <script>
        let num = 1
        num += 1 
        console.log(num);
    </script>

代码运行结果如下：

num+=1

num-=1

2.2 三元运算符

三元运算符的意思就是使用三个操作数的运算符。一个条件后面会跟一个问号（?），如果条件为 true ，则问号后面的表达式A将会执行；表达式A后面跟着一个冒号，如果条件为 false ，则冒号后面的表达式B将会执行，这个三元运算符经常作为 if 语句的简捷形式来使用。

代码示例如下：

    <script>
        let num = 2
        let num2 = 5

        if(num2>num){
            console.log('这是一句话');
        }else {
            console.log('这是第二句话');
        }

    </script>

下面这个简单的写法：

    <script>
        let num = 2
        let num2 = 5
        // 先看num2大于num吗？如果大于走第一项 再比: 如果小于就走第二项
        num2 > num ? console.log('这是一句话') : console.log('这是第二句话')

    </script>

下面就代码的运行的结果，俩个代码的运行结果都是一样的，上面的是if语句的写法，下面就是三元运算符的写法，想比于用if语句，用三元运算符来写更加简便：

2.4 延时器 and 定时器

（这里也写了定时器和延时器的区别）

JavaScript里面有一个定时器，有一个延时器，一个是setTimeout()、一个是setInterval()，下面这个就是延时器，延时器的代码就是延时器setTimeout()：

格式就是setTimeout(函数，要传的毫秒数 ) 注：1000毫秒 = 1秒

代码示例如下：

这个代码的意思就是延时俩秒执行输出这个“这是一句话”，并永远不再执行。

    <script>
        function fn (){
            console.log('这是一句话');
        }

        setTimeout(fn, 2000);
    </script>

下面是代码运行结果的截图，因为无法录制视频，所以只能截图来展示：

下面就是定时器了，定时器的代码就是setInterval()，定时器每隔一秒输出一个函数+1，可执行多次，下面就是定时器的代码：

    <script>
        let num = 1              // 首先先定义一个变量num，然后给他赋值为1 
        setInterval(()=>{        // 这个就是定时器的代码
            num += 1             // 每过1s，执行一次函数的内容             
                                 // num+=1就是num = num+1，上面有写 
            console.log(num);
        },1000)

    </script>

代码运行结果示例如下（还是一样无法录制视频，需要自行尝试一下，只能放一张截图，下面还会一直运行的，一直运行）：

2.5 字符串的截取方法

下面这个代码，先定义一个要截取的字符串，然后字符串的截取代码就是slice（），里面会写俩个数，一个是参数索引，包括当前的索引，第二个参数就是索引之前的，不包括当前的索引，下面这个代码的意思就是截取从0开始到0，1，2，然后不包括当前索引就不输出2，然后结果就会出来0，1，下面是代码示例和代码的运行结果：

    <script>
        let str = '这是一句话'
        let name = str.slice(0,2)
        console.log(name);
    </script>

然后让我们来截取一下后面三个字，怎么做呢，就是2-5之间的字符串，然后不包括5的字符串，然后输出就是2，3，4，代码示例如下：

    <script>
        let str = '这是一句话'
        let name2 =str.slice(2,5)
        console.log(name2);
    </script>

代码运行结果如下：

然后如果出现一大串字符串，只截取最后几个字怎么做呢，让我们看一下代码：

    <script>
        //截取后两位
        let text = '111111111111111111111111111洛洛'
        //如果传入负数那就从负数开始截取
        console.log(text.slice(-2));
    </script>

上面这个代码就是只截图后面俩个字符串，让我们来看一下运行结果：

2.6 数组的截取方式

下面让我们直接看代码，因为这个数组的截取方式和字符串的截取方式很相似，这个截取原数组，不会改变原数组，就不做太多的介绍了，让我们直接看代码和运行结果：

    <script>
        let arr = [1,2,3,4,5]
        // slice 不会改变原数组
        let arr2 = arr.slice(0,2)
        //上面这个代码就是截取了1，2
        let arr3 = arr.slice(2)
        //这个代码就是截出去了前俩位，只要后三位3，4，5
        console.log(arr2,arr3);
    </script>

让我们来看一下代码运行结果：

2.7 数组的splice

splice会改变原数组，话不多说，让我们看代码：

    <script>
        let arr = [1,2,3,4,5]
        //splice 第一个参数索引，第二个参数删除几个，
        这个就是截取掉2和3
        arr.splice(1,2)
        console.log(arr);
    </script>

    <script>
        let arr2 = [1,2,4,5]
        //splice 也可以在指定位置上添加，这个是在2后面新增一个数字3    
        arr2.splice(2,0,3)
        console.log(arr2);
    </script>

    <script>
        let arr3 = [1,2,3,4,5]
        //这个是指把除了2和3其他都删除了，删除方法的返回值就是删除的元素
        let res =  arr3.splice(1,2)
        console.log(res,'删除');
    </script>

然后让我们看一下代码运行结果：

什么叫改变原数组，什么叫不改变原数组。改变原数组就是对数组进行操作后之前的数组也会发生变化，不改变原数组就是不会对原数组进行改变。

2.8 使用new创建对象

下面让我们直接看代码：

    <script>
        // 这里就是给new创建一个对象
        let obj = new Object()
        obj.name = '名字'
        console.log(obj, obj.name);

        // 字面量创建对象 
        let obj2 = {}
        obj2.name = '名字2'
        obj2.age = 22
        console.log(obj2);
    </script>

代码运行结果如下：

2.9 使用构造函数创建对象

构造函数也是一个函数，函数是实现功能用的，好处就是逻辑复用，为了区分构造函数和普通函数的区别，构造函数的首字母大写，下面是代码示例：

    <script>
        function Peo(name,age,hobby) {
            this.name = name
            this.age = age
            this.hobby = hobby
        }

        let taoge = new Peo('luo',3,'爱学习')
        let qiangge = new Peo('liu',3,'爱学习')
        console.log(taoge,qiangge);
    </script>

代码运行结果如下：

3.0 时间对象

时间对象都是以自己的电脑时间来走的，让我们来看一下代码：

    <script>
        let date = new Date()
        let year = date.getFullYear()
        let mounth = date.getMonth()+1 
        //这里加1是因为计算机是0开始的，0-11，所以这里要加1
        let day = date.getDate()
        console.log(year,mounth,day); 
        console.dir(date);
    </script>

代码运行结果如下：

然后这个运行的结果里面的月份前面是没有0的，然后有需要的话可以来给他加一个0，代码示例如下：

    <script>
        var date = new Date;
        
        var year = date.getFullYear()
        var month = ling(date.getMonth() +1)
        var day = ling(date.getDate())

        var time = year + '-' + month + '-' + day
        console.log(time);

        function ling(num) {
            if (num<10){
                return '0' + num
            }else{
                return num
            }
            
        }
    </script>

代码运行结果如下：

3.1数组转字符串

代码示例如下：

    <script>
        // 数组转成字符串 arr.join('拼接符')  如果不想有拼接符传空字符串
        let arr = [1,2,3,4,5]
        console.log(arr.join(''));

        // '' 12345
        // '-'  1-2-3-4-5
    </script>

代码输出结果如下：

3.2 数组过滤

代码示例如下：

    <script>
        // 把 > 50 的数过滤出来 还是返回一个数组
        let arr = [1,2,3,4,6,99,5,4,38,77]
        // let arr1 = []
        // arr.forEach(item=>{
        //    if(item>50){ 
        //       arr1.push(item)   
        //     }
        // })
        // console.log(arr1);
        
        // 过滤器 就是把满足条件的放到一个 新数组里面 
        // let arr2 = arr.filter((item,index)=>{
        //     return item > 50
        // })

        // 简写
        // let arr2 = arr.filter(item=> item > 50)
        // console.log(arr2);
        
    </script>

代码运行结果如下：