javascript 数组精简技巧小结


Posted in Javascript onFebruary 26, 2020

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

1. 删除数组的重复项

javascript 数组精简技巧小结

2. 替换数组中的特定值

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

javascript 数组精简技巧小结

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

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

javascript 数组精简技巧小结

4.置空数组

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

javascript 数组精简技巧小结

5. 将数组转换为对象

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

javascript 数组精简技巧小结

6. 用数据填充数组

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

javascript 数组精简技巧小结

7. 数组合并

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

javascript 数组精简技巧小结

8.求两个数组的交集

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

javascript 数组精简技巧小结

9.从数组中删除虚值

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

javascript 数组精简技巧小结

10. 从数组中获取随机值

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

javascript 数组精简技巧小结

11.反转数组

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

javascript 数组精简技巧小结

12 lastIndexOf() 方法

javascript 数组精简技巧小结

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

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

javascript 数组精简技巧小结

总结

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

英文原文:

https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

到此这篇关于javascript 数组精简技巧小结的文章就介绍到这了,更多相关js数组精简内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 #Javascript
jquery实现直播视频弹幕效果
Feb 25 #jQuery
JavaScript实现打砖块游戏
Feb 25 #Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 #Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 #Javascript
You might like
php多文件上传功能实现原理及代码
2013/04/18 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript事件模型代码
2007/07/01 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
对python3新增的byte类型详解
2018/12/04 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
2014年教师业务学习材料
2014/05/12 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL