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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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 根据IP地址控制访问的代码
2010/04/22 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
产品促销活动策划书
2014/01/15 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
人生遥控器观后感
2015/06/11 职场文书
失恋33天观后感
2015/06/11 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书