SAP Fiori开发中的JavaScript基础知识2 - 变量，操作符，值，类型

1. JavaScript代码示例

在介绍JavaScript具体语法前，让我们先看一段在Web应用程序过程中的JS代码片。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>First JavaScript Application!</title><script src="js/myExternal.js" /><script>console.log("JavaScript is running!");</script></head>
<body>
</body>

上面示例中，在 script 标签间的代码即为JavaScript代码。JavaScript代码可以直接嵌入到HTML文件中（HTML5中，type属性不再强制）；也可以独立附加到.js文件中，通过src属性进行引用（支持相对路径和绝对路径）。

对于JavaScript的语法，让我从一个最简单的变量赋值表达式作为开始学习的起点。让我们一起看一看下面这个表达式中所包含的信息。

var a = 2 * b;

在这个表达式中，包含了以下几个元素：

  • 关键字：var
  • 变量：a， b
  • 数值：2
  • 操作符：= ， *
  • 表达式：
    • 数值表达式：2
    • 变量表达式：b
    • 算术表达式： 2 * b
    • 赋值表达式： a = 2 * b

接下来，让我们分别介绍这些元素。

2 变量

JavaScript 是一种动态类型语言，这意味着你不需要提前声明变量的类型，系统会在运行时自动判断。

使用 var，let 或 const 关键字来声明变量。 变量名需要以 [a-zA-Z]，$ 或 _ 开头。

以下是一些例子：

var name;  // 声明一个名为 "name" 的变量
let age;   // 声明一个名为 "age" 的变量
const pi;  // 声明一个名为 "pi" 的常量

注意，使用 const 声明的是常量，一旦赋值后，其值就不能再改变。

你也可以在声明变量的同时给它赋值：

var name = "John";	 // 声明一个名为 "name" 的变量，并赋值为 "John"
let age = 20; 		 // 声明一个名为 "age" 的变量，并赋值为 20
const pi = 3.14;	 // 声明一个名为 "pi" 的常量，并赋值为 3.14

如果你想改变一个变量的值，你可以直接给它赋一个新的值：

name = "Jane";  	// 改变 "name" 的值为 "Jane"
age = 30;		    // 改变 "age" 的值为 30

但是，你不能改变一个常量的值：

pi = 3.14159; // 这会抛出一个错误，因为 "pi" 是一个常量，其值不能改变

注意，JavaScript 是一种动态类型语言，这意味着你不需要提前声明变量的类型，系统会在运行时自动判断。例如，你可以给一个变量先赋一个字符串值，然后再赋一个数字值：

var x = "hello";	 // "x" 是一个字符串
x = 10; 			// 现在 "x" 是一个数字

2.1 区分 var 与 let

在 JavaScript 中，var 和 let 都是用来声明变量的关键字，但它们之间有一些重要的区别：

作用域：var 声明的变量具有函数作用域，这意味着 var 声明的变量只在声明它的函数内部（全局作用域）可见。而 let 声明的变量具有块级作用域，这意味着 let 声明的变量只在声明它的代码块内部可见。

function varTest() {var x = 1;if (true) {var x = 2;  // 同样的变量!console.log(x);  // 2}console.log(x);  // 2
}function letTest() {let x = 1;if (true) {let x = 2;  // 不同的变量console.log(x);  // 2}console.log(x);  // 1
}

变量提升：var 声明的变量会被提升到它们所在的函数或全局作用域的顶部。这意味着你可以在声明变量之前使用它，而它的值会是 undefined。而 let 声明的变量不会被提升，如果你在声明变量之前使用它，会抛出一个错误。

console.log(x); // undefined
var x = 5;console.log(y); // ReferenceError: y is not defined
let y = 5;

重复声明：在同一个作用域中，var 允许你多次声明同一个变量。而 let 不允许你在同一个作用域中多次声明同一个变量。

var x = 1;
var x = 2; // 没有问题let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

总的来说，let 提供了更好的变量作用域控制，更严格的声明规则，以及更好的错误检查，因此在现代的 JavaScript 开发中，let通常是首选的变量声明关键字。

2.2 变量的命名规范

在BAS中开发Fiori应用时，自动生成的JavaScript文件中的变量是遵循了一定的命名规范的。建议在开发JavaScript代码时，遵循相同的命名规范。

  • 使用驼峰命名法
  • 私有变量以下划线_开头
  • 变量类型虽然不是强制的，但建议标记对应的类型
    • 整型（Integer）: iVariable
    • 浮点型（Float）: fVariable
    • 布尔型（Boolean）: bVariable
    • 字符串型（String）: sVariable
    • 数组（Array）: aVariable
    • 对象（Object）: oVariable
    • 函数（Function）: fnFunction
    • Map和关联数组（Associated array）: mProperties

3 操作符

在 JavaScript 中，有许多不同类型的操作符，包括

  • 赋值操作符：用于给变量赋值。例如 =，+=，-=，*=，/= 等。

  • 算术操作符：用于执行数学运算。例如 +，-，*，/，%（取余），++（递增），–（递减）等。

  • 比较操作符：用于比较两个值。

   例如:   ==（等于），!=（不等于），===（严格等于），!==（严格不等于），>（大于），<（小于），   >=（大于或等于），<=（小于或等于）等。

  • 逻辑操作符：用于执行逻辑运算。例如 &&（逻辑与），||（逻辑或），!（逻辑非）等。

  • 条件（三元）操作符：由问号 ? 和冒号 : 组成，用于执行基于条件的操作。例如 condition ? exprIfTrue :
    exprIfFalse。

  • 类型操作符：例如 typeof（返回一个值的类型），instanceof（测试一个对象是否是一个类的实例）等。

  • 位操作符：用于直接操作一个数的二进制位。例如
    &（按位与），|（按位或），^（按位异或），~（按位非），<<（左移），>>（有符号右移），>>>（无符号右移）等。

  • 字符串连接操作符:+

  • 其他操作符：还有一些其他的操作符，如逗号操作符 ,，void 操作符 void，delete 操作符 delete，in 操作符 in，new 操作符 new 等。

下面是使用这些操作符操作变量的一些简单的例子：

var a = 2, b = 3;  //变量声明赋值a = 2 * b; 		  //数学运算赋值b += 4;           //数学运算赋值a++;              //自增a === b;         //严格等于a == 0;          //等于a >= b;          //大于等于a || b;           //逻辑或"abc" + "def"     //字符串拼接

在 JavaScript 中，== 和 === 都是比较操作符，但它们的比较方式有所不同：

== 是等于操作符，它会进行类型转换，如果两个操作数的类型不同，它会尝试将它们转换为相同的类型，然后进行比较。

5 == "5"            // true，因为在比较前，字符串 "5" 被转换为了数字 5
null == undefined  // true，因为在比较前，null 和 undefined 被认为是相等的

=== 是严格等于操作符，它不会进行类型转换，如果两个操作数的类型不同，它会直接返回 false。

5 === "5"           // false，因为数字 5 和字符串 "5" 是不同的类型
null === undefined  // false，因为 null 和 undefined 是不同的类型

因此，当你需要比较两个值是否完全相等（包括类型和值）时，应该使用 ===。当你不关心两个值的类型，只关心它们的值是否相等时，可以使用 ==。但是，由于 == 的类型转换规则可能会导致一些意想不到的结果，因此在大多数情况下，推荐使用 ===。

4 值和类型

在JavaScript中，值是有类型的，变量是没有类型的。在 JavaScript 中，有以下几种基本的数据类型：

  • Number：表示数字，可以是整数或浮点数，例如：10，15.5。

  • String：表示文本（或字符串），例如：“Hello”，‘World’。

  • Boolean：表示逻辑值，可以是 true 或 false。

  • Null：表示一个空值，只有一个值，即 null。

  • Undefined：表示未定义的值，当一个变量被声明但没有赋值时，它的值就是 undefined。

  • Symbol：表示唯一的值，主要用于创建对象的唯一属性名。

除了这些基本类型，JavaScript 还有一种复杂的数据类型：

  • Object：表示一个对象，可以包含多个键值对。对象的键是字符串，值可以是任何类型的数据。
  • Function：函数类型

例如：

var num = 10;           // Number
var str = "Hello";      // String
var bool = true;        // Boolean
var nothing = null;     // Null
var notAssigned;        // Undefined
var sym = Symbol("id"); // Symbolvar obj = {             // Objectname: "John",age: 30
};

在JavaScript中，可以使用 typeof 操作符来检查一个值的类型，其将返回一个string类型的变量，其中包含着这个值的类型。

typeof num; 		// "number"
typeof str; 		// "string"
typeof bool; 		// "boolean"
typeof nothing; 	// "object"
typeof notAssigned; // "undefined"
typeof sym; 		// "symbol"
typeof obj; 		// "object"

注意，使用 typeof 时，Array和Date是无法检查的，对于null，其会被看做是object类型。

5. 小结

本文介绍了JavaScript语言中最基本的概念，包括变量，操作符，值，类型。与此同时，分享了在SAP Fiori开发过程中，JavaScript代码应当遵循的变量命名规则。希望对你有帮助。

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

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

相关文章

webpack proxy工作原理？为什么能解决跨域?

webpack proxy工作原理？为什么能解决跨域?

一、是什么 webpack proxy&#xff0c;即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题&#xff08;浏览器安全策略限制&#xff09; 想要实现代理首先需要一个中间服务器&#xff0c;webpac…
阅读更多...
代码随想录算法训练营Day35|LC860 柠檬水找零LC406 根据身高重建队列LC452 用最少数量的箭引爆气球

代码随想录算法训练营Day35|LC860 柠檬水找零LC406 根据身高重建队列LC452 用最少数量的箭引爆气球

一句话总结&#xff1a;身高队列看起来不简单&#xff0c;实际上也很难。 原题链接&#xff1a;860 柠檬水找零 简单贪心思想即可。5元时加入cnt5&#xff0c;10元时cnt10&#xff0c;cnt5--&#xff0c; 20元时则优先找零10元再找零5元&#xff0c;这样最后判断是否在一次找零…
阅读更多...
超全整理，软件测试-性能测试流程汇总，看这一篇就够了...

超全整理，软件测试-性能测试流程汇总，看这一篇就够了...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能测试&#xf…
阅读更多...
Redis 教程系列之Redis 客户端连接(八)

Redis 教程系列之Redis 客户端连接(八)

Redis 通过监听一个 TCP 端口或者 Unix socket 的方式来接收来自客户端的连接&#xff0c;当一个连接建立后&#xff0c;Redis 内部会进行以下一些操作&#xff1a; 首先&#xff0c;客户端 socket 会被设置为非阻塞模式&#xff0c;因为 Redis 在网络事件处理上采用的是非阻塞…
阅读更多...
2024年蓝牙耳机怎么选？五大爆火真无线蓝牙耳机推荐大公开！

2024年蓝牙耳机怎么选？五大爆火真无线蓝牙耳机推荐大公开！

​随着科技的进步&#xff0c;越来越多的用户倾向选择无线蓝牙耳机&#xff0c;摆脱有线耳机的束缚&#xff0c;享受更加自由的音乐体验。为了帮助大家选购到适合自己的蓝牙耳机&#xff0c;我整理了一些目前市面上我个人认为性能优异的款式&#xff0c;与大家分享。 一、蓝牙耳…
阅读更多...
封装的charts使用 vue2

封装的charts使用 vue2

//组件 <template><div ref"chartRef" class"echart"></div> </template><script> import * as echarts from echartsexport default {data() {return {chart: null}},methods: {init() {if (!this.chart) {this.chart ech…
阅读更多...
共享旅游卡见证旅游市场的活力与魅力！这个财富风口你抓住了吗？

共享旅游卡见证旅游市场的活力与魅力！这个财富风口你抓住了吗？

共享旅游卡&#xff0c;探索旅游市场新活力&#xff0c;捕捉财富风口 暑期旅游热潮涌动&#xff0c;中国旅游研究院预测&#xff0c;今年暑期将成为五年来最为火爆的旅游季节。在6月至8月期间&#xff0c;国内旅游人数预计占全年出游总人数的近三成&#xff0c;旅游收入也有望…
阅读更多...
typeScript5（元组）

typeScript5（元组）

数组一般由同种类型的值组成&#xff0c;但有时我们需要在单个变量中存储不同类型的值&#xff0c;这时候我们就可以使用元组。在 JavaScript 中是没有元组的&#xff0c;元组是 TypeScript 中特有的类型&#xff0c;其工作方式类似于数组。 元组最重要的特性是可以限制数组元…
阅读更多...
龙哥风向标20240326 GPT拆解

龙哥风向标20240326 GPT拆解

视频号刷到一个便携折叠屏&#xff0c;直击商务用户群体痛点 盈利点&#xff1a;利用视频号平台上商务用户群体的需求&#xff0c;推出便携折叠屏产品&#xff0c;吸引高客单的商务用户群体&#xff0c;同时可以考虑拓展海外市场。 操作步骤&#xff1a; 通过视频号平台了解商…
阅读更多...
通科技新品亮相：4K60编解一体，USB透传无忧

通科技新品亮相：4K60编解一体，USB透传无忧

在信息化快速发展的今天&#xff0c;音视频技术的需求与应用场景日益丰富&#xff0c;特别是在对视频画质和实时性要求极高的领域中&#xff0c;如军警、公安、金融等&#xff0c;对音视频处理设备的性能要求更为严格。为满足这些高端应用场景的需求&#xff0c;视通科技紧跟时…
阅读更多...
【MySql】MySQL表的结构

【MySql】MySQL表的结构

MySQL表的结构通常包含以下几个部分&#xff1a; 表名&#xff1a; 每个表都有一个唯一的名称&#xff0c;用于标识这个表。 字段&#xff1a; 表中的每一列被称为字段&#xff0c;每个字段都有一个名称和数据类型。如姓名、年龄、编号等。 记录&#xff1a; 表中的每一行被称…
阅读更多...
【Node.js从基础到高级运用】十八、Node.js的安全性加固

【Node.js从基础到高级运用】十八、Node.js的安全性加固

引言 在Web开发中&#xff0c;安全性是一个不可忽视的话题。Node.js作为一个流行的后端平台&#xff0c;同样需要关注各种潜在的安全威胁&#xff0c;并采取措施加以防御。本文将介绍如何在Node.js应用中防御常见的Web攻击&#xff0c;以及如何使用安全相关的中间件来加固安全性…
阅读更多...
24.Python从入门到精通—函数 标准模块 包

24.Python从入门到精通—函数 标准模块 包

24.从入门到精通&#xff1a;__name__属性 dir(函数 标准模块 包 从一个包中导入* __name__属性dir() 函数标准模块包从一个包中导入* __name__属性 在Python中&#xff0c;每个模块&#xff08;module&#xff09;都有一个内置的属性name&#xff0c;用于表示模块的名称。这个…
阅读更多...
MySQL-1.数据库的基本操作

MySQL-1.数据库的基本操作

1. 数据库的基本操作 show databases; information_schema&#xff1a;信息图式&#xff0c;存储服务器管理数据库的信息 mysql&#xff1a;存放系统信息&#xff0c;用户名密码等 performance_schema&#xff1a;性能图式 sys&#xff1a;系统文件 1.1 创建数据库-studen…
阅读更多...
vue指令相关

vue指令相关

vue中有很多的指令像v-on、v-model、v-bind等是我们开发中常用的 常用指令 v-bind 单向绑定解析表达式 v-model 双向数据绑定 v-for 遍历数组/对象/字符串 v-on 绑定事件监听，可简写为@ v-show 条件渲染（动态控制节点是否存展示） v-if 条件渲染（动态控制节点是否存存在） v…
阅读更多...
Linux VFS机制详解

Linux VFS机制详解

在深入探讨Linux操作系统内部机制时&#xff0c;我们无法忽视一个关键的核心组件——Linux Virtual File System (VFS)。VFS作为Linux内核中的重要组成部分&#xff0c;其主要作用是在用户空间应用程序与内核中多样化的物理文件系统之间搭建起一座桥梁&#xff0c;提供了一个抽…
阅读更多...
套娃式大小AI群体导致AI觉醒吗？

套娃式大小AI群体导致AI觉醒吗？

一、“套娃式”AI训练 目前&#xff0c;我们所讨论的人工智能&#xff08;AI&#xff09;主要是基于机器学习和深度学习技术的算法系统。它们通过不断学习、优化和改进以完成特定任务&#xff0c;但并不具备自我意识或者独立的创造性思考能力&#xff0c;即“觉醒”。 “套娃式…
阅读更多...
RHCE作业：搭建web网站

RHCE作业：搭建web网站

综合练习&#xff1a; 请给openlab搭建web网站 网站需求&#xff1a; 1.域名访问网站 基于域名www.openlab.com可以访问网站内容为 welcome to openlab!!! 2.创建界面 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于www.openlab.com…
阅读更多...
Splashtop 荣获2024年 Globee® 卓越网络安全两大奖项

Splashtop 荣获2024年 Globee® 卓越网络安全两大奖项

2024年3月25日 加利福尼亚州库比蒂诺 Splashtop 在简化随处办公领域处于领先地位&#xff0c;我们自豪地宣布荣获全球卓越企业权威机构 Globee 奖。Splashtop 凭借其安全工作空间解决方案&#xff08;即插即用安全访问平台&#xff0c;使 IT 部门能够简化零信任的实施&#xf…
阅读更多...
算法笔记~—位运算

算法笔记~—位运算

目录 常见位运算&#xff1a; 1、基础位运算 2、对于一个数n。确定、修改这个数n二进制x位。 3、提取&#xff08;确定&#xff09;一个数n最右侧的1&#xff08;bit&#xff09;与干掉最右侧的1&#xff08;bit&#xff09; 4、异或运算律 5、位运算的优先级&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023