Web - JS基础语法与表达式

news2025/2/22 12:18:10

概述

这篇文章主要介绍了 JavaScript 的基础语法,包括代码书写位置、ERPL 环境、变量(命名规则、默认值、初始化)、数据类型(基本和复杂,及各类型特点、转换)、表达式和运算符(算数、特殊算数、关系、逻辑、赋值、自增自减)等内容。

书写位置

body中的标签,在内部书写JavaScript代码,将代码单独保存为.js格式文件,然后在html文件中使用。

<body>
    <script type="text/javascript">
        alert('这是javascript的第一行代码');
    </script>

    <script src="js/mini.js"></script>
</body>
ERPL环境

控制台也是一个ERPL环境,可以使用它临时测试表达式的值,运行顺序,read读->eval执行->print打印->loop循环。

变量

变量是计算机语言中能存储计算结果或能表示抽象概念,变量不是数值本身,它们仅仅是一个用于存储数值的容器。

要想使用变量,第一步就是声明它,并给它赋值,变量的值可以被改变,改变变量值不再需要书写关键字了。

变量的合法命名,另外在附加一句,函数、类名、对象的属性等也都要遵守这个命名规则:

  • 只能由字母、数字、下划线、$组成,但不能以数字开头。
  • 不能是关键字或保留字
  • 变量名大小写敏感,a和A两个不同的变量。

一个变量只定义,但没有赋初值,默认值是undefind,一个变量只有定义完,并赋初值之后,才算正式初始化完成。

数据类型

JavaScript中存在两大数据类型:基本数据类型、复杂数据类型。 基本数据类型中有Number、String、Boolean、Undefinednull,复杂数据类型有Object、Array、Function、Map、Set等等。

简单数据类型

使用typeof运算符可以检测值或者变量的类型。

基本类型值如下:

类型名值举例typeof检测结果
数字类型5number
字符串类型‘慕课网’string
布尔类型trueboolean
undefined类型undefinedundefined
null类型objectnull
Number(数字)类型

所有数字不分大小、不分整浮、不分正负,都是数字类型,在小数中0是可以省略的。

较大数或较小数(绝对值较小)可以写成科学计数法。

let a = 3e8; //300000000
let b = 3e-4; //0.0003

不同进制的数字,二进制数值以0b开头,八进制数值以0开头,十六进制数字以0x开头。

NaN:NaN是英语"not a number"的意思,即不是一个数,但它是一个数字类型的值。 0除以0的结果是NaN,事实上,在数学运算中,若结果不能得到数字,其结果往往都是NaN。

String(数字)类型

字符创就是人类的自然语言,字符串要用引号包裹,双引号或者单引号均可。

数字11和字符串11在语义上是不同的,前者表达的一个数量,后者是一个文本。

使用加号"+"可以用来拼接多个字符串,要将一个变量的值插入到字符串中,要斩断链接,新版的Es中增加了反引号表示法,可以更方便进行变量插值。

let year = 2024;
let string = "北京冬奥会在" + year + "年召开";
console.log(string);

有时候需要使用空字符串,直接书写闭合的引号对即可。

字符串的length属性表示字符串长度。

let strLength = '我是stark张宇,请大家多多指教';
console.log(strLength.length);

字符创的常用方法,方法就是可以调用的函数,字符串有丰富的方法:

let strLength = '我是stark张宇,请大家多多指教';

//得到指定位置字符,字符串的下标从0开始
console.log(strLength.charAt(5));

//提取子串 得到从0到9结束的子串,不包括10
//如果省略第二个参数,返回的子串会一直到字符串的结尾
console.log(strLength.substring(0,10));
//将得到从0开始,长度为2的子串
console.log(strLength.substr(0,2));
strLength.slice();

//将字符串变为大写
console.log(strLength.toUpperCase());
//将字符串变为小写
console.log(strLength.toLowerCase());

//检索字符串 返回某个指定的字符串值在字符串中首次出现的位置
//如果要检索的字符串没有出现,则该返回-1
console.log(strLength.indexOf('zcc'));
布尔类型

布尔型值只有2个:true和false,分别表示真和假。

undefind

一个没有被赋值的变量的默认值的变量默认值是undefind,而undefind的类型也是undefind,undefind又是值,又是一种类型,这种类型只有它自己一个值。

null

null表示空,它是空对象,当我们需要将对象销毁、数组销毁或者删除事件监听时,通常将他们设置为null。

使用typeof检测null值,结果是object,这点尤其要注意,类型和typeof检测结果并不总是一一对应,比如数组用typeof检测结果也是object。

复杂数据类型

除基本类型外,Js的世界中还有复杂数据类型,复杂数据类型都是引用类型,引用类型的特性将在数组一课中介绍。

数据类型的转换

使用Number()函数

  • 纯数字字符串能变成数字,不是纯数字的字符串将转为NaN。
  • 布尔值true变为1,false变为0
  • undefind变成NaN,null变成0

使用parseInt()转换整数parseInt()函数的功能是将字符串转为整数

  • 自动截掉第一个非数字字符之后的所有字符串
  • 所有文字都将被截掉
  • 如果字符串不是以数字开头,则转为NaN
  • parseInt()函数不四舍五入

parseFloat()函数parseFloat()函数的功能是将字符串转为浮点数

String()函数除了数字式科学计数法和非10进制数字会转为10进制的值,其余都是长的相同的字符串。

toString()函数几乎所有的值都有toString()方法,功能是将值转为字符串

Boolean()函数

  • 0和NaN转为false,其他都数字都转为true。
  • 空字符串变为false,其他都转为true
  • undefined和null转为false
隐式类型转化

如果参与数学运算的某操作数不是数字型,那么JavaScript会自动将此操作数转换为数字型,隐式转换的本质是内部调用Number函数。

表达式和预算符

算数运算符

算数运算符一共有5种:加(+)、减(-)、乘(*)、除(/)、取余(%),默认情况,惩处法的优先级要高于加法和减法;必要时可以使用圆括号来改变运算的顺序。

加号的两种作用:如果加号两边的变量都是Number类型,则为加法,否则为连字符。

取余运算也叫作求模运算,用百分号%表示,a % b 表示a除以b的余数,它不关心整数部分,只关心余数。

特殊算数运算
IEEE754

JavaScript或者PHP中,有些小数的数学运算不是很精确,JavaScript使用了IEEE754二进制浮点数算数标准,这会使一些个别的小数运算产生丢失精度的问题。

解决办法:在进行小数运算时,要调用数字的

const a = 0.1;
const b = 0.2;
Number(( a + b ).toFixed(2));
幂和开根号

JavaScript中没有提供幂计算、开根号的运算符,需要使用Math对象的相关方法进行计算。

//Math.pow(a,b) a的b次方
Math.pow(2,3) //2的3次方
Math.pow(3,2) //3的2次方 

//Math.sqrt(a) 根号下a的计算,负数直接得NaN
Math.sqrt(81) //9
Math.sqrt(-81) //NaN
向上取整 和 向下取整
Math.ceil(3.56) //向上取整 4
Math.floor(3.56) //向下取整 3
关系运算符

大于>、小于<两个符号和数学相同,大于等于运算符是>=,小于运算时<=

相等和全等:如果想比较两个值是否相等,此时应该使用==运算符,两个等号运算符不比较值的类型,它会进行隐式转化后比较值是否相等。===运算符不仅比较值是否相同,也比较类型是否相同。

NaN作为一个特殊的数字类型值,它在用==比较的时候也有特殊的结果。

如何判断某变量值为NaN?isNaN函数可以用来判断变量值是否为NaN

不相等和不全等!=表示不相等,!==表示不全等。

逻辑运算符

逻辑运算符有3个: 非!、与&&、或||

  • 非也可以称为置反运算,是一个单目运算符,只需要一个操作数,置反运算的结果一定是布尔值。
  • 与运算表示并且,称为与运算,口诀都真才真。
  • 或运算表示或者,有真就真。
赋值运算符

JavaScript中等号表示赋值,==判断是否相等(不判断类型),===判断是否全等,赋值运算符会将等号右边的数值,赋予等号左边的变量。

快捷赋值:表示在原数值基础上进一步进行运算

let a1 = 3;
a1 += 5; // 等价于 a = a + 5;

自增/自减运算符:++--是自增、自减运算符,表示在自身基础上加1或减1。

a++++a的区别:a++先用再加,++a先加在用。

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

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

相关文章

Python高级语法之selenium

目录&#xff1a; 1、selenium的使用2、selenium元素定位3、selenium使用功能Phantomjs模拟浏览器启动4、selenium使用功能ChromsHandless模拟浏览器启动 1、selenium的使用 2、selenium元素定位 3、selenium使用功能Phantomjs模拟浏览器启动 4、selenium使用功能ChromsHandles…

2025年3月最新算法-鲸鱼迁徙优化算法Whale Migration Algorithm-附Matlab免费代码

引言 本期介绍了一种基于座头鲸协同迁移行为的创新生物启发式优化方法——鲸鱼迁徙优化算法Whale Migration Algorithm&#xff0c;WMA。该算法于2025年3月最新发表在期刊 Results in Engineering 在本节中&#xff0c;我们概述了开发鲸鱼迁移算法&#xff08;WMA&#xff09;…

flowable适配达梦数据库

文章目录 适配相关问题无法从数据库产品名称“DM DBMS”中推断数据库类型分析解决 构建ibatis SqlSessionFactory时出错&#xff1a;inStream参数为null分析解决 liquibase相关问题问题一&#xff1a;不支持的数据库 Error executing SQL call current_schema: 无法解析的成员访…

Jenkins整合Jmeter实现接口自动化测试

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、安装jmeter 下载&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 这里我用了一台Windows安装jmeter用来写接口测试的脚本&#xff0c;启动前修改j…

高级推理的多样化推理与验证

25年2月来自波士顿大学、NotBadMath.AI、谷歌、哥伦比亚大学、MIT、Intuit公司和斯坦福大学的论文“Diverse Inference and Verification for Advanced Reasoning”。 OpenAI o1、o3 和 DeepSeek R1 等推理 LLM 在数学和编码方面取得重大进展&#xff0c;但仍发现 IMO 组合问题…

清华大学:DeepSeek与AI幻觉(31页PDF)

PDF深入探讨了AI幻觉的概念、原因、评测方法及其实用应用&#xff0c;特别是在金融领域的具体案例。首先介绍了AI幻觉的定义&#xff0c;主要包括数据偏差、泛化困境、知识固化和意图误解四种情况&#xff0c;以及这些因素导致AI产出不合理结果的原因。随后&#xff0c;通过音乐…

AWS云从业者认证题库 AWS Cloud Practitioner(2.21)

题库持续更新&#xff0c;上方二维码查看完整题库&#xff01; 公司希望减少开发人员用于运行代码的物理计算资源,通过启用无服务器架构&#xff0c;哪种服务可以满足该需求? A&#xff1a; Amazon Elastic Compute Cloud (Amazon EC2) B&#xff1a; AWS Lambda C&#xff1a…

网络工程师 (43)IP数据报

前言 IP数据报是互联网传输控制协议&#xff08;Internet Protocol&#xff0c;IP&#xff09;的数据报格式&#xff0c;由首部和数据两部分组成。 一、首部 IP数据报的首部是控制部分&#xff0c;包含了数据报传输和处理所需的各种信息。首部可以分为固定部分和可变部分。 固定…

京准电钟:水利控制系统网络时间同步设计与应用

京准电钟&#xff1a;水利控制系统网络时间同步设计与应用 京准电钟&#xff1a;水利控制系统网络时间同步设计与应用 引言 在水利工程中&#xff0c;控制系统的高效运行依赖于精准的时间同步。水电站、泵站、闸门控制、水文监测等子系统的协同作业需要毫秒甚至微秒级的时间…

QML 实现一个动态的启动界面

QML 实现一个动态的启动界面 一、效果查看二、源码分享三、所用到的资源下载 一、效果查看 二、源码分享 工程结构 main.qml import QtQuick import QtQuick.Controls import QtQuick.Dialogs import Qt.labs.platformWindow {id:windowwidth: 640height: 400visible: truetit…

【论文阅读】SAM-CP:将SAM与组合提示结合起来的多功能分割

导言 近年来&#xff0c;视觉基础模型的快速发展推动了多模态理解的进步&#xff0c;尤其是在图像分割任务中。例如&#xff0c;Segment Anything模型&#xff08;SAM&#xff09;在图像Mask分割上表现出色&#xff0c;但在语义及实例分割方面仍存在局限。本文提出的SAM-CP&am…

逻辑架构与软件架构在PREEvision中的设计关系

1 Introduction 在如今汽车电子系统的开发过程中&#xff0c;系统架构设计是至关重要的环节。无论是汽车控制系统、信息娱乐系统&#xff0c;还是电动驱动系统&#xff0c;架构设计都决定了整个系统的功能、性能以及后期的可维护性和可扩展性。 在往期文章中&#xff0c;我们…

武汉火影数字|VR沉浸式空间制作 VR大空间打造

VR沉浸式空间制作是指通过虚拟现实技术创建一个逼真的三维环境&#xff0c;让用户能够沉浸在这个环境中&#xff0c;彷佛置身于一个全新的世界。 也许你会好奇&#xff0c;VR 沉浸式空间究竟是如何将我们带入那奇妙的虚拟世界的呢&#xff1f;这背后&#xff0c;离不开一系列关…

大数据学习之任务流调度系统Azkaban、Superset可视化系统

一.任务流调度系统Azkaban 1.课程介绍 2.为什么需要工作流调度系统 3.AZKABAN是什么 4.AZKABAN下载 5.制作安装包 6.tar包准备 7.MYSQL配置AZKABAN 8.配置EXECUTOR SERVER 9.配置WEBSERVER 10.单作业实战_yaml语言(今天稍晚更新) 11.单作业实战 12.多作业依赖实战 13.失败自动重…

在VS-qt的程序中,后期增加PCH预编译功能,提高编译速度

由于前期创建qt程序的时候未勾选pch功能,导致没有启动预编译的功能. 这种情况下需要增加pch功能应该怎么做? 在项目中增加2个文件 stdafx.h和stdafx.cpp文件 stdafx.h增加qt常用头文件 #pragma once //windows #include <windows.h>//qt常用 #include <QObject&g…

蓝桥云客 路径之谜

11.路径之谜 - 蓝桥云课 路径之谜 题目描述 小明冒充X星球的骑士&#xff0c;进入了一个奇怪的城堡。 城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是nn个方格。如下图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或纵向移动&…

【Python项目】基于Python的语音数据及标注核对审核系统

【Python项目】基于Python的语音数据及标注核对审核系统 技术简介&#xff1a; 采用Python技术、MySQL数据库、Django框架等实现。 系统简介&#xff1a; 语音数据及标注核对审核系统是一个基于B/S架构的语音数据处理平台&#xff0c;旨在通过自动化的方式对语音数据进行标…

深入解析BFS算法:C++实现无权图最短路径的高效解决方案

在无权图中&#xff0c;广度优先搜索&#xff08;BFS&#xff09;是解决最短路径问题的高效算法。接下来博主从专业角度深入探讨其实现细节&#xff0c;并给出C代码示例&#xff1a; 目录 一、核心原理 二、算法步骤 三、C实现关键点 1. 数据结构 2. 边界检查 3. 路径回溯…

LeetCode刷题---二分查找---441

排列硬币 441. 排列硬币 - 力扣&#xff08;LeetCode&#xff09; 题目 你总共有 n 枚硬币&#xff0c;并计划将它们按阶梯状排列。对于一个由 k 行组成的阶梯&#xff0c;其第 i 行必须正好有 i 枚硬币。阶梯的最后一行 可能 是不完整的。 给你一个数字 n &#xff0c;计算…

Unity结合Vuforia虚拟按键实现AR机械仿真动画效果

零、最终效果 待上传 一、资源准备 1、Vuforia Vuforia版本不能高于10.17.4&#xff08;往上的版本虚拟按键功能被删除&#xff09; 2、Unity Unity版本必须要高于2022.3.x&#xff0c;不然使用Vuforia插件时会出现bug 二、主要内容 1、添加虚拟按钮 2、为虚拟按钮设置…