js一维数组转二维数组

article/2025/10/16 6:06:31
使用场景举例:接口返回一个数组对象,展示时每行固定显示n个,则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。

a.数组元素为基本类型:

  let baseArray = [1, 2, 3, 4, 5, 6, 7, 8];len len = baseArray.length;let n = 4; //假设每行显示4个let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );let res = [];for (let i = 0; i < lineNum; i++) {// slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。let temp = baseArray.slice(i*n, i*n+n);res.push(temp);}console.log(res);

结果:


b.数组元素为对象
当数组元素为对象的时候,就不能使用slice方法进行截取了,因为slice属于浅拷贝,导致的问题就是你修改了新生成的数组对象值,会影响原始数组中对象的值,就比如下。但很多时候我们并不想影响原来的值。

现在来说说 数组的深拷贝和浅拷贝之我的理解 。简单的说深拷贝就是完全跟被拷贝对象脱离了关系,你修改新的对象内容,不会影响原来的对象,而且浅拷贝呢,貌似是生成了一份新的,但是实际和原来的还是同一个对象,只是变了个名字而已,所以你通过新名字来操作对象实际还是操作的原来的对象。嗯,有这样一个认识就可以了。
深拷贝和浅拷贝主要是针对对象类型,基本类型并不涉及。具体的可以看看内存堆栈相关知识,也可以对深浅拷贝有更深的理解,这里就不赘述了。

好了,回归正题,那就是如何深拷贝对象数组。 这里就介绍一种通过JSON.stringify和JSON.parse方法。
所以举例的使用场景就可以改为如下:
  let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];let len = objArray.length;let n = 4; //假设每行显示4个let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );let res = [];for (let i = 0; i < lineNum; i++) {let temp = objArray.slice(i*n, i*n+n);res.push(JSON.parse(JSON.stringify(temp)));}console.log(res);



http://chatgpt.dhexx.cn/article/pfW2FYBo.shtml

相关文章

js二维数组变为一维数组

1、用es5的reduce和concat组合 let list[[1,2,3],[4,5,6],[7,8],[9]]let listslist.reduce((a,b)>a.concat(b))console.log(lists)reduce的用法 数组方法reduce用来迭代一个数组&#xff0c;并且把他累积到一个值中。 使用 reduce 方法时&#xff0c;你要传入一个回调函数…

JavaScript 二维数组

二维数组&#xff1a;人为起的名字 二维数组本质上是以数组作为数组元素的数组&#xff0c;即“数组的数组”&#xff0c;类型说明符 数组名[常量表达式][常量表达式]。二维数组又称为矩阵&#xff0c;行列数相等的矩阵称为方阵。对称矩阵a[i][j] a[j][i]&#xff0c;对角矩阵…

js 二维数组

js二维数组 我们经常会用到二维数组&#xff0c;但是javaScript没有二维数组&#xff0c;那么我们应该咋办呢&#xff1f;就是在一维数组里面在创建一个一维数组。 var arr new Array(10); for (var i 0; i < arr.length; i) {arr[i]new Array(8); //不一定写for循环赋值…

程序员必看的数组详解!

数组 什么是数组&#xff1f; 数组是一组数据有序的集合。数组它是属于复合数据类型。它至少可以存储一个值(它可以存储很多很多值)。 例如我们生活中的仓库&#xff0c;可以存放很多我们需要的工具或物品 为什么要使用数组&#xff1f; 因为在我们工作中 有很多数据是有关…

JavaScript二维数组和函数

一、二维数组 1、什么是二维数组&#xff1f; 通过两个下标&#xff08;索引&#xff09;来确定一个元素。二维数组可以理解为数组的数组。二维数组组织为矩阵&#xff0c;可以表示为行和列的集合。 2、创建方式 2.1、通过new Array&#xff08;&#xff09;创建 2.2、通过…

JavaScript之二维数组

JavaScript本身只支持一维数组&#xff0c;不支持直接定义二维数组&#xff0c;但是我们可以间接地实现二维数组 将一维数组的每个元素又定义为一个数组&#xff0c;即为数组中的元素也是数组&#xff0c;就是二维数组 <!DOCTYPE html> <html lang"en">…

Linux 信号signal\sigaction

转发&#xff1a;作者&#xff0c;故事狗 https://www.jianshu.com/p/f445bfeea40a Linux 信号signal 对于 Linux来说&#xff0c;实际信号是软中断&#xff0c;许多重要的程序都需要处理信号。信号&#xff0c;为 Linux 提供了一种处理异步事件的方法。比如&#xff0c;终端…

linux下sigaction函数,Linux sigaction函数 sa_flags的值

开始对sa_flags有疑问&#xff0c;网上搜到都是这一个程序&#xff0c;就复制来说事&#xff1a; 代码&#xff1a; 1 #include 2 #include 3 #include 4 #include 5 6 void show_handler (int sig) 7 { 8 printf ("i got signal %d\n",sig); 9 …

Linux signal、sigaction的使用总结

目录 一、什么是信号 二、信号的种类 三、信号的处理 —— signal()函数 四、信号处理 —— sigaction()函数&#xff08;扑获信号&#xff09; 五、扑获信号示例 一、什么是信号 信号是UNIX和Linux系统响应某些条件而产生的一个事件&#xff0c;接收到该信号的进程会相应地采取…

sigaction 函数

今天查一个问题&#xff0c;SIGWINCH的处理函数一直不执行&#xff0c;耽搁了不少时间&#xff0c;最后发现是另外一个地方也设置了&#xff0c;处理函数是另外的。。。。 顺便记录下使用例子&#xff1a; 使用 sigaction 函数&#xff1a; signal 函数的使用方法简单&#xf…

信号、signal 函数、sigaction 函数

文章目录 1.信号的基本概念2.利用 kill 命令发送信号3.信号处理的相关动作4.信号与 signal 函数4.1 signal 函数示例一4.2 signal 函数示例二 5.利用 sigaction 函数进行信号处理6.利用信号处理技术消灭僵尸进程 1.信号的基本概念 发送信号是进程之间常用的通信手段。信号用来…

linux sigaction详解

参看文档&#xff1a; https://blog.csdn.net/weixin_43743847/article/details/90299204https://blog.csdn.net/u010150046/article/details/77344438https://bbs.csdn.net/topics/370255407 一&#xff1a;函数原型介绍 int sigaction(int signum, const struct sigaction …

sigaction函数

#include <signal.h> int sigaction(int signum, const struct sigaction *act,struct sigaction *oldact); //The sigaction() system call is used to change the action taken by a process on receipt of a specific signal. sigaction()系统调用用于改变进程在接收…

c语言sigaction,c语言信号处理sigaction

c语言信号处理sigaction (2011-04-18 23:45:19) 标签: c语言 信号处理 sigaction sighup it 分类: c 信号安装函数sigaction(int signum,const struct sigaction *act,struct sigaction *oldact)的第二个参数是一个指向sigaction结构的指针(结构体名称与函数名一样,千万别弄…

linux中sigaction函数详解

一、函数原型&#xff1a;sigaction函数的功能是检查或修改与指定信号相关联的处理动作&#xff08;可同时两种操作&#xff09; int sigaction(int signum, const struct sigaction *act,struct sigaction *oldact);signum参数指出要捕获的信号类型&#xff0c;act参数指定新…

Qt线程QThread详解

目录 前言1.QThread介绍2.QThread示例一3.QThread示例二4.线程同步 前言 在程序中使用线程可以提高程序的性能、并发性、响应性和稳定性&#xff0c;使得程序设计更加灵活和简单。但是&#xff0c;线程编程也有一些挑战&#xff0c;如线程安全性和死锁等问题需要格外注意。我们…

PyQT5 多线程 QThread

PyQT5 多线程 在常规的界面软件中&#xff0c;需要将UI线程和工作线程加以区分&#xff0c;主要原因是某些工作线程很复杂且耗时&#xff0c;比如下载某个文件或者长时间的计算&#xff0c;当执行这些进程时&#xff0c;UI主进程会被阻塞&#xff0c;界面会出现未响应的状态&a…

QThread之moveToThread用法

一、怎么用 使用一个QObject作为Worker&#xff0c;并moveToThread到线程上&#xff0c;那么这个QObject生存在此线程上&#xff0c;其信号会在此线程上发射&#xff0c;其槽函数在此线程上执行。 意味着什么&#xff0c;意味着多线程操作时&#xff0c;若通过信号槽方式&…

Qt 多线程编程的 QThread 类 (详细)

本文结构如下&#xff1a; 概述优雅的开始我们的多线程编程之旅 我们该把耗时代码放在哪里&#xff1f;再谈 moveToThread()启动线程前的准备工作 开多少个线程比较合适&#xff1f;设置栈大小启动线程/退出线程 启动线程优雅的退出线程操作运行中的线程 获取状态 运行状态线程…

QT之多线程(QThread)的简单使用

一、线程简述 线程&#xff08;thread&#xff09;是操作系统能够进行运算调度的最小单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位。一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务…