JS数组精简的十三个技巧
1.删除数组的重复项
第一种方式
var fruits = ['banana', 'apple', 'orange', 'apple', 'orange', 'grape', 'watermelon']
var uniqueFruits = new Set(fruits)
console.log(uniqueFruits); // Set {'banana', 'apple', 'orange', 'grape', 'watermelon'}
var uniqueFruits = Array.from(new Set(fruits))
console.log(uniqueFruits); // [ 'banana', 'apple', 'orange', 'grape', 'watermelon' ]
第二种方式
var fruits = ['banana', 'apple', 'orange', 'apple', 'orange', 'grape', 'watermelon']
var uniqueFruits2 = [...new Set(fruits)]
console.log(uniqueFruits2); // [ 'banana', 'apple', 'orange', 'grape', 'watermelon' ]
2.替换数组中的特定值
var usernames = ['蜗牛0', '蜗牛1', '蜗牛2', '蜗牛3', '蜗牛4', '蜗牛5']
usernames.splice(0, 2, '蜗牛替换位置0', '蜗牛替换位置1')
console.log(usernames) // [ '蜗牛替换位置0', '蜗牛替换位置1', '蜗牛2', '蜗牛3', '蜗牛4', '蜗牛5' ]
3.Array.from 达到 .map 的效果
var friends = [
{ name: '小智', age: 22 },
{ name: '张三', age: 23 },
{ name: '李四', age: 24 },
{ name: '王二', age: 25 },
{ name: '麻子', age: 26 },]
var friendsNames = Array.from(friends, ({ name }) => name)
console.log(friendsNames) // [ '小智', '张三', '李四', '王二', '麻子' ]
4.置空数组
var friends = [
{ name: '小智', age: 22 },
{ name: '张三', age: 23 },
{ name: '李四', age: 24 },
{ name: '王二', age: 25 },
{ name: '麻子', age: 26 },]
friends.length = 0
console.log(friends) // []
5.将数组转换为对象
var usernames = ['蜗牛0', '蜗牛1', '蜗牛2', '蜗牛3']
var usernamesObj = { ...usernames }
console.log(usernamesObj) // { '0': '蜗牛0', '1': '蜗牛1', '2': '蜗牛2', '3': '蜗牛3' }
6.用数据填充数组
var array = new Array(10).fill('1')
console.log(array) // [ '1', '1', '1', '1', '1', '1', '1', '1', '1', '1' ]
7.数组合并
var fruits = ['apple', 'orange', 'banana']
var meat = ['beef', 'fish', 'poultry']
var vegetables = ['potato', 'tomato', 'cucumber']
var food = [...fruits, ...meat, ...vegetables]
console.log(food) // [ 'apple', 'orange', 'banana', 'beef', 'fish', 'poultry', 'potato', 'tomato', 'cucumber' ]
8.求两个数组的交集
var num0 = [0, 2, 4, 6, 8, 9]
var num1 = [0, 1, 3, 5, 8, 9]
var jiaoJi = [...new Set(num0)].filter(item => num1.includes(item))
console.log(jiaoJi) // [ 0, 8, 9 ]
9.从数组中删除虚值
var mixedArray = ['1', 0, false, null, '', NaN, 9, undefined, 'apple']
var trueArray = mixedArray.filter(Boolean)
console.log(trueArray) // [ '1', 9, 'apple' ]
10.从数组中获取随机值
var number = [0, 2, 4, 5, 7, 9, 22, 55]
var randomNumber = number[(Math.floor(Math.random() * (number.length)))]
console.log(randomNumber) // 9
11.反转数组
var number = [0, 2, 4, 5, 7, 9, 22, 55]
var numberReverse = number.reverse()
console.log(numberReverse) // [ 55, 22, 9, 7, 5, 4, 2, 0 ]
12.lastIndexOf() 方法
var number = [1, 5, 3, 8, 3, 9, 23, 65, 3, 99, 3, 4]
var lastNumber = number.lastIndexOf(3)
console.log(lastNumber) // 10
13.对数组中的所有值求和
var nums = [1, 5, 2, 6]
var sum = nums.reduce((x, y) => x + y)
console.log(sum) // 14
JS数组精简的十三个技巧的更多相关文章
- 13 个 JS 数组精简技巧
来自 https://juejin.im/post/5db62f1bf265da4d560906ab 侵删 数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮 ...
- js 数组去重小技巧
js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...
- 【转】天啦噜!原来Chrome自带的开发者工具还能这么用!(提升JS调试能力的10个技巧)
天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧) Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...
- 优化 JS 条件语句的 5 个技巧
优化 JS 条件语句的 5 个技巧 原创: 前端大全 前端大全 昨天 (给前端大全加星标,提升前端技能) 编译:伯乐在线/Mr.Dcheng http://blog.jobbole.com/11467 ...
- js数组方法大全(下)
# js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...
- 处理 JS中 undefined 的 7 个技巧
摘要: JS的大部分报错都是undefined... 作者:前端小智 原文:处理 JS中 undefined 的 7 个技巧 Fundebug经授权转载,版权归原作者所有. 大约8年前,当原作者开始学 ...
- 小兔JS教程(四)-- 彻底攻略JS数组
在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性 在J ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- 转→js数组遍历 千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
随机推荐
- Java面向对象编程 -5
代码块 在程序之中使用"{}"定义的结构就称为代码块,而后根据代码块出现的位置以及定义的关键字的不同, 代码块可以分为 普通代码块 构造代码块 静态代码块 同步代码块 其中同步代码 ...
- PTA点赞狂魔
点赞狂魔 (25 分) 微博上有个“点赞”功能,你可以为你喜欢的博文点个赞表示支持.每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性.然而有这么一种人,他们会通过给自己看 ...
- pc和手机点击复制到剪贴板
https://www.cnblogs.com/kevinCoder/p/6144376.html
- NAT穿透的方式
目前主要的NAT类型有如下几种: 1)Full-cone NAT, also known as one-to-one NAT 一旦一个内网地址 (iAddr:iPort) 被映射到一个外部地址 (eA ...
- 让你的逼格瞬间提升的十个Python语法!
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...
- Fluent_Python_Part3函数即对象,06-dp-1class-func,一等函数与设计模式
使用一等函数实现设计模式 中文电子书P278 合理利用作为一等对象的函数,把模式中涉及的某些类的实例替换成简单的函数,从而简化代码. 1. 重构"策略"模式 中文电子书P282 P ...
- hexo 搭建静态博客 + Next 主题配置
参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g ...
- ZOJ4117 BaoBao Loves Reading(2019山东省赛)
按照计划读书,第i分钟要读第ai本书,起初桌子是空的,所有书都在书架上,如果要读的书不在桌子上,就需要把书从书架上拿到桌子上,如果桌子已经满了,则需要先把桌子上最早读的一本书放回书架,求当桌子容量为k ...
- Linux重装为Windows后读取原EXT类型数据盘
Linux重装为Windows后读取原EXT类型数据盘 1 2 3 4 分步阅读 Windows的文件系统通常使用NTFS或者FAT32格式,而Linux的文件系统格式通常是EXT系列.当操作系统从L ...
- 【原】rsync使用
在使用jenkins当跳板机的场景下,有使用git pull 代码到jenkins机器后,需要将代码复制到另一台机器上,常用的复制命令有scp和rsync:现就使用到了rsync进行详解: rsync ...