React二维数组的几种声明和使用过程
React二维数组的几种声明和使用
React中对二维数组的声明和使用的方式有多种，其中存在一些常见的错误使用情况。
例如const map=[[]] 这样定义二维数组，本篇文章给大家解析一下react数组使用的正确方法和错误使用的错误原因。
如果我们要使用的二维数组是有默认值的，那我们可以直接在声明时赋值，例如这样：
const map = [[1,2],[3,4],[5,6]];
这个map变量的值是可变的，但是它的结构是不可变的，要修改它可以这样写：
map[0] = [1,2,3]
但是，如果我们这样写就会报错：
map[3] = [1,2,3]
因为我们对map的定义初始化的时候，按照react的语法，只要值不为空，那么数组的大小就是不可变的，但是数组的值是可变的。所以我们给map[3]赋值，这个map[3]并不存在，map只有0到2三个值，就会报错。
但是对于map[0]，[1,2]是它的一个值，这个值可以被整体替换为 [1,2,3]，没有问题。
按这个道理
如果我们这样做也是会报数组溢出的：
map[3][4] = 1;
如果我们想要数组的大小动态可变怎么办呢，我们可以这样来初始化：
const map = []
这里把map首先定义为一个数组，这个时候[]内没有值，就代表这是一个没有初始值的数组，其数组大小不是0，而是不确定，可以动态赋值，例如：
map[0] = []
这里我们给map加了一个0号元素，值也是一个不确定大小的未初始化数组，这个数组也可以被动态添加值：
map[0] [0] = 1;
但是我们要注意，当map[0]被赋值时，map的大小才会扩展为1，如果没有给map[0]赋值，直接给map[1]赋值时是不能成功的：
按照这个理论
如果我们要初始化一个动态扩展的二维数组，我们应该这样做：
const map = [];
//在使用时，动态扩展
for(var i=0;i<count;i++){
map[i] = [];
}
我们要给map定义为一个一维数组，然后动态添加数组元素作为其元素值。
注意，不能这样写：
const map = [[]];
看似定义了一个空的二维数组，实则不然，这个写法的意思是定义了一个数组，数组中只有一个数组类型的元素，外层[]中的[]代表了一个元素，相当于给了外层数组初始值，这个数组就不是动态可扩展的了，而是外层只能有一个元素，这时map[1]就是不存在也不可赋值的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了深入理解React协调与调度(Scheduler)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
详解React中的useMemo和useCallback的区别
React中的useMemo和useCallback是两个重要的Hooks。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似，但它们彼此之间还是有很大的区别的，随着小编一起来学习吧2023-04-04
在前端开发中,PDF 预览是个常见需求,本文主要来带大家认识一个基于 react-pdf 的自定义 PDF 预览组件 PDFView,感兴趣的小伙伴可以了解下2025-05-05
在一些react项目开发中,常常会出现一些组合的情况出现,这篇文章主要为大家介绍了复合组件的具体实现,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
本篇文章主要介绍了详解使用React进行组件库开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了react实现头部导航,选中状态底部出现蓝色条块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了React实现双滑块交叉滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧2022-08-08
React关于antd table中select的设值更新问题
这篇文章主要介绍了React关于antd table中select的设值更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了React 实现具备吸顶和吸底功能组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论