JavaScript基本语法详解

news2025/8/10 3:16:47

目录

一、JavaScript数据类型

二、算术运算符

1:分支结构

(1)if语句

(2)if...else语句

(3)if..else if语句

2:循环结构

(1)for循环

(2)while循环

(3)do...while循环

四、数组的介绍

1:数组的创建

2:检测是否为数组

3:一些常用的数组中的方法

(1)数组长度

(2)添加数组元素和删除数组元素

 (3)数组排序

(4)数组转换成字符串

五、函数的介绍

六、对象的介绍

(1)对象的概念

(2)创建对象和使用对象

(3)遍历对象

七、内置对象的介绍

1:Math对象

2:日期对象

八、字符串类型的介绍


前言介绍:

JavaScript是一门高级编程语言,它可以帮助我们在做网页页面时制作动态页面,前端三大巨头:HTML,CSS,JavaScript。HTML是网页的结构骨架,CSS是网页的美容师装饰页面,JavaScript则可以制作网页动态效果。与JavaScript的语法基本上与C语言,Java一样有数据类型,数组,流程控制分支结构等等。

一、JavaScript数据类型

我主要讲一些我们经常会用到的数据类型,但并不是所有。这里说一下var,var是一个关键字,JavaScript用它来声明变量,如var s=1 那么s就是数字类型。也就是说他会智能的根据变量值确定变量的类型。

number    数字类型,在JavaScript没有什么整数型,浮点型之类的,只要是数字就是数字类型

boolean   布尔类型,只有true和false两个值。

string   字符串类型,一般使用双引号或者是单引号来出现,具体下面会说

undifined  未定义类型,如使用var定义一个变量但却没有赋值

var       var是关键字,用来声明变量的,变量是什么值,它会智能的将变量变成什么类型

二、算术运算符

这里学过一门编程语言的同学应该都会,我就不细说了,不会大家可以搜一门专门的文章来讲解(哎,其实是我懒,嘿嘿嘿)。既然这样,那我为什么还要列出个算术运算符的标题呢?单独说出来也只是让大家知道JavaScript就是一门编程语言,很多地方编程语言其实是相通的。

三流程控制分支结构介绍

1:分支结构

分支结构我简单点说就是列出多个路线,但是我们只能选择其中一条路线走,所有我们要走的那一条路线就是我们设定的满座条件的路线。

(1)if语句

if...就是如果....,也就是说满足if设定的条件,才可以执行if语句下的语句。

<script>
        var s = 1;
        if (s >= 1) {
            //如果s大于1就输出100
            console.log(100);
        }
    </script>

(2)if...else语句

if...else语句和if语句一样,翻译一下就是如果满足设定的条件就执行if语句,不满足就执行else语句,注意不管是什么条件,只要不满足if的条件就执行else的条件。

(3)if..else if语句

if...else if语句可以有多个else if,也就是说可以设定多个条件,谁满足就执行对应的语句。

 <script>
        var s = 100;
        if (s >= 1 && s <= 10) {
            console.log("s大于1小于10");
        } else if (s >= 20 && s <= 80) {
            console.log("s大于20小于80");
        } else if (s >= 100) {
            console.log("s大于等于100");
        }
    </script>

2:循环结构

循环结构就是多次执行某一个操作,重复执行,如求1到100的和,就可以循环来做。

(1)for循环

for( 定义;条件;满足条件做的事){

     语句

}

如求1到100的和:

<script>
        var s = 0;
        for (var i = 1; i <= 100; i++) {
            s += i;
        }
        console.log("1到100的和=" + s);
    </script>

(2)while循环

while(条件){
  
}

//while条件分为true和false,如果是true继续执行,反之结束循环

如:求1到100的和

<script>
        var s = 0;
        var i = 1;
        while (i <= 100) {
            s += i;

            i++;
        }
        console.log("1到100的和是" + s);
    </script>

(3)do...while循环

do...while循环跟前面有点不一样,不管循环条件是true还是false,都会先执行一次循环体里面的语句。

如:

<script>
        var s = 0;
        do {
            s++;
        } while (s < 1);
        console.log("s=" + s);
    </script>

四、数组的介绍

数组简单点来说就是一个存储数据的容器。它可以帮助我们不用在一个一个的创建变量储存数据了,很方便,同时我们需要使用数据的时候只需要从数组这个容器中拿出数据即可。如果前面学过一些如C语言等的编程语言同学,要注意JavaScript的数组和它们不一样。其他编程语言创建数组,会定义好该数组的类型,定义好之后不是这个数据类型的数据就不能放到这个数组中。JavaScript不一样,它创建一个数组后,里面可以放任意类型的数据,如number型,string型等等。

1:数组的创建

//第一种使用字面量创建数组
var a=[1,2,3',sds']



//第二种是使用对象创建

var a=new Array();//创建的是空数组


var a=new Array(2);//创建了一个长度是2的数组


var a=new Array(1,2,3);//创建了一个长度是3的数组,第一二三个元素分别是1,2,3

2:检测是否为数组

//第一种检测使用instanceof运算符检测

var a=new Array(1,2);
 console.log(a instanceof Array);//输出的是true就是数组


//第二种检测

 console.log(Array.isArray(a));//输出的是true就是数组


3:一些常用的数组中的方法

(1)数组长度

length  可以求得数组长度
<script>
        var a = new Array(1, 2, 'jk', "..>>>");
        console.log("a数组的长度=" + a.length);
  </script>


输出的是4

(2)添加数组元素和删除数组元素

push    末尾添加一个或者多个元素,注意修改原数组,并返回新的长度
unshift 向数组的开头添加一个或多个元素,注意修改原数组,并返回新的长度
pop     删除数组最后一个元素,无参数,返回它删除的值
shift   删除数组的第一个元素,无参数,返回删除的元素
<script>
        var a = new Array(1, 2, 'jk', "..>>>");
        console.log("原数组=" + a);

        console.log('现在添加元素:');
        var k = a.push(999999);
        console.log("添加元素数组变为" + a + " 数组长度变为" + k);

        console.log("开始删除元素");
        var kk = a.pop();
        console.log("数组变为" + a + " 删除的元素=" + kk);
    </script>

 (3)数组排序

reverse  反转数组元素,无参数,修改了原来的数组返回新数组
sort     对数组进行排序,改变了原来的数组,并返回新数组
sort()排序,从大到小,从小到大

var a=[1,98,2];

a.sort( function(x,y){
   return x-y;//从小到大,return y-x就是从大到小,function是函数的声明标志,后面会说
});
<script>
        var a = [1, 98, 32, 17, 78, 200];
        console.log(a);
        a.reverse();
        console.log(a);
        a.reverse();
        console.log("未排序之前:" + a);
        a.sort(function(x, y) {
            return x - y;
        });
        console.log("排序后" + a);
    </script>

(4)数组转换成字符串

toString()     把数组转换成字符串,逗号分隔每一项,返回字符串
join(“分隔符”) 将数组中的所有元素转换成字符串,并返回

<script>
        var a = [1, 98, 32, 17, 78, 200];
        console.log(a);
        console.log(a.toString());

        console.log(a.join(">>>"));
    </script>

五、函数的介绍

函数怎么来说呢,假如重复执行相似的某个逻辑操作很麻烦,就可以用函数帮忙,也就是说函数就是一个工具而已。学过编程语言的同学再注意一下,该函数的定义不需要定义函数的类型,也不需要定义参数的类型,但一定要有返回值,用return。

定义一个函数用function,可以理解成固定格式

如求实现一个加法计算器。

<script>
        console.log(jiafa(12, 7));
        console.log(jiafa(100, 200));

        function jiafa(x, y) {
            return x + y;
        }
    </script>

六、对象的介绍

(1)对象的概念

对象是什么呢?学过了Java的同学应该就很好懂了,或者你就可以认为它们是一样的。对象可以是一个人,一辆车,一个物品。好,言归正传,对象就是一组无序的相关属性和方法的集合,属性就是该对象的特征,方法就是该对象的行为。

(2)创建对象和使用对象

//使用字面量创建对象,使用花括号创建
 var obj={
  var name:'张三',
  var age:18,
 eat: function(){
   console.log("正在吃饭");
}
}
创建了一个叫obj的对象。


//使用new Object()创建对象
var obj=new Object();
obj.name='张三';
obj.eat=function(){
console.log("正在吃饭");
}
....

//使用构造函数创建对象


function Star(name,age){
 this.name=name;
 this.age=age;
}

var obj=new Star('张三',18);

(3)遍历对象

使用for in语句进行遍历。

<script>
        var obj = {
            name: '张三',
            age: 18,
            eat: function() {
                console.log("正在吃饭");
            }
        }
        for (var k in obj) {
            console.log(k);
            console.log(obj[k]);
        }
    </script>

 

七、内置对象的介绍

内置对象就是JavaScript自带的对象,供给开发者使用,并提供了一些常用的功能。因为一些内置对象很多,所以我们要去多查查MDN文档,相信我,你记不下来(可能你行吧,反正我不行),这里我就介绍一些常用到的吧。

1:Math对象

使用Math对象中的方法我们不需要new创建对象,直接使用即可。

Math.PI         圆周率

Math.max()      里面可以是任意个参数,返回值是这些参数中值最大的
Math.min()      与max是一样的,不过它的返回值是最小的。

Math.floor()    向下取整
Math.ceil()     向上取整
Math.round()    四舍五入,注意负数的话如-3.5则是-3(就近取整)
Math.abs()      求绝对值

random随机数介绍

Math.random()  返回值是大于等于0小于1的随机数,返回的是一个浮点数

假如想要得到某两个数之间的随机值,同时包括这两个数,这里就把它当成公式吧

function getRandomInt(min,max){
 min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}



2:日期对象

Date是一个构建对象,并需要构建出来才可以使用。

这里注意1月是从0开始算的,星期天也是从0开始算的


var obj=new Date();  无参数则是当前的时间

var obj=new Date('1992-10-01 8:8:8')  也可以是数字型2019, 10, 1



Date中的一些常用方法:

getFullYear()  获取如今的年
getMonth()     获取如今的月
getDate()      获取如今的日期
getDay()       获取如今的是星期几
getHours()     获取当前小时
getMinutes()   获取当前分钟
getSeconds()   获取当前秒钟



获取毫秒数(就是如今的时间距离1970年1月1日的总毫秒数)
(1)使用valueof()和getTime()方法
(2)var date1=+new Date();//这个也可以,是简单方法,大家理解成固定格式即可

八、字符串类型的介绍

前面说到了数据类型,相信大家对于字符串已经有了一定的了解了。字符串是不可变的,变化的其实是地址,在内存中又重新开辟了一个空间而已。大家只要记住字符串不可变,无论如何都不会变,变的知识它的地址而已即可。所以字符串的方法是无法对字符串进行改变的。

一些常用的方法:

indexOf(查找的字符,开始的位置)  返回指定内容在字符串中的位置,没有找到返回-1,开始位置是index索引号,(注意只要第一次出现的)

lastindexOf                           从后往前找
charAt(index)                         返回指定位置的字符
charCodeAt(index)                     获取指定位置字符的ASCII值
concat(str1,str2,...)               连接两个或者多个字符串,等效于"+""
substr(start,length)                  从start开始截取,length的个数,
slice(start,end)                      从start开始,到end但不包括end截取
replace('被替换的字符','替换成的字符')  注意只会替换第一个
split('分隔符')                        字符转换为数组
 <script>
        var s = 'abcdefghijk';
        console.log(s.split('-'));
    </script>

 

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

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

相关文章

ipv6地址概述——了解ipv6地址

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。个人爱好: 编程&#xff0c;打篮球&#xff0c;计算机知识个人名言&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石…

[ Linux ] 进程间通信之共享内存

在上篇博文我们了解了通过管道完成进程间通信&#xff0c;我们了解匿名管道和命名管道&#xff0c;并且通过编码模拟实现使用了匿名管道和命名管道。我们知道要让进程间完成通信必须让这两个进程首先看到同一份资源&#xff0c;因此给予这个前提&#xff0c;本篇博文我们了解另…

【Linux】自动化构建工具-make/Makefile第一个小程序

大家好我是沐曦希&#x1f495; 文章目录一.项目自动化构建工具-make/Makefile1.背景2. 举例3. 原理4. 总结5. 项目清理6. 习题习题一习题二二.第一个小程序&#xff0d;进度条1.行缓冲区2.倒计时3.进度条一.项目自动化构建工具-make/Makefile 1.背景 会不会写makefile&#x…

使用 elasticdump 跨版本迁移 ES 数据

1、elasticdump 用途介绍 elasticdump 是一个在 Github 开源的 Elasticsearch 的数据迁移工具&#xff0c;项目 Github 地址&#xff1a;[传送门](Github 地址&#xff1a;https://github.com/elasticsearch-dump/elasticsearch-dump) elasticdump 支持跨版本导出和导入数据&am…

【java进阶07:常用类】String类、包装类、日期类Date、数字类、随机数、枚举类型

String类 String类型的字符串存储原理 /*关于java JDK中内置的一个类&#xff1a;java.util.String1、String表示字符串类型&#xff0c;属于引用数据类型&#xff0c;不属于基本数据类型。2、在java中随便使用双引号括起来的都是String对象&#xff0c;例如&#xff1a;"…

零基础上手unity VR开发【配置PC端项目的实时调试】

&#x1f4cc;个人主页&#xff1a;个人主页 ​&#x1f9c0; 推荐专栏&#xff1a;Unity VR 开发成神之路 --【着重解决VR项目开发难&#xff0c;国内资料匮乏的问题。从零入门&#xff0c;一步一个脚印&#xff0c;带你搞定VR开发! &#x1f63b;&#x1f63b;】 &#x1f4d…

聊一聊如何截获 C# 程序产生的日志

一&#xff1a;背景 1.讲故事 前段时间分析了一个dump&#xff0c;一顿操作之后&#xff0c;我希望用外力来阻止程序内部对某一个com组件的调用&#xff0c;对&#xff0c;就是想借助外力实现&#xff0c;如果用 windbg 的话&#xff0c;可以说非常轻松&#xff0c;但现实情况…

当下互联网行业趋势,你顶得住吗?

持续三年的疫情导致经济形式大不如前&#xff0c;特别是互联网行业&#xff0c;不少员工面临着失业的压力&#xff0c;在如此恶劣的大环境下&#xff0c;计算机行业的我们应该如何生存&#xff1f;有一个很好的办法就是 —— 考证&#xff01;&#xff01;&#xff01;如今越来…

多线程与并发 - 常见的几种锁的实现方式

1、悲观锁 正如其名&#xff0c;它是指对数据修改时持保守态度&#xff0c;认为其他人也会修改数据。因此在操作数据时&#xff0c;会把数据锁住&#xff0c;直到操作完成。悲观锁大多数情况下依靠数据库的锁机制实现&#xff0c;以保证操作最大程度的独占性。如果加锁的时间过…

深度学习入门(6)误差反向传播基础---计算图与链式法则

在我的第三篇博文《深度学习入门&#xff08;3&#xff09;神经网络参数梯度的计算方式》中详细介绍了通过微分方式计算神经网络权重参数的梯度。但是数值微分的方式计算梯度效率较低。后续博文会介绍另外一种更加高效的梯度计算方式---误差的反向传播。 这篇文章介绍的是误差…

CorelDRAW2023最新版矢量设计软件

CorelDRAW2023最新版是我比较用的比较好的一款软件&#xff0c;因为其作为一款优秀的矢量设计软件&#xff0c;兼具功能和性能&#xff0c;它是由Corel公司出品的矢量设计工具&#xff0c;被广泛应用于排版印刷、矢量图形编辑、网页设计等行业。CDR软件的优势在于&#xff1a;易…

ROS2 机器人操作系统入门和安装以及如何使用 .NET 进行开发

本文是 ROS2 入门的第一课&#xff0c;简单介绍了 ROS 系统&#xff0c;并演示了 ROS2 系统在 Ubuntu 22.04 中的安装&#xff08;使用 gitee 和清华源&#xff09;以及其中错误的解决。最后对其优势进行总结&#xff0c;为什么选择 ROS。最后介绍简单 Demo 和如何使用 .NET 接…

ThingsBoard源码解析-规则引擎

描述 规则引擎是Thingsboard的核心部分&#xff0c;基于Actor编程模型&#xff0c;类似事件驱动&#xff1b; 每个actor都有自己的消息队列&#xff08;mailBox&#xff09;保存接收到的消息 actor可以创建actor actor可以将消息转发给其他actor 分析 Actor模型实现 系统…

戴尔科技集团通过多云数据保护和安全创新增强网络弹性

中国北京——2022年11月18日 Dell PowerProtect Data Manager软件更新和新一代备份一体机可帮助客户提高运维安全和网络弹性 戴尔多云数据保护解决方案利用内置的安全运维功能加速采用零信任原则 2022年全球数据保护指数(GDPI)调查结果公布 戴尔科技集团(NYSE:Dell)扩大其在数据…

OA系统,有效提升企业办公效率落实执行力

企业管理的成功将最终取决于企业的执行情况&#xff0c;只要有良好的经营管理&#xff0c;管理系统&#xff0c;一个好的领导者&#xff0c;充分调动员工的积极性&#xff0c;将能最大限度的管理执行力。 OA协同办公系统提供了工作流和协同工作互补结合。工作流程严格规定了工作…

PCB铺铜的优点与缺点

PCB设计铺铜是电路板设计的一个非常重要的环节。 什么是PCB铺铜&#xff0c;就是将PCB上无布线区域闲置的空间用固体铜填充。铺铜的意义在于减小地线阻抗&#xff0c;提高抗干扰能力;降低压降&#xff0c;提高电源效率&#xff0c;与地线相连&#xff0c;还可以减小环路面积。 …

基于蛙跳算法求解简单调度问题附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

python与Electron联合编程记录之九(Electron与Flask联合编程实现)

前面铺垫了这么多&#xff0c;这一节就要真正的实现Electron与python联合编程。这一节我通过加法器这个简单的例子来演示如何真正实现Electron和Flask联合编程。 1、安装Axios包 在终端工具选项卡中输入如下命令安装Axios包: npm i --save-dev axios2、项目结构 项目结构如下…

C语言源代码系列-管理系统之家庭财务小管家

往期文章分享点击跳转>《导航贴》- Unity手册&#xff0c;系统实战学习点击跳转>《导航贴》- Android手册&#xff0c;重温移动开发 &#x1f449;关于作者 众所周知&#xff0c;人生是一个漫长的流程&#xff0c;不断克服困难&#xff0c;不断反思前进的过程。在这个过…

COLMAP输出的文件类型(bin, txt)

默认情况下&#xff0c;COLMAP使用二进制文件格式(bin&#xff0c;机器可读&#xff0c;速度速)来存储稀疏模型。此外&#xff0c;COLMAP也可以将稀疏模型存储为文本文件(txt&#xff0c;人类可读&#xff0c;速度慢)。在这两种情况下&#xff0c;模型导出的信息被分为关于相机…