第二章:JavaScript 基础语法
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- Modified on
- Reading time
- 5 分钟
阅读:.. 评论:..
1. 变量与数据类型
变量的声明
在 JavaScript 中,我们可以使用 var
、let
和 const
这三种关键词来声明变量。下面是每种声明方式的详细解释和示例:
var 关键词
var
是 JavaScript 中最早用来声明变量的关键词。
var name = "Alice"; console.log(name); // 输出:Alice var name = "Bob"; console.log(name); // 输出:Bob
它有一些特性需要注意:
- 变量可以重新声明。
- 变量提升,即变量可以在声明之前使用(但值为
undefined
)。
let 关键词
let
是 ES6 引入的,用来声明局部变量,它比 var
更加严格和安全。
let age = 25; console.log(age); // 输出:25 age = 26; console.log(age); // 输出:26
特性:
- 变量不能重新声明。
- 变量提升,但不能在声明之前使用。
const 关键词
const
也是 ES6 引入的,用来声明常量,一旦声明,不能更改。
const PI = 3.14; console.log(PI); // 输出:3.14 // PI = 3.1415; // 会报错:Assignment to constant variable.
特性:
- 变量不能重新声明和更改。
- 变量提升,但不能在声明之前使用。
常见数据类型
JavaScript 提供了多种数据类型,分为原始类型和引用类型。
原始类型
- 数字(Number)
let count = 10; let price = 99.99;
- 字符串(String)
let greeting = "Hello, World!";
- 布尔值(Boolean)
let isActive = true; let isLogged = false;
- null
let emptyValue = null;
- undefined
let notAssigned; console.log(notAssigned); // 输出:undefined
引用类型
- 对象(Object)
let person = { name: "John", age: 30, };
- 数组(Array)
let numbers = [1, 2, 3, 4, 5];
- 函数(Function)
function greet() { console.log("Hello!"); }
数据类型转换
JavaScript 允许我们在不同的数据类型之间进行转换。
显式转换
通过 JavaScript 提供的内置函数进行转换:
- 转为字符串
let num = 123; let str = String(num); console.log(str); // 输出:"123"
- 转为数字
let str = "123"; let num = Number(str); console.log(num); // 输出:123
- 转为布尔值
let truthyStr = "Hello"; let falsyStr = ""; console.log(Boolean(truthyStr)); // 输出:true console.log(Boolean(falsyStr)); // 输出:false
隐式转换
JavaScript 会在某些情况下自动进行类型转换:
- 字符串与数字相加
let result = 1 + "2"; console.log(result); // 输出:"12"
- 布尔值与数字相乘
let result = true * 2; console.log(result); // 输出:2
2. 运算符与表达式
算术运算符
JavaScript 提供了多种算术运算符用于数学计算:
- 加法运算符 (+)
let sum = 10 + 5; console.log(sum); // 输出:15
- 减法运算符 (-)
let difference = 10 - 5; console.log(difference); // 输出:5
- 乘法运算符 (*)
let product = 10 * 5; console.log(product); // 输出:50
- 除法运算符 (/)
let quotient = 10 / 5; console.log(quotient); // 输出:2
- 取余运算符 (%)
let remainder = 10 % 3; console.log(remainder); // 输出:1
比较运算符
用于比较两个值,并返回布尔值:
- 等于 () 和全等 (=)
console.log(5 == "5"); // 输出:true console.log(5 === "5"); // 输出:false
- 不等于 (!=) 和全不等 (!==)
console.log(5 != "5"); // 输出:false console.log(5 !== "5"); // 输出:true
- 大于 (>) 和大于等于 (>=)
console.log(5 > 3); // 输出:true console.log(5 >= 5); // 输出:true
- 小于 (<) 和小于等于 (<=)
console.log(5 < 3); // 输出:false console.log(5 <= 5); // 输出:true
逻辑运算符
用于逻辑判断:
- 逻辑与 (&&)
console.log(true && false); // 输出:false
- 逻辑或 (||)
console.log(true || false); // 输出:true
- 逻辑非 (!)
console.log(!true); // 输出:false
3. 字符串操作
字符串的定义与操作
字符串可以用单引号、双引号或反引号定义:
let singleQuoteStr = "Hello"; let doubleQuoteStr = "World"; let templateStr = `Hello, World!`;
字符串连接与模板字符串
- 字符串连接
let greeting = "Hello, " + "World!"; console.log(greeting); // 输出:"Hello, World!"
- 模板字符串
let name = "Alice"; let greeting = `Hello, ${name}!`; console.log(greeting); // 输出:"Hello, Alice!"
常用字符串方法
- length 属性
let str = "Hello"; console.log(str.length); // 输出:5
- toUpperCase() 和 toLowerCase() 方法
let str = "Hello"; console.log(str.toUpperCase()); // 输出:HELLO console.log(str.toLowerCase()); // 输出:hello
- charAt() 方法
let str = "Hello"; console.log(str.charAt(0)); // 输出:H
- substring() 方法
let str = "Hello, World!"; console.log(str.substring(0, 5)); // 输出:Hello
- split() 方法
let str = "apple, banana, cherry"; let fruits = str.split(", "); console.log(fruits); // 输出:["apple", "banana", "cherry"]
- trim() 方法
let str = " Hello, World! "; console.log(str.trim()); // 输出:"Hello, World!"
- replace() 方法
let str = "Hello, World!"; let newStr = str.replace("World", "JavaScript"); console.log(newStr); // 输出:"Hello, JavaScript!"
4. 数组
数组的定义与操作
数组是一种特殊的对象,用于存储有序的集合:
let fruits = ["apple", "banana", "cherry"]; console.log(fruits[0]); // 输出:apple
常用数组方法
- push() 和 pop() 方法
let fruits = ["apple", "banana"]; fruits.push("cherry"); console.log(fruits); // 输出:["apple", "banana", "cherry"] let lastFruit = fruits.pop(); console.log(lastFruit); // 输出:cherry console.log(fruits); // 输出:["apple", "banana"]
- shift() 和 unshift() 方法
let fruits = ["apple", "banana"]; let firstFruit = fruits.shift(); console.log(firstFruit); // 输出:apple console.log(fruits); // 输出:["banana"] fruits.unshift("cherry"); console.log(fruits); // 输出:["cherry", "banana"]
- concat() 方法
let fruits1 = ["apple", "banana"]; let fruits2 = ["cherry", "date"]; let allFruits = fruits1.concat(fruits2); console.log(allFruits); // 输出:["apple", "banana", "cherry", "date"]
- slice() 方法
let fruits = ["apple", "banana", "cherry", "date"]; let someFruits = fruits.slice(1, 3); console.log(someFruits); // 输出:["banana", "cherry"]
- splice() 方法
let fruits = ["apple", "banana", "cherry"]; fruits.splice(1, 1, "date"); console.log(fruits); // 输出:["apple", "date", "cherry"]
- indexOf() 方法
let fruits = ["apple", "banana", "cherry"]; console.log(fruits.indexOf("banana")); // 输出:1
- includes() 方法
let fruits = ["apple", "banana", "cherry"]; console.log(fruits.includes("banana")); // 输出:true
数组的迭代方法
- forEach() 方法
let fruits = ["apple", "banana", "cherry"]; fruits.forEach(function (fruit) { console.log(fruit); }); // 输出: // apple // banana // cherry
- map() 方法
let numbers = [1, 2, 3]; let doubleNumbers = numbers.map(function (num) { return num * 2; }); console.log(doubleNumbers); // 输出:[2, 4, 6]
- filter() 方法
let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(function (num) { return num % 2 === 0; }); console.log(evenNumbers); // 输出:[2, 4]
- reduce() 方法
let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce(function (total, num) { return total + num; }, 0); console.log(sum); // 输出:15