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


相关文章
|
4天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
23 5
|
1天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
1天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
1天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
1天前
|
JavaScript 前端开发 开发者
【Web 前端】JS模块化有哪些?
【4月更文挑战第22天】【Web 前端】JS模块化有哪些?
|
1天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
1天前
|
前端开发 JavaScript 索引
【Web 前端】JS的几种具体异常类型(报错)
【4月更文挑战第22天】【Web 前端】JS的几种具体异常类型(报错)
|
1天前
|
前端开发 JavaScript
【Web 前端】JS继承的方法有哪些?
【4月更文挑战第22天】【Web 前端】JS继承的方法有哪些?
|
1天前
|
自然语言处理 前端开发 JavaScript
【Web 前端】什么是JS闭包?
【4月更文挑战第22天】【Web 前端】什么是JS闭包?
|
1天前
|
存储 缓存 JavaScript
【Web 前端】JS哪些操作会造成内存泄露?
【4月更文挑战第22天】【Web 前端】JS哪些操作会造成内存泄露?