Python武器库开发-前端篇之JavaScript基础语法(三十四)

前端篇之JavaScript基础语法(三十四)

JavaScript的三种引用方式

JavaScript的三种引用方式分别是：

内部引用（内联式）：将JavaScript代码嵌入到HTML页面中的<script>标签内部。例如：

<script type="text/javascript">
    // JavaScript代码
</script>

外部引用（链接式）：使用<script>标签的src属性引入外部的JavaScript文件。例如：

<script type="text/javascript" src="js/script.js"></script>

模块化引用（ES6模块化）：使用import和export关键字将JavaScript代码模块化，然后通过<script>标签的type属性设置为module来引入。例如：

<script type="module">
    import {
    
     func1, func2 } from './modules.js';
    // 使用 func1 和 func2 函数
</script>

JavaScript 的变量与类型

JavaScript是一种动态类型语言，变量的类型不需要显式地声明，而是在运行时根据赋值来推断其类型。JavaScript中有以下基本的数据类型：

数字(Number)：整数或浮点数。
字符串(String)：一串文本，用单引号(')或双引号(")括起来表示。
布尔(Boolean)：true或false。
空值(Null)：表示一个空对象指针，即该变量不指向任何对象。
未定义(Undefined)：表示变量未定义或未赋值。
对象(Object)：一种复合数据类型，由多个键值对组成。
数组(Array)：一种特殊的对象，由多个元素组成。
函数(Function)：一种可执行的对象，包含一段可重复使用的代码。

在JavaScript中，变量的类型可以通过typeof操作符来判断变量的类型。例如：

var a = 10;
console.log(typeof a); // 输出：number

var b = "hello";
console.log(typeof b); // 输出：string

var c = true;
console.log(typeof c); // 输出：boolean

var d = null;
console.log(typeof d); // 输出：object

var e;
console.log(typeof e); // 输出：undefined

另外，注意const关键字声明的变量是不可变的（immutable），一旦被赋值之后就无法修改。对于复杂类型（如对象和数组），虽然const声明的变量不可变，但是对象和数组中的成员可以修改。

JavaScript是一种弱类型语言，它的变量可以保存不同类型的数据。JavaScript的变量定义可以使用var、let和const等关键字。

var关键字定义的变量是全局变量，可以在函数内部、函数外部以及全局上下文中使用。但是，var定义的变量存在变量提升现象，即变量在声明之前就可以使用，这可能会导致一些意想不到的问题。

let和const关键字定义的变量是块级作用域变量，只能在定义它的块中使用。let定义的变量可以被重新赋值，而const定义的变量则不能被重新赋值。

var：声明的变量作用域是函数作用域或全局作用域。
let：声明的变量作用域是块作用域。
const：声明的变量是一个常量，一旦被赋值就不能再被修改，作用域也是块作用域。

JavaScript还支持自定义类型，可以使用构造函数来创建对象类型。例如：

function Person(name, age) {
    
    
  this.name = name;
  this.age = age;
}

let person = new Person("Tom", 20);
console.log(person.name); // Tom
console.log(person.age); // 20

JavaScript的输出方式

JavaScript可以通过多种方式输出结果，包括：

使用console.log()方法输出到控制台：

console.log('Hello, world!');

使用alert()方法弹出对话框输出：

alert('Hello, world!');

使用 document.write()：输出结果在浏览器窗口中显示。

<script>
    document.write('Hello, world!');
</script>

4.在浏览器开发工具的console面板中输入JavaScript代码并回车，直接输出结果：

'Hello, world!'

5.使用innerHTML属性将输出插入到HTML元素中，例如：

<p id="output"></p>
<script>
    document.getElementById('output').innerHTML = 'Hello, world!';
</script>

6.使用window.open()函数打开一个新窗口并输出信息：

window.open().document.write('Hello, world!');

注意：使用window.open()函数会被大多数浏览器拦截，应谨慎使用。

7.使用 prompt()：弹出一个对话框，让用户输入内容，并输出在对话框中：

var name = window.prompt("What's your name?");
console.log("Hello, " + name + "!");

JavaScript函数

JavaScript函数是一段可重复使用的代码块，用于完成指定任务。函数由一组语句组成，以关键字function开始，后接函数名称和一组括号。函数可以接受参数，也可以返回值。以下是一个简单的JavaScript函数示例：

function add(a, b) {
    
    
  return a + b;
}

console.log(add(2, 3)); // 输出 5

在上面的示例中，add是一个函数名称，它接受两个参数a和b，返回它们的和。console.log用于输出函数调用结果5。

JavaScript函数是一组执行特定任务的语句。它们是用于执行特定任务的独立代码块，可以在代码中重复使用。函数通常包括输入参数和返回值，但不一定都要有。定义函数时，必须给函数一个名称，并在需要时调用它。例如，以下是一个简单的JavaScript函数，它将两个数字相加并返回结果：

function addNumbers(a, b) {
    
    
  return a + b;
}

在上面的函数中，addNumbers是函数的名称，a和b是输入参数，return a + b是函数的返回值。要调用此函数，请使用以下代码：

var sum = addNumbers(2, 3);

在上面的代码中，将数字2和3作为输入参数传递给addNumbers函数，并将返回值赋值给变量sum。在这种情况下，sum将是5。

JavaScrip的分支

JavaScript中的分支是用于根据条件执行不同的代码路径的结构。JavaScript中有两种类型的分支 - if/else语句和switch语句。

if/else语句根据一个条件来判断是否执行某段代码。如果条件为真，则执行if语句块中的代码；如果条件为假，则跳过if语句块中的代码。if语句还可以与else语句一起使用，以处理条件为假的情况：

语法：

if (condition) {
    
    
  // 执行条件为真时的代码
} else {
    
    
  // 执行条件为假时的代码
}

示例：

let age = 18;

if (age >= 18) {
    
    
  console.log("你已经成年了！");
} else {
    
    
  console.log("你还未成年！");
}

switch语句，switch语句基于一个表达式的值来执行不同的代码块。如果表达式与某个特定值匹配，则执行与该值关联的代码块。如果没有匹配的值，则执行default代码块：

语法：

switch (expression) {
    
    
  case value1:
    // 执行值为value1时的代码
    break;
  case value2:
    // 执行值为value2时的代码
    break;
  default:
    // 执行所有其他情况下的代码
    break;
}

示例：

let day = "Wednesday";

switch (day) {
    
    
  case "Monday":
    console.log("今天是星期一！");
    break;
  case "Tuesday":
    console.log("今天是星期二！");
    break;
  case "Wednesday":
    console.log("今天是星期三！");
    break;
  default:
    console.log("今天是其他天！");
    break;
}

使用分支语句可以编写更具灵活性和可读性的代码，以根据不同的条件执行不同的操作。

JavaScrip的循环

JavaScript提供了多种循环方式，包括for循环、while循环、do…while循环和for…in循环。

for循环

for循环是JavaScript中最常见的循环结构，它的一般形式如下：

for (initialization; condition; increment/decrement) {
    
    
  // code to be executed
}

其中，initialization是循环变量的初始化，condition是循环条件，当条件为true时执行循环体，increment/decrement是循环变量的增量或减量。

例如，计算1到10的和：

var sum = 0;
for (var i = 1; i <= 10; i++) {
    
    
  sum += i;
}
console.log(sum); // 输出55

2.while循环

while循环先判断循环条件是否为true，如果为true，则执行循环体。它的一般形式如下：

while (condition) {
    
    
  // code to be executed
}

例如，计算1到10的和：

var sum = 0;
var i = 1;
while (i <= 10) {
    
    
  sum += i;
  i++;
}
console.log(sum); // 输出55

do…while循环

do…while循环先执行一次循环体，然后判断循环条件是否为true，如果为true，则继续执行循环体。它的一般形式如下：

do {
    
    
  // code to be executed
} while (condition);

例如，计算1到10的和：

var sum = 0;
var i = 1;
do {
    
    
  sum += i;
  i++;
} while (i <= 10)
console.log(sum); // 输出55

for…in循环

for…in循环用于循环遍历对象的属性。它的一般形式如下：

for (variable in object) {
    
    
  // code to be executed
}

其中，variable是对象的属性名，object是要遍历的对象。

例如，遍历对象的属性：

var person = {
    
    name: "John", age: 30, city: "New York"};
for (var x in person) {
    
    
  console.log(x + ": " + person[x]);
}
/*
输出：
name: John
age: 30
city: New York
*/