JS基础语法

2023-09-22 12:51:27

JS是一门面向对象的编程语言,运行在客户端的脚本语言,可以基于Node.js进行服务器端编程

JS的作用:

  • 表单动态校验
  • 网页特效
  • 服务端开发

浏览器执行JS:

浏览器分为两部分:渲染引擎和JS引擎

渲染引擎用来解析HTML和CSS,如chrome浏览器的Blink/Webkit,Firefox的Gecko。

JS引擎用来读取网页的JS代码,对其处理后运行,如chrome浏览器的V8。

JS组成:

在这里插入图片描述
ECMAScript:JS基础语法
DOM:文档对象
BOM:浏览器对象

JS书写位置:

  • 行内式:写在以on开头的属性中
  • 内嵌式:写在script标签中
  • 外链式:写在一个独立的js文件中,用script标签引入

JS注释:

    <script>
        // 单行注释
        
        /*
            多行注释
        */
    </script>

基础语法

变量

JS弱类型语言,声明变量不需要指定数据类型

var user="root";

数据类型

  • 简单数据类型
    在这里插入图片描述

  • 复杂数据类型(Object)(数组、对象、函数)

变量的数据类型和上下文有关,变量中保存了什么数据,变量的数据类型就是什么

typeof数据类型检测:
在这里插入图片描述
NaN:代表非数值

var a=1;
var b="abc";
console.log(a-b);//NaN

isNaN判断一个变量是否为非数字类型

var a=NaN;
var b=10;
isNaN(a);//true
isNaN(b);//false

声明八进制,以0作为前缀:

var num1=010;

声明十六进制,以0x作为前缀:

var num2=0x9

最大数字和最小数字:

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

无穷大和无穷小:

console.log(Infinity);
console.log(-Infinity);

数据类型转换

转字符串:

  1. toString();
var flag=true;
flag.toString();
  1. String();
var num=10;
String(num);
  1. +拼接
var PI=3.14;
PI+'';

转数值:

  1. parseInt()
  2. parseFloat()
  3. Number
  4. 隐式转换(- * / 运算)

特殊情况的转数值:

//能将有单位的数字单独取出来
console.log(parseInt('120px');//120
//普通字符串、布尔型、Undefined、null转为NaN
console.log(parseInt('a120px'));   //NaN
console.log(parseInt('true'));     //NaN
console.log(parseInt('undefined'));//NaN
console.log(parseInt('null'));     //NaN
//Number函数的特殊转换
console.log(Number(true));      //1
console.log(Number(false));     //0
console.log(Number(undefined)); //NaN
console.log(Number(null));      //0

转布尔型

  1. 非空字符串和数值型转为true
console.log(Boolean('小白');//true
console.log(Boolean(123);//true
console.log(Boolean(3.14);//true
  1. 空字符串、0转为false
console.log(Boolean('');//false
console.log(Boolean(0); //false
  1. 其他转为false
console.log(Boolean(NaN);      //false
console.log(Boolean(null);     //false
console.log(Boolean(undefined);//false

运算符

算数运算符、子增自减运算符、比较运算符、逻辑运算符、赋值运算符

算数运算符

➕ ➖ ✖️ / %

//浮点数在运算时有精度丢失问题
console.log(0.1+0.2);//0.30000000000004
//toFixed(num);只保留小数点后num位
console.log((0.1+0.2).toFixed(1));//0.3
//自增++
console.log(a++);
//自减--
console.log(--b);

比较运算符

>
<
<=
>=
= = 值相等,8==‘8’;//true
!=
= = = 值和类型都相等,8==‘8’;//false
!= = 不全等,8!==‘8’;//true

逻辑运算符

&& || !

赋值运算符

= += -= *= /= %=

运算符优先级:
在这里插入图片描述

流程控制

顺序结构、分支结构、循环结构

在这里插入图片描述

分支结构

if…else
switch

三元运算符:判断表达式?值1:值2;

循环结构

while
do…while
for

关键词:continue、break

数组

数组的单元可以存放任意类型数据

创建数组:

  1. 数组字面量
var arr1=[1,'汉子',true];
  1. new关键字
var arr2=new Array(1,2,3);

数组操作:

var arr1=[1,'汉子',true];
arr1[1]='小孩';
arr1[2]=false;
arr3[3]=0;
console.log(arr1);//[1,'小孩',false,0]

遍历数组:

for(var i=0;i<arr1.length;i++{
	console.log(arr1[i]);
}
arr1.forEach(function(item,index){
	//item:每次循环的单元值
	//index:每次循环的单元索引
	console.log(item,index);
})

函数

函数声明:

function 函数名(形参1,形参2,...){
		程序块;
		return xxx;
}

声明后可以直接调用;

变量作用域

全局:在函数体外声明的变量,在整个script标签范围内有效;
局部:在函数体声明的变量,在函数体内有效;
作用域链:函数里面套函数,变量作用域还有效

其他函数声明方式:

//字面量方式
var 函数名=function(形参1,形参2,...){
		程序块;
		return xxx;
}
//匿名函数
function(形参1,形参2,...){
		程序块;
		return xxx;
}
//自调用函数function(形参1,形参2,...){
		程序块;
		return xxx;
})(实参1,实参2)

对象

一切皆对象

创建对象的三种方式:字面量、构造函数、new Object()

//字面量创建对象
var obj={
	key:value,
	key:value,
	...
	key:function(形参1,形参2,...){
		程序块;
		return xxx;
	}
}

字面量声明的对象不需要实例化。
调用属性:

  • 对象名.key
  • 对象名[key],如s[“name”]

调用方法:

  • 对象名.key()
//构造函数创建对象
function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}
//new Object()创建对象
// 1. 使用 Object 实例化对象
var obj = new Object();

// 2. 向对象中添加属性和方法
obj.name = 'zs';
obj.age  = 20;
obj.sayHi = function () {
    console.log('大家好,我叫' + obj.name + ',今年' + obj.age + '岁');
}

遍历对象

for(var k in obj{
	//k保存属性名
	console.log(k);
	//obj[k]保存属性值
	console.log(obj[k]);
}

JS内置对象

Math

在这里插入图片描述

Date

//获取当前时间
var now=new Date();//格林威治时间
//获取指定日期时间
var future=new Date('2025/6/1');

日期格式化

在这里插入图片描述

var date=new Date();
var y=date.getFullYear();
var m=date.getMonth()+1;
var d=date.getDate();
var h=date.getHours();
var i=date.getMinutes();
var s=date.getSeconds();
console.log(y+"-"+m+"-"+d+" "+h+":"+i+":"+s);

时间戳:
三种获取时间戳的方法:

var date=new Date();
//第一种
date.valueOf();
//第二种
date.getTime();
//第三种
var now=Date.now();
//获取指定时间的时间戳
var da=new Date("2025-08-10 12:12:11");
da.valueOf();
da.getTime();
//时间戳转时间
var t=1238957491330;

var date=new Date(t);
var y=date.getFullYear();
var m=date.getMonth()+1;
var d=date.getDate();
var h=date.getHours();
var i=date.getMinutes();
var s=date.getSeconds();
console.log(y+"-"+m+"-"+d+" "+h+":"+i+":"+s);

数组

在这里插入图片描述
在这里插入图片描述

var arr[2,3,4,5,6];
arr.join('-');//2-3-4-5-6
arr.splice(1,2);//[4,5,6]
arr.splice(1,1,6);//[6,3,4,5,6]

字符串

在这里插入图片描述

slice()和substr()截取字符串

//slice()的两个参数:
//1.指定截取起点
//2.可选参数,指定截取终点(不包含终点)
var str="qwertyu";
str.slice(1);//wertyu
str.slice(1,3);//we

//substr()有两个参数
//1.指定截取的起点
//2.可选参数,指定截取长度
str.substr(3);//rtyu
str.substr(3,2);//rt
更多推荐

MyBatis 动态 SQL、MyBatis 标签、MyBatis关联查询

MyBatis动态SQL、MyBatis标签、MyBatis关联查询1、MyBatis动态sql的特性2、MyBatis标签2.1、if标签:条件判断2.2、where+if标签2.3、set标签2.4、choose(when,otherwise)语句2.5、trim2.6、MyBatisforeach标签3、整合案例

Linux内核源码分析 (B.8)深度解析 slab 内存池回收内存以及销毁全流程

Linux内核源码分析(B.8)深度解析slab内存池回收内存以及销毁全流程文章目录Linux内核源码分析(B.8)深度解析slab内存池回收内存以及销毁全流程1\.内存释放之前的校验工作2\.slabcache在快速路径下回收内存3\.slabcache在慢速路径下回收内存3.1直接释放对象回slab,调整slab相

在AOSP中根据设备特性进行个性化定制:利用getPackageManager().hasSystemFeature()接口实现

在AOSP中根据设备特性进行个性化定制:利用getPackageManager().hasSystemFeature()接口实现前言AOSP原生框架是Android开放源代码项目的一部分,它不仅支持普通手机设备,还需要针对一些特殊设备(如汽车和手表等)提供定制化的功能。由于这些特殊设备的行为方式与手机系统不完全一致,因

SpringMVC之自定义注解

目录一.JAVA注解简介1.1.Java注解分类1.2.JDK元注解二.自定义注解1.1.如何自定义注解1.2.自定义注解的基本案例1.2.1.案例一(获取类与方法上的注解值)1.2.2.案例二(获取类属性上的注解属性值)1.2.3.案例三(获取参数修饰注解对应的属性值)三.Aop自定义注解的应用好啦,今天的分享就到这

vivado乘法器IP核进行无符号与有符号数相乘问题的验证

本文验证乘法器IP核Multiplier进行无符号(unsigned)与有符号数(signed)相乘的正确性,其中也遇到了一些问题,做此记录。配套工程:https://download.csdn.net/download/weixin_48412658/88354179文章目录问题的讨论验证过程IP核配置例化乘法器仿真

MySQL迁移到达梦数据库实战(使用达梦的DTS迁移工具)

1.mysql源库授权grantselecton*.*todm_read@'%'identifiedby'password';flushprivileges;2.设置数据类型映射设置varchar按字符存储,char也改成varcharchar,(选择强制为字符存储为是,意思是mysql定义的varchar(n)或者c

Simple Factory 简单工厂模式简介与 C# 示例【创建型3.1】【设计模式来了_3.1】

〇、简介1、什么是简单工厂模式?一句话解释:客户类和工厂类严格分工,客户类只需知道怎么用,处理逻辑交给工厂类。简单工厂模式(SimpleFactoryPattern)是日常开发中常用的设计模式。其是一种简单的创建型模式,它通过一个工厂类来创建对象,客户端只需要知道如何使用工厂类,而不需要知道对象的实现细节。工厂类负责创

uni-app 实现自定义按 A~Z 排序的通讯录(字母索引导航)

创建convertPinyin.js文件convertPinyin.js将下面的内容复制粘贴到其中constpinyin=(function(){letPinyin=function(ops){this.initialize(ops);},options={checkPolyphone:false,charcase:"

【无标题】

前言:JavaScript数组排序是一种常见的技术,它允许我们对数组中的元素进行排序。在本文中,我们将探讨JavaScript数组排序的背景、原理、使用场景、具体实现代码以及一些注意事项,并最后进行全文总结。背景:在编程中,排序是一种将元素按照一定规则重新排列的操作。在JavaScript中,数组是一种常用的数据结构,

在电脑上怎么分类管理笔记?支持分类整理的电脑云笔记软件

对于大多数上班族而言,在使用电脑办公时,随手记录工作笔记是一个非常常见的场景。无论是会议纪要、工作总结还是项目计划,记录下每一次思考和灵感是提高工作效率的关键。然而,随着时间的推移,电脑上记录的笔记内容逐渐增多,如何高效地管理这些笔记就成为了一项重要的任务。那么,在电脑上如何分类管理笔记呢?支持分类整理的电脑云笔记软件

gateway之过滤器(Filter)详解

文章目录什么是过滤器过滤器的种类局部过滤器代码示例全局过滤器代码示例总结什么是过滤器在SpringCloud中,过滤器(Filter)是一种关键的组件,用于在微服务架构中处理和转换传入请求以及传出响应。过滤器位于服务网关或代理中,并通过拦截请求和响应流量来提供各种功能。过滤器在请求的不同生命周期阶段执行特定的操作,例如

热文推荐