来自 https://juejin.im/post/5db62f1bf265da4d560906ab 侵删

数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。

1. 删除数组的重复项

2. 替换数组中的特定值

有时在创建代码时需要替换数组中的特定值,有一种很好的简短方法可以做到这一点,咱们可以使用.splice(start、value to remove、valueToAdd),这些参数指定咱们希望从哪里开始修改、修改多少个值和替换新值。

3. Array.from 达到 .map 的效果

咱们都知道 .map() 方法,.from() 方法也可以用来获得类似的效果且代码也很简洁。

4.置空数组

有时候我们需要清空数组,一个快捷的方法就是直接让数组的 length 属性为 0,就可以清空数组了。

5. 将数组转换为对象

有时候,出于某种目的,需要将数组转化成对象,一个简单快速的方法是就使用展开运算符号(...):

6. 用数据填充数组

在某些情况下,当咱们创建一个数组并希望用一些数据来填充它,这时 .fill()方法可以帮助咱们。

7. 数组合并

使用展开操作符,也可以将多个数组合并起来。

8.求两个数组的交集

求两个数组的交集在面试中也是有一定难度的正点,为了找到两个数组的交集,首先使用上面的方法确保所检查数组中的值不重复,接着使用.filter 方法和.includes方法。如下所示:

9.从数组中删除虚值

在 JS 中,虚值有 false, 0''null, NaN, undefined。咱们可以 .filter() 方法来过滤这些虚值。

10. 从数组中获取随机值

有时我们需要从数组中随机选择一个值。一种方便的方法是可以根据数组长度获得一个随机索引,如下所示:

11.反转数组

现在,咱们需要反转数组时,没有必要通过复杂的循环和函数来创建它,数组的 reverse 方法就可以做了:

12 lastIndexOf() 方法

13.对数组中的所有值求和

JS 面试中也经常用 reduce 方法来巧妙的解决问题

总结

在本文中,介绍了13个技巧,希望它们可以帮助编写简洁代码,如果你还有更好的办法,欢迎留言讨论。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

13 个 JS 数组精简技巧的更多相关文章

  1. JS数组精简的十三个技巧

    1.删除数组的重复项 第一种方式 var fruits = ['banana', 'apple', 'orange', 'apple', 'orange', 'grape', 'watermelon' ...

  2. js 数组去重小技巧

    js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...

  3. 14条最佳JS代码编写技巧

    http://gaohaixian.blog.163.com/blog/static/123260105201142645458315/写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的 ...

  4. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  5. java数组使用技巧

    参考网上文章,总结了一下java数组使用技巧,如下: package com.beijing.array; import java.nio.ByteBuffer; import java.util.A ...

  6. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  7. JS数组+JS循环题

    先看JS循环作业题: 一.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 <script type="text/javascript"> ...

  8. js 数组api

    Javascript Array API   JS数组对象提供了很多API方法,要用到的朋友可以查阅哈,如有错误欢迎指正. /** * Created by Administrator on 2017 ...

  9. JS数组中级+高级技巧

    本文介绍JS数组一些比较进阶的方法: reverse:数组反转: join:(参数)以参数为连接符将数组拼接为字符串: 实例: var arr=[]; arr[3]="haha"; ...

随机推荐

  1. Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据

    在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget ...

  2. ISO/IEC 9899:2011 条款6.9——外部定义

    6.9 外部定义 语法 1.translation-unit: external-declaration translation-unit    external-declaration extern ...

  3. ES6深入浅出-6 ES 6 模块-1.模块化速学

    把模块先默认认为是豆腐块 为什么前端需要模块? 没有模块的方式 预览这个html页面     一共200行js代码 前100行在做一件事 ,另外100行在做另一件事,这样就是两个模块 main.js来 ...

  4. hadoop记录-MapReduce之如何处理失败的task(转载)

    1.1作业某个任务阻塞了,长时间占用资源不释放 1.2在MapTask任务运行完毕,ReduceTask运行过程中,某个MapTask节点挂了,或者某个MapTask结果存放的那磁盘坏掉了 在Task ...

  5. npm 全局安装路径 在哪里

    注意:在Admin下,需要把隐藏文件显示出来,才能找到对应的文件路径.

  6. IntelliJ IDEA 下搭建vue项目工程

    Vue 项目:运行 npm run dev  后报错 “'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件.” 前提: 电脑已经安装了node 和 npm, ...

  7. jQuery插件——imgbox(点击图片查看大图)

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

  8. js获取下拉框的值

      获取select 选中的option的值: $("#ddlRegType").find("option:selected").val(); 获取select ...

  9. SpringCloud服务注册与发现中心-Eureka

    1.服务注册与发现的好处: 假设没有这个东西,那么如果存在a,b,c三个同样的服务: 而现在有一个u服务需要用到a或b或c提供的接口,那么u里面肯定是需要配置这三个服务的地址,然后调用的时候还有问题就 ...

  10. 【转】那些年用过的Redis集群架构(含面试解析)

    引言 今天是2019年2月12号,也就是大年初八,我接到了高中同学刘有码面试失利的消息. 他面试的时候,身份是某知名公司的小码农一枚,却因为不懂自己生产上Redis是如何部署的,导致面试失败! 人间惨 ...