Web前端开发笔记——第四章 JavaScript程序设计 第二节 变量

简介: Web前端开发笔记——第四章 JavaScript程序设计 第二节 变量

一、JavaScript中的注释


JavaScript中单行注释通过“//”,多行注释通过“/*”开头并以“*/”结尾。


二、变量的命名规则


JavaScript中命名变量必须以字母开头(也能以 $ 或 _ 符号开头),且变量名不能包含空格和标点符号,另外变量里不能是关键字、保留字作为变量名。

例如:var default、var 2cots、var number first都是错误的命名。


三、变量声明以及赋值


JavaScript中声明一个变量需使用关键字var,而变量的赋值通过使用=,也可以通过省略关键字var来声明变量,例如i=1,就没有使用关键字var。

例如,下列HTML代码,可以看出若声明变量但没有赋值在控制台中会显示未定义undefined,即此时该变量的值为undefined:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var a;
    console.log(a);
  </script>
  </body>
</html>

控制台中:

1667110875913.jpg

例如,下列HTML代码,若未经声明变量而使用变量,则会报错显示未定义:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    b = 100;
    console.log(a);
  </script>
  </body>
</html>

控制台中:

1667110897217.jpg

可以在一条JavaScript语句中声明多个变量,以 var 开头,且通过使用逗号隔开各个变量即可:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var a = "HELLO WORLD!",
    b = "python",
    c = 123;
    console.log(a, b, c);
  </script>
  </body>
</html>

控制台中:

1667110924475.jpg


四、变量作用域


JavaScript中变量分为局部变量和全局变量,在函数内声明为局部变量,它只能在函数内使用,即它的变量作用域只作用该函数;而在函数外定义的变量为全局变量,它可以在整个JavaScript代码中使用,另外若在函数内没有通过var关键字声明该变量,则声明的该变量为全局变量。

例如,下列HTML代码,定义了两个全局变量,一个全局变量是用于F()函数内没有通过var关键字声明变量b,所以它也是个全局变量:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var i = "HELLO WORLD!";
    function F() {
    var a = 123;
    b = 321;
    console.log(i);
    console.log(a);
    }
    F();
    console.log(b);
  </script>
  </body>
</html>

控制台中:

1667110946688.jpg


五、变量提升


在JavaScript中,执行代码时,先是获取所有被声明被声明的变量,然后再根据代码的顺序一条一条地运行代码,即所有变量声明语句都会被提升到代码的头部执行,也就是变量提升,另外变量提升只会提升变量的声明而不会把变量赋值也提升。


相关文章
|
1月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
295 108
|
1月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
269 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
4月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
3月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
43 2
|
3月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
83 1
|
5月前
|
JavaScript 前端开发 API
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5553 24
|
10月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
188 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器