JavaScript基本语法
一、变量及数据类型
1.变量
1.1.变量的定义方法
在JavaScript中，你可以使用var、let或const关键字来声明变量。其中，var声明的变量会提升（hoisting）到其作用域的顶部，而let和const（ES6及以后版本引入）声明的变量具有块级作用域，并且const声明的变量一旦赋值后不可重新赋值。
// 使用var声明变量
var name = "Alice";
// 使用let声明变量
let age = 30;
// 使用const声明常量（不可重新赋值的变量）
const PI = 3.14;
// PI = 3.14159; // 这行代码会抛出错误，因为PI是用const声明的
2.数据类型
2.1.基本数据类型
基本数据类型是值类型，它们的值直接存储在变量声明的位置。基本数据类型包括：
- String：字符串类型，用于表示文本数据。
- Number：数值类型，用于表示数字。
- BigInt（ES2020引入）：提供了一种方法来表示大于 2^53 - 1 的整数。
- Boolean：布尔类型，表示逻辑实体，只有两个值：
true和false。 - Undefined：表示一个变量被声明了，但没有被赋值。
- Null：表示一个空值，是唯一一个按字面量形式出现的基本数据类型。
- Symbol（ES6引入）：表示独一无二的值。
let text = "Hello, World!"; // String
let number = 42; // Number
let bigNumber = BigInt("123456789012345678901234567890"); // BigInt
let isDone = false; // Boolean
let nothing; // Undefined
let empty = null; // Null
let uniqueSymbol = Symbol("unique"); // Symbol
2.2.引用数据类型
引用数据类型是对象类型，它们的值存储在堆内存中，而变量中存储的是指向堆内存中该值的引用（或内存地址）。JavaScript中的引用数据类型包括：
- Object：普通对象，用于存储键值对集合。
- Array：数组，一种特殊的对象，用于存储有序集合。
- Function：函数，用于执行代码块。
- Date：日期对象，用于处理日期和时间。
- RegExp：正则表达式对象，用于文本搜索和替换。
- 以及其他内置对象，如Math、BigInt64Array、Float32Array等。
let person = {
name: "Bob",
age: 25
}; // Object
let numbers = [1, 2, 3, 4, 5]; // Array
function greet(name) {
console.log(`Hello, ${name}!`);
} // Function
let today = new Date(); // Date
let regex = /ab+c/; // RegExp
二、运算符和操作符
1.常用运算和操作符
1.1 算术操作符
算术操作符用于执行基本的数学运算，如加、减、乘、除等。
let a = 5;
let b = 3;
let sum = a + b; // 加法
let difference = a - b; // 减法
let product = a * b; // 乘法
let quotient = a / b; // 除法
let modulo = a % b; // 求余
console.log(sum); // 输出: 8
console.log(product); // 输出: 15
1.2 字符串操作符
JavaScript中的字符串操作符主要是加号+，但它在这里用作字符串连接符，而不是算术加法。
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // 使用加号连接字符串
console.log(fullName); // 输出: John Doe
1.3 布尔操作符
布尔操作符用于执行逻辑运算，如逻辑非（!）、逻辑与（&&）、逻辑或（||）。
let isLoggedIn = true;
let canVote = isLoggedIn && age >= 18; // 假设age是之前定义的变量
console.log(canVote); // 如果isLoggedIn为true且age>=18，则输出true
let hasPermission = !isLoggedIn; // 逻辑非
console.log(hasPermission); // 输出: false
1.4 一元操作符
一元操作符只操作一个操作数，比如递增（++）、递减（--）、逻辑非（!，前面已提）等。
let counter = 0;
counter++; // 递增
console.log(counter); // 输出: 1
counter--; // 递减
console.log(counter); // 输出: 0
1.5 关系比较操作符
关系比较操作符用于比较两个值，如大于（>）、小于（<）、等于（==）、严格等于（===）等。
let x = 5;
let y = 10;
console.log(x < y); // 输出: true
console.log(x === 5); // 输出: true，注意严格等于不会进行类型转换
1.6 对象操作符
对象操作符主要指的是点操作符（.）和方括号操作符（[]），用于访问对象的属性或方法。
let person = {
name: "Alice",
age: 30
};
console.log(person.name); // 输出: Alice
console.log(person["age"]); // 输出: 30
1.7.其他操作符
1.7.1. 条件（三元）操作符（? :）
条件（三元）操作符是JavaScript中唯一的三元操作符，它接受三个操作数，是JavaScript中实现简单条件判断的一种快捷方式。
let score = 85;
let grade = score >= 60 ? '及格' : '不及格';
console.log(grade); // 输出: 及格
1.7.2. 赋值操作符（=）
赋值操作符=用于将右侧表达式的值赋给左侧的变量。这是最基本也是最常用的操作符之一。
let count = 10;
console.log(count); // 输出: 10
count = count + 5; // 等价于 count += 5
console.log(count); // 输出: 15
1.7.3. 逗号操作符（,）
逗号操作符,用于在一条语句中执行多个操作（表达式），它从左到右计算每个操作数，并返回最后一个操作数的值。
let a = (1, 2, 3);
console.log(a); // 输出: 3，因为逗号操作符返回了最后一个表达式的值
let b = 5, c = 10; // 注意：这里的逗号不是逗号操作符，而是用于在同一行声明多个变量的分隔符
console.log(b); // 输出: 5
console.log(c); // 输出: 10
// 逗号操作符在函数参数或数组中的使用示例
function example(a, b) {
return a + b;
}
let result = example((1, 2), 3); // 逗号操作符在第一个参数内部被评估，但只传递了最后一个值（2）给函数
console.log(result); // 输出: 5，因为函数接收到的参数是2和3
// 逗号操作符在for循环中的使用
for (let i = 0, j = 10; i < 5; i++, j--) {
console.log(i, j);
}
// 这将输出一系列i和j的值，直到i不再小于5
在最后一个示例中，逗号操作符用于在for循环的初始化部分声明两个变量，并在每次迭代结束时同时更新它们的值。然而，在函数参数和数组字面量中的逗号（如example((1, 2), 3)和let a = (1, 2, 3);）实际上并不是逗号操作符的使用，而是语法上的分隔符。在这些情况下，逗号用于分隔参数或元素，而不是执行多个操作并返回结果
2.操作符常用方式
2.1 数据类型隐式转换
JavaScript在运算符操作中会进行隐式类型转换，这可能会导致一些非直观的结果。
console.log(1 == "1"); // 输出: true，因为字符串"1"被转换成了数字1
console.log(1 === "1"); // 输出: false，严格等于不会进行类型转换
2.2 数组和对象的字面量定义方法
数组和对象在JavaScript中通常使用字面量方式定义，非常直观和方便。
// 数组字面量
let numbers = [1, 2, 3, 4, 5];
// 对象字面量
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.firstName + " " + this.lastName);
}
};
person.greet(); // 输出: Hello, my name is John Doe
三、条件判断和循环语句
1.条件判断
1.1. if
if语句用于基于不同条件来执行不同代码块。
let score = 85;
if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
1.2. switch/case
switch语句评估一个表达式，把表达式的值与case子句匹配，并执行与该值匹配的case子句后的代码。
let day = "Tuesday";
switch (day) {
case "Monday":
console.log("星期一");
break;
case "Tuesday":
console.log("星期二");
break;
// 其他case...
default:
console.log("未知");
}
2.循环语句
2.1. for
for循环是最常用的循环之一，用于重复执行一段代码固定次数。
for (let i = 0; i < 5; i++) {
console.log(i);
}
2.2. while
while循环在给定条件为真时重复执行代码块。
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
2.3. do..while
do..while循环至少执行一次代码块，然后检查条件；如果条件为真，则继续循环。
let count = 0;
do {
console.log(count);
count++;
} while (count < 5);
四、函数
1.变量与变量的作用域
1.1. 全局变量和局部变量
- 全局变量：在函数外部声明的变量或在函数内部未使用
var、let或const声明的变量（成为隐式全局变量，不推荐这种做法），它们在整个脚本中都是可访问的。 - 局部变量：在函数内部使用
var、let或const声明的变量，只能在函数内部访问。
// 全局变量
let globalVar = "I am global";
function testScope() {
// 局部变量
let localVar = "I am local";
console.log(localVar); // 可访问
console.log(globalVar); // 同样可访问，因为是全局的
}
testScope();
console.log(localVar); // ReferenceError: localVar is not defined
console.log(globalVar); // 正常工作
1.2. 变量的作用域
- 块级作用域（由
let和const提供）：变量仅在声明它的块（通常是{}内的代码块）内可用。 - 函数作用域（由
var和函数声明提供）：变量在函数内部声明，并在整个函数体内可用，但在函数外部不可见。
1.3. 作用域链
作用域链是JavaScript中查找变量的过程。当JavaScript需要访问一个变量时，它会首先在当前作用域中查找该变量。如果未找到，它会继续向上（向父作用域）查找，直到找到该变量或到达全局作用域。
2.函数的声明与使用
2.1. 函数的定义
函数定义了一个要执行的代码块，并可以传递参数。
2.2. 声明函数语法
- 函数声明：使用
function关键字，然后是函数名和参数列表，函数体包含在大括号{}中。 - 函数表达式：函数被赋值给一个变量，可以匿名也可以命名。
// 函数声明
function greet(name) {
console.log("Hello, " + name);
}
// 函数表达式
const greetExpression = function(name) {
console.log("Hello, " + name);
};
// 匿名函数表达式
const anotherGreeting = function(name) {
console.log("Hi, " + name);
};
2.3. 函数调用
通过函数名加上括号（可能包含参数）来调用函数。
greet("Alice"); // Hello, Alice
greetExpression("Bob"); // Hello, Bob
anotherGreeting("Charlie"); // Hi, Charlie
2.4. 带参数的函数
函数可以接受多个参数，这些参数在函数体内可用作变量。
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5
2.5. 不定参数
在ES6及更高版本中，可以使用剩余参数（...）语法来允许函数接受任意数量的参数。
function sumAll(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sumAll(1, 2, 3, 4)); // 10
剩余参数将所有传递的参数收集到一个数组中，这样就可以在函数体内以数组的形式处理这些参数了。
五、数组
1.创建数组
1.1. new Array()
使用new Array()构造函数可以创建一个新的数组实例。
// 创建一个空数组
var emptyArray = new Array();
// 创建一个包含三个元素的数组
var numbers = new Array(1, 2, 3);
// 注意：如果只传递一个数字参数给Array构造函数，它将创建一个具有指定长度但所有元素都是空的数组
var lengthArray = new Array(3); // [empty × 3]
1.2. 字面量创建
更常用的创建数组的方法是使用数组字面量，即使用方括号[]。
// 创建一个空数组
var emptyArray = [];
// 创建一个包含三个元素的数组
var numbers = [1, 2, 3];
2.遍历数组
2.1. for 循环
使用传统的for循环遍历数组。
var numbers = [1, 2, 3, 4, 5];
for (var i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
2.2. forEach 方法
forEach是数组的一个方法，它接收一个回调函数作为参数，并对数组的每个元素执行该回调函数。
var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
2.3. for..in 循环
遍历对象属性示例
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
greet: function() {
console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
}
};
for (const property in person) {
if (person.hasOwnProperty(property)) {
// 使用hasOwnProperty()方法检查属性是否属于对象本身，而不是原型链上的
console.log(`${property}: ${person[property]}`);
}
}
// 输出：
// firstName: John
// lastName: Doe
// age: 30
// greet: function() { console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`); }
遍历数组示例（不推荐）
尽管for..in可以遍历数组，但如前所述，这可能会引入问题，因为它会遍历数组的所有可枚举属性，包括那些从原型链上继承的属性。然而，为了说明目的，这里给出一个简单的示例：
const fruits = ["Apple", "Banana", "Cherry"];
for (const fruit in fruits) {
// 注意：这里的fruit实际上是数组的索引（字符串形式），而不是元素值
console.log(fruit + ": " + fruits[fruit]);
}
// 输出：
// 0: Apple
// 1: Banana
// 2: Cherry
// 但如果数组原型被扩展了，例如：
Array.prototype.test = function() {};
// 再次使用for..in遍历数组，将会包括新增的'test'属性
for (const fruit in fruits) {
if (fruits.hasOwnProperty(fruit)) {
// 通过hasOwnProperty()来过滤非自身属性
console.log(fruit + ": " + fruits[fruit]);
}
}
// 输出将只包括数组自身的元素，因为'test'不是数组自身的属性
// 但这仍然不是遍历数组的最佳方式
在实际开发中，推荐使用for循环、forEach方法、for...of循环（ES6+）等更适合遍历数组的方法。这些方法能够避免for..in循环在遍历数组时可能遇到的问题。
3.数组中的常用方法
3.1. length
获取数组的长度（即元素个数）。
var numbers = [1, 2, 3];
console.log(numbers.length); // 3
3.2. push
在数组的末尾添加一个或多个元素，并返回新的长度。
var numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
3.3. unshift
在数组的开头添加一个或多个元素，并返回新的长度。
var numbers = [1, 2, 3];
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3]
3.4. pop
删除并返回数组的最后一个元素。
var numbers = [1, 2, 3];
var last = numbers.pop();
console.log(numbers); // [1, 2]
console.log(last); // 3
3.5. shift
删除并返回数组的第一个元素。
var numbers = [1, 2, 3];
var first = numbers.shift();
console.log(numbers); // [2, 3]
console.log(first); // 1
3.6. sort
对数组的元素进行排序，并返回数组。
var numbers = [3, 1, 4, 1, 5, 9];
numbers.sort(function(a, b) { return a - b; });
console.log(numbers); // [1, 1, 3, 4, 5, 9]
3.7. reverse
颠倒数组中元素的顺序，并返回数组。
var numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // [3, 2, 1]
3.8. concat
用于合并两个或多个数组。此方法不会改变现有的数组，而是返回一个新数组。
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = array1.concat(array2);
console.log(array3); // ['a', 'b', 'c', 'd', 'e', 'f']
3.9. join
将数组的所有元素连接成一个字符串。
var elements = ['Fire', 'Air', 'Water'];
var text = elements.join(', ');
console.log(text); // "Fire, Air, Water"
3.10. split
注意：split是字符串的方法，用于将字符串分割成数组。但因为它与数组处理相关，所以也在此提及。
var str = "apple,banana,cherry";
var fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "cherry"]
3.11. splice
通过删除现有元素和/或添加新元素来更改一个数组的内容。
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'trumpet');
// 这不会改变数组的长度，但会添加新元素
console.log(myFish); // ["angel", "clown", "drum", "trumpet", "mandarin", "sturgeon"]
// removed 是一个空数组，因为没有元素被删除
3.12. slice
返回一个新的数组对象，这一对象是一个由begin到end（不包括end）选择的数组的一部分浅拷贝。原始数组不会被修改。
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
console.log(citrus); // ["Orange", "Lemon"]