JavaScript 向量

2025年4月18日 | 阅读 7 分钟

向量是基本数学对象，由其大小和方向定义。在数学中，向量是同时具有大小和方向的量度的表示，通常显示为图中的箭头。向量在计算机科学和编程中被广泛使用，特别是在图形学、物理模拟和游戏开发等领域。

JavaScript 中的向量用于表示应用程序中的各种实体，如位置、速度、力或方向。在典型的实现中，通常使用数组或对象来存储 x、y 和 z 坐标等分量。对于诸如修改网页上的图形元素、模拟游戏中的物理交互或计算 3D 图形中的变化等任务，对 JavaScript 中的向量有扎实的掌握至关重要。

JavaScript 有效处理向量的能力使其成为 Web 开发人员和软件工程师在处理涉及向量数学计算的项目时的宝贵资产。

向量基础

在数学中，向量是一个表示大小和方向的几何实体。与标量量不同，向量同时具有幅度和方向，这对于描述速度、力或位移至关重要。

向量的关键特征包括以下几点

幅度衡量向量的大小，通常表示为 |v| 或“v”。
方向：表示向量的方向，通常用箭头表示。
基本的向量运算在数学和计算机科学中都至关重要。
向量加法：组合多个向量以确定它们的总合向量。这是通过将向量的对应分量相加来完成的。

向量减法：与向量加法类似，向量减法涉及从一个向量中减去另一个向量的对应分量。

标量乘法：一个向量乘以一个标量后称为由该数缩放的向量。

When v = (v1, v2), multiplying it by a scalar k results in kv = (k * v1, k * v2).   

向量通常在数学上使用有序列表或数字列表示。一种解释方法是展示一个二维向量 v = (v1, v2) 如何写成列矩阵 [v1; v2]，而三维向量 u = (u1, u2, u3) 可以表示为 [u1; u2; u3]。

向量在图上显示为箭头，从原点开始指向其终点。箭头的长度表示幅度，向量的方向由箭头相对于坐标轴的方向表示。

JavaScript 中的向量

在 JavaScript 中，可以通过使用数组或对象来表示向量的分量，从而有效地使用向量。数组为存储向量的元素提供了一种简单的方法，而对象则为描述向量属性提供了更结构化的方式。

使用数组表示向量

将向量纳入 JavaScript 的一种流行方法是将向量元素存储在数组中。例如，一个二维向量可以表示为一个具有 x 和 y 坐标两个成员的数组。

// Representing a 2D vector using an array
let vector2D = [3, 4]; // Vector (3, 4)
In the same way, a 3D vector can be depicted using an array consisting of three elements.
// Representing a 3D vector using an array
let vector3D = [1, 2, -1]; // Vector (1, 2, -1)   

使用对象表示向量

JavaScript 中的对象通过将特定属性与其分量关联起来，提供了更结构化的向量定义方法。这种方法有望提高代码的可读性和可维护性。

// Representing a 2D vector using an object
let vector2D = {
    x: 3,
    y: 4
}; // Vector (3, 4)
// Representing a 3D vector using an object
let vector3D = {
    x: 1,
    y: 2,
    z: -1
}; // Vector (1, 2, -1)   

操作向量的代码示例。

在定义向量（使用数组或对象）后，可以对它们进行各种操作。

// Addition of two 2D vectors
function adductors(v1, v2) {
    return [v1[0] + v2[0], v1[1] + v2[1]];
}
let vectorA = [3, 4];
let vectorB = [1, 2];
let result = adductors(vector, vector);
console.log("Result of vector addition:", result); // Output: [4, 6]
// Scalar multiplication of a 3D vector
function multiplyVectorByScalar(vector, scalar) {
    return [vector.x * scalar, vector.y * scalar, vector.z * scalar];
}
let vectors = { x: 1, y: 2, z: -1 };
let scalar = 2;
let scaled vector = multiplyVectorByScalar(vectors, scalar);
console.log("Scaled vector:", scaled vector); 
// Output: [2, 4, -2]   

JavaScript 中的向量运算

在 JavaScript 编程中，向量运算至关重要，尤其是在涉及图形、物理模拟或数学计算的任务中。

向量的加法和减法

将相应向量分量相加或相减的过程称为向量加法和减法。

加法示例

function addVectors(v1, v2) {
    return [v1[0] + v2[0], v1[1] + v2[1], v1[2] + v2[2]]; // Assuming 3D vectors
}
let vectorA = [3, 4, 1];
let vectorB = [1, 2, 2];
let resultAddition = addVectors(vector, vector);
console.log("Result of vector addition:", resultAddition); 
// Output: [4, 6, 3]   

减法示例

function subtractVectors(v1, v2) {
    return [v1[0] - v2[0], v1[1] - v2[1], v1[2] - v2[2]]; // Assuming 3D vectors
}
let resultSubtraction = subtractVectors(vector, vector);
console.log("Result of vector subtraction:", resultSubtraction); // Output: [2, 2, -1]   

标量乘以向量

标量乘法是将标量值乘以向量的每个分量的过程。

标量积

标量值是两个向量点积的结果。

标量乘法示例

function multiplyVectorByScalar(vector, scalar) {
    return [vector[0] * scalar, vector[1] * scalar, vector[2] * scalar]; // Assuming 3D vector
}
let scalar = 2;
let scaledVector = multiplyVectorByScalar(vector, scalar);
console.log("Scaled vector:", scaledVector); // Output: [6, 8, 2]   

标量乘法通常用于调整图形应用程序或物理模拟中的向量大小。

点积

两个向量的点积（或标量积）会得到一个标量值。

点积示例

function dotProduct(v1, v2) {
    let result = 0;
    for (let i = 0; i < v1.length; i++) {
        result += v1[i] * v2[i];
    }
    return result;
}
let vectorC = [1, 2, 3];
let vectorD = [4, 5, 6];
let resultDotProduct = dotProduct(vectorC, vectorD);
console.log("Dot product of vectors:", resultDotProduct); // Output: 32   

点积有助于查找向量之间的角度、计算投影或解决几何问题。

叉乘

两个向量的向量积（或叉乘）会得到一个垂直于两个原始向量的向量。

叉乘示例

function crossProduct(v1, v2) {
    return [
        v1[1] * v2[2] - v1[2] * v2[1],
        v1[2] * v2[0] - v1[0] * v2[2],
        v1[0] * v2[1] - v1[1] * v2[0]
    ];
}
let vectorE = [2, 3, 4];
let vectorF = [5, 6, 7];
let resultCrossProduct = crossProduct(vectorE, vectorF);
console.log("Cross product of vectors:", resultCrossProduct); // Output: [-3, 6, -3]   

叉乘用于 3D 图形中计算表面法线、确定方向或解决与向量相关的问题。

JavaScript 中向量的应用

向量在 JavaScript 编程中至关重要，在物理模拟、游戏开发和图形学等领域有许多有用的应用。以下是一些展示向量在 JavaScript 中重要性的示例。

使用物理原理模拟物理现象

在物理模拟中使用向量来表示力、速度和物体位置。在弹射运动和碰撞等模拟中，向量用于指定作用在物体上的力的方向和强度。

以下是一个使用力向量移动物体的简单示例

let position = { x: 0, y: 0 };
let velocity = { x: 2, y: 4 }; // Velocity vector (2, 4) units per second
function applyForce(force) {
    // Update position based on velocity (time-based calculation)
    position.x += velocity.x * force;
    position.y += velocity.y * force;
}
// Simulate applying a force over time
applyForce(3); // Applying force for 3 seconds
console.log("Final position:", position); // Output: { x: 6, y: 12 }   

游戏开发

向量在游戏开发中起着至关重要的作用，因为它们对于表示物体位置、速度、方向和其他属性至关重要。向量有助于实现流畅的运动、检测碰撞以及在游戏设置中实现物理交互。

这是一个基于向量的移动演示示例

let playerPosition = { x: 100, y: 100 };
let playerVelocity = { x: 0, y: 0 };
// Update player position based on velocity
function updatePlayerPosition() {
    playerPosition.x += playerVelocity.x;
    playerPosition.y += playerVelocity.y;
}
// Example usage: Move the player upwards
playerVelocity.y = -5; // Set upward velocity
updatePlayerPosition(); // Update player position
console.log("New player position:", playerPosition); // Output: { x: 100, y: 95 }   

图形

图形编程中的向量决定了几何变换，如移动、旋转、缩放和投影。它们用于表示 2D 和 3D 环境中的点、线、几何图形和变换。这是一个使用向量进行缩放的简单演示。

let point = { x: 2, y: 3 };
// Scale the point using a scalar factor
function scale point(point, scaleFactor) {
    point.x *= scaleFactor;
    point.y *= scaleFactor;
}
// Example usage: Scale the point by a factor of 2
scalePoint(point, 2);
console.log("Scaled point:", point); // Output: { x: 4, y: 6 }   

结论

总而言之，向量在 JavaScript 编程中至关重要，为处理复杂的数学计算、视觉调整和现实世界模拟提供了强大的基础。向量的灵活性使开发人员能够轻松地表示和处理位置、速度、力、方向等各种实体。

理解向量概念使开发人员能够设计出动态且交互式应用程序，如游戏、模拟、动画和图形用户界面。通过使用向量运算，开发人员可以实现流畅的动画、精确的物理模拟和有效的几何变换。

下一主题JavaScript 中的 Marquee 事件

JavaScript 向量

向量基础

JavaScript 中的向量

使用数组表示向量

使用对象表示向量

JavaScript 中的向量运算

向量的加法和减法

加法示例

减法示例

标量乘以向量

标量积

点积

点积示例

叉乘

叉乘示例

JavaScript 中向量的应用

使用物理原理模拟物理现象

游戏开发

图形

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 向量

向量基础

JavaScript 中的向量

使用数组表示向量

使用对象表示向量

JavaScript 中的向量运算

向量的加法和减法

加法示例

减法示例

标量乘以向量

标量积

点积

点积示例

叉乘

叉乘示例

JavaScript 中向量的应用

使用物理原理模拟物理现象

游戏开发

图形