分析JavaScript数组操作难点-创新互联

以下内容是学习JavaScript数组的时候总结的经验以及需要注意的点。

10年积累的网站设计制作、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有延平免费网站建设让你可以放心的选择与我们合作。

不要用 for_in 遍历数组

这是 JavaScript 初学者常见的误区。for_in 用于遍历对象中包括原型链上的所有可枚举的（enumerable）的 key，本来不是为遍历数组而存在。

使用 for_in 遍历数组有三点问题：

1、遍历顺序不固定

JavaScript 引擎不保证对象的遍历顺序。当把数组作为普通对象遍历时同样不保证遍历出的索引顺序。

2、会遍历出对象原型链上的值。

如果你改变了数组的原型对象（比如 polyfill）而没有将其设为 enumerable: false，for_in 会把这些东西遍历出来。

3、运行效率低下。

尽管理论上 JavaScript 使用对象的形式储存数组，JavaScript 引擎还是会对数组这一非常常用的内置对象特别优化。 https://jsperf.com/for-in-vs-...
可以看到使用 for_in 遍历数组要比使用下标遍历数组慢 50 倍以上

PS：你可能是想找 for_of

不要用 JSON.parse(JSON.stringify()) 深拷贝数组

有人使用 JSON 中深拷贝对象或数组。这虽然在多数情况是个简单方便的手段，但也可能引发未知 bug，因为：会使某些特定值转换为 null

NaN, undefined, Infinity 对于 JSON 中不支持的这些值，会在序列化 JSON 时被转换为 null，反序列化回来后自然也就是 null

会丢失值为 undefined 的键值对

JSON 序列化时会忽略值为 undefined 的 key，反序列化回来后自然也就丢失了

会将 Date 对象转换为字符串

JSON 不支持对象类型，对于 JS 中 Date 对象的处理方式为转换为 ISO8601 格式的字符串。然而反序列化并不会把时间格式的字符串转化为 Date 对象

运行效率低下。

作为原生函数，JSON.stringify 和 JSON.parse 自身操作 JSON 字符串的速度是很快的。然而为了深拷贝数组把对象序列化成 JSON 再反序列化回来完全没有必要。

我花了一些时间写了一个简单的深拷贝数组或对象的函数，测试发现运行速度差不多是使用 JSON 中转的 6 倍左右，顺便还支持了 TypedArray、RegExp 的对象的复制

https://jsperf.com/deep-clone...

不要用 arr.find 代替 arr.some

Array.prototype.find 是 ES2015 中新增的数组查找函数，与 Array.prototype.some 有相似之处，但不能替代后者。

Array.prototype.find 返回第一个符合条件的值，直接拿这个值做 if 判断是否存在，如果这个符合条件的值恰好是 0 怎么办？

arr.find 是找到数组中的值后对其进一步处理，一般用于对象数组的情况；arr.some 才是检查存在性；两者不可混用。

不要用 arr.map 代替 arr.forEach

也是一个 JavaScript 初学者常常犯的错误，他们往往并没有分清 Array.prototype.map 和 Array.prototype.forEach 的实际含义。

map 中文叫做 映射，它通过将某个序列依次执行某个函数导出另一个新的序列。这个函数通常是不含副作用的，更不会修改原始的数组（所谓纯函数）。

forEach 就没有那么多说法，它就是简单的把数组中所有项都用某个函数处理一遍。由于 forEach 没有返回值（返回 undefined），所以它的回调函数通常是包含副作用的，否则这个 forEach 写了毫无意义。

确实 map 比 forEach 更加强大，但是 map 会创建一个新的数组，占用内存。如果你不用 map 的返回值，那你就应当使用 forEach

补：心得补充

ES6 以前，遍历数组主要就是两种方法：手写循环用下标迭代，使用 Array.prototype.forEach。前者万能，效率最高，可就是写起来比较繁琐——它不能直接获取到数组中的值。

笔者个人是喜欢后者的：可以直接获取到迭代的下标和值，而且函数式风格（注意 FP 注重的是不可变数据结构，forEach 天生为副作用存在，所以只有 FP 的形而没有神）写起来爽快无比。但是！不知各位同学注意过没有：forEach 一旦开始就停不下来了。。。

forEach 接受一个回调函数，你可以提前 return，相当于手写循环中的 continue。但是你不能 break——因为回调函数中没有循环让你去 break：

[1, 2, 3, 4, 5].forEach(x => {
 console.log(x);
 if (x === 3) {
  break; // SyntaxError: Illegal break statement
 }
});

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻标题：分析JavaScript数组操作难点-创新互联
文章URL：https://www.cdcxhl.com/article8/dgcoip.html

成都网站建设公司_创新互联，为您提供网站导航、定制开发、品牌网站建设、App设计、用户体验、全网营销推广

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容