前端基础之JavaScript学习——运算符、分支/循环语句、数组

PleaSure乐事

于 2024-07-18 09:00:00 发布

阅读量745

点赞数 11

分类专栏：前端知识大赏文章标签：前端 javascript 学习开发语言 vscode

本文链接：https://blog.csdn.net/m0_75262255/article/details/140509202

版权

前端知识大赏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

大家好我是来自CSDN的前端寄术区博主PleaSure乐事，今天我们继续有关JavaScript的学习，使用的编译器为vscode，浏览器为谷歌浏览器。大家使用webstorm等编译器或其他浏览器效果效果问题不大，都可以使用。

运算符

赋值运算符

JS当中的赋值运算符与大部分的语言相同，直接使用等号连接即可，将右边的值给左边，左边需要是一个容器。

同时诸如+=、-=、*=、/=、%=是几种简单写法，效果与正常的加减乘除取余一致。

N元运算符

根据所需表达式的个数分为一元，二元……运算符。如一元和二元运算符的介绍如下：

同时一元运算符也有自增++、自减--，前置自增++num 先增加再使用，后置自增num++ 先使用再增加。

比较运算符

使用场景

比较运算符一般用于比较数据的大小，有> < >= <= == === !==七种。==表示左右两边的值是否相等，双等号有隐式转换。===表示左右两边的类型和值是否相等，三等号没有隐式转换，是严格判断。!==表示左右两边是否不全等。=一个等号表示赋值。

比较方式

比较运算符一般使用ASCII码进行比较，其中涉及到NaN都是false。尽量不要比较小数，因为涉及到精度问题，所以小数比较一般会转换成整数比较（比如乘上n个10之后进行比较）。

注意事项

不同类型中的比较会发生隐式转换，转换为number之后再比较。因此我们会更多使用===或!==进行比较。

逻辑运算符

逻辑运算符一般用来解决多种判断情况下的情况，包含&&逻辑与、||逻辑或，与Java等一致，需要留意&&假就停，后面的内容不看了，同理||遇到真就停，后面的内容不看了。还有!逻辑非，即为取反运算，false变true，true变false。

运算符优先级

小括号>一元运算符>算术运算符(*=/=%>+=-)>关系运算符>相等运算符>逻辑运算符(&&>||)>赋值运算符>逗号运算符。

语句

分支语句

if语句

单分支

单分支的括号内无论写什么，都会最终转换为布尔值，除了0和空字符串为false，其他都是true。具体格式如下：

<script>
    a = 1
    b = 2
    if(b > a) {
        console.log("点赞")
    }
</script>

双分支

双分支就是在单分支的基础上增加else语句，其他规则与单分支一致，格式如下：

<script>
    a = 1
    b = 2
    if(b > a) {
        console.log("点赞")
    }
    else{
        console.log("关注")
    }
</script>

多分支

多分支就是额外引入elseif语句，其他与上面的双分支一样，其中elseif可以写无数个。但是需要注意如果elseif的数量太多，但是又迟迟没有得到结果，会严重影响效率。

<script>
    a = 1
    b = 2
    if(b > a) {
        console.log("点赞")
    }
    else if(b < a){
        console.log("收藏")
    }
    else{
        console.log("关注")
    }
</script>

switch语句

在switch语句当中，括号内传入的数据需要与case内的条件===才会进行下一步操作，否则会实行default语句。switch一般适用于等值判断而非区间判断，且switch一般配合break使用，没有break容易造成switch穿透。

<script>
    a = 1
    b = 2
    switch(a){
        case 1:
            console.log("点赞")
            break;
        case 2:
            console.log("收藏")
            break;
        case 3:
            console.log("关注")
            break;
        default:
            console.log("评论")
            break;
    }
</script>

三元运算符

三元运算符比双分支更简单的写法，常常将？和：配合使用

格式：条件？满足条件的语句：不满足条件的语句一般用来取值。

<script>
    let score = 85;  
    let grade = score >= 60 ? '及格' : '不及格';  
    console.log(grade);
</script>

循环语句

while循环

循环语句一般用于在满足某些条件时重复执行一些代码先判断循环条件是否为true再执行语句如果为false就跳出。关于循环语句一定要办函变量起始值，终止条件和变量的变化量（自增或自减）。

下面这个例子就是寄术区博主犯下的低级错误，导致网站直接卡爆了：

<script>
    let a = 1
    while (a < 10){
        console.log(a)
        console.log("点赞关注")
    }
</script>

修正后的代码和效果如下：

<script>
    let a = 1
    while (a < 10){
        console.log(a)
        console.log("点赞关注")
        a++
    }
</script>

break和continue语句

break语句用于退出整个循环。continue语句用于结束本次循环，继续下一次循环。可以参考下面的例子来理解：

<script>
    let a = 1
    while (a < 10){
        if(a == 5){
            a++
            continue
        }
        if(a == 7){
            a++
            break
        }
        console.log(a)
        console.log("点赞关注")
        a++
    }
</script>

for循环

for循环和while循环类似，仅仅是语法上的不同。for循环可以用来遍历数组/打印数组。

语法：for(变量起始值;终止条件;变化量){循环体}

<script>
    for(i = 1;i<5;i++){
        console.log(i);
    }
</script>

数组

数组的概念在前面的JS博客当中已经介绍：数组就是数据的组合，将一组数据存储在单个变量名下。声明方式为：关键字let 数组名arr = 数组字面量[] 也可以用new array构造函数声明。我们今天主要写一下有关数组的四大核心操作——增删改查。

增

在数组中增加元素有两种方式，如下：

arr.push（新增元素）新添加的元素会放在数组的末尾，且会返回新的数组的长度。
arr.unshift（新增元素）新添加的元素会放在数组开头，且会返回新的数组的长度。

<script>
    let arr = [1, 2, 3]
    arr.push(0)
    arr.unshift(6)
    console.log(arr)
</script>

删

数组删除元素的方式有arr.pop（），即删除数组的最后一个元素并将其返回，括号内不带参数。方式如下：

<script>
    let arr = [1, 2, 3]
    let a = arr.pop()
    console.log(arr)
    console.log(a)
</script>

改

改数组元素和赋值差不多，使用数组名[下标] = 赋值即可。

查

查数组元素直接用索引（下标）查找就可以，比如arr[1]。

数组筛选

数组筛选最朴素的方法就是依次遍历找出符合要求的数据，然后放在新的数组里面。但是一定要记住先用let关键词新建一个数组来存储数据，可以用push方法添加，也可以直接赋值。

冒泡排序

冒泡排序是对数组最简单的应用，可以把数组按照升序或降序排列，相信原理大家都明白，是通过一个中间变量和两层循环，遍历数组当中的元素，比较他们的大小，最终实现排列的一种最简单的排序，但是冒泡排序由于其两层循环的原因时间复杂度会很高，时间效率不稳定，因此一般只有在数据量小或基本有序的时候才使用，接下来直接上代码和效果演示：

<script>
     function bubbleSort(arr) {  
    let n = arr.length;  
    for (let i = 0; i < n - 1; i++) {  
        for (let j = 0; j < n - i - 1; j++) {  
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j];  
                arr[j] = arr[j + 1];  
                arr[j + 1] = temp;  
            }  
        }  
    }  
    return arr;  
    }
    let myArray = [64, 34, 25, 12, 22, 11, 90];
    bubbleSort(myArray);  
    console.log("Sorted array: ", myArray);
</script>