JS基础语法

news2024/12/25 23:56:51

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.coloradmin.cn/o/1031200.html

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

相关文章

2023中国智能产业高峰论坛丨文档图像大模型的思考与探索

# 前言 随着人工智能技术的不断发展&#xff0c;尤其是深度学习技术的广泛应用&#xff0c;多模态数据处理和大模型训练已成为当下研究的热点之一&#xff0c;这些技术也为文档图像智能处理和分析领域带来了新的发展机遇。 近期&#xff0c;2023第十二届中国智能产业高峰论坛…

打印由数字组成的金字塔图案——python

1222 33333 4444444 555555555打印由数字组成的金字塔图案。但n9时&#xff0c;如下图所示。 输入格式: 输入一个整数n&#xff08;1<A<9&#xff09;。 输出格式: 输出由数字组成的金字塔图案。 输入样例: 在这里给出一组输入。例如&#xff1a; 5输出样例: 在这…

软件设计模式系列之十二——外观模式

在软件设计中&#xff0c;经常会遇到需要与复杂子系统进行交互的情况。为了简化客户端与子系统之间的交互&#xff0c;提高系统的可维护性和可用性&#xff0c;外观模式应运而生。外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供一个统…

.NET超简单轻量级的HTTP请求组件Flurl

简介 Flurl是一个用于构建基于HTTP请求的C#代码的库。它的主要目的是简化和优雅地处理网络请求&#xff08;只用很少的代码完成请求&#xff09;。Flurl提供了一种简单的方法来构建GET、POST、PUT等类型的请求&#xff0c;以及处理响应和异常。它还提供了一些高级功能&#xf…

nndeploy:一款最新上线的支持多平台、简单易用、高性能的机器学习部署框架

项目地址&#xff1a;https://github.com/Alwaysssssss/nndeploy 介绍 nndeploy 是一款最新上线的支持多平台、高性能、简单易用的机器学习部署框架。做到一个框架就可完成多端(云、边、端)模型的高性能部署。 作为一个多平台模型部署工具&#xff0c;我们的框架最大的宗旨就…

Mac 上安装yt-dlp 和下载视频的操作

安装 打开终端&#xff0c;在终端输入 cd python的路径&#xff0c;然后输入pip3 install yt-dlp&#xff0c;如下图&#xff1b; 出现 如Successfully installed yt-dlp-2023.7.6 的时候&#xff0c;说明下载成功 下载 下载命令&#xff1a; yt-dlp --list-formats https…

来自华为的暴击?传高通裁员赔偿N+7 | 百能云芯

自9月20日起&#xff0c;高通裁员的新闻在网络上持续发酵。尽管市场充满了关于裁员细节的传言&#xff0c;但截至目前&#xff0c;高通官方尚未对此发表评论。 消息称&#xff0c;高通此次裁员的“重灾区”在上海的无线研发部门&#xff0c;甚至有传言称将直接关闭上海研发中心…

干货 | 汽车行业研发效能提升的挑战与实践案例

在 9 月 15 日的第七届 CSN 大会上&#xff0c;思码逸研发效能专家王艳萍受邀分享了《汽车行业研发效能提升的挑战与实践案例》。演讲包含了思码逸对多家汽车企业服务过程中总结出的行业痛点、解决方案&#xff0c;以及实践案例。 以下为演讲实录&#xff1a; 思码逸与很多知名…

基于微信小程序的校园生活管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言运行环境学生微信端的主要功能有&#xff1a;管理员的主要功能有&#xff1a;具体实现截图视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝1…

Aztec交易架构解析

1. 引言 前序博客有&#xff1a; Aztec的隐私抽象&#xff1a;在尊重EVM合约开发习惯的情况下实现智能合约隐私完全保密的以太坊交易&#xff1a;Aztec网络的隐私架构Aztec.nr&#xff1a;Aztec的隐私智能合约框架——用Noir扩展智能合约功能Account Abstraction账号抽象——…

【@胡锡进】大模型量化分析- 药明康德 603259.SH

我将使用不同的预测方法进行药明康德股票未来3天价格的预测。以下是每种方法的预测方法、详细代码和预测价格&#xff08;根据提供的数据进行模拟&#xff09;。 SARIMA模型预测&#xff1a; SARIMA&#xff08;季节性自回归移动平均&#xff09;模型适用于具有明显季节性的时…

PHP8中调换数组中的键值和元素值-PHP8知识详解

在php8中使用array_flip()函数可以调换数组中的键值和元素值。 在PHP8中使用array_flip()函数可以调换数组中的键值和元素值&#xff0c;示范代码如下&#xff1a; <?php$stu array("子涵"> 001,"欣怡"> 002,"梓涵">003,"晨曦…

华为OD机试 - 特异性双端队列(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、Java算法源码五、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#xff09;》。 刷的越多…

TikTok的全球影响:跨文化、跨国界的短视频文化

随着TikTok的崛起&#xff0c;短视频文化正在以前所未有的方式迅速传播&#xff0c;跨足了不同国家和文化的边界。本文将探讨TikTok的全球影响&#xff0c;以及它如何促进了跨文化交流和文化融合。 短视频&#xff1a;跨越语言和文化的沟通工具 TikTok的短视频格式具有独特的跨…

Downie 4下载画质的设置方法,downie 4设置下载清晰度

downie4除了能够下载网页视频外&#xff0c;大家还能根据需要自定义下载文件的分辨率&#xff0c;是Mac电脑必备的下载工具&#xff0c;Downie4下载画质如何设置&#xff1f;下面就来告诉大家具体的设置方法吧。 下载&#xff1a;Downie 4中文直装版 没修改之前&#xff0c;Dow…

SpringBoot 之配置加密

Jasypt库的使用 Jasypt是一个Java简易加密库&#xff0c;用于加密配置文件中的敏感信息&#xff0c;如数据库密码。 Jasypt库与springboot集成&#xff0c;在实际开发中非常方便。 1、引入依赖 <dependency><groupId>com.github.ulisesbocchio</groupId>&…

人工智能AI 全栈体系(四)

第一章 神经网络是如何实现的 除了全连接神经网络外&#xff0c;还有其他形式的神经网络。 此节将讲述神经网络的另一种形式&#xff1a;卷积神经网络。 四、卷积神经网络 首先我们看看全连接神经网络有什么不足。正如其名字一样&#xff0c;全连接神经网络&#xff0c;两个…

STM32F4X UCOSIII 事件集

STM32F4X UCOSIII 事件集 事件的应用场景UCOSIII事件工作机制UCOSIII事件操作函数事件创建函数事件删除函数事件发送函数事件接收函数 UCOSIII事件例程 事件在RTOS中也是一种任务间同步的机制&#xff0c;事件不能传递数据。跟信号量不同的是&#xff0c;事件可以实现一对多&am…

C++11之基础篇

C11 C11简介统一的列表初始化&#xff5b;&#xff5d;初始化std::initializer_list 声明autodecltypenullptr范围for循环 STL中一些变化arrayforward_listunderored_map&#xff0c;underored_set C11简介 在2003年C标准委员会曾经提交了一份技术勘误表(简称TC1)&#xff0c;…

HEC-RAS 1D/2D水动力与水环境模拟教程

详情点击公众号技术科研吧链接&#xff1a;HEC-RAS 1D/2D水动力与水环境模拟教程 前言 水动力与水环境模型的数值模拟是实现水资源规划、环境影响分析、防洪规划以及未来气候变化下预测和分析的主要手段。然而&#xff0c;一方面水动力和水环境模型的使用非常复杂&#xff0c…