目录
- 摘要
- 第5章 JS数组与WPS结合应用
-
- 5-1 JS数组的核心特性
-
- 核心特性解析
- 5-2 数组的两种创建方式(字面量与扩展操作符)
-
- 1. 字面量创建
- 2. 扩展操作符创建
- 5-3 数组创建应用:提取字符串中的数字
-
- 需求说明
- 代码实现
- 5-4 用函数创建数组(new Array、Array.of、Array.from)
-
- 1. new Array
- 2. Array.of
- 3. Array.from
- 5-5 函数创建数组应用:按条件格式化数据
-
- 需求说明
- 代码实现
- 5-6 数组元素的读写改操作
-
- 核心操作解析
- 代码示例
- 输入输出说明
- 5-7 单元格区域与JS数组的交互
-
- 需求说明
- 代码实现
- 表格结构示例
- 5-8 单元格与数组应用:提取首个满足条件的数据
-
- 需求说明
- 代码实现
- 输入输出示例
- 5-9 数组长度控制与切片功能
-
- 核心功能
- 代码示例
- 应用场景
- 5-10 数组元素的添加与删除
-
- 栈与队列操作
- 方法对比
- 5-11 添加删除应用1:提取求和最大记录
-
- 需求说明
- 代码实现
- 输入表格示例
- 输出结果
- 5-12 添加删除应用2:二维区域转嵌套数组
-
- 需求说明
- 代码实现
- 输入表格示例
- 输出嵌套数组
- 5-13 数组元素的循环迭代方法
-
- 三种循环方式对比
- 应用场景
- 5-14 forEach应用:筛选数据并汇总
-
- 需求说明
- 代码实现
- 输入表格片段
- 输出结果
- 5-15 数组转换迭代map函数
-
- 核心功能
- 代码示例
- 输入输出说明
- 5-16 map应用1:一维嵌套数组重组
-
- 需求说明
- 代码实现
- 关键逻辑
- 5-17 map应用2:一维数组拆分分组
-
- 需求说明
- 代码实现
- 拆分逻辑
- 5-18 数组筛选迭代filter函数
-
- 核心功能
- 代码示例
- 应用场景
- 5-19 数组查找迭代(find、indexOf等)
-
- 方法对比
- 代码示例
- 输入表格应用
- 5-20 逻辑判断迭代(every与some)
-
- 功能对比
- 代码示例
- 应用实例
- 输入表格片段
- 输出结果
- 5-21 数组的归并迭代 — reduce(必学重要函数)
-
- 示例代码及详细注释
- 函数详细解析
- 5-22 数组的归并迭代应用 — 实例:提取最大最小值的记录
-
- 示例代码及详细注释
- 函数详细解析
- 5-23 数组的打平迭代 — flat 与 flatMap(合并打平嵌套数组)
-
- 示例代码及详细注释
- 函数详细解析
- 5-24 数组的合并 — concat(合并打平嵌套数组)
-
- 示例代码及详细注释
- 函数详细解析
- 5-25 数组元素添加删除 — push、pop、unshift、shift
-
- 示例代码及详细注释
- 函数详细解析
- 5-26 数组元素添加删除应用(先进先出用法1)
-
- 目标说明
- 示例代码
- 代码解析
- 5-27 数组元素添加删除应用(先进先出用法2)
-
- 目标说明
- 示例代码
- 代码解析
- 5-28 数组切片 — slice(子数组的切片提取)
-
- 目标说明
- 示例代码
- 代码解析
- 5-29 数组切片应用(实例:多列数据求和筛选)
-
- 目标说明
- 示例代码
- 代码解析
- 5-30 数组切片应用-方法1(自定义函数:二维区域转数组)
-
- 目标说明
- 示例代码
- 代码解析
- 5-31 数组切片应用-方法2(自定义函数:二维区域转数组)
-
- 目标说明
- 示例代码
- 代码解析
- 5-32 数组切片 — splice(子数组的插入、删除、替换)
-
- 目标说明
- 示例代码
- 代码解析
- 5-33 数组排序 — sort(按求和结果为排序依据)
-
- 目标说明
- 示例代码
- 代码解析
- 5-34 合并与拆分 — split 与 join(字符串与数组互转)
-
- 目标说明
- 示例代码
- 代码解析
- 5-35 合并与拆分 — split 与 join 应用(字符串中的数字排序)
-
- 目标说明
- 示例代码
- 代码解析
- 5-36 综合实例应用-1(多工作表数据合并)
-
- 目标说明
- 示例代码
- 代码解析
- 5-37 综合实例应用-2(整理不规范数据)
-
- 目标说明
- 示例代码
- 代码解析
- 5-38 综合实例应用-3(按员工职务大小排序)
-
- 目标说明
- 示例代码
- 代码解析
- 5-39 综合实例应用-4(多条件筛选记录并排序)
-
- 目标说明
- 示例代码
- 代码解析
- 5-40 综合实例应用-5(求字符串中的最大值记录)
-
- 目标说明
- 示例代码
- 代码解析
摘要
本章深入探讨了 JavaScript 数组在 WPS 表格自动化中的高级应用,旨在帮助读者掌握数组操作的核心技巧,轻松处理复杂数据并提升工作效率。通过详细的代码示例和逐行解析,本章内容涵盖了数组的归并、打平、合并、切片、排序以及综合应用等多个方面。
首先,介绍了 reduce
方法的强大功能,它能够将数组中的所有元素归并为一个单一值,适用于求和、求平均值、求最大值和最小值等场景。通过实例代码,展示了如何利用 reduce
对数组进行高效计算,例如统计销售额总和、计算平均分以及筛选极值记录。
接着,探讨了如何使用 flat
和 flatMap
方法将嵌套数组打平为一维数组,这对于处理多层嵌套数据(如二维表格)非常实用。通过示例代码,展示了如何将复杂的嵌套结构简化为一维数组,以便后续操作。
此外,还详细讲解了 concat
方法的使用,用于将多个数组或值合并为一个新数组。这一方法在合并多列数据或扩展数组时尤为高效。通过实例,展示了如何利用 concat
实现数组的灵活合并。
在数组元素的添加与删除部分,介绍了 push
、pop
、unshift
和 shift
方法的使用,分别实现了栈(后进先出)和队列(先进先出)的操作。通过代码示例,展示了如何利用这些方法动态管理数组数据。
本章还重点介绍了 slice
方法的灵活应用,用于从数组中提取子数组。通过实例,展示了如何利用正索引、负索引或混合索引提取特定范围的数据,适用于数据分析和展示场景。
最后,通过多个综合实例,展示了如何将这些方法结合使用,解决实际工作中的复杂问题。例如,如何从多列数据中筛选满足条件的记录并排序,如何将不规范数据整理为结构化数据,以及如何从字符串中提取最大值记录等。这些实例不仅展示了数组方法的强大功能,还提供了实际操作的完整流程。
通过学习本章内容,读者将能够熟练掌握 JavaScript 数组在 WPS 表格中的高级应用,轻松应对各种数据处理需求,显著提升工作效率。无论是初学者还是有一定基础的开发者,都能从这些实用技巧中获益匪浅。
第5章 JS数组与WPS结合应用
5-1 JS数组的核心特性
数组是JavaScript中用于存储有序数据的核心结构,其特性决定了它在WPS表格自动化中的高效性。
核心特性解析
- 动态性:数组长度可自由扩展或收缩,无需预定义大小。
- 元素多样性:支持任意类型数据(数字、字符串、对象、甚至嵌套数组)。
- 索引机制:元素位置从0开始编号,支持快速随机访问。
- 稀疏性:允许存在空元素(如
[1,,3]
),节省内存空间。 - 一维本质:JS只有一维数组,但可通过嵌套模拟多维结构。
5-2 数组的两种创建方式(字面量与扩展操作符)
1. 字面量创建
function test1() {
var arr1 = []; // 空数组
var arr2 = ["张三", 24, 100]; // 混合类型元素
var arr3 = [78, , 12]; // 稀疏数组(中间空元素)
}
注释:
arr1
:空数组,常用于初始化。arr2
:包含字符串、数字、甚至表达式的动态数组。arr3
:稀疏数组,第二个元素未定义(显示为empty
)。
2. 扩展操作符创建
function test2() {
var arr1 = [1, 2, 3];
var arr2 = [...arr1]; // 复制数组:[1,2,3]
var arr3 = [..."12345"]; // 字符串转数组:["1","2","3","4","5"]
var arr4 = [...arr3, 6, 7]; // 合并数组:["1","2","3","4","5",6,7]
}
解析:
...
操作符可将可迭代对象展开,常用于复制或合并数组。- 输入类型:数组、字符串、Set等可迭代对象。
- 输出类型:新数组。
5-3 数组创建应用:提取字符串中的数字
需求说明
从混合字符串中提取数字(如“曾贤志89”提取为[8,9]
)。
代码实现
function test() {
var newarr = []; // 初始化结果数组
var Rngs = Range("A2", Cells(999, 1).End(xlUp)); // 获取A列数据区域
for (var Rng of Rngs) {
// 遍历每个单元格
var arr = [...Rng.Value()]; // 将单元格值转为字符数组
for (var ar of arr) {
// 遍历每个字符
if (Number(ar) > -1) {
// 判断是否为数字
newarr = [...newarr, ar]; // 将数字加入结果数组
}
}
Rng.Offset(0, 1).Value = newarr.join(","); // 写入相邻单元格
newarr = []; // 清空临时数组
}
}
逐行解析:
Range("A2", Cells(999, 1).End(xlUp))
:动态获取A列数据区域,避免处理空单元格。[...Rng.Value()]
:将单元格内容(如“A89”)拆分为字符数组["A","8","9"]
。Number(ar) > -1
:过滤非数字字符(如字母返回NaN
,条件不成立)。join(",")
:将数组转换为以逗号分隔的字符串,便于写入单元格。
5-4 用函数创建数组(new Array、Array.of、Array.from)
1. new Array
function test1() {
var arr1 = new Array(); // 空数组:[]
var arr2 = new Array(5); // 长度5的空数组:[empty ×5]
var arr3 = new Array(10,4,8);// 含元素的数组:[10,4,8]
}
注意:new Array(5)
会创建稀疏数组,直接访问元素返回undefined
。
2. Array.of
function test2() {
var arr1 = Array.of(); // 空数组:[]
var arr2 = Array.of(5); // 单元素数组:[5]
var arr3 = Array.of(10,4,8); // 多元素数组:[10,4,8]
}
与new Array区别:Array.of(5)
创建的是[5]
而非长度为5的空数组。
3. Array.from
function test3() {
var arr = [1, 3, 5];
var arr1 = Array.from(arr); // 复制数组:[1,3,5]
var arr2 = Array.from("9527"); // 字符串转数组:["9","5","2","7"]
var arr3 = Array.from([3,4,9], x => x*10); // 映射转换:[30,40,90]
}
参数解析:
- 第一个参数:可迭代对象(如数组、字符串)。
- 第二个参数(可选):映射函数,对每个元素进行处理。
5-5 函数创建数组应用:按条件格式化数据
需求说明
筛选成绩≥90分的数据,并计算其占总分的比例。
代码实现
function test() {
var Rngs = Range("A2", Range("A9999").End(xlUp)); // 获取数据区域
for (var Rng of Rngs) {
// 遍历每行
var arr = Rng.Offset(0,1).Resize(1,12).Value()[0]; // 读取12个月数据
var newarr = [];
var wsf = WorksheetFunction;
for (var ar of arr) {
// 筛选≥90的数据
if (ar >= 90) newarr.push(ar);
}
var total = wsf.Sum(newarr); // 计算总分
var arr1 = Array.from(newarr, x => `${
x}(${
wsf.Text(x/total, "0%")})`);
Rng.Offset(0,13).Value2 = arr1.join(", "); // 写入结果
}
}
关键点解析:
Resize(1,12)
:从当前行向右扩展12列,读取月度数据。Array.from
映射:将分数转换为分数(占比)
格式,如"90(25%)"
。
5-6 数组元素的读写改操作
核心操作解析
数组通过索引直接访问或修改元素,支持动态扩展和类型混合存储。
代码示例
function test1() {
var arr = [100]; // 初始化数组:[100]
arr[0] = 199; // 修改第一个元素:[199]
arr[1] = "JS"; // 动态扩展数组:[199, "JS"]
arr[4] = 1000; // 跳过索引2-3,直接赋值索引4:[199, "JS", empty ×2, 1000]
Console.log(arr[3]); // 输出:undefined(空元素)
}
输入输出说明
- 输入类型:任意数据类型。
- 输出类型:数组元素按索引位置返回。
- 数据示例:
- 初始数组:
[100]
- 修改后:
[199, "JS", empty ×2, 1000]
- 初始数组:
5-7 单元格区域与JS数组的交互
需求说明
将WPS表格中的单元格数据读取为数组,或将数组写入单元格区域。
代码实现
function 读取() {
// 读取单行数据(A2:E2)
var arr1 = Range("A2:E2").Value(); // 返回二维数组:[[A2,B2,C2,D2,E2]]
// 读取单列数据(A2:A9)
var arr2 = Range("A2:A9").Value(); // 返回二维数组:[[A2],[A3],...,[A9]]
// 读取多行多列数据(A2:E9)
var arr3 = Range("A2:E9").Value(); // 返回二维数组(5行5列)
}
function 写入() {
// 将一维数组写入A1:C1
Range("A1:C1").Value2 = [1, 2, 3]; // A1=1, B1=2, C1=3
}
表格结构示例
A | B | C | D | E | |
---|---|---|---|---|---|
2 | 数据1 | 数据2 | 数据3 | 数据4 | 数据5 |
3 | 数据6 | 数据7 | 数据8 | 数据9 | 数据10 |
- 读取结果:
arr3 = [["数据1","数据2","数据3","数据4","数据5"], ["数据6","数据7","数据8","数据9","数据10"]]
5-8 单元格与数组应用:提取首个满足条件的数据
需求说明
从月度销售数据中提取第一个销售额≥100的月份及数值。
代码实现
function test() {
var LastCell = Range("A9999").End(xlUp); // 获取最后一行
var Rngs = Range("A2", LastCell); // 数据区域(A2到末尾)
for (var Rng of Rngs) {
// 遍历每行
var arr = Rng.Offset(0, 1).Resize(1, 12).Value()[0]; // 读取12个月数据
var arr1 = Array.from(arr, x => x >= 100); // 生成布尔数组
var num = WorksheetFunction.Match(true, arr1, 0); // 查找第一个true的位置
var val = Rng.Offset(0, num).Value(); // 获取对应值
Rng.Offset(0, 13).Value2 = `${
val}(${
num}月)`; // 写入结果
}
}
输入输出示例
- 输入表格片段(B2:M2):
1月 2月 3月 … 7月 … 84 73 73 … 100 … - 输出结果:
100(7月)
5-9 数组长度控制与切片功能
核心功能
通过修改数组的length
属性实现动态截断或扩展。
代码示例
function test() {
var c = [2, 3, 5, 7, 9];
c.length = 3; // 截断为前3个元素:[2,3,5]
c.length = 5; // 扩展为长度5:[2,3,5, empty ×2]
}
应用场景
动态调整数据规模,例如仅保留有效数据部分。
5-10 数组元素的添加与删除
栈与队列操作
function test1() {
var arr = [];
arr.push("a"); // 尾部添加元素:["a"]
arr.push("b", "c"); // 添加多个元素:["a","b","c"]
arr.pop(); // 删除尾部元素:["a","b"]
}
function test2() {
var arr = ["a","b","c","d","e"];
arr.shift(); // 删除头部元素:["b","c","d","e"]
delete arr[1]; // 删除索引1元素:["b", empty, "d","e"]
}
方法对比
- push/pop:栈结构(后进先出)。
- shift/unshift:队列结构(先进先出)。
5-11 添加删除应用1:提取求和最大记录
需求说明
从季度销售数据中提取总销售额最大的员工记录。
代码实现
function test() {
var wsf = WorksheetFunction;
var newarr = [];
var counter = wsf.CountA(Range("A:A")); // 统计A列非空单元格数
for (var num = 2; num <= counter; num++) {
// 遍历数据行(从第2行开始)
var arr = Range(`B${
num}:E${
num}`).Value()[0]; // 读取B-E列季度数据
newarr.push(wsf.Sum(arr)); // 计算季度总和并存入数组
}
var mx = wsf.Max(newarr); // 找到最大值
var pos = wsf.Match(mx, newarr, 0); // 获取最大值位置
var na = Range("A" + (pos + 1)).Value(); // 获取对应员工姓名
alert(`最大值:<h1 style='color:red'>${
mx}</h1>\n对应员工为:${
na}`);
}
输入表格示例
A | B | C | D | E | |
---|---|---|---|---|---|
1 | 姓名 | Q1 | Q2 | Q3 | Q4 |
2 | 张三 | 121 | 127 | 130 | 106 |
3 | 李四 | 94 | 148 | 121 | 131 |
4 | 王二麻 | 150 | 150 | 108 | 109 |
输出结果
- 最大值:
150 + 150 + 108 + 109 = 517
- 对应员工:
王二麻
5-12 添加删除应用2:二维区域转嵌套数组
需求说明
将二维表格区域转换为嵌套数组结构(每3行一组)。
代码实现
function test() {
var bigarr = [], smallarr = [];
var Rngs = Range("A2:C7"); // 定义数据区域(A2-C7)
for (var Rng of Rngs) {
// 遍历每个单元格
smallarr.push(Rng.