zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    vue 移动端项目,动态控制div距离底部的距离
    输入一个整形数组,求数组中连续的子数组使其和最大
    事件冒泡、组织事件冒泡、以及组织默认行为
    vuex存储和本地存储的区别
    Uncaught TypeError: Cannot read property 'offsetTop' of undefined at VueComponent.handleScroll
    js悬浮吸顶
    Python爬虫之爬取煎蛋网妹子图
    Python框架-pygal之世界地图
    Python框架-pygal之雷达图
    Python框架-pygal之饼图
  • 原文地址:https://www.cnblogs.com/zppsakura/p/12376043.html
Copyright © 2011-2022 走看看