微搭低代码入门01变量

目录

  • 1 变量的定义
  • 2 变量的赋值
  • 3 变量的类型
  • 4 算术运算符
  • 5 字符串的连接
  • 6 模板字符串
  • 7 检查变量的类型
  • 8 解构赋值
    • 8.1 数组的解构赋值
    • 8.2 对象的解构赋值
  • 9 类型转换
    • 9.1 转换为字符串
    • 9.2 转换为数字
    • 9.3 转换为布尔值
  • 总结

好些零基础的同学,在使用低代码的时候,因为没有任何编程基础,对于稍稍复杂的应用往往觉得无从下手,我们本次结合微搭低代码工具,讲解一下低代码中必须要掌握的基础知识。

第一篇我们讲解一下变量。

1 变量的定义

什么是变量,变量是用来存储数据的容器,他通常运行在我们的内存中,方便程序的读取和调用。在JavaScript中,变量可以使用 var、let 或 const 关键字来定义。

  • var:用于定义全局或函数作用域的变量。
  • let:用于定义块作用域的变量。
  • const:用于定义常量,值不能被重新赋值。

低代码工具对这些概念再次进行了封装,以一种可视化的形式表达出来。打开我们的编辑器,在代码区就可以定义变量
在这里插入图片描述
按照作用域的区分,分为当前页面和全局

点击立即新建就可以看到微搭目前支持的几种变量的类型
在这里插入图片描述
在这里插入图片描述
让我们创建一个姓名的变量和一个年龄的变量,姓名的变量我们选择文字,年龄我们选择数字

在这里插入图片描述
在这里插入图片描述
使用const定义的叫常量,常量如果在定义时赋值的,后续不可以修改。我们演示一下常量的使用。微搭提供了开发调试工具,点击底部的图标
在这里插入图片描述
打开之后,在光标的位置是可以输入代码,按enter键就可以运行我们的代码
在这里插入图片描述
比如我们这里创建一个常量userName,在控制台打入如下代码

const userName = '低代码布道师';userName = '张三'

再次给userName赋值就可以看到报错信息
在这里插入图片描述
如果我们将关键字换成let就可以运行正常
在这里插入图片描述

2 变量的赋值

变量可以通过赋值操作符 = 来赋值。可以将任何类型的数据赋值给变量。
示例:

let number = 10; // 数字
let text = "Hello, World!"; // 字符串
let isTrue = true; // 布尔值
console.log(number)
console.log(text)
console.log(isTrue)

将上述代码贴入控制台中
在这里插入图片描述
如果想向控制台输出内容,我们可以调用console.log,console.log有如下用法

1. 输出基本数据类型
可以使用 console.log() 输出各种基本数据类型,包括数字、字符串、布尔值等

console.log(42); // 输出: 42
console.log("Hello, World!"); // 输出: Hello, World!
console.log(true); // 输出: true

2. 输出对象和数组
console.log() 也可以用于输出对象和数组,方便查看其结构和内容。

let person = { name: "Alice", age: 25 };
console.log(person); // 输出: { name: "Alice", age: 25 }let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 输出: [1, 2, 3, 4, 5]

3. 输出多个值
以在 console.log() 中传入多个参数,它们会被空格分隔输出

let x = 10;
let y = 20;
console.log("x 的值是:", x, "y 的值是:", y); // 输出: x 的值是: 10 y 的值是: 20

4. 使用格式化字符串
console.log() 支持格式化字符串,可以使用占位符来插入变量的值

let name = "Bob";
let score = 95;
console.log("%s 的分数是: %d", name, score); // 输出: Bob 的分数是: 95

3 变量的类型

JavaScript中的变量类型主要分为两类:基本类型和引用类型。

基本类型:包括 Number、String、Boolean、Null、Undefined 和 Symbol。

引用类型:包括对象(Object)、数组(Array)、函数(Function)等。

示例:

let num = 42; // Number
let str = "JavaScript"; // String
let isActive = false; // Boolean
let emptyValue = null; // Null
let notDefined; // Undefined
let uniqueSymbol = Symbol('unique'); // Symbol
let obj = { name: "Alice", age: 25 }; // Object
let arr = [1, 2, 3]; // Array

4 算术运算符

JavaScript支持多种算术运算符,包括加法 +、减法 -、乘法 *、除法 / 和取余 %。

示例:

let a = 10;
let b = 5;let sum = a + b; // 15
let difference = a - b; // 5
let product = a * b; // 50
let quotient = a / b; // 2
let remainder = a % b; // 0

5 字符串的连接

可以使用 + 运算符将多个字符串连接在一起。
示例:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // "John Doe"

6 模板字符串

模板字符串使用反引号定义,可以在字符串中嵌入变量和表达式,使用 ${} 语法

示例:

let fullName = "John Doe";
let age = 30;
let greeting = `Hello, my name is ${fullName} and I am ${age} years old.`;
// "Hello, my name is John Doe and I am 30 years old."

代码运行后会把嵌入的变量替换成具体的值,如果是表达式的,还会计算表达式的值

7 检查变量的类型

可以使用 typeof 运算符来检查变量的类型。

示例:

console.log(typeof '张三')
console.log(typeof 8)

在这里插入图片描述

8 解构赋值

解构赋值(Destructuring Assignment)是 JavaScript 中的一种语法,允许从数组或对象中提取值,并将其赋值给变量。这种语法使得代码更加简洁和易读,尤其是在处理复杂数据结构时。

8.1 数组的解构赋值

数组的解构赋值允许从数组中提取值并将其赋值给变量。

示例:

const numbers = [1, 2, 3];// 使用结构赋值提取数组中的值
const [first, second, third] = numbers;console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(third); // 输出: 3

8.2 对象的解构赋值

对象的解构赋值允许从对象中提取属性值并将其赋值给变量。

示例:

const person = {name: "Alice",age: 25,city: "New York"
};// 使用结构赋值提取对象中的属性
const { name, age } = person;console.log(name); // 输出: Alice
console.log(age); // 输出: 25

9 类型转换

有时候如果不确定变量的类型的,我们可以强制进行转换,避免程序出错

9.1 转换为字符串

let num = 123;
let bool = true;let str1 = String(num); // 使用 String() 函数
let str2 = bool.toString(); // 使用 .toString() 方法console.log(str1); // 输出: "123"
console.log(str2); // 输出: "true"

9.2 转换为数字

let strNum = "456";
let strFloat = "3.14";
let boolTrue = true;let num1 = Number(strNum); // 使用 Number() 函数
let num2 = parseInt(strFloat); // 使用 parseInt() 函数
let num3 = Number(boolTrue); // 布尔值转换为数字console.log(num1); // 输出: 456
console.log(num2); // 输出: 3
console.log(num3); // 输出: 1

9.3 转换为布尔值

let num = 0;
let str = "Hello";
let obj = {};let bool1 = Boolean(num); // 0 转换为 false
let bool2 = Boolean(str); // 非空字符串转换为 true
let bool3 = Boolean(obj); // 非空对象转换为 trueconsole.log(bool1); // 输出: false
console.log(bool2); // 输出: true
console.log(bool3); // 输出: true

总结

本篇我们介绍了低代码中变量这个概念的基本知识,在使用低代码进行可视化编程的时候,尤其在页面加载,按钮点击的时候,是需要写一些逻辑进行处理的,这个时候就会用到变量的概念。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469041.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA学习笔记#5 Vitis HLS For循环的优化(1)

本笔记使用的Vitis HLS版本为2022.2,在windows11下运行,仿真part为xcku15p_CIV-ffva1156-2LV-e,主要根据教程:跟Xilinx SAE 学HLS系列视频讲座-高亚军进行学习 从这一篇开始正式进入HLS对C代码的优化笔记 学习笔记:《…

每日OJ题_牛客_JZ38字符串的排列_DFS_C++_Java

目录 牛客_JZ38字符串的排列_DFS 题目解析 C代码 Java代码 牛客_JZ38字符串的排列_DFS 字符串的排列_牛客题霸_牛客网 描述: 输入一个长度为 n 字符串,打印出该字符串中字符的所有排列,你可以以任意顺序返回这个字符串数组。 例如输入…

markdown常用语法

🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…

CSS教程(二)- CSS选择器

1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器,根…

第二十周学习周报

目录 摘要abstractTheory behind GANGAN训练目标GAN训练技巧 总结 摘要 本周的学习内容是GAN的基本理论,在训练GAN的时候,Generator的目标是希望生成的数据与真实的数据越相似越好,而Discriminator的目标是尽量将生成的数据与真实的数据区分…

2024年CRM系统对比:国内外十大CRM热门选择

在数字化转型的大潮中,CRM系统是企业提升客户关系管理、优化销售流程的重要工具。本文将从系统功能、优势、劣势、总体评价四个方面,对2024年国内外十大热门CRM系统进行全方位对比,帮助企业找到最适合的CRM解决方案。 1.纷享销客CRM 系统功…

VideoChat:开源的数字人实时对话系统,支持自定义数字人的形象和音色

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦! 🥦 微信公众号&#xff…

[CKS] TLS Secrets创建与挂载

目前的所有题目为2024年10月后更新的最新题库,考试的k8s版本为1.31.1 BackGround 您必须使用存储在TLS Secret中的SSL文件,来保护Web 服务器的安全访问。 Task 在clever-cactus namespace中为名为clever-cactus的现有Deployment创建名为clever-cactu…

使用 wxPython 开发 Python 桌面应用程序的完整教程

使用 wxPython 开发 Python 桌面应用程序的完整教程 引言 在当今的软件开发领域,桌面应用程序仍然占据着重要的位置。Python 作为一种灵活且易于学习的编程语言,结合 wxPython 库,可以快速构建跨平台的桌面应用程序。本文将深入探讨 wxPyth…

自动驾驶系列—自动驾驶环境感知:Radar数据的应用与实践

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

DimensionX:从单张图片生成高度逼真的 3D 和 4D 场景

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦! 🥦 微信公众号&#xff…

蓝桥杯备考——算法

一、排序 冒泡排序、选择排序、插入排序、 快速排序、归并排序、桶排序 二、枚举 三、二分查找与二分答案 四、搜索(DFS) DFS(DFS基础、回溯、剪枝、记忆化) 1.DFS算法(深度优先搜索算法) 深度优先搜…

【网络面试篇】其他面试题——Cookie、Session、DNS、CDN、SSL/TLS、加密概念

目录 一、HTTP 相关问题 1. Cookie 和 Session 是什么? (1)Cookie (2)Session 2. Cookie 的工作原理? 3. Session 的工作原理? 4. Cookie 和 Session 有什么区别? 二、其他问…

隧道论文阅读2-采用无人融合扫描数据的基于深度学习的垂直型隧道三维数字损伤图

目前存在的问题: 需要开发新的无人测量系统测量垂直隧道图像数据量巨大,基于深度学习完成损伤评估跟踪获取图像位置的困难,对大型基础设施感兴趣区域(roi)的2d和3d地图建立进行了研究,对整个目标结构的损伤定位仍然具有挑战性。为…

CCF-A类 HPCA 2025 重磅揭晓:录取数据公布

近日,第31届国际计算机体系结构领域顶级会议HPCA (International Symposium on High Performance Computer Architecture) 正式发布了2025年会议的录用通知!本届会议共收到了534 篇提交论文,其中,112篇论文被接收,整体…

Linux应用——线程池

1. 线程池要求 我们创建线程池的目的本质上是用空间换取时间,而我们选择于 C 的类内包装原生线程库的形式来创建,其具体实行逻辑如图 可以看到,整个线程池其实就是一个大型的 CP 模型,接下来我们来完成它 2. 整体模板 #pragma …

IDM扩展添加到Edge浏览器

IDM扩展添加到Edge浏览器 一般情况下,当安装IDM软件后,该软件将会自动将IDM Integration Module浏览器扩展安装到Edge浏览器上,但在某些情况下,需要我们手动安装,以下为手动安装步骤 手动安装IDM扩展到Edge浏览器 打…

docker 拉取MySQL8.0镜像以及安装

目录 一、docker安装MySQL镜像 搜索images 拉取MySQL镜像 二、数据挂载 在/root/mysql/conf中创建 *.cnf 文件 创建容器,将数据,日志,配置文件映射到本机 检查MySQL是否启动成功: 三、DBeaver数据库连接 问题一、Public Key Retrieval is not allowed 问题…

深入探索Waymo自动驾驶技术发展:从DARPA挑战赛到第五代系统的突破

引言 自动驾驶技术正引领着未来出行方式的革命,而Waymo作为全球自动驾驶领域的先锋,始终走在技术发展的最前沿。本文基于Waymo联席CEO德米特里多尔戈夫(Dmitri Dolgov)在No Priors节目中的访谈,全面介绍Waymo的技术发展…

鸿蒙移动应用开发-------初始arkts

一. 什么是arkts ArkTS是HarmonyOS优选的主力应用开发语言。 ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,保持了TS的基本风格,同时通过规范定义强化开发期静态检查和分析,提升程序执行稳定性和…