您的位置 首页 php

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

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

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 方法是按字典顺序进行排序的,所以对于 字符串 类, 该方法是可以很好的正常工作,但对于数据元素是对象类型,就不太好使了,这里我们需要自定义一个排序方法。

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

  1. 小于0 :A 在 B 之前
  2. 大于0 :B 在 A 之前
  3. 等于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的缺点是:

  1. 在forEach中,我们要额外的遍历其它不需要元素,并且还要使用 if 语句来提取所需的值。
  2. 在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

原文:

文章来源:智云一二三科技

文章标题:5 个 JS 数组技巧可提高你的开发技能

文章地址:https://www.zhihuclub.com/35113.shtml

关于作者: 智云科技

热门文章

网站地图