文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用JS数组技巧提高开发技能

2024-04-02 19:55

关注

本篇内容介绍了“怎么用JS数组技巧提高开发技能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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的缺点是:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 在forEach中,我们要额外的遍历其它不需要元素,并且还要使用 if 语句来提取所需的值。

  3. 在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'}

“怎么用JS数组技巧提高开发技能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯