13 个 JS 数组精简技巧
来自 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 数组精简技巧的更多相关文章
- JS数组精简的十三个技巧
1.删除数组的重复项 第一种方式 var fruits = ['banana', 'apple', 'orange', 'apple', 'orange', 'grape', 'watermelon' ...
- js 数组去重小技巧
js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...
- 14条最佳JS代码编写技巧
http://gaohaixian.blog.163.com/blog/static/123260105201142645458315/写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的 ...
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- java数组使用技巧
参考网上文章,总结了一下java数组使用技巧,如下: package com.beijing.array; import java.nio.ByteBuffer; import java.util.A ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- JS数组+JS循环题
先看JS循环作业题: 一.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 <script type="text/javascript"> ...
- js 数组api
Javascript Array API JS数组对象提供了很多API方法,要用到的朋友可以查阅哈,如有错误欢迎指正. /** * Created by Administrator on 2017 ...
- JS数组中级+高级技巧
本文介绍JS数组一些比较进阶的方法: reverse:数组反转: join:(参数)以参数为连接符将数组拼接为字符串: 实例: var arr=[]; arr[3]="haha"; ...
随机推荐
- 四、postman增加断言
预期和实际结果的判断 预期==实际:用例通过,写到报告里 预期!==实际:用例失败,写到报告里 一.例子演示 相当于首页右侧的10大每天的内容 url:http://www.v2ex.com/api/ ...
- windows nginx 快捷启动关闭批处理脚本
:: 关闭回显,即执行本脚本时不显示执行路径和命令,直接显示结果 @echo off rem @author luwuer color f8 set NGINX_DIR=D:\nginx-1.12.2 ...
- android 应用签名的作用
来源:https://www.jianshu.com/p/61206c96471a 1..应用程序升级:如果你希望用户无缝升级到新的版本,那么你必须用同一个证书进行签名.这是由于只有以同一个证书签名, ...
- Qt widget中使用QML自定义电池
1.效果 2.QML 在资源里新建Mybattery.qml: import QtQuick 2.0 import QtQuick 2.12 Item { id: root property colo ...
- Qt编写自定义控件67-通用无边框
一.前言 在之前的一篇文章中写过一个通用的移动控件,作用就是用来传入任意的widget控件,可以在父类容器中自由移动.本篇文章要写的是一个通用的无边框类,确切的说这不叫控件应该叫组件才对,控件是要看得 ...
- django 中单独执行py文件修改用户名
Python文件代码 import os import django # 在environ字典里设置默认Django环境,'xxxx.settings'指Django项目的配置文件 os.enviro ...
- docker容器中解决出现:^H^H^H^H
docker容器中解决出现:^H^H^H^H 环境:docker容器是debain系统 解决: 把stty erase ^H 添加到.bash_profile中 vim /etc/profile st ...
- idea能用下划线替换红色报错吗?我色弱,用idea简直太痛苦了
看看下图的idea,如果某个类的包路径没有引进来,使用颜色来提示,这对于色弱的程序员简直是一种折磨,有没有可以改成eclipse的那种报错提示方式? 个人感觉idea真的没有eclipse友好,也许是 ...
- LODOP中的各种宽高和位置简短问答
LODOP中的位置边距,可查看本博客另一篇相关博文:LODOOP中的各种边距 打印项.整体偏移.可打区域.内部边距关于LODOP中的各种宽高,可查看本博文简短问答下方的正文:.该文其实有两个以前的相关 ...
- 【Leetcode_easy】925. Long Pressed Name
problem 925. Long Pressed Name solution1: class Solution { public: bool isLongPressedName(string nam ...