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

news2024/9/21 20:47:48

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


目录

运算符

赋值运算符

N元运算符

比较运算符

使用场景

比较方式

注意事项

逻辑运算符

运算符优先级

语句

分支语句

if语句

单分支

双分支

多分支

switch语句

​编辑

三元运算符

循环语句

while循环

break和continue语句

for循环

数组

数组筛选

冒泡排序

总结


运算符

赋值运算符

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构造函数声明。我们今天主要写一下有关数组的四大核心操作——增删改查。

在数组中增加元素有两种方式,如下:

  1. arr.push(新增元素)新添加的元素会放在数组的末尾,且会返回新的数组的长度。
  2. 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>


总结

以上就是对JavaScript当中运算符、语句和数组的个人学习笔记,作为我学习复习的一部分的同时也希望对大家有所帮助,如果也对您有所帮助,希望您可以留下点赞关注与收藏,这对我真的很重要,非常感谢!你们的帮助也直接影响了我的更新频率,也希望我的分享能对更多人有帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1933111.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微服务设计原则——高性能:锁

文章目录 1.锁的问题2.无锁2.1 串行无锁2.2 无锁数据结构 3.减少锁竞争参考文献 1.锁的问题 高性能系统中使用锁&#xff0c;往往带来的坏处要大于好处。 并发编程中&#xff0c;锁带解决了安全问题&#xff0c;同时也带来了性能问题&#xff0c;因为锁让并发处理变成了串行操…

【node-RED 4.0.2】连接操作 Oracle 数据库实现 增 删 改 查【新版,使用新插件:@hylink/node-red-oracle】

总览 上节课&#xff0c;我们说到&#xff0c;在 node-red 上链接 oracle 数据库 我们使用的插件是 node-red-contrib-agur-connector。 其实后来我发现&#xff0c;有一个插件更简便&#xff0c;并且也更好用&#xff1a;hylink/node-red-oracle &#xff01;&#xff01;&am…

001、Mac系统上Stable Diffusion WebUI环境搭建

一、目标 如标题所述&#xff0c;在苹果电脑&#xff08;Mac&#xff09;上搭建一套Stable Diffusion本地服务&#xff0c;以实现本地AI生图目的。 二、安装步骤 1、准备源码【等价于准备软件】 # 安装一系列工具库&#xff0c;包括cmake,protobuf,rust,python3.10,git,wge…

第四届网络安全、人工智能与数字经济国际学术会议(CSAIDE 2025)

#先投稿&#xff0c;先送审# 第四届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2025&#xff09; 2025 4th International Conference on Cyber Security, Artificial Intelligence and Digital Economy 重要信息 会议官网&#xff1a;www.csaide.net 会…

企业用蚓链数字化营销思维做新赛道设计

​在当今数字化时代&#xff0c;企业面临着日益激烈的竞争和不断变化的市场环境。运用数字化营销思维进行新赛道设计已成为企业寻求突破和创新的关键策略。 数字化营销思维为企业提供了更精准的市场洞察能力。通过大数据分析和用户行为追踪&#xff0c;企业能够深入了解消费者的…

运动用什么骨传导耳机好?推荐这五款运动骨传导耳机!

在运动生涯&#xff0c;我见证了自我挑战与超越的每一个瞬间&#xff0c;而这一切都离不开那如影随形的运动骨传导耳机。一款出色的运动耳机&#xff0c;其重要性不言而喻——它不仅是提升运动效率的得力助手&#xff0c;更是开启多元化运动体验的金钥匙。近年来&#xff0c;运…

集群技术,一主一从的部署和原理方式

集群概述 所谓集群&#xff0c;就是将多台服务器集中在一起&#xff0c;同时处理用户对服务器的请求 比如&#xff0c;我们现在开启的这一台mysql服务器&#xff0c;可以同时处理1000个用户的请求&#xff0c;那么我们开启两个这样的服务器&#xff0c;就可以同时处理2000 数…

Unity3d开发google chrome的dinosaur游戏

游戏效果 游戏中&#xff1a; 游戏中止&#xff1a; 一、制作参考 如何制作游戏&#xff1f;【15分钟】教会你制作Unity小恐龙游戏&#xff01;新手15分钟内马上学会&#xff01;_ unity教学 _ 制作游戏 _ 游戏开发_哔哩哔哩_bilibili 二、图片资源 https://download.csdn.…

电脑压缩视频文件 电脑压缩视频大小的方法

在数字化时代&#xff0c;视频已成为我们记录生活、分享快乐的重要工具。然而&#xff0c;大尺寸的视频文件常常让分享和存储变得棘手。如何在保持视频画质的前提下&#xff0c;轻松减小视频文件大小&#xff1f;今天&#xff0c;就让我们一起探索苹果电脑上的几种高效视频压缩…

前端书籍翻页效果

目录 前端书籍翻页效果前言代码示例创建模板页面css样式编写js代码 结论 前端书籍翻页效果 前端实现翻书效果&#xff0c;附带vue源码 源码下载地址 前言 实际业务开发中&#xff0c;有时候会遇到需要在前端页面内实现翻书效果的需求&#xff0c;本篇文章就为大家介绍如何使…

STM32MP135裸机编程:唯一ID(UID)、设备标识号、设备版本

0 资料准备 1.STM32MP13xx参考手册1 唯一ID&#xff08;UID&#xff09;、设备标识号、设备版本 1.1 寄存器说明 &#xff08;1&#xff09;唯一ID 唯一ID可以用于生成USB序列号或者为其它应用所使用&#xff08;例如程序加密&#xff09;。 &#xff08;2&#xff09;设备…

stm32入门-----EXTI外部中断(上 ——理论篇)

目录 前言 一、中断系统 1.基本概念 2.执行过程 二、stm32中断 1.stm32中断类型 2.NVIC总管 3.NVIC的优先级分组 三、EXIT外部中断 1.基本概念 2.AFIO复用IO口 3.EXIT执行过程 前言 本期我们就开始进入到学习stm32的中断系统了&#xff0c;在此之前我们学习过51的知道中…

Iterator 与 ListIterator:Java 集合框架中的遍历器比较

Iterator 与 ListIterator&#xff1a;Java 集合框架中的遍历器比较 1、Iterator1.1 特点 2、ListIterator2.1 特点 3、Iterator 和 ListIterator 的区别4、示例4.1 使用 Iterator 遍历 Set4.2 使用 ListIterator 遍历 List 并修改 5、总结 &#x1f496;The Begin&#x1f49…

《昇思25天学习打卡营第24天| 文本解码原理》

文本解码原理--以MindNLP为例 回顾&#xff1a;自回归语言模型 根据前文预测下一个单词 一个文本序列的概率分布可以分解为每个词基于其上文的条件概率的乘积 &#x1d44a;_0:初始上下文单词序列&#x1d447;: 时间步当生成EOS标签时&#xff0c;停止生成。 MindNLP/huggi…

SpringBoot框架学习笔记(二):容器功能相关注解详解

1 Spring 注入组件的注解 Component、Controller、 Service、Repository这些在 Spring 中的传统注解仍然有效&#xff0c;通过这些注解可以给容器注入组件 2 Configuration 2.1 应用实例 需求说明: 演示在 SpringBoot, 如何通过Configuration 创建配置类来注入组件 回顾…

少儿编程启蒙宝典:Scratch动画游戏108变

一、编程教育的时代价值与意义 随着数字时代的深入发展&#xff0c;社会对人才的需求正发生深刻变革&#xff0c;计算思维与编程能力已成为衡量个人竞争力的重要指标。在此背景下&#xff0c;培养孩子们运用计算思维解决实际问题的能力&#xff0c;成为教育领域的重要任务。编…

【PPT笔记】1-3节 | 默认设置/快捷键/合并形状

文章目录 说明笔记1 默认设置1.1 OFFICE版本选择1.1.1 Office某某数字专属系列1.1.2 Office3651.1.3 产品信息怎么看 1.2 默认设置1.2.1 暗夜模式1.2.2 无限撤回1.2.3 自动保存&#xff08;Office2013版本及以上&#xff09;1.2.4 图片压缩1.2.5 字体嵌入1.2.6 多格式导出1.2.7…

C++ | Leetcode C++题解之第235题二叉搜索树的最近公共祖先

题目&#xff1a; 题解&#xff1a; class Solution { public:TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) {TreeNode* ancestor root;while (true) {if (p->val < ancestor->val && q->val < ancestor->val) {anc…

音视频开发入门教程(2)配置FFmpeg编译 ~共210节

在上一篇博客介绍了安装&#xff0c;音视频开发入门教程&#xff08;1&#xff09;如何安装FFmpeg&#xff1f;共210节-CSDN博客 感兴趣的小伙伴&#xff0c;可以继续跟着老铁&#xff0c;一起开始音视频剪辑功能&#xff0c;&#x1f604;首先查看一下自己的电脑是几核的&…

《昇思25天学习打卡营第20天|GAN图像生成》

生成对抗网络&#xff08;GAN&#xff09;是一种深度学习模型&#xff0c;用于生成逼真的图像。在手写数字识别的任务中&#xff0c;GAN 可以用来生成与真实手写数字相似的图像&#xff0c;以增强模型的训练数据集。GAN 主要由两个部分组成&#xff1a;生成器&#xff08;Gener…