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);

未完待续......

目录
相关文章
|
22天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
2月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
61 1
|
22天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
3月前
|
前端开发 JavaScript 索引
|
5天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
9 1
|
8天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
22天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
3月前
|
JavaScript 前端开发
jsjs原生 JavaScript轮播图 渐变淡入淡出
jsjs原生 JavaScript轮播图 渐变淡入淡出
|
3月前
|
前端开发 JavaScript 安全
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
|
3月前
|
XML 存储 JavaScript
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)