Learn JavaScript with p5.js中文版 第十章 数组 |
您所在的位置：网站首页 › js取余数方法 › Learn JavaScript with p5.js中文版 第十章 数组 |
|
数组是JavaScript中另一种有用的数据结构。它们是带序号索引存储数据的序列集合，并基本对象，让某些运算更易于执行。 本章中我们将使用push方法来向数组添加数据。还将学习余数运算符，通过它可获得在0和指定数据之间的序列值。 使用push方法还记得我们是使用大括号有创建空对象吧。我们可以类似的方式通过中括号来创建空数组（示例10-1）。 示例10-1. 创建空数组 var arr = []; 复制代码本例中，我们创建了一个空数组并使用名为arr变量来存储该数组。现在如果想要向该数组添加元素，我们可使用数组对象所带的push方法（示例10-2）。 示例10-2. 向数组添加元素 var arr = []; arr.push(1); arr.push("hello world"); arr.push({"name":"value"}); console.log(arr); 复制代码本例中，我们向前面的空数组推入的三个新值。第一个中推入是数字类型，第二行向数组推入了字符串类型，第三行中推入了对象类型。 现在使用console.log来查看内容，会在屏幕上看到： [1,"hello world",{"name":"value"}] 复制代码注意我们使用了不同的数据类型和对象来添加到数组中。数组中可包含任意对象，甚至是其它对象。和JavaScript中的对象一样，我们可以在数组的创建时添加所需值，只需在中括号中使用逗号来进行分隔即可。下面我们来创建一个带有4个数字的数组（示例10-3）。 示例10-3. 使用不同数据类型创建数组 var arr = [15, 40, 243, 53]; console.log(arr); 复制代码我们可以使用自动生成的下标索引来访问数组的各项。需要注意的一点是数组存储的数据下标从0开始。访问数据组中的某一项，我们可以输入存储数组的变量名，然后在中括号中使用索引下标来引用该下标处的数据项（参见示例10-4）。数字0引用数组的第一项，即15，下标数字1引用第二项，以此类推... 示例10-4. 访问数组中的项目 var arr = [15, 40, 243, 53]; var firstItem = arr[0]; console.log(firstItem); 复制代码如果尝试访问数组中不存在的项，得到的值是undefined。这很合理，因该项确实未被定义。回忆一下，对象在我们访问不存在的属性也是返回undefined值。 让我们来看看数组数据结构如何简化编程。首先使用一个简单的示例（示例10-5）。假设我们想要创建五个大小不同的圆。以当前的知识，我们需要创建五个不同的变量并为这些变量赋所需的值。然后使用不同的变量来调用ellipse函数5次。 示例10-5. 画不同大小的圆 var size1 = 200; var size2 = 150; var size3 = 100; var size4 = 50; var size5 = 25; function setup() { createCanvas(800, 300); } function draw() { // 圆的属性 fill(237, 34, 93); strokeWeight(2); ellipse(width/2, height/2, size1, size1); ellipse(width/2, height/2, size2, size2); ellipse(width/2, height/2, size3, size3); ellipse(width/2, height/2, size4, size4); ellipse(width/2, height/2, size5, size5); } 复制代码我们只是在屏幕上画了5个圆，但这个方案看起来已经很有负担了。如果要画100个圆甚至是1000个圆呢。这时就可以使用数组来让操作更为简便。 首先，让我们创建一个所需圆尺寸的数组。前面说过，我们可以通过索引下标来访问数组中的各项。我们将通过这一知识来获取数据中的所需项。参见示例10-6。 示例10-6. 使用数组存储尺寸值 var sizes = [200, 150, 100, 50, 25]; function setup() { createCanvas(800, 300); } function draw() { // 圆的属性 fill(237, 34, 93); strokeWeight(2); ellipse(width/2, height/2, sizes[0], sizes[0]); ellipse(width/2, height/2, sizes[1], sizes[1]); ellipse(width/2, height/2, sizes[2], sizes[2]); ellipse(width/2, height/2, sizes[3], sizes[3]); ellipse(width/2, height/2, sizes[4], sizes[4]); } 复制代码这看起来已经好很多了。但还是有很多重复之处。我们反复的输入了同样的内容来调用ellipse函数，其中变化的只有下标值。模式已经很清晰了：我们可以添加一个结构来创建循环通过增量来调用ellipse函数5次，这样就无需重复输入了。 所幸我们知道如何循环来保持代码简洁。示例10-7使用for循环重写了对应代码。 示例10-7. for循环代码片断 var sizes = [200, 150, 100, 50, 25]; for(var i=0; i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |