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数组精简的十三个技巧的更多相关文章

  1. 13 个 JS 数组精简技巧

    来自 https://juejin.im/post/5db62f1bf265da4d560906ab 侵删 数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮 ...

  2. js 数组去重小技巧

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

  3. 【转】天啦噜!原来Chrome自带的开发者工具还能这么用!(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  4. 优化 JS 条件语句的 5 个技巧

    优化 JS 条件语句的 5 个技巧 原创: 前端大全 前端大全 昨天 (给前端大全加星标,提升前端技能) 编译:伯乐在线/Mr.Dcheng http://blog.jobbole.com/11467 ...

  5. js数组方法大全(下)

    # js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...

  6. 处理 JS中 undefined 的 7 个技巧

    摘要: JS的大部分报错都是undefined... 作者:前端小智 原文:处理 JS中 undefined 的 7 个技巧 Fundebug经授权转载,版权归原作者所有. 大约8年前,当原作者开始学 ...

  7. 小兔JS教程(四)-- 彻底攻略JS数组

    在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性 在J ...

  8. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  9. 转→js数组遍历 千万不要使用for...in...

    看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

随机推荐

  1. 【PAT甲级】1082 Read Number in Chinese (25 分)

    题意: 输入一个九位整数,输出它的汉字读法(用拼音表示). trick: 字符串数组""其实会输出一个空格,而不是什么都不输出,导致测试点0和4格式错误. AAAAAccepted ...

  2. Java面向对象的局部变量和成员变量

    package cn.itcast.day06.demo03; /* 局部变量和成员变量 1. 定义的位置不一样[重点] 局部变量:在方法的内部,类的方法内部 成员变量:在方法的外部,直接写在类当中 ...

  3. mysql学习笔记(二:中的auto_increment 理解

    1.auto_increment 理解1 auto_increment是用于主键自动增长的,从1开始增长,当你把第一条记录删除时,再插入第二跳数据时,主键值是2,不是1. 例如: create tab ...

  4. C语言:假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母。-利用折半查找整数m在有序数组中的位置,若找到,返回下标值,否则返回-1。

    //假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母. #include <stdio.h> void f ...

  5. RemoteView设置高度

    刚开始内层LinearLayout直接用 android:layout_height="match_parent" <?xml version="1.0" ...

  6. 基于SSH开发银行个人业务管理系统 附源码

    开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+MySql数据库 运行效果图

  7. python3中的raise使用

    raise表示会抛出异常那么就是说raise会向python的解释器一个响应告诉解释器他的后面是一个异常让我们的程序中断 一般是和自定义的异常连用. class CustomError(Excepti ...

  8. Linux系统常用运维命令汇总

    因为这段时间加入Java后台开发,所以对Java后台开发必会的Linux系统指令进行了熟悉这里进行汇总; tar 参数说明:-x: 解压 -z:有gzip属性 -v:显示所有过程 -f:文件名 -c: ...

  9. Vue 项目 在局域网内访问

    之前在百度上看到过很多中  关于局域网访问项目的方法, 在这里,个人推荐两种比较喜欢的方法 一.直接在项目的package.json文件中进行配置 ,代码如下 "scripts": ...

  10. ASA密码恢复流程

    1.建立console连接2.重启启动安全设备 3.进入ROMMMON模式出现Use BREAK or ESC to interrupt boot字样时,按下ESC键进入ROMMON模式.4.设置RO ...