微搭低代码入门04数组

news/2024/11/16 8:32:12/

目录

  • 1 数组的定义和赋值
  • 2 访问数组中的元素
  • 3 获取数组的长度
  • 4 给数组添加元素
  • 5 删除数组中的元素
  • 6 其他常见用法
  • 7 数组作为参数传递
  • 8 数组的嵌套
  • 9 不改变原数组的方法
  • 总结

我们日常经常说的编程,叫编写程序。那程序的核心组成是数据结构+算法。我们在编程入门的时候,需要先了解一下什么叫数据结构

数据结构是计算机科学中的一个核心概念,它指的是相互之间存在一种或多种特定关系的数据元素的集合。这些关系定义了数据在计算机中的组织、存储和访问方式。数据结构不仅仅是数据的简单集合,更重要的是它们包含了数据之间的逻辑关系以及在这种关系基础上进行的各种操作。

数据结构通常分为以下几类:

  1. 线性数据结构:线性数据结构中的数据元素之间存在一对一的线性关系。常见的线性数据结构包括数组、链表、栈、队列等。
  2. 非线性数据结构:非线性数据结构中的数据元素之间存在多对多的复杂关系。常见的非线性数据结构包括树、图等。

了解了基本概念之后,本篇我们介绍一下数组的日常的操作

1 数组的定义和赋值

数组是一种有序的元素集合,每个元素都可以通过索引来访问。

可以使用[]的语法来对数组进行定义

let array = [1, 2, 3, 4, 5];

定义之后,如果希望改变数组的某个元素的可以使用索引进行赋值

array[0] = 10; // 修改第一个元素

在微搭中,我们可以创建一个自定义方法来演示一下数组的定义和赋值,代码如下:

export default function({event, data}) {
let array = [1, 2, 3, 4, 5];console.log(array)array[0] = 10; console.log(array)
}

调用后控制台的结果
在这里插入图片描述
可以看到如果数组中的第一个元素已经被修改了

2 访问数组中的元素

数组中的元素通过索引访问,索引从0开始。

在上边的代码中我们输出一下数组的第一个元素

 console.log(array[0])

在这里插入图片描述
可以看到10被输出

如果访问的索引超出了数组的范围,将返回undefined,我们现在数组中有五个元素,如果我访问第六个元素就会打印undefined

console.log(array[5])

在这里插入图片描述

3 获取数组的长度

使用length属性可以获取数组的长度。

在我们的示例中可以调用length属性进行输出

console.log(array.length)

在这里插入图片描述

4 给数组添加元素

push方法用于在数组的末尾添加一个或多个元素,并返回新的长度。

比如我们在数组的末尾添加一个7

array.push(7)
console.log(array)

在这里插入图片描述

5 删除数组中的元素

可以调用pop方法,删除数组的最后一个元素,比如我们调用pop把我们刚刚添加的7删掉

array.pop()
console.log(array)

在这里插入图片描述
可以看到,调用pop之后,数组的长度又恢复到5个

6 其他常见用法

除了从末尾添加和删除元素外,我们还可以从头部添加和删除元素,可以调用shift和unshift方法。比如我们在头部添加元素8进来

array.unshift(8)
console.log(array)

在这里插入图片描述
可以看到8被添加进来,数组的长度变成了6

再次调用shift就可以把8移除

array.shift()
console.log(array)

在这里插入图片描述
还可以调用slice方法截取数组的片段,比如我们从索引的第一个位置截取两个元素

console.log(array.slice(1,3))

在这里插入图片描述
还可以调用indefOf去查找某个元素的位置

console.log(array.indexOf(2)

在这里插入图片描述

7 数组作为参数传递

数组如果作为函数的参数传递,在函数体内改变了数组的内容,那么外部定义的数组也就改变

function modifyArray(arr) {arr.push('newItem');
}let myArray = ['a', 'b', 'c'];
modifyArray(myArray);
console.log(myArray); // 输出: ['a', 'b', 'c', 'newItem']

8 数组的嵌套

数组里元素的类型可以是任意的,比如元素也可以是数组,我们还是可以使用索引去访问嵌套数组的元素

let nestedArray = [[1, 2], [3, 4], [5, 6]];
console.log(nestedArray[1][0]); // 输出: 3

9 不改变原数组的方法

如果不希望改变原数组,我们又希望数组的元素按照新的方式进行组织的,我们可以调用数组的map、filter、reduce方法

map:创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(number) {return number * 2;
});
console.log(doubled); // 输出: [2, 4, 6, 8]
console.log(numbers); // 输出: [1, 2, 3, 4] (原数组不变)

filter:创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

let evens = numbers.filter(function(number) {return number % 2 === 0;
});
console.log(evens); // 输出: [2, 4]
console.log(numbers); // 输出: [1, 2, 3, 4] (原数组不变)

reduce:对数组中的每个元素执行一个由你提供的reducer函数(升序执行),将其结果汇总为单个返回值。

let sum = numbers.reduce(function(accumulator, currentValue) {return accumulator + currentValue;
}, 0);
console.log(sum); // 输出: 10
console.log(numbers); // 输出: [1, 2, 3, 4] (原数组不变)

这三个方法在我们组件的属性绑定时特别有用,是务必要掌握的知识点

总结

本篇我们讲解了在低代码编程中最常见的一种数据结构,数组。介绍了数组的各种常用方法调用,尤其在组件的属性绑定时候使用非常频繁,需要仔细掌握。


http://www.ppmy.cn/news/1547405.html

相关文章

maven的optional选项说明以及具体应用

写在前面 本文看下maven的optional选项的作用和用法。 1:什么作用 考虑这样的场景,A依赖B,B依赖C,正常的按照依赖的传递性,A也会间接的依赖C,但是在一些特定的场景中项目A只希望依赖B,而不依…

H5页面多个视频如何只同时播放一个?

目录 背景1. 首先介绍下 muted 属性2. 监听播放和暂停操作3. 视频播放完毕后返回桌面,再进入H5页面发现视频封面丢失置灰解决思路: 背景 页面模块同时有个四个视频模块,发现可以同时播放四个视频,但是理想的是每次只播放一个。 …

ApiSmart-QWen2.5 coder vs GPT-4o 那个更强? ApiSmart 测评

QWen2.5 coder vs GPT-4o 那个更强? 那个更快, 那个更精准,让我们来看看; ApiSmart Api design Copilot - ApiHugApiSmart make your api design and implement happierhttps://apihug.com/zhCN-docs/copilot 【Apismart】QWen2.…

SpringBoot -- 自动化装配源码

自动化装配源码 EnableAutoConfiguration 注解,开启自动配置的核心注解AutoConfigurationPackage 注解 AutoConfigurationImportSelector 类getAutoConfigurationEntry 方法getCandidateConfigurations 方法 SpringFactoriesLoader EnableAutoConfiguration 注解&am…

Rust 语言学习笔记(五)

终于来到了 Rust 的精髓所在了,那就是使之不依赖于垃圾回收又能保障内存安全且高效运行的所有权系统(Ownership System)。想要用 Rust 做一个稍显规模项目必定绕不过它,所有权系统包括所有权(Ownership), 借用(Borrowing), 生命周期(Lifetimes)。 以下概…

【教程】Ubuntu设置alacritty为默认终端

转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 目录 背景介绍 设置教程 注意事项 背景介绍 alacritty是一个开源的终端,比默认的xterm更好看,甚至编辑文本时候还会代码高亮…

使用 Vue 和 ECharts 创建交互式图表

使用 Vue 和 ECharts 创建交互式图表 引言 在现代 Web 应用中,数据可视化是一个重要的组成部分。它不仅能够帮助用户更好地理解复杂的数据,还能提升用户体验。 技术背景 Vue.js Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。…

面试经典 150 题:20、2、228

20. 有效的括号 参考代码 #include <stack>class Solution { public:bool isValid(string s) {if(s.size() < 2){ //特判&#xff1a;空字符串和一个字符的情况return false;}bool flag true;stack<char> st; //栈for(int i0; i<s.size(); i){if(s[i] ( |…