Web - JS基础语法与表达式

概述

这篇文章主要介绍了 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.mzph.cn/bicheng/71643.shtml

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

相关文章

一台服务器将docker image打包去另一天服务器安装这个镜像

一台服务器将docker image打到去另一天服务器安装这个镜像 1. 打包2.另一台服务器执行 1. 打包 docker save -o nebula-graph-studio.tar harbor1.vm.example.lan/dockerio/vesoft/nebula-graph-studioxxx.tar 是打包好的文件 后面的是 docker image 2.另一台服务器执行 docke…

一周学会Flask3 Python Web开发-response响应格式

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在HTTP响应中&#xff0c;数据可以通过多种格式传输。大多数情况下&#xff0c;我们会使用HTML格式&#xff0c;这也是Flask中…

TCP和Http协议

TCP 三次握手&#xff1a; 第一次握手 &#xff1a; 初始状态&#xff1a;开始时&#xff0c;客户端处于 CLOSED&#xff08;关闭&#xff09;状态&#xff0c;服务端处于 LISTEN&#xff08;监听&#xff09;状态&#xff0c;等待客户端的连接请求。客户端发送请求&#xff…

图论 之 最小生成树

文章目录 题目1584.连接所有点的最小费用 最小生成树MST&#xff0c;有两种算法进行求解&#xff0c;分别是Kruskal算法和Prim算法Kruskal算法从边出发&#xff0c;适合用于稀疏图Prim算法从顶点出发&#xff0c;适合用于稠密图&#xff1a;基本思想是从一个起始顶点开始&#…

前端面试之Box盒子布局:核心知识与实战解析

目录 引言&#xff1a;布局能力决定前端高度 一、盒模型基础&#xff1a;看得见的像素战争 1. 标准盒模型 vs IE盒模型 2. 核心组成公式 3. 视觉格式化模型 二、传统布局三剑客 1. 浮动布局&#xff08;Float Layout&#xff09; 2. 定位布局&#xff08;Position Layou…

OnlyOffice:前端编辑器与后端API实现高效办公

OnlyOffice&#xff1a;前端编辑器与后端API实现高效办公 一、OnlyOffice概述二、前端编辑器&#xff1a;高效、灵活且易用1. 完善的编辑功能2. 实时协作支持3. 自动保存与版本管理4. 高度自定义的界面 三、后端API&#xff1a;管理文档、用户与权限1. 轻松集成与定制2. 实时协…

Python多线程编程理解面试题解析

一、多线程介绍 Python 的多线程是一种实现并发编程的方式&#xff0c;允许程序同时执行多个任务。然而&#xff0c;由于 Python 的全局解释器锁&#xff08;GIL&#xff09;的存在&#xff0c;多线程在某些场景下可能无法充分利用多核 CPU 的性能。以下是对 Python 多线程的理…

如何通过 Python 实现一个消息队列,为在线客服系统与海外运营的APP对接

对方有两个核心需求: 访客上线的时候,要通知对方的业务系统,业务系统根据访客的身份信息,推送个性化的欢迎词。访客完成下单的时候,要能推送一个下单成功的通知,并且包含订单信息和链接。根据这两个需求,那就需要实现由客服系统到业务系统的消息队列推送,以及通过 Open…

中文Build a Large Language Model (From Scratch) 免费获取全文

中文pdf下载地址&#xff1a;https://pan.baidu.com/s/1aq2aBcWt9vYagT2-HuxdWA?pwdlshj 提取码&#xff1a;lshj 原文、代码、视频项目地址&#xff1a;https://github.com/rasbt/LLMs-from-scratch 翻译工具&#xff1a;沉浸式翻译&#xff08;https://app.immersivetrans…

项目设置内网 IP 访问实现方案

在我们平常的开发工作中&#xff0c;项目开发、测试完成后进行部署上线。比如电商网站、新闻网站、社交网站等&#xff0c;通常对访问不会进行限制。但是像企业内部网站、内部管理系统等&#xff0c;这种系统一般都需要限制访问&#xff0c;比如内网才能访问等。那么一个网站应…

elf_loader:一个使用Rust编写的ELF加载器

本文介绍一个使用Rust实现的ELF加载器。 下面是elf_loader的仓库链接&#xff1a; github&#xff1a; https://github.com/weizhiao/elf_loaderhttps://github.com/weizhiao/elf_loader crates.io&#xff1a; https://crates.io/crates/elf_loaderhttps://crates.io/cra…

数据库驱动免费下载(Oracle、Mysql、达梦、Postgresql)

数据库驱动找起来好麻烦&#xff0c;我整理到了一起&#xff0c;需要的朋友免费下载&#xff1a;驱动下载 目前收录了Oracle、Mysql、达梦、Postgresql的数据库驱动的多个版本&#xff0c;后续可能会分享更多。

对接扣子双向流式 TTS Demo

Web端对接Demo <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>TTS 测试</title> </head><body><h1>TTS 测试页面</h1><textarea id"textInput" rows&…

科普:“git“与“github“

Git与GitHub的关系可以理解为&#xff1a;Git是一种软件工具&#xff0c;而GitHub则是一个在线平台&#xff0c;它们是“一家子”。二者的关联最直接体现在你通过Git在GitHub仓库中clone软件包到你的机器中来。 具体来说&#xff1a; 一、Git 定义&#xff1a;Git是一个开源的…

jsherp importItemExcel接口存在SQL注入

一、漏洞简介 很多人说管伊佳ERP&#xff08;原名&#xff1a;华夏ERP&#xff0c;英文名&#xff1a;jshERP&#xff09;是目前人气领先的国产ERP系统虽然目前只有进销存财务生产的功能&#xff0c;但后面将会推出ERP的全部功能&#xff0c;有兴趣请帮点一下 二、漏洞影响 …

【目标检测】【BiFPN】EfficientDet:Scalable and Efficient Object Detection

EfficientDet&#xff1a;可扩展且高效的目标检测 0.论文摘要 模型效率在计算机视觉中变得越来越重要。在本文中&#xff0c;我们系统地研究了用于目标检测的神经网络架构设计选择&#xff0c;并提出了几项关键优化以提高效率。首先&#xff0c;我们提出了一种加权双向特征金…

拖动线条改变区域大小

浏览网页时&#xff0c;经常看到这样一个功能&#xff0c;可以通过拖拽线条&#xff0c;改变左右区域大小 在管理后台中更为常见&#xff0c;菜单的宽度如果固定死&#xff0c;而后续新增的菜单名称又不固定&#xff0c;所以很可能导致换行&#xff0c;样式不太美观&#xff0c…

输入框元素覆盖冲突

后端响应中的 "trainingKbGroupName": "基础死型" 通过searchForm2.initFormData(rowData[0]);操作会把基础死型四个字填充到<div class"col-sm-5 form-group"> <label class"col-sm-3 control-label">知识点分组名称<…

【LLM】Llama 3 论文精读

导言 Llama 3.5系列模型的发布&#xff1a; Llama 3.5系列模型是开源的&#xff0c;最大模型参数为405B&#xff08;[[稠密Transformer架构]]&#xff0c;而不是MOE 架构&#xff09;&#xff0c;上下文窗口长度为128K。模型支持多语言和工具使用&#xff0c;并且在某些评估中已…

selenium环境搭建

1. 安装selenium pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/如遇以下报错 Getting requirements to build wheel ... errorerror: subprocess-exited-with-error Getting requirements to build wheel did not run successfully.│ exit code: 1╰─…