JavaScript基础语法（1、基础知识）

JavaScript基础语法

来源：现代JavaScript教程

第一部分 JavaScript基础知识

简介

JavaScript是一种编程语言，用这种编程语言写出来的程序叫做脚本。它们可以被直接写在网页的HTML中，在页面加载时自动执行。脚本被以纯文本的方式提供和执行，不需要特殊的准备或编译即可运行。JavaScript不仅可以在浏览器中执行（浏览器中嵌入了 JavaScript 引擎），也可以在服务端执行，甚至可以在任意搭载了 JavaScript 引擎 的设备中执行。

基础知识

1、变量命名

• 变量命名用let，var是较老的脚本中使用的。
• JavaScript 的变量命名有两个限制：
  • 变量名称必须仅包含字母、数字、符号 $ 和 _ 。
  • 首字符必须非数字。
• 命名区分大小写，name和NAME是两个不同的变量。
• 声明常量用const，常量不能被修改。通常使用大写字母和下划线来命名这些常量。如：const COLOR_RED = "#F00";
• JavaScript被称作“动态类型”的编程语言，即定义一个变量前一刻存储字符串类型数据，下一刻就可以把数字赋值给这个变量。（变量不会在被定义后，限制为某一数据类型）

2、数据类型

• JavaScript中有8种基本数据类型
  1. Number类型：代表整数和浮点数。特殊数值：Infinity、-Infinity 和 NaN也属于Number类型，Infinity表示∞，可通过除以0来得到； NaN由不正确或未定义的数学操作得到。
  2. BigInt类型：Number类型只能存储±(2 的53次方 -1) 范围内的值，BigInt表示任意长度的整数。
  3. String类型：
     • 在 JavaScript 中，有三种包含字符串的方式：双引号：“Hello”；单引号：‘Hello’；反引号：Hello。
     • 单引号和双引号几乎无差别，仅表示普通字符串
     • 反引号是 功能扩展 引号。它们允许我们通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字符串中。如：

       let name = "John";
       
       // 嵌入一个变量
       alert( `Hello, ${name}!` ); // Hello, John!
       
       // 嵌入一个表达式
       alert( `the result is ${1 + 2}` ); // the result is 3
       1
       2
       3
       4
       5
       6
       7

  4. Boolean类型：true/false
  5. null值：表示无、空、值未知。
  6. undefined值：表未被赋值。
  7. Object 类型：用于存储数据集合和更复杂的实体。
  8. Symbol 类型：用于创建对象的唯一标志符。
• typeof 运算符：返回参数的数据类型。

  //书写格式 typeof x  或者  typeof(x)均可
  typeof undefined // "undefined"
  typeof 0 // "number"
  typeof 10n // "bigint"
  typeof true // "boolean"
  typeof "foo" // "string"
  typeof Symbol("id") // "symbol"
  typeof Math // "object"  
  typeof null // "object"   这个输出结果是官方承认的typeof的错误
  typeof alert // "function"  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

3、交互：alert、prompt 和 confirm

• prompt函数接收两个参数，浏览器会弹出一个带有输入框的弹窗。

  result = prompt(title, [default]);
  //title显示给用户的文本，[default]可选参数，输入框内的默认值
  //result获取用户填入输入框的值，如果取消输入，result用null作为返回值
  //举例：
  let age = prompt('How old are you?', 100);
  alert(`You are ${age} years old!`); // You are 100 years old!
  1
  2
  3
  4
  5
  6

• confirm函数，弹出一个带有问题的弹框，点击确定返回true，点击取消返回false。

  result = confirm(question);
  //举例：
  let isBoss = confirm("Are you the boss?");
  alert( isBoss ); // 如果“确定”按钮被按下，则显示 true
  1
  2
  3
  4

4、类型转换

有三种常用的类型转换：转换为 string 类型、转换为 number 类型和转换为 boolean 类型。

• 字符串转换 —— 转换发生在输出内容的时候，也可以通过 String(value) 进行显式转换。原始类型值的 string 类型转换通常是很明显的。
• 数字型转换 —— 转换发生在进行算术操作时，也可以通过 Number(value) 进行显式转换。
  数字型转换遵循以下规则：

  值	变成……
  undefined	NaN
  null	0
  true / false	1/0
  string	“按原样读取”字符串，两端的空白字符（空格、换行符 \n、制表符 \t 等）会被忽略。空字符串变成 0。转换出错则输出 NaN。

• 布尔型转换 —— 转换发生在进行逻辑操作时，也可以通过 Boolean(value) 进行显式转换。
  布尔型转换遵循以下规则：

  值	变成……
  0, null, undefined, NaN, “”	false
  其他值	true

【注】： 对 “0” 和只有空格的字符串（比如：" "）进行布尔型转换时，输出结果为 true。

5、三元运算符和空值合并运算符

• 三元运算符 a?b:c，a部分为true的话执行b部分，否则执行c部分。
• 空值合并运算符（新增的特性），当一个值A既不是null，也不是undefined，我们称为已定义。A？？B的结果是，若A已定义，结果为A，若A未定义，结果为B

  //示例：
  let user;
  alert(user ?? "匿名"); // 匿名（user 未定义）
  let user = "John";
  alert(user ?? "匿名"); // John（user 已定义）
  1
  2
  3
  4
  5

• 空值合并运算符区别于逻辑运算符中的或

  let firstName = null;
  let lastName = null;
  let nickName = "Supercoder";
  
  // 显示第一个已定义的值：
  alert(firstName ?? lastName ?? nickName ?? "匿名"); // Supercoder
  // 显示第一个真值：
  alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
  // || 无法区分 false、0、空字符串 "" 和 null/undefined。它们都是假值
  //	如果我们只想在变量的值为 null/undefined 时使用默认值，就需要用？？
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

6、一次跳出多层嵌套循环

break 语句跳出循环至标签处：

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`Value at coords (${i},${j})`, '');
    // 如果是空字符串或被取消，则中断并跳出这两个循环。
    if (!input) break outer; // (*)
    // 用得到的值做些事……
  }
}
alert('Done!');
//break outer 向上寻找名为 outer 的标签并跳出当前循环。
1
2
3
4
5
6
7
8
9
10

continue 指令也可以与标签一起使用。在这种情况下，执行跳转到标记循环的下一次迭代。

7、switch匹配时按照 “===” ， 不是 “ == ”