变量 和 注释

js 程序运行时,每个数字、字符串,还有我们后面要学的 数组、对象 等, 其实就是 内存中的一段数据

我们的程序是经常要操作这些内存中的数据的,比如打印整数的值到屏幕上,或者把字符串发送给服务器。

那么我们的程序语言如何告诉计算机,我们 要操作(使用)的 是哪个数据 呢?

比如下面的语句

'你好,今天天气真不错'

解释器运行完这条语句,就会产生一个字符串,放在计算机内存中的某个位置。

如果后面的程序代码要把这个 字符串 打印到屏幕上,怎么引用它呢?

是再写一遍吗?像这样?

'你好,今天天气真不错'
console.log('你好,今天天气真不错')

显然不对,如果是这样,解释器执行第2行语句的时候,可能会重新创建一个字符串。这样,第一行语句是无效的。

而且有的时候字符串不是直接定义在代码里面的,而是运行的时候动态生成的,比如用户输入的字符串。

问题在于,我们怎么在代码中 使用 一个已经存在的内存中的数据?

变量的概念

大家来思考一个问题:

人类语言里面,当我们提到一个人或事物, 是怎么说的?

比如说 聊天的时候,提到你的一个同学, 提到一支球队

对了,用他们的 名字

比如: 王晓刚同学, 湖人队等等。

如果不允许使用 事物的名字, 我们的话就没法说了。

人类语言是这样,计算机语言也是一样,如果产生了数据,却没有给它们起名字,就像这样

43
'你好,今天天气真不错'

我们后面的代码,怎么去使用这个数字 43 和 字符串 你好,今天天气真不错 呢?

编程语言为了方便操作数据,也需要给数据起一个名字。

我们把 js 语言中数据的名字, 称之为 变量名 , 有时也简称 变量

所以 js 中的变量,就是 数据的名字。

为了强调这句话的重要性,重复3遍:

变量,就是数据的名字!!

变量,就是数据的名字!!

变量,就是数据的名字!!

我们可以这样给数据起名字

let age = 43
var weather = '你好,今天天气真不错'

定义变量使用 关键字 let 或者 var

关键字是编程语言中特殊用途的单词,比如这里用来定义变量。


其中 letECMAScript 6 标准才引入的。

所以 var 在浏览器的支持性更广泛。

但是现在基本js执行引擎都已经支持ECMAScript 6了,所以用let基本上也没有问题


letvar有效范围 的区别,这个后面再讲。

当前可以任意选择一个使用


变量名 和 数据 之间 用 等号 连接

其中

age 就是 数字 43 的名字,我们也可以说:变量age的值 是数字 43

weather 就是 字符串 你好,今天天气真不错 的名字,我们也可以说:变量 weather 的值 是 字符串 你好,今天天气真不错


我们可以不使用任何关键字直接定义变量,像这样

age = 43

我们不推荐这样做。具体原因以后会介绍

还有一个定义变量的关键字 `const` ,将来会介绍。

定义了变量之后,我们写代码,需要用到 它们对应的 数据 时,就可以用它们的名字: 变量名。

比如

let age = 43 + 2
let weather = '你好,今天天气真不错'
console.log(age)
console.log(weather)

代码执行的时候,解释器看到 变量名 就知道代表的就是对应的数据。

大家运行一下,可以发现,可以打印出变量所代表的 数据。


下面这行语句, 定义了 一个变量 age 值为 43,

let age = 43

也可以称之为: 给变量 age 赋值 为43


多个变量赋值可以这样写

let age = 43
let height = 170

也可以同时为多个变量赋值,像这样

let age = 43, height = 170

var var1 = 1,
    var2 = 2,
    var3 = 3

我们也可以先定义变量但是先不赋值,如下

let age , height

这时, age, height 的值 为 undefined

后面再根据需要为其赋值

age = someAgeValue
height = someHeightValue 

变量的命名规则

变量名不是随便取的,有一定的规则。

  • 变量名可以包含 字母、数字和下划线。

  • 变量名可以以字母或下划线打头,比如 var1 , 或者 _var 。

  • 但不能以数字打头, 像 1var 这样是不行的。

  • 变量名中不能包含空格。

  • 变量名中可以包含下划线,像下面这样都是可以的

    Hello, var1, age2name, age_name

  • 变量名 不能 和 关键字 同名,

    比如

    let for = 1997
    

    for 是 js 的关键字,是js 语言中有特殊意义的名字, 不能用作变量名。

  • 变量名 不要 和 js内置对象、函数 同名

    对象、函数 的概念后面会介绍,大家现在可以理解为一种数据类型

    比如

    JSON = 1   \\ 这行代码就把undefined这个标准函数名 重新赋值数字 333 了
    JSON.stringify('[2,3]')   \\ 执行的时候就会出错了。
    
    
    parseInt = 333   \\ 这行代码就把parseInt这个标准函数名 重赋值为数字 333 了
    parseInt('4567')   \\ 执行的时候就会出错了。
    

    可以点击这里查看js 中有哪些内置函数

一个好的工程师,变量名不是乱取的,我们通常称之为见名知意原则,就是看到变量名,就知道变量对应的数据的含义。

比如 startTime, your_name, 这样的变量名,看了就知道是啥意思

而像 a , b , c 这样的变量名就不好,因为看了不知道是啥意思。


注意:在js 中 变量名是大小写敏感的。

不可以 在定义的时候使用 startTime 作为变量名,而在使用的时候,用 starttime 。


目前,js 语言标准的风格是 使用驼峰(camel) 命名法

比如

function ElectricCar(priceNumber){
  this.priceNumber = priceNumber
}

var myCar1 = new ElectricCar(300000)



class GasCar{
  constructor (priceNumber){
    this.priceNumber = priceNumber
  }
}

var myCar2 = new ElectricCar(300000)

类名和构造函数名 单词首字母大写,

变量 和 属性 开头单词小写,后面单词首字母大写,

变量的变化

数据的名字为什么叫变量呢?

因为它会变 :)

js 语言中,变量的值会可以产生变化

实际上,js 定义变量时 可以不指定初始值,像这样

let name
var age

// 未指定初始值,值为 undefined
console.log(name,age)

// 然后再赋值
name = '白月黑羽'
age  = 100
console.log(name,age)

变量的值发生变化有两种情况

变量名 对应新的数据

这种情况也被称之为 变量重新赋值,比如

let age = 43
age = 'hello'

运行程序的时候,第一条语句执行完的时候,变量名age就是数字 43 的名字。

其对应关系如下图所示:

白月黑羽教程


第二条语句执行完, 变量age就不是数字 43 的名字了,而是字符串 hello 的名字了。

其对应关系如下图所示:

白月黑羽教程

当第二条语句执行完, 数字 43 就没有变量引用它了。

注意 没有被引用的数据,解释器会在随后某个时候从内存中清除掉。


一个数据可以有多个名字,比如

let kid = '小明'
let student = kid
let prettyboy = kid

这样, 小明 这个字符串就有3个 变量名 kid、 student 和 prettyboy

这3个名字 指向同一个数据。

其对应关系如下图

白月黑羽教程


如果后面的代码将其中一个变量名进行重新赋值,比如

kid = '小周'

这只会改变kid 一个变量和其指向数据的 关系,并不会改变其他的变量名 student 和 prettyboy

其对应关系如下图

白月黑羽教程


所以,如果我们接下来执行下面的代码

console.log(kid)
console.log(student)
console.log(prettyboy)

运行结果就是

小周
小明
小明


变量重新赋值的时候,有时候会出现下面这种写法

let var1 = 1
var1 = var1 + 1 

就是把变量原来的值 增加 1,这个结果数据再赋值为变量var

数字变量的自增赋值还有一个特殊的写法,如下

let var1 = 1
var1 = var1 + 1 # 把var 的值加1 后,再赋给var, var1 就变成了 2
var1 += 1      # 等价于 var1 = var1 + 1 ,执行后var 就变成了 3

变量数据 本身发生了变化

js中 数组 和 Objects 可变数据类型 (mutable)。

这2种数据类型,我们后面会学到。


当变量对应的数据是可变数据类型,可以通过变量名改变其内容

let info = {'name' :'黑羽白月', 'height':'180cm'}
info.height = '170cm'
console.log(info)

第二条语句就是让变量对应的字典数据的值 发生了变动,而不是变量info对应了新的数据。

如果这样写

info = '170cm'

才是变量info对应了新的数据。

注意两者写法上的区别。

数字变量值变化

数字变量值增加有好几种写法

如下

var num = 1
num = num + 1  // 值加1
num += 2       // 值加2

// 执行时,num值加1 赋值给 n1
var n1 = ++num  
n1
num

// 执行时,num值不变 赋值给 n1,执行后 num值加1
var n1 = num++  // 执行后num值加1
n1
num

减法也是一样的规则

var num = 100
num -=1

// 执行时,num值加1 赋值给 n1
var n1 = --num  
n1
num

// 执行时,num值不变 赋值给 n1,执行后 num值加1
var n1 = num--  // 执行后num值加1
n1
num

乘法、除法如下

var num = 10
num *=2


var num = 10
num /=2

注释

虽然 js 语言是一种容易理解和阅读的编程语言。

但是毕竟不是人类语言。

我们写的代码 为了 别人容易看懂, 甚至自己 以后能看懂, 就需要加入一些我们熟悉的 人话,也就是人类语言,辅助理解。

这些辅助理解的人话,就是注释。

这些人话可以是任何一种语言,只要方便你看懂代码就行,中文、英文、法文都可以。

js 的注释有 单行注释多行注释 2种(规则和JAVA、C++ 一致)。

单行注释

单行注释 以 // 开头,后面的内容都是注释

比如

// info 变量 记录 作者的信息,包括 名字,身高,体重
let info = {'name' :'黑羽白月', 'height':'180cm'}

// 改变 作者的身高记录
info['height'] = '175cm'

console.log(info)  // 打印身高到屏幕上

怎么样,有了上面的注释,这些代码是不是更容易读懂了?

我们要注意的是,通常注释是不会对代码的执行有影响的


注释可以单独作为一行, 比如:

// info 变量 记录 作者的信息,包括 名字,身高,体重
let info = {'name' :'黑羽白月', 'height':'180cm'}

也可以接在代码的后面,比如:

console.log(info)  // 打印身高到屏幕上

多行注释

如果我们需要连续多行的注释,当然可以这样:

// info 变量 记录 作者的信息
// 包括 名字,身高,体重
// 这个信息后面会用到
info = {'name' :'黑羽白月', 'height':'180cm'}

但是还有更简便的做法

/* 
  info 变量 记录 作者的信息
  包括 名字,身高,体重
  这个信息后面会用到
*/
info = {'name' :'黑羽白月', 'height':'180cm'}

您需要高效学习,找工作? 点击咨询 报名实战班

点击查看学员就业情况