Web - JS基础语法与表达式

news/2025/2/22 7:05:23

概述

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

书写位置

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

<body>
    <script type="text/javascript">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是可以省略的。

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

javascript">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.niftyadmin.cn/n/5861854.html

相关文章

Repeated Sequence

记suma[1]a[2]a[3]...a[n]。 该序列以a[1]&#xff0c;a[2]&#xff0c;a[3]....a[n]为循环节&#xff0c;明显的&#xff0c;问题可转化为:s%sum是否为该序列的某个连续子序列和。 断环为链。将a复制一份。 枚举a[i]为左端点的所有区间的和。再查找s是否存在。二分O&#x…

langchain 调用 本地部署 deepseek-r1 模型

如何本地部署 deepseek 请参考&#xff08;windows 部署安装 大模型 DeepSeek-R1&#xff09; LangChain 就是一个 LLM 编程框架&#xff0c;你想开发一个基于 LLM 应用&#xff0c;需要什么组件它都有&#xff0c;直接使用就行&#xff1b; 下面是langchain 调用 本地部署 de…

洛谷B3619(B3620)

B3619 10 进制转 x 进制 - 洛谷 B3620 x 进制转 10 进制 - 洛谷 代码区&#xff1a; #include<algorithm> #include<iostream> #include<vector> using namespace std;int main(){int n,x;cin >> n >> x;vector<char> arry;while(n){if(…

电子行业新“芯”突破:ZCC5143 同步降压控制器替代LM5143

在科技发展日新月异的当下&#xff0c;电子设备性能的提升不仅依赖于核心处理器&#xff0c;电源管理芯片的优劣同样起着举足轻重的作用。从日常使用的智能手机、平板电脑&#xff0c;到汽车电子、工业控制等专业领域&#xff0c;电源管理芯片如同设备的“能量心脏”&#xff0…

WPF的页面设计和实用功能实现

目录 一、TextBlock和TextBox 1. 在TextBlock中实时显示当前时间 二、ListView 1.ListView显示数据 三、ComboBox 1. ComboBox和CheckBox组合实现下拉框多选 四、Button 1. 设计Button按钮的边框为圆角&#xff0c;并对指针悬停时的颜色进行设置 一、TextBlock和TextBox…

ElasticSearch公共方法封装

业务场景 1、RestClientBuilder初始化&#xff08;同时支持单机与集群&#xff09; 2、发送ES查询请求公共方法封装&#xff08;支持sql、kql、代理访问、集群访问、鉴权支持&#xff09; 3、判断ES索引是否存在&#xff08;/_cat/indices/${indexName}&#xff09; 4、判断ES…

AI基础:数据可视化简易入门(Matplotlib和Seaborn)

Matplotlib是一个Python的2D绘图库&#xff0c;它以各种硬拷贝和跨平台的交互式环境生成出版质量级别的图形。 Seaborn是基于Python且非常受欢迎的图形可视化库&#xff0c;在Matplotlib的基础上进行了更高级别的封装&#xff0c;使作图更加方便快捷。 1 Matplotlib 1.1 通过…

微信问题总结(onpageshow ,popstate事件)

此坑描述 订单详情某按钮点击&#xff0c;通过window.location.href跳转到&#xff08;外部&#xff09;第三方链接后&#xff0c;回退后&#xff0c;在ios中生命周期和路由导航钩子都失效了&#xff0c;无法触发。 在安卓中无视此坑&#xff0c; 回退没有问题 解决 原因&am…