WebAssembly (WASM) for High Performance Apps · 课时

传递复杂数据结构

学习在 WASM 与 JavaScript 之间高效传输字符串、数组和自定义对象的策略

传递复杂数据结构 是 CoddyKit 上的免费 WebAssembly (WASM) for High Performance Apps 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 WebAssembly (WASM) for High Performance Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 WebAssembly (WASM) for High Performance Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Complex Data in WASM

When building high-performance applications with WebAssembly (WASM), you often need to exchange more than just simple numbers between your WASM module and JavaScript.

How do you pass a string?
What about an array of numbers?
Or even a custom object structure?

This lesson explores strategies for efficiently handling these complex data types.

WASM's Linear Memory

The key to passing complex data lies in understanding WASM's linear memory. This is a contiguous block of memory (like a large array of bytes) that is shared between your WASM module and the JavaScript environment.

WASM functions can only return numbers. So, instead of passing the entire data, we pass a pointer (a memory address, which is just a number!) to where the data resides in this shared memory.

Strings: Pointer & Length

Strings are sequences of characters. To pass a string from WASM to JavaScript, the WASM module will:

Write the string's bytes into its linear memory.
Return two pieces of information to JavaScript:
- The starting memory address (pointer) of the string.
- The length of the string (how many bytes it occupies).

JavaScript then uses these to read the bytes from the shared memory and decode them into a JavaScript string.

C String to JS Example

Here's a C function that returns a pointer to a string. When compiled with Emscripten, JavaScript can call this function and then read the string from the WASM memory.

EMSCRIPTEN_KEEPALIVE makes the function callable from JavaScript.

#include <emscripten/emscripten.h>
#include <string.h>

// A static string for demonstration
const char* myString = "Hello WASM!";

EMSCRIPTEN_KEEPALIVE
const char* getGreetingPtr() {
  return myString;
}

EMSCRIPTEN_KEEPALIVE
int getGreetingLength() {
  return strlen(myString);
}

int main() {
  // Required for a complete C program
  return 0;
}

Arrays: Contiguous Data

Numeric arrays (like int[] or float[]) are similar to strings. They are stored as a contiguous block of values in WASM's linear memory.

To pass an array, WASM returns:

A pointer to the first element of the array.
The number of elements in the array.

JavaScript then reads the raw bytes from the shared memory, knowing the type and size of each element (e.g., 4 bytes for an integer).

C Array to JS Example

This C code creates an array, populates it, and provides functions to get its pointer and length. JavaScript would then use Module.HEAP32 (for 32-bit integers) to access the elements.

#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc

int* dynamicArray = NULL;
int currentArrayLength = 0;

EMSCRIPTEN_KEEPALIVE
int* createAndGetArray(int size) {
  if (dynamicArray) {
    free(dynamicArray);
  }
  dynamicArray = (int*)malloc(size * sizeof(int));
  currentArrayLength = size;
  for (int i = 0; i < size; ++i) {
    dynamicArray[i] = i * 10 + 5;
  }
  return dynamicArray;
}

EMSCRIPTEN_KEEPALIVE
int getArrayLength() {
  return currentArrayLength;
}

int main() {
  // Required for a complete C program
  return 0;
}

Custom Objects (Structs)

Passing custom objects (like structs in C/C++) is more involved. These objects are collections of different data types (e.g., an integer, a float, and a string).

The strategy is to manually lay out the object's fields in WASM's linear memory. WASM then returns a pointer to the start of this memory block. JavaScript must then know the exact memory layout (offsets and types of each field) to correctly read the data.

C Struct to JS Example

This C example defines a Person struct and a function to create one. JavaScript would receive a pointer and then read values from specific offsets in the WASM memory buffer, knowing the struct's layout.

id (int) at offset 0
age (int) at offset 4
height (float) at offset 8

#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc
#include <string.h> // For strcpy

typedef struct {
  int id;
  int age;
  float height; // assuming 4 bytes after age
  char name[16]; // Fixed-size string buffer
} Person;

EMSCRIPTEN_KEEPALIVE
Person* createPerson(int id, int age, float height, const char* name) {
  Person* p = (Person*)malloc(sizeof(Person));
  p->id = id;
  p->age = age;
  p->height = height;
  strncpy(p->name, name, sizeof(p->name) - 1);
  p->name[sizeof(p->name) - 1] = '\0'; // Ensure null termination
  return p;
}

int main() {
  // Required for a complete C program
  return 0;
}

JS Allocates WASM Memory

What if JavaScript needs to pass complex data *into* WASM? For example, a large image array for WASM to process.

JavaScript can call WASM's exposed memory allocation functions (like Emscripten's _malloc) to reserve space within WASM's linear memory. Then, JavaScript writes the data into that allocated space and passes the pointer to a WASM function for processing.

Quick Check

You've learned how WASM handles complex data. Let's test your understanding!

Recap: Complex Data

Congratulations! You've learned the fundamental techniques for passing complex data between WebAssembly and JavaScript.

WASM and JavaScript communicate via a shared linear memory.
Complex data (strings, arrays, structs) are passed by their pointer (memory address) and often their length or size.
JavaScript then reads the raw bytes from the shared memory, interpreting them based on the known data structure.
For custom objects, understanding the exact memory layout is crucial.

These techniques allow for efficient, high-performance data exchange!

常见问题解答

「传递复杂数据结构」课时是免费的吗？

是的 — 「传递复杂数据结构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebAssembly (WASM) for High Performance Apps 课程的其余内容，请升级到 CoddyKit PRO。 WebAssembly (WASM) for High Performance Apps 课程共包含 4 节课。

「传递复杂数据结构」这节课中我会学到什么？

学习在 WASM 与 JavaScript 之间高效传输字符串、数组和自定义对象的策略你通过在浏览器中直接运行的动手代码来练习 WebAssembly (WASM) for High Performance Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 WebAssembly (WASM) for High Performance Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 WebAssembly (WASM) for High Performance Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「传递复杂数据结构」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 WebAssembly (WASM) for High Performance Apps 课中编写并运行代码吗？

能。每节 WebAssembly (WASM) for High Performance Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 WebAssembly (WASM) for High Performance Apps