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

最新推荐文章于 2024-11-05 22:07:06 发布

十年铸器

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量1.4k

点赞数 48

分类专栏： SAPUI5 文章标签： javascript SAP Fiori 前端

本文链接：https://blog.csdn.net/nkGavinGuo/article/details/137014070

版权

SAPUI5 专栏收录该内容

51 篇文章 40 订阅

订阅专栏

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"); // Symbol

var obj = {             // Object
  name: "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"