P5.js 数据完整参考

P5.js 是一款基于 Processing 的 JavaScript 库，提供了丰富的绘图、动画、交互等功能。在 P5.js 中，数据处理和操作是非常重要的一部分，本文将为你介绍 P5.js 中常用的数据处理和操作的函数和用法。

数组操作

创建数组

在 P5.js 中，创建数组可以使用 Array() 函数或者简单粗暴地使用 []。例如：

var arr1 = Array(1, 2, 3);
var arr2 = [4, 5, 6];

添加元素

要向已有的数组中添加元素，可以使用 push()、unshift()、splice() 这些函数。

push() 函数可以在数组的末尾添加一个或多个元素：

var arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5]

unshift() 函数可以在数组的开头添加一个或多个元素：

var arr = [1, 2, 3];
arr.unshift(-1, 0);
console.log(arr); // 输出 [-1, 0, 1, 2, 3]

splice() 函数可以按照指定的位置在数组中插入元素，也可以删除已有元素，例如：

var arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 'x', 'y'); // 在索引为 2 的位置插入 'x' 和 'y'
console.log(arr); // 输出 [1, 2, "x", "y", 3, 4, 5]
arr.splice(0, 2); // 删除索引为 0 和 1 的元素
console.log(arr); // 输出 ["x", "y", 3, 4, 5]

删除元素

要删除已有数组中的元素，可以使用 pop()、shift()、splice() 这些函数。

pop() 函数可以删除数组的最后一个元素，并返回被删除的元素：

var arr = [1, 2, 3, 4, 5];
var last = arr.pop();
console.log(last); // 输出 5
console.log(arr); // 输出 [1, 2, 3, 4]

shift() 函数可以删除数组的第一个元素，并返回被删除的元素：

var arr = [1, 2, 3, 4, 5];
var first = arr.shift();
console.log(first); // 输出 1
console.log(arr); // 输出 [2, 3, 4, 5]

splice() 函数也可以用来删除数组中的元素，例如：

var arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); // 删除索引为 2 和 3 的元素
console.log(arr); // 输出 [1, 2, 5]

复制和合并数组

要复制一个数组，可以使用 slice() 函数或者 concat() 函数。

slice() 函数可以返回原数组中的一段，例如：

var arr = [1, 2, 3, 4, 5];
var partial = arr.slice(1, 3); // 返回索引为 1 和 2 的元素
console.log(partial); // 输出 [2, 3]

concat() 函数可以将多个数组合并成一个：

var a = [1, 2, 3], b = [4, 5, 6], c = [7, 8, 9];
var combined = a.concat(b, c);
console.log(combined); // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

排序数组

要排序一个数组，可以使用 sort() 函数。默认情况下，它会将数组中的元素按照字母序排序。如果需要按照数字大小排序，可以传入一个比较函数：

var arr = [5, 13, 2, 7, 9];
arr.sort(function(a, b) {
    return a - b;
});
console.log(arr); // 输出 [2, 5, 7, 9, 13]

如果需要将数组逆序排序，可以使用 reverse() 函数：

var arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // 输出 [5, 4, 3, 2, 1]

过滤数组

要过滤数组中的元素，可以使用 filter() 函数。它接受一个回调函数，这个回调函数返回 true 或 false，表示是否过滤当前元素。

例如，过滤一个数组中的偶数可以这样写：

var arr = [1, 2, 3, 4, 5];
var evens = arr.filter(function(num) {
    return num % 2 == 0;
});
console.log(evens); // 输出 [2, 4]

获取数组元素

获取数组中的某个元素，可以使用下标操作符或者 charAt() 函数（对于字符串数组来说）：

var arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 输出 1
console.log(arr.charAt(0)); // 也输出 1

var strArr = ['hello', 'world'];
console.log(strArr[1]); // 输出 'world'
console.log(strArr[0].charAt(1)); // 输出 'e'

对象操作

创建对象

在 P5.js 中，我们可以使用 {} 创建一个空对象，然后使用 . 运算符或 [] 运算符对其属性进行访问：

var obj = {};
obj.x = 10; // 使用 . 运算符
obj['y'] = 20; // 使用 [] 运算符
console.log(obj); // 输出 {x: 10, y: 20}

删除属性

要删除对象中的属性，可以使用 delete 运算符：

var obj = {x: 10, y: 20, z: 30};
delete obj['z']; // 删除 z 属性
console.log(obj); // 输出 {x: 10, y: 20}

复制和合并对象

要复制一个对象，可以使用 Object.assign() 函数：

var obj1 = {x: 10, y: 20};
var obj2 = Object.assign({}, obj1);
console.log(obj2); // 输出 {x: 10, y: 20}

要将多个对象合并成一个，可以使用 Object.assign() 函数：

var obj1 = {x: 10}, obj2 = {y: 20}, obj3 = {z: 30};
var merged = Object.assign(obj1, obj2, obj3);
console.log(merged); // 输出 {x: 10, y: 20, z: 30}

对象遍历

要遍历一个对象的所有属性，可以使用 for...in 循环：

var obj = {x: 10, y: 20, z: 30};
for (var prop in obj) {
    console.log(prop + ': ' + obj[prop]);
}
// 输出：
// x: 10
// y: 20
// z: 30

深拷贝

在 P5.js 中，可以使用 JSON.parse(JSON.stringify(object)) 实现对象的深拷贝（不包括方法和函数）：

var obj = {a: 1, b: 2, c: {d: 3, e: 4}};
var copy = JSON.parse(JSON.stringify(obj));
console.log(copy); // 输出 {a: 1, b: 2, c: {d: 3, e: 4}}

JSON

JSON.parse()

JSON.parse() 函数可以将 JSON 字符串解析为 JavaScript 对象：

var jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
var obj = JSON.parse(jsonStr);
console.log(obj.name); // 输出 "John"

JSON.stringify()

JSON.stringify() 函数可以将 JavaScript 对象转换为 JSON 字符串：

var obj = {name: 'John', age: 30, city: 'New York'};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出 '{"name":"John","age":30,"city":"New York"}'

JSONP

JSONP（JSON with Padding）是一种跨域数据请求的方法。P5.js 中提供了 loadJSON() 函数来进行 JSONP 请求：

function gotData(data) {
    console.log(data);
}

var url = 'http://example.com/data.json';
loadJSON(url, gotData, 'jsonp');

在上述例子中，loadJSON() 函数会请求 http://example.com/data.json 这个 URL，并将响应作为参数传递给 gotData() 函数，这里还指定了使用 JSONP（即 jsonp）请求方式。