下载掌阅APP，畅读海量书库
立即打开
创建变量首先需要确定变量的名称和数值。建议起一个与变量信息相关的名字以方便之后管理代码。例如，想创建一个描述矩形横向位置的变量，取名为“rectX”比取名为“x”更清晰易懂。名称不需要太长，以免在使用过程中不容易记住。
由于p5.js基于JavaScript语言，因此定义变量的方法与JavaScript语言相同。首先，使用关键字var表示创建一个新变量，然后输入变量的名称，最后赋予它相应的变量值。例如：
根据JavaScript语法规则，也可以写得更简短：
只有在创建变量时前面才需要添加关键字var。每输入一次var，计算机就会默认开始创建一个新变量。因此，不允许有两个相同名字的变量被创建在同一个程序当中。
通常在setup函数或draw函数外创建的变量称为全局变量。这种变量可以在setup函数或draw函数内使用或重新赋值。在setup函数内创建的变量称为局部变量，它不能在draw函数内使用。
ECMAScript 6（JavaScript的通行标准，简称ES6）于2015年6月发布，它新增了关键字let用于声明变量。它的用法类似于var，但是使用let创建的变量只在它所在的代码块内有效。简单来说，let是为了弥补var的缺陷而设计出来的，它修复了ES5使用关键字var只有全局作用域和函数作用域而没有块作用域的问题。因此，可以说let是更严谨的var。下面将修改例3-1-1来说明var与let的区别。
首先，将例3-1中创建变量y的语句，写在draw函数的第一行中并使用花括号括起来。
程序运行后会发现，其效果与例3-1呈现的效果一样。也就是说，在花括号内使用var创建的变量在花括号外仍然起作用。
如果将创建变量的关键字var更改为let，并将第一条绘制矩形的语句也写在let语句的花括号内，那么将会有不一样的结果出现。代码如下：
程序运行后会发现，画布上仅绘制了一个矩形（如图3.3所示）。
图3.3 画布上仅绘制一个矩形
打开控制台（本章后面将会学习如何开启和使用浏览器控制台），将看到存在“Uncaught ReferenceError： y is not defined”错误，它的解释是：变量y没有被定义。由此可以看出，let创建的变量是块作用域（花括号括起来的部分），仅在花括号内部允许使用该变量，而在花括号外部是无法使用该变量的。将程序再稍加修改，将“let y=75； let w = 90； let h = 90；”这几行语句写在花括号外面。代码如下：
程序运行后会发现，效果与例3-1呈现的效果一样，两个矩形都被绘制在画布上。因此，let创建的变量不仅可以用于它的同级块作用域，而且在它的下一级块作用域中也可以使用。
本书后面的大部分示例都将使用ES6标准的关键字let创建变量，尤其在本章的if语句和for循环的学习过程中，使用let创建变量会使变量的使用场景更加合理。