【JS学习】JavaScript的基本用法

1. JavaScript概述

JavaScript是一种高级、解释型的编程语言，通常用于在网页上实现动态交互和改善用户体验。它是一种脚本语言，可以嵌入到HTML中，并由浏览器解释执行。JavaScript广泛用于前端开发，但也可以用于服务器端开发（Node.js等）。

2. 变量命名规范

JavaScript 变量的命名规范是一种良好的编程实践，它有助于代码的可读性和维护性。

• 驼峰命名法（Camel Case）：在驼峰命名法中，变量名的第一个单词小写，后面的单词首字母大写，没有空格或其他字符。

let myVariable = 10;

• 避免使用单个字符： 除非是临时变量或循环计数器，应该避免使用单个字符作为变量名，以提高代码的可读性。

// 不好的例子
let x = 5;

// 好的例子
let itemCount = 5;

• 有意义的命名： 变量名应该反映其所表示的数据或功能，以提高代码的可理解性。

// 不好的例子
let a = 100;

// 好的例子
let maximumScore = 100;

• 避免使用保留字： 不要使用 JavaScript 的保留字（例如 function、if、else 等）作为变量名。

// 不好的例子
let function = 10;

// 好的例子
let myFunction = 10;

• 常量全大写： 如果变量是常量，即其值在程序执行期间不会改变，可以使用全大写字母和下划线来命名。

const MAX_COUNT = 100;

• 下划线分隔（Snake Case）： 在一些代码风格中，变量名使用下划线 _ 进行分隔，这种风格被称为下划线分隔。

let my_variable = 10;

• 避免使用特殊字符： 尽量避免在变量名中使用特殊字符，以免引起混淆或错误。

// 不好的例子
let $%& = 5;

// 好的例子
let totalAmount = 5;

3. 变量声明

JavaScript中有三种声明变量的方式，分别是使用 var、let 和 const 关键字。它们的使用方式和作用域略有不同。

• var：是在ES5（ECMAScript 5）中引入的关键字。var 声明的变量属于函数作用域（function scope），而不是块级作用域（block scope）。如果在函数内使用 var 声明变量，该变量在函数内都是可见的，而在函数外则不可见。

function example() {
    var x = 10;
    if (true) {
        var y = 20;
        console.log(x);  // 10
    }
    console.log(y);  // 20
}

• let：是在ES6中引入的关键字，它引入了块级作用域的概念。使用 let 声明的变量的作用域限制在其代码块内。

function example() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x);  // 10
    }
    // console.log(y);  // 由于 y 在块级作用域外，这里会报错
}

• const：也是在ES6中引入的关键字，用于声明常量。常量在声明后不能被重新赋值，并且也具有块级作用域。

const pi = 3.14;
// pi = 3;  // 试图修改常量会导致错误

if (true) {
    const foo = 'bar';
    console.log(foo);  // 'bar'
}
// console.log(foo);  // 由于 foo 在块级作用域外，这里会报错

4. 作用域与变量提升

4.1 作用域

JavaScript 中的作用域是指变量在代码中可访问的范围，即定义了变量在何处可以被引用或修改。作用域规定了变量的可见性和生命周期。JavaScript有两种主要的作用域：

• 全局作用域（Global Scope）： 全局作用域是整个程序的范围，定义在全局作用域中的变量在整个代码中都是可见的。在浏览器环境中，全局作用域通常是指整个页面，而在Node.js环境中，是指整个Node.js进程。

var globalVar = "I'm global!";

function example() {
    console.log(globalVar);  // 在函数内部可以访问全局变量
}

example();
console.log(globalVar);  // 在函数外部也可以访问全局变量

• 局部作用域（Local Scope）： 局部作用域是在函数内部声明的变量的作用域，也叫函数作用域。变量在这种作用域中只能在函数内部访问，称为局部变量。

function example() {
    var localVar = "I'm local!";
    console.log(localVar);  // 在函数内部可以访问局部变量
}

example();
// console.log(localVar);  // 在函数外部不可访问局部变量，这里会报错

• JavaScript 的作用域还涉及到词法作用域（Lexical Scope），也叫静态作用域。它是指变量的作用域是在代码写的时候就确定的，而不是在运行时确定的。JavaScript采用的是词法作用域。

var globalVar = "I'm global!";

function outer() {
    var outerVar = "I'm outer!";

    function inner() {
        var innerVar = "I'm inner!";
        console.log(globalVar);  // 全局变量在任何地方都可见
        console.log(outerVar);  // 外部函数的变量在内部函数可见
        console.log(innerVar);  // 自己的变量自然可见
    }

    inner();
    // console.log(innerVar);  // 在外部函数无法访问内部函数的变量，这里会报错
}

outer();
// console.log(outerVar);  // 在外部函数无法访问内部函数的变量，这里会报错
// console.log(innerVar);  // 在外部函数无法访问内部函数的变量，这里会报错

4.2 变量提升

• var 变量提升：通过 var 关键字变量声明会被提升到函数或全局作用域的顶部。这意味着在函数内部，无论变量是在函数体的哪个位置声明的，都会被视为在函数顶部声明的。注意，变量声明可以被提升，但是赋值不会被提升。

function example() {
    console.log(x);  // undefined，变量提升，但尚未赋值
    var x = 10;
    console.log(x);  // 10
}

let 和 const 关键字声明的变量与 var 有一些不同之处，其中之一就是它们的变量提升行为。

• let 变量提升： 使用 let 声明的变量在声明之前是不可访问的，这称为"暂时性死区"（Temporal Dead Zone，简称 TDZ）。变量提升仍然发生，但在进入声明语句之前，任何引用该变量的操作都会抛出一个错误。

console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 10;

在上面的例子中，尽管存在变量提升，但在 let x = 10; 之前访问 x 会抛出错误，因为此时 x 处于暂时性死区。

• const 变量提升： const 也存在变量提升，但与 let 不同，使用 const 声明的变量必须在声明时进行初始化，而且一旦初始化就不能再被修改。在声明语句之前访问 const 变量也会引发暂时性死区。

console.log(y);  // ReferenceError: Cannot access 'y' before initialization
const y = 20;

虽然 let 和 const 会进行变量提升，但由于暂时性死区的存在，我们不能在声明之前访问它们，而是应该在声明之后再使用。这种行为有助于提高代码的可靠性，并防止在变量还未初始化的情况下使用它们。

5. 数据类型

JavaScript 是一种动态类型的语言，它支持多种数据类型。动态类型特性允许变量在运行时动态改变其类型，因此可以在同一个变量中存储不同类型的值。JavaScript 中常见的数据类型主要有三类，基本数据类型、复合数据类型、特殊数据类型。

5.1 基本数据类型（Primitive Types）

• Number（数字）: 用于表示数字，包括整数和浮点数。

let num = 42;
let floatNum = 3.14;

• String（字符串）: 用于表示文本。

let str = "Hello, World!";

• Boolean（布尔）: 用于表示逻辑值，只能是 true 或 false。

let isTrue = true;
let isFalse = false;

• Undefined（未定义）: 表示变量声明了但未赋值时的默认值。

let undefinedVar;

• Null（空）: 表示变量的值为空或不存在。

let nullVar = null;

• Symbol（符号）: ES6 中引入的数据类型，用于创建唯一的标识符。

let sym = Symbol("unique");

5.2 复合数据类型（Composite Types）

• Object（对象）: 用于存储键值对。

let person = {
  name: "John",
  age: 30,
  gender: "male"
};

• Array（数组）: 用于按顺序存储多个值。

let numbers = [1, 2, 3, 4, 5];

• Function（函数）: 用于封装可执行的代码块。

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

• Date（日期）: 用于表示日期和时间。

let currentDate = new Date();

• RegExp（正则表达式）: 用于匹配字符串的模式。

let pattern = /abc/;

5.3 特殊数据类型

• BigInt（大整数）: 用于表示任意精度的整数。

let bigIntNum = BigInt(9007199254740991);

• 特殊值:
  • NaN（非数值）: 表示不是一个合法数字。
  • Infinity（正无穷）: 表示正无穷大。
  • -Infinity（负无穷）: 表示负无穷大。

6. 运算符

7. 类型转换

JavaScript 是一种弱类型语言，这意味着变量的数据类型可以在运行时自动转换，或者通过一些手动的类型转换操作来实现。类型转换主要分为隐式类型转换和显式类型转换两种。

7.1 隐式类型转换

在某些操作中，JavaScript 会自动进行类型转换，以满足操作的需求。这种转换是由 JavaScript 引擎在运行时自动完成的。

// 隐式类型转换
let num = 5 + "5"; // 字符串拼接，结果是 "55"
let sum = "10" - 5; // 数字运算，结果是 5

7.2 显式类型转换

开发者可以通过一些内建的函数或操作符来手动进行类型转换。

• 转换为字符串

let number = 42;
let str = String(number);

• 转换为数字

let strNum = "42";
let num = Number(strNum); // 结果是数字 42

• 转换为布尔值

let value = 0;
let bool = Boolean(value); // 结果是布尔值 false

• 使用 parseInt 和 parseFloat 进行字符串到数字的转换

let strNumber = "42.5";
let parsedNumber = parseFloat(strNumber);  // 结果是数字 42.5

• 手动进行类型转换

let x = "5";
let y = 10;
let result = x + y; // 结果是字符串 "510"

// 手动将字符串转换为数字
result = Number(x) + y; // 结果是数字 15

8. JS内置对象属性和方法

内置对象名称	属性名	作用
Object 对象	Object.prototype	通过该属性可以访问对象的原型
	Object.keys(obj)	返回一个包含对象自身的所有可枚举属性名称的数组
	Object.values(obj)	返回一个包含对象自身的所有可枚举属性值的数组
	Object.entries(obj)	返回一个包含对象自身的所有可枚举属性键值对的数组