深入理解JS语法与变量

深入理解JS语法与变量

  • 前言
  • 初识JavaScript
    • JavaScript的语言风格和特性
  • JavaScript的书写位置
  • 认识输出语句
  • 学会处理报错
    • REPL 环境
  • 变量
    • 定义变量
    • 改变变量
    • 变量的合法命名
    • 变量的默认值
    • 变量的常见错误
    • 等号表示赋值
    • 同时声明多个变量
  • 变量声明提升
    • 注意事项
  • 结语

前言

在现代Web开发中,JavaScript扮演着至关重要的角色。它的语法和变量是理解这门语言的关键。就像学习一门新语言一样,JavaScript的语法规则和变量概念可能会让人感到挑战,但同时也散发着强大的魅力。让我们一同揭开JavaScript的神秘面纱,探索这门语言的奇妙之处。

初识JavaScript

前端三层
在这里插入图片描述
JavaScript是一种高级、解释型的编程语言,具有轻量级、跨平台的特性。以下是JavaScript的主要历史里程碑:

  1. 诞生(1995年):

    • JavaScript由Netscape公司的Brendan Eich在1995年创建。最初命名为"LiveScript",后来与Sun Microsystems合作,改名为JavaScript。
  2. 浏览器战争(1995-2001年):

    • JavaScript迅速在Netscape Navigator浏览器中流行起来,并很快成为网页开发的核心技术。
    • 微软推出了JScript,这是他们在Internet Explorer中的JavaScript实现。这导致了一系列的“浏览器战争”时期,其中各浏览器尝试通过引入自己的技术来吸引开发者。
  3. ECMAScript标准化(1997年):

    • 为了规范JavaScript,ECMAScript标准制定组织成立,并发布了ECMAScript 1.0标准。ECMAScript定义了JavaScript的核心语法和功能。
  4. DOM和BOM(Document Object Model和Browser Object Model):

    • W3C制定了DOM和BOM标准,这些标准定义了JavaScript与文档对象和浏览器对象的交互方式,使开发者能够动态地操作和更新网页内容。
  5. Ajax的兴起(2005年):

    • Ajax(Asynchronous JavaScript and XML)的兴起标志着JavaScript在网页上实现异步数据传输的能力。这使得网页可以在不重新加载整个页面的情况下更新部分内容,提升了用户体验。
  6. Node.js的出现(2009年):

    • Ryan Dahl在2009年发布了Node.js,这是一个基于JavaScript运行的服务器端平台。Node.js的出现使得JavaScript可以用于服务器端开发,从而实现了全栈开发。
  7. ES6(ECMAScript 2015):

    • ECMAScript 2015引入了大量新特性,包括let和const关键字、箭头函数、类、模块等。这些特性使得JavaScript更加现代化、强大和易于维护。
  8. JavaScript框架和库的崛起:

    • 随着时间的推移,许多JavaScript框架和库如Angular、React和Vue等崛起,简化了前端开发的复杂性,并推动了单页面应用程序(SPA)的流行。
  9. 现代JavaScript(2020年以后):

    • JavaScript持续发展,不断推出新的语言特性和功能,以满足不断变化的开发需求。近年来,TypeScript等衍生语言也受到了广泛关注。

JavaScript已经成为前端开发的核心技术之一,同时在服务器端和移动应用开发中也有着广泛的应用。

JavaScript的语言风格和特性

在这里插入图片描述

JavaScript的书写位置

在这里插入图片描述

认识输出语句

在这里插入图片描述
alert() 是内置函数,函数就是功能的“封装”调用函数需要使用圆括号
console是JS的内置对象,通过“打点”可以调用它内置的log“方法”,所谓“方法”就是对象能够调用的函数。

学会处理报错

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

REPL 环境

在这里插入图片描述

变量

变量是计算机语言中能储存计算结果或能表示值抽象概念
变量不是数值本身,它们仅仅是一个用于存储数值的容器

定义变量

要想使用变量,第一步就是声明它,并给它赋值 eg: let a = 5 ;

改变变量

变量的值可以被改变,改变变量值不再需要书写let了

let a = 10;        //定义变量a并赋初始值为10
a = 18;            // 更改变量a的值为18
console.log(a);    // 18

变量的合法命名

在JavaScript中,变量的命名必须遵循一些规则和约定。以下是一些关于JavaScript变量命名的规则:

  1. 标识符的组成:

    • 变量名必须以字母(a-z、A-Z)或者下划线(_)或者美元符号($)开头。
    • 后续的字符可以是字母、数字(0-9)、下划线或美元符号。
  2. 大小写敏感:

    • JavaScript是区分大小写的,因此myVariablemyvariable是两个不同的变量。
  3. 保留字:

    • 不能使用JavaScript的保留字作为变量名。例如,varfunctionif等是JavaScript的保留字,不能用作变量名。
  4. 合理和描述性:

    • 命名应该具有描述性,能够清晰地表达变量的用途。这有助于代码的可读性和维护性。
    • 避免使用单个字符(除非是计数器或循环变量),而是选择有意义的名称。
  5. 驼峰命名法:

    • 推荐使用驼峰命名法(Camel Case)来命名变量,特别是在多个单词组成的变量名中,第一个单词小写,后续单词首字母大写。例如:myVariableName

示例:

// 合法的变量名
var firstName;
var lastName;
var myVar;
var _underscoreVar;
var $dollarVar;
var camelCaseExample;

// 不合法的变量名
// var 1stVariable; // 不能以数字开头
// var my-variable; // 不能使用连字符
// var var; // 不能使用保留字

遵循这些规则,可以确保你的JavaScript变量名是合法的,并且代码易读易维护。

变量的默认值

一个变量只定义,但没有赋初值,默认值是undefined
一个变量只有被var / let 定义,并赋初值之后,才算正式初始化完成

var a;
console.log(a);   // undefined
a = 10;
console.log(a);   // 10

变量的常见错误

不用var / let 定义,而直接将值赋予它,虽不引发报错,但会产生作用域问题。

a = 10;
console.log(a);   // 能输出10

尝试使用一个既没有被var定义过,也没有赋过值的字符,就会产生引用错误。

console.log(b);  // ×

等号表示赋值

var a = 10;
a = a + 1;
console.log(a);   // 11

同时声明多个变量

使用逗号同时声明和初始化两个变量

var a = 0 , b = 0;

变量声明提升

变量声明的提升:你可以提前使用一个稍后才声明的变量,而不会引发异常
在执行所有代码前,JS有预解析阶段,会预读所有变量的定义
在这里插入图片描述

注意事项

变量声明的提升是JavaScript的特性,所以经常出面试题
在实际开发时,不要刻意使用变量声明提升特性。一定要先定义并给变量赋初值,然后再使用变量

结语

JavaScript语法与变量是深入学习这门语言的关键。通过这篇博客,你将建立起对JavaScript基础的牢固理解,并掌握一些高级特性。无论是面对初学者的入门挑战,还是对于有经验者的深度探讨,希望这篇文章能为你提供有益的指导,让你更加游刃有余地在JavaScript的编程世界中驰骋。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

idea中debug Go程序报错error layer=debugger could not patch runtime.mallogc

一、问题场景 在idea中配置了Go编程环境,可以运行Go程序,但是无法debug,报错error layerdebugger could not patch runtime.mallogc: no type entry found, use ‘types’ for a list of valid types 二、解决方案 这是由于idea中使用的d…

物流实时数仓——概述与准备工作

目录 一、架构设计与技术栈 (一)数仓架构设计 (二)所用技术栈 (三)最终效果 二、关于离线与实时的相关概念 三、实时数仓设计思路 一、架构设计与技术栈 (一)数仓架构设计 (二)所用技术栈 Hadoop 3.3.4 Zookeeper 3.7.1 Kafka 3.3.1 Hbase 2.4.11 Redis 6.0.8 Flink 1.17…

HCIP-BGP实验4

搭建实验拓扑图 要求 1.全网可达 2.isp只能配置IP地址 实验开始 配置IP地址及环回 r1,r2,r9,r10配ipv4地址(以r1为例) [Huawei]sysname r1 [r1]interface g0/0/0 [r1-GigabitEthernet0/0/0]ip address 12.1.1.1 24 [r1-GigabitEthernet0/0/0]q [r1]interface LoopBack 0…

全双工通信协议:WebSocket

全双工通信协议:WebSockets 前言何时使用WebSocketsWebSocket APITextWebSocketHandlerWebSocketConfigurerWebSocket握手配置服务器允许的来源心跳包Java WebSocket API案例一:前端发送消息并接收后端响应案例二:模拟后端向前端推送消息案例…

实战:加密传输数据解密

前言 下面将分享一些实际的渗透测试经验,帮助你应对在测试中遇到的数据包内容加密的情况。我们将以实战为主,技巧为辅,进入逆向的大门。 技巧 开局先讲一下技巧,掌握好了技巧,方便逆向的时候可以更加快速的找到关键…

元数据管理在数据仓库中的实践应用

一、什么是数据仓库的元数据管理? 1、什么是元数据? 元数据(Metadata),又称中介数据、中继数据,为描述数据的数据(data about data)。 抽象的描述:一组用于描述数据的数据组,该数据组的一切信息都描述了该数据的某方面特征,则该数据组即可被称为元数据。 举几个…

【Android 10】 BatteryController

学习了一下电池的相关模式,也就是它的观察者模式,先附上图 图应该挺清晰的,BatteryControllerImpl就是被观察者,BatteryControllerImpl重写了CallbackController的两个方法用于添加或移除观察者。 void addCallback(T listener);…

【vueCms】vuecms_xg安装与使用视频讲解【视频讲解】

克隆项目 gitee项目地址:https://gitee.com/derekgo/vue-cms_xg git clone gitgitee.com:derekgo/vue-cms_xg.git开启自动化脚本 点击后,运行http://localhost:3002 本地配置 开启本地redis 开启redis redis-server.exe redis.windows.conf重启redis 注意:…

系统性学习vue-vue-router

vue-router 路由的简介SPA路由 路由的基本使用安装引入使用标签式编程式 注意 嵌套(多级)路由路由传参query参数params参数 命名路由路由的props配置router-link的replace属性编程式路由导航路由跳转后退和前进 缓存路由组件两个新的生命周期钩子函数路由守卫全局前置守卫全局后…

Python中的os模块

目录 1、获取当前路径 2、获取父级路径 3、更改路径 4、罗列当前路径下方所有内容 5、创建文件夹 6、创建多级文件夹 7、删除文件夹 8、删除文件 9、重命名文件 10、walk 11、path os 是 Python的内置模块之一,提供了与操作系统交互的功能。它可以用于执…

Vue3 ref与reactive

✨ 专栏介绍 在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使…

深度学习技巧应用33-零门槛实现模型在多个GPU的分布式流水线训练的应用技巧

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用33零门槛实现模型在多个GPU的分布式流水线训练的应用技巧,本文将帮助大家零门槛的实现模型在多个GPU的并行训练,如果你手头上没有GPU资源,根据本文的介绍也可实现…

如何测试python 版本与 torch 、 torchvision 版本是否对应?

python 版本与 torch 、 torchvision 版本的对应关系如下图所示: 打开 anaconda powershell prompt,输入如下命令: >python>>>import torch>>>c torch.ones((3,1)) //创建矩阵>>>c c.cuda(0) …

备考 | 2024年NOC大赛 15套图形化编程、Python、C++初复决赛真题试卷

为了让大家备考2024年NOC大赛,今天给大家分享全国中小学信息技术创新与实践大赛(NOC大赛)2023年图形化编程Scratch小低组、小高组初赛复赛决赛6套真题试卷,Python编程小高组、初中组初赛复赛决赛6套真题试卷,C编程初中组初赛复赛决…

『论文阅读|2024 WACV 多目标跟踪Deep-EloU|纯中文版』

论文题目: Iterative Scale-Up ExpansionIoU and Deep Features Association for Multi-Object Tracking in Sports 论文特点: 作者提出了一种迭代扩展的 ExpansionIoU 和深度特征关联方法Deep-EIoU,用于体育场景中的多目标跟踪,旨…

选现货白银投资划不划算?

可以肯定的是选择现货白银投资是划算的,但投资者需要有足够的知识和经验,以及对市场的敏锐观察力。只有这样,投资者才能在现货白银投资中获取收益。在投资市场上,白银作为一种特殊的投资品种,一直以来都备受投资者们的…

macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例 一: 简介 Socket 是 网络传输的抽象概念。 一般我们常用的有Tcp Socket和 UDP Scoket, 和类Unix 系统(包括Mac)独有的 Unix Domain Socket(UDS)。 Tcp Socket 能够…

东莞UG逆向建模设计汽车内外饰出stp图抄数3d造型建模代画图服务

汽车内外饰三维扫描及逆向建模是一项复杂且技术性强的工程。它涉及到使用高精度的三维扫描仪对汽车内外饰进行全面、细致的扫描,获取其精确的三维数据。这个过程中,需要确保扫描的环境、光线、角度等因素对扫描结果的影响最小化,以保证获取的…

【测试开发八股文】算法

1、栈和队列 1)栈:先进后出;队列:先进先出 2)如何用栈实现队列? 分析:两个栈,栈1负责入队,栈2负责出队 改进点:出队时,栈2出队后,可不…

python基础——线程

线程的使用 from threading import Thread import time def func(i):print("start{}".format(i))time.sleep(1)print("end{}".format(i)) for i in range(10):Thread(targetfunc,args(i,)).start() 守护线程的使用 主进程结束时,守护线程不会…