前端学习JavaScript基础语法

发布时间:2026/10/23 20:03:32

前端学习JavaScript基础语法 JavaScript组成ECMAScript(简称 ESjavascript语法DOM:页面文档对象模型对页面中的元素进行操作BOM:浏览器对象模型对浏览器窗口进行操作书写形式行内式inputtypebuttonvalue这是一个按钮onclickalert(这是一个按钮)内嵌式scriptalert(这是一个按钮);/script外部式scriptsrchellp.js/script引入js文件定义变量scriptvarname小明;console.log(Hello, name!);// 输出: Hello, 小明!letage18;console.log(年龄: age);// 输出: 年龄: 18/scriptlet比var出现的晚意味着避免了var这块定义变量的时候的一些缺陷如果使用let定义变量此时变量生命周期作用域基本和java类似的JS中定义一个变量的时候不需要对找个变量指定类型对于数字只有一个数值类型什么是强类型变量弱类型变量强类型变量意味着不同的类型之间进行赋值的时候需要进行一定的手段强制类型转化弱类型变量在不同类型之间变量进行赋值的时候可以直接赋值a 1 b b b a console.log(b) 打印1什么是动态类型变量什么是静态类型变量动态类型意味着代码在执行过程中变量类型可以随时发生变化静态类型意味着变量定义的时候是什么类型在运行过程中就是什么类型a 1 console.log(typeof a) // 输出: number b b a b console.log(typeof a) // 输出: string基础数据类型number 数字不分整数和小数boolean: true 真false 假string 字符串类型undefined 只有唯一的值 undefined 表示未定义的值null 只有唯一的值 null 表示空值数字类型八进制0开头例如07十六进制0x开头二进制0b开头特殊的数字值infinity:无穷大大于任何数字表示数字已经超过了JS能表示的范围-infinity:负无穷大小于任何数字表示数字已经超过了JS能表示的范围NaN:表示当前的结果不是一个数字console.log(10/0)infinity console.log(-10/0)-infinity console.log(hhhhh-1)NaNstring类型双引号和单引号都能使用都是string类型双引号可以加单引号反过来一样求字符串长度letagggalert(a.length)拼接用 console.log(100100)数字 console.log(100100)字符串100100boolean类型boolean参与运算时当作1和0来看待undefined 未定义的类型leta console.log(a)underined console.log(a20)underined20 console.log(a1)NaN运算符 比较相等比较内容会进行隐式类型转化 比较相等比较内容数据类型不会进行隐式类型转化数组创建数组vararrnewArray();vararr[];vararr2[1,2,haha,false];数据类型可以不一样访问用下标注意不要给数组直接赋值此时数组中的所有元素都没了新增数组元素vararr[];arr[2]10console.log(arr)push追加vararr[1,2,3,4,5,6]varnewArr[]for(vari0;iarr.length;i){if(arr[i]%2!0){newArr.push(arr[i]);}}删除newArr.splice(0,1);从0下标开始删除1个函数function函数名形参列表{函数体return返回值}函数表达式letresult(function(){leta0;for(vari0;i5;i){ai;}returna;})();console.log(result);作用域letnum10;functiontest01(){letnum100;console.log(num);}functiontest02(){letnum200;console.log(num);}console.log(num);test01();test02();for(i1;i100;i){}console.log(i);//JS中如果定义一个变量不使用let,var此时这个变量就会变成一个全局变量作用域链letnum10;functiontest01(){letnum100;console.log(num);functiontest02(){letnum200;console.log(num);}test02();}test01();//200变量局部优先再找全局对象使用字面量创建对象leta{}letstudent{name:cyy,height:123,weight:34kg,sayHello:function(){console.log(hello)}}console.log(student.name);console.log(student[name]);student.sayHello();使用 new Object创建对象letstudentnewObject()student.namecyystudent.height180student[weight]80student.sayHellofunction(){console.log(say hello)}console.log(student.name)student.sayHello()使用构造函数创建对象functionPeople(name,height,weight){this.namenamethis.heightheightthis.weightweightthis.Sayfunction(){console.log(name say hello)}}letcyynewPeople(cyy,175,70)console.log(cyy)cyy.Say()ES6,class和构造classPeople{constructor(name,height,weight){//构造函数this.namenamethis.heightheightthis.weightweight}Say(){console.log(this.name正在说)}}letcyynewPeople(cyy,111,22)console.log(cyy)cyy.Say();static关键字classPeople{constructor(name,height,weight){//构造函数this.namenamethis.heightheightthis.weightweight}Say(){console.log(this.name正在说)}staticotherother//属于类}letcyynewPeople(cyy,111,22)console.log(cyy)cyy.Say();console.log(People.other)继承classStudentextendsPeople{constructor(name,weight,height,number){super(name,height,weight)this.numbernumber}Say(){alert(this.name)}}letstudentnewStudent(zhang,190,80,2)console.log(student)student.Say()
延伸阅读

更多相关文章

2026/10/21 21:32:57

基于微信小程序的美食画像平台设计与实现

一、课题研究背景与意义 (一)研究背景 随着移动互联网与本地生活服务行业的高速发展,美食消费、美食探店、饮食分享已成为大众日常生活的重要组成部分。当前美团、大众点评等主流美食平台以商家入驻、榜单推荐、团购消费为核心,服…

2026/10/19 10:14:33

职场英语学习计划Day040

🌟计划1:📅学习时间:2026.8.7 周五学习内容:English at Work Episode 39: A step too far Disciplining a member of staff▶ new recruit 新员工▶ make life difficult for sb. 给某人制造困难/找麻烦/出难题&#x…

2026/10/23 22:52:07

SpringCloud外卖系统五端源码拆解:订单状态机与抢单派单实战

简介:面向学习O2O外卖平台后端与数据库设计的中级开发者,这份压缩包提供饿了么风格系统的数据库脚本,可服务于SpringCloud微服务项目的建库建表、业务实体梳理以及课程设计或毕业设计参考。包内共3个SQL文件,压缩包约65KB&#xf…

2026/10/23 22:52:07

Python批量处理Word:自动插入图片和表格的办公脚本

简介:这份资源面向需要批量处理Word文档的Python学习者与办公自动化从业者,聚焦用python-docx库把图片和表格高效写入.docx文件,解决重复手工排版、逐份生成通知类文档的痛点,属于入门到进阶的实用技能练习。压缩包共12个文件&…

2026/10/23 22:52:07

C语言运行时栈全解析:函数调用、栈帧、递归与安全

之前排查一个模拟高并发消息网关项目X时,程序运行到深夜必定崩一次,而且崩溃的位置每次都不一样,白天测试又完全复现不出来。当时第一反应是堆被写坏了,于是把所有能开的检测都打开,结果堆一切正常。后来实在没辙&…

2026/10/23 22:52:07

ARM9 2410平台Nucleus实时内核移植与任务调度实践

简介:Nucleus for 2410 是一份面向嵌入式开发者的实时操作系统移植资料,围绕 Nucleus RTOS 在三星 S3C2410(ARM920T)平台上的移植、驱动适配与应用开发展开。资源层级清晰,涵盖硬件初始化代码、常见外设驱动&#xff0…

2026/10/23 22:52:06

CPU Roofline模型全解析:从原理到绘图,看清性能天花板

面对一坨密密麻麻的火焰图、perf stat 输出的几十个计数器、以及一次次改代码却提速不到 1.2 倍的诡异结果,我强烈建议你先停下来,别再盲目做微优化,而是建立一张属于这台 CPU 的 Roofline 模型。这东西就像一张性能“天花板图”,…

2026/10/23 22:47:05

C#电子秤数据接口中间件:多型号串口协议适配与稳定采集

简介:这份托利多中间件电子秤数据接口 C# 源码面向工业称重、自动化产线、仓储收货、零售结算等场景的开发者,重点解决电子秤重量数据采集、厂家 SDK 调用以及 RL00、BCOM 等多型号兼容问题,适合需要把称重设备接入现有业务系统的初中级 C# 开…

2026/10/22 11:29:28

金融AI落地指南:从调研报告到技术选型与工程实践

简介:这份PDF报告聚焦2025年金融服务业中国AI现状与趋势,面向金融科技从业者、AI战略规划人员及关注行业数字化转型的研究者,帮助读者把握生成式AI在银行、支付、交易等场景中的落地路径与投资方向。资源包内含1个PDF文件,大小约1…

2026/10/23 0:02:26

Verilog实现FPGA密码锁:矩阵键盘与状态机设计实战

说实话,这几年接触了不少想入门FPGA的朋友,如果你问哪个项目能一口气把Verilog的核心基本功串起来,我通常会推荐电子密码锁。这个项目看着不起眼,却把矩阵键盘扫描、按键消抖、状态机设计、动态显示刷新、外设控制这些数字逻辑里的…

2026/10/23 0:02:26

数据服务监控运维实战:从指标体系到告警治理与故障排查

周末凌晨两点,手机震了。第一反应是“数据服务挂了”。打开电脑看了下,果然,某张核心报表的数据产出时间已经超过SLA两小时,下游三个业务方连着发来问询。这种场景,做过大数据运维的人都不会陌生。数据服务的监控与运维…

2026/10/23 0:02:26

FreeRTOS任务通知实战详解:内核原理、API与避坑指南

裸机编程切到RTOS之后,任务之间的通信和同步永远是躲不开的坎。前面聊过队列、信号量、互斥锁、事件组,这次把FreeRTOS任务通知(Task Notification)单独拎出来讲透。原因很简单:任务通知是FreeRTOS里最容易用错、也最容…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑