JavaScript 基础

什么是 JavaScript

• 运行在客户端的脚本语言：动态改变页面内容、网页外观；验证表单数据；响应事件
• 无需编译，由 JS 解释器逐行解释并执行
• 可以基于 Node.js 进行服务端编程
• 浏览器分为两部分
  • 渲染引擎：解析 HTML 和 CSS，如 Chrome 的 blink
  • JS 引擎：读取 JavaScript 代码，如 Chrome 的 V8
• JS 组成：ECMAScript 和 DOM 和 BOM

基本使用

• JS 使用 camelCase 书写标识符 (变量、函数、属性或函数参数的名称)
• 注释：// 单行注释 /* 这是多行注释 */
• 以分号结尾 ， C 语言风格代码块，用花括号 { }
• 三种书写方式
  • 行内式：写在元素标签内部 onclik=""
  • 内嵌式：写在 <script> 标签体中
  • 外部引入：在 <scritp> 开始标签中，src=""

输入输出

输入

const n = prompt()  // 浏览器弹出输入框，用户可以输入

输出

window.alert()  // 写入警告框
document.write()  // 写入 HTML 输出
S.innerHTML  // 写入 HTML 元素
S.innerText  // 写入 Text 元素
console.log()  // 写入浏览器控制台

变量

• 声明变量

  • var：声明的变量是全局变量，没有块作用域，在块内声明的变量，在块外也可访问；但是在函数内声明的，就是局部作用域 (函数作用域)，在外部不可访问
  • let：作用域为块作用域 (大括号内)，在函数之内，可重新赋值
  • const：块作用域，声明时必须赋值，不可重新赋值，但可以更改常量对象的属性

• 只声明不赋值，变量的值为 undefined

• 不声明直接赋值，会变成全局变量，不建议使用

• 变量可以用于保存任何类型的数据

• 使用习惯，const 优先，let 次之，尽量不使用 var

数据类型

• JavaScript 是弱类型，不提前声明变量类型；而且是动态类型，可变
• typeof var 返回变量类型字符串，不加括号；typeof 是一个操作符，不是函数
• typeof null 的结果是 object
• typeof 函数 的结果是 function
• 在 JavaScript 中，一切皆对象
• 分为原始值类型和引用数据类型

	typeof
Number	number
Boolean	boolean
String	string
BigInt	bigint
Symbol	symbol
Undefined	undefined
Null	object
Object	object function

/* ********** 原始值类型 ********** */
// 1.布尔型 Boolean
const a = true;
// 2.数字型 Number
const a = 18;
// 3.字符串型 String
const a = "hello";
// 4.未定义型 Undefined
const a;
// 5.空值 Null
const a = null;
// 6.符号 Symbol（ES6新增）
const sym = Symbol(str); // 表示独一无二的值
// 7.大数字 BigInt（ES6新增）

/* ********** 对象类型（严格来说只有一种，object） ********** */
// 1.数组 Array
const a = [1, 2, 3, 4];
// 2.对象 Object
const a = { name: 'John', age: 34 };
// 3.函数 Function
const a = function() { console.log("hello") };

运算符

/* ********** 算数运算符 ********** */
// 取余操作符
const a = 10 % 3; // 1

// 指数操作符
const a = 2 ** 3; // 2 的 3 次方

// 前置递增 ++num  --num 类似于 num = num + 1 先加一，再返回值
// 后置递增 num++ num-- 先返回原值，再加一
let i = 1
console.log(i++ + ++i + i)  // 1 + 3 + 3

/* ********** 比较运算符 ********** */
// == 会把字符串自动转换为数字，值相等即可
// === 全等，类型和值都要相等

/* ********** 逻辑运算符 ********** */
// 运算符两边都是布尔值
a && b // 与 全真则真
a || b // 或 一真则真
!a // 非

/* ********** 空值合并运算符 ********** */
const result = a ?? b;
// 如果 a 的值为 null 或 undefined，则返回 b；否则返回 a 的值

/* ********** 可选链操作符 ********** */
a?.b?.c

短路运算

正常的逻辑与或运算，参与的是布尔值；当表达式或值参与逻辑运算时，会触发短路运算 当有多个表达式 (值) 时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式值

• 表达式1 && 表达式2 如果表达式1的值为真，则返回表达式2，如果为假，则返回表达式1
• 表达式1 || 表达式2 如果表达式1的值为真，则返回表达式1，如果为假，则返回表达式2