Js原生有坑系列

简介: Js原生有坑系列

今天在用js写一些小demo时,碰到了一些坑的地方,记录一下这些小坑点,并随时扩充


push方法有点坑



const map = new Map();
map.set('name',['cwl']);
map.set('name',map.get('name').push('xm'))
console.log(map)


我写了一个很简短的代码,就是先设置map中key为‘name’, value值是一个数组,然后向数组里面添加一个元素。我们期望得到的结果应该是name:['cwl', 'xm']。但是实际却完全不同


image.png


我们得到的是一个key为‘name’, value 为2的map对象,值是数组的长度。这是为什么呢?

我们来看一下push方法,发现push是有返回值的,返回值是新的数组长度,所以我们最终set进去的value值是新数组的长度

image.png


改进

const arr = map.get('name')
arr.push('xm')
map.set('name',arr)


fill也挺坑



当我们使用fill创建二维数组的时候


const arr2 = new Array(3).fill(new Array(3).fill(-1));
console.log(arr2);

得到了一个二维数组,这是毋庸置疑的


image.png

当我们改变数组时

arr2[1][1] = 2;
arr2[2][2] = 3;


我们期望的结果


image.png

但是实际我们得到的结果却是

image.png


怎么会这样呢?其实很简单,fill 方法所填充的如果是对象的话,那么每一个填充的元素都是这个对象的浅拷贝,也就是同一个内存地址的对象。  所以就出现了这种情况。因此,在使用 fill 时,一旦填充的是对象,就要格外小心了。


image.png

画个图简单理解一下


image.png



那么我们应该怎么避免呢?独家(bushi)创建二维数组的方法

const arr3 = new Array(3).fill(-1).map(() => new Array(3).fill(-1));
console.log(arr3);

未完待续......

目录
打赏
0
0
0
0
3
分享
相关文章
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
75 0
原生JavaScript+canvas实现五子棋游戏_值得一看
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
56 0
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
54 0
|
7月前
|
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
47 0
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
148 0
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
229 0
原生JS如何查询元素属性
原生JS如何查询元素属性
65 0
原生JS实现全选、全不选
原生JS实现全选、全不选

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等