JavaScript函数

函数是 JavaScript 语言中的一种基本数据类型，可以被定义、调用和传递参数。在 JavaScript 中，函数有两种类型：函数声明和函数表达式

函数声明：

function functionName(parameter1, parameter2, ..., parameterN) {
   // 操作代码 
   return result;
}

函数表达式：

var functionName = function(parameter1, parameter2, ..., parameterN) {
  // 操作代码 
  return result;
};

在 JavaScript 中，函数也可以作为对象的成员，称为“方法”。在实例化对象时，可以将函数定义为其方法。

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

fullName() 函数被定义为 person 对象的方法，可以通过调用 person.fullName() 进行访问。

实例化一个对象时，可以使用构造函数创建。

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  }
}

var person1 = new Person("John", "Doe");
var person2 = new Person("Jane", "Doe");

模板字符串

在 JavaScript 中，模板字符串（template string）是一种特殊的字符串，它支持嵌入表达式和变量。使用模板字符串可以轻松地创建动态的字符串，而无需使用字符串连接符和转义字符。模板字符串是用反引号（`）包裹的字符串。

const name = "Alice";
const age = 25;
const location = "New York";

const message = `My name is ${name}, I'm ${age} years old, and I live in ${location}.`;

console.log(message);

模板字符串还支持多行字符串。在普通字符串中，如果想要换行，需要使用 \n 转义字符，但是在模板字符串中，可以直接换行

在 JavaScript 中，可以使用模板字符串（template string）来构建带有变量和表达式的字符串。在模板字符串中，使用 ${expression} 语法可以插入表达式的值。因此，可以使用模板字符串来动态生成 HTML 表格中的单元格。

// 创建一个表格
var table = "<table>";

// 外部循环用于生成表格的每一行
for (var i = 1; i <= 10; i++) {
  // 创建当前行的开头
  table += "<tr>";
  
  // 内部循环用于在当前行中生成每个单元格
  for (var j = 1; j <= 10; j++) {
    // 生成当前单元格的 HTML 代码
    var cell = `<td style='border:1px solid black'>${j}x${i}=${i*j} </td>`;
    // 将单元格代码添加到当前行中
    table += cell;
  }
  
  // 创建当前行的结尾
  table += "</tr>";
}

// 创建表格的结尾
table += "</table>";

// 将表格添加到 HTML 页面中的某个元素中
document.getElementById("table-container").innerHTML = table;

使用了模板字符串来动态生成每个单元格的 HTML 代码。${j}x${i}=${i*j} 表达式中的变量 j 和 i 分别表示当前单元格所在的列和行号，${i*j} 表示它们的乘积。最终生成的 HTML 代码如下：

<table>
  <tr>
    <td style='border:1px solid black'>1x1=1 </td>
    <td style='border:1px solid black'>2x1=2 </td>
    <td style='border:1px solid black'>3x1=3 </td>
    <!-- ... -->
  </tr>
  <tr>
    <td style='border:1px solid black'>1x2=2 </td>
    <td style='border:1px solid black'>2x2=4 </td>
    <td style='border:1px solid black'>3x2=6 </td>
    <!-- ... -->
  </tr>
  <!-- ... -->
</table>