5个JS数组技巧可提高你的开发技能

在前端开发中，数组是经常会被用到的数组结构，今天，介绍 5 个处理数组技巧，希望能带给你们一些启发和帮助。废话不多说，让我们开始吧。

创新互联科技有限公司专业互联网基础服务商，为您提供内江服务器托管，高防物理服务器租用，成都IDC机房托管，成都主机托管等互联网服务。

[[336166]]

1. 随机排列

在开发者，有时候我们需要对数组的顺序进行重新的洗牌。在 JS 中并没有提供数组随机排序的方法，这里提供一个随机排序的方法：

 
 
 
 
  
  
  
  function shuffle(arr) {   
  
  
    var i, j, temp;   
  
  
    for (i = arr.length - 1; i > 0; i--) {   
  
  
      j = Math.floor(Math.random() * (i + 1));   
  
  
      temp = arr[i];   
  
  
      arr[i] = arr[j];   
  
  
      arr[j] = temp;   
  
  
    }   
  
  
    return arr;   
  
  
  }

2. 唯一值

在开发者，我们经常需要过滤重复的值，这里提供几种方式来过滤数组的重复值。

使用 Set 对象

使用 Set() 函数，此函数可与单个值数组一起使用。对于数组中嵌套的对象值而言，不是一个好的选择。

 
 
 
 
  
  
  
  const numArray = [1,2,3,4,2,3,4,5,1,1,2,3,3,4,5,6,7,8,2,4,6];   
  
  
     
  
  
  // 使用 Array.from 方法   
  
  
  Array.from(new Set(numArray));   
  
  
     
  
  
  // 使用展开方式   
  
  
  [...new Set(numArray)]

使用 Array.filter

使用 filter 方法，我们可以对元素是对象的进行过滤。

 
 
 
 
  
  
  
  const data = [   
  
  
    {id: 1, name: 'Lemon'},   
  
  
    {id: 2, name: 'Mint'},   
  
  
    {id: 3, name: 'Mango'},   
  
  
    {id: 4, name: 'Apple'},   
  
  
    {id: 5, name: 'Lemon'},   
  
  
    {id: 6, name: 'Mint'},   
  
  
    {id: 7, name: 'Mango'},   
  
  
    {id: 8, name: 'Apple'},   
  
  
  ]   
  
  
     
  
  
  function findUnique(data) {   
  
  
    return data.filter((value, index, array) => {   
  
  
      if (array.findIndex(item => item.name === value.name) === index) {   
  
  
        return value;   
  
  
      }   
  
  
    })   
  
  
  }

3. 使用 loadsh 的 lodash 方法

 
 
 
 
  
  
  
  import {uniqBy} from 'lodash'   
  
  
     
  
  
  const data = [    
  
  
    {id: 1, name: 'Lemon'},    
  
  
    {id: 2, name: 'Mint'},    
  
  
    {id: 3, name: 'Mango'},    
  
  
    {id: 4, name: 'Apple'},    
  
  
    {id: 5, name: 'Lemon'},    
  
  
    {id: 6, name: 'Mint'},   
  
  
    {id: 7, name: 'Mango'},    
  
  
    {id: 8, name: 'Apple'},    
  
  
  ]    
  
  
     
  
  
  function findUnique(data) {    
  
  
    return uniqBy(data, e => {   
  
  
       return e.name   
  
  
      })   
  
  
  }

3. 按属性对对象数组进行排序

我们知道 JS 数组中的 sort 方法是按字典顺序进行排序的，所以对于字符串类，该方法是可以很好的正常工作，但对于数据元素是对象类型，就不太好使了，这里我们需要自定义一个排序方法。

在比较函数中，我们将根据以下条件返回值：

小于0：A 在 B 之前

大于0 ：B 在 A 之前

等于0 ：A 和 B 彼此保持不变

 
 
 
 
  
  
  
  const data = [   
  
  
    {id: 1, name: 'Lemon', type: 'fruit'},   
  
  
    {id: 2, name: 'Mint', type: 'vegetable'},   
  
  
    {id: 3, name: 'Mango', type: 'grain'},   
  
  
    {id: 4, name: 'Apple', type: 'fruit'},   
  
  
    {id: 5, name: 'Lemon', type: 'vegetable'},   
  
  
    {id: 6, name: 'Mint', type: 'fruit'},   
  
  
    {id: 7, name: 'Mango', type: 'fruit'},   
  
  
    {id: 8, name: 'Apple', type: 'grain'},   
  
  
  ]   
  
  
     
  
  
  function compare(a, b) {   
  
  
    // Use toLowerCase() to ignore character casing   
  
  
    const typeA = a.type.toLowerCase();   
  
  
    const typeB = b.type.toLowerCase();   
  
  
     
  
  
    let comparison = 0;   
  
  
    if (typeA > typeB) {   
  
  
      comparison = 1;   
  
  
    } else if (typeA < typeB) {   
  
  
      comparison = -1;   
  
  
    }   
  
  
    return comparison;   
  
  
  }   
  
  
     
  
  
  data.sort(compare)

4. 把数组转成以指定符号分隔的字符串

JS 中有个方法可以做到这一点，就是使用数组中的 .join() 方法，我们可以传入指定的符号来做数组进行分隔。

 
 
 
 
  
  
  
  const data = ['Mango', 'Apple', 'Banana', 'Peach']   
  
  
     
  
  
  data.join(',');   
  
  
  // return "Mango,Apple,Banana,Peach"

5. 从数组中选择一个元素

对于此任务，我们有多种方式，一种是使用 forEach 组合 if-else 的方式，另一种可以使用filter 方法，但是使用forEach 和filter的缺点是：

在forEach中，我们要额外的遍历其它不需要元素，并且还要使用 if 语句来提取所需的值。
在filter 方法中，我们有一个简单的比较操作，但是它将返回的是一个数组，而是我们想要是根据给定条件从数组中获得单个对象。

为了解决这个问题，我们可以使用 find函数从数组中找到确切的元素并返回该对象，这里我们不需要使用if-else语句来检查元素是否满足条件。

 
 
 
 
  
  
  
  const data = [    
  
  
    {id: 1, name: 'Lemon'},    
  
  
    {id: 2, name: 'Mint'},    
  
  
    {id: 3, name: 'Mango'},    
  
  
    {id: 4, name: 'Apple'}   
  
  
  ]    
  
  
     
  
  
  const value = data.find(item => item.name === 'Apple')   
  
  
  // value = {id: 4, name: 'Apple'}

作者：Ghazi Khan 译者：前端小智来源：codewithghazi

原文：https://codewithghazi.com/javascript-array-tricks-to-improve-your-development-skill/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

当前文章：5个JS数组技巧可提高你的开发技能
当前网址：http://www.mswzjz.cn/qtweb/news32/269432.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章