微搭低代码入门04数组

文摘   2024-11-15 20:03   内蒙古  

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

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

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

线性数据结构:线性数据结构中的数据元素之间存在一对一的线性关系。常见的线性数据结构包括数组、链表、栈、队列等。

非线性数据结构:非线性数据结构中的数据元素之间存在多对多的复杂关系。常见的非线性数据结构包括树、图等。

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

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); // 输出: 10console.log(numbers); // 输出: [1, 2, 3, 4] (原数组不变)

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

总结

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



低代码布道师
分享微搭低代码使用教程,提问交流+知识星球50556232
 最新文章