当前位置: 首页 > news >正文

JS基础语法

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
http://www.lryc.cn/news/172709.html

相关文章:

  • 【Zabbix监控一】zabbix的原理与安装
  • 图的十字链表存储结构
  • 精华回顾:Web3 前沿创新者在 DESTINATION MOON 共话未来
  • 【RPC】gRPC 安装及使用
  • Pygame中Sprite类的使用3
  • 23年下考前须知-软考中级信息安全工程师
  • 关于表单快速开发低代码技术平台的内容介绍
  • 比特币 ZK 赏金系列:第 1 部分——支付解密密钥
  • 【Python深度学习】深度学习中框架和模型的区别
  • MyBatis面试题(二)
  • Android之MediaMetricsService实现本质(四十二)
  • Flutter超好用的路由库-fluro
  • 约数个数(蓝桥杯)
  • 越狱(快速幂C++)
  • 电脑入门:怎么进入路由器设置
  • Vue3大屏项目实现数字跳动的效果
  • MATLAB打开历史命令窗口并保持
  • 等差数列和等比数列 常用公式
  • 基于SpringBoot+Vue的MOBA类游戏攻略分享平台
  • 基于异常上线场景的实时拦截与问题分发策略
  • MySQL常见面试题(一)
  • webpack:详解entry和output一些重要API的使用
  • Spring后处理器-BeanPostProcessor
  • 每日一题~修剪二叉树
  • 图像形态学操作(连通性、腐蚀、膨胀)
  • 中国这么多 Java 开发者,应该诞生出生态级应用开发框架
  • 仿猫扑盒子引流神器试看神马视频-红包打卡签到领金
  • WhatsApp自动营销软件是真实的吗?对做外贸有帮助吗?
  • 抖音短视频矩阵系统搭建
  • Chinese-LLaMA-AIpaca