logo

第二章:JavaScript 基础语法

作者
Modified on
Reading time
5 分钟阅读:..评论:..

1. 变量与数据类型

变量的声明

在 JavaScript 中,我们可以使用 varletconst 这三种关键词来声明变量。下面是每种声明方式的详细解释和示例:

var 关键词

var 是 JavaScript 中最早用来声明变量的关键词。

var name = "Alice"; console.log(name); // 输出:Alice var name = "Bob"; console.log(name); // 输出:Bob

它有一些特性需要注意:

  1. 变量可以重新声明
  2. 变量提升,即变量可以在声明之前使用(但值为 undefined)。

let 关键词

let 是 ES6 引入的,用来声明局部变量,它比 var 更加严格和安全。

let age = 25; console.log(age); // 输出:25 age = 26; console.log(age); // 输出:26

特性:

  1. 变量不能重新声明。
  2. 变量提升,但不能在声明之前使用。

const 关键词

const 也是 ES6 引入的,用来声明常量,一旦声明,不能更改。

const PI = 3.14; console.log(PI); // 输出:3.14 // PI = 3.1415; // 会报错:Assignment to constant variable.

特性:

  1. 变量不能重新声明和更改。
  2. 变量提升,但不能在声明之前使用。

常见数据类型

JavaScript 提供了多种数据类型,分为原始类型和引用类型。

原始类型

  1. 数字(Number)
let count = 10; let price = 99.99;
  1. 字符串(String)
let greeting = "Hello, World!";
  1. 布尔值(Boolean)
let isActive = true; let isLogged = false;
  1. null
let emptyValue = null;
  1. undefined
let notAssigned; console.log(notAssigned); // 输出:undefined

引用类型

  1. 对象(Object)
let person = { name: "John", age: 30, };
  1. 数组(Array)
let numbers = [1, 2, 3, 4, 5];
  1. 函数(Function)
function greet() { console.log("Hello!"); }

数据类型转换

JavaScript 允许我们在不同的数据类型之间进行转换。

显式转换

通过 JavaScript 提供的内置函数进行转换:

  1. 转为字符串
let num = 123; let str = String(num); console.log(str); // 输出:"123"
  1. 转为数字
let str = "123"; let num = Number(str); console.log(num); // 输出:123
  1. 转为布尔值
let truthyStr = "Hello"; let falsyStr = ""; console.log(Boolean(truthyStr)); // 输出:true console.log(Boolean(falsyStr)); // 输出:false

隐式转换

JavaScript 会在某些情况下自动进行类型转换:

  1. 字符串与数字相加
let result = 1 + "2"; console.log(result); // 输出:"12"
  1. 布尔值与数字相乘
let result = true * 2; console.log(result); // 输出:2

2. 运算符与表达式

算术运算符

JavaScript 提供了多种算术运算符用于数学计算:

  1. 加法运算符 (+)
let sum = 10 + 5; console.log(sum); // 输出:15
  1. 减法运算符 (-)
let difference = 10 - 5; console.log(difference); // 输出:5
  1. 乘法运算符 (*)
let product = 10 * 5; console.log(product); // 输出:50
  1. 除法运算符 (/)
let quotient = 10 / 5; console.log(quotient); // 输出:2
  1. 取余运算符 (%)
let remainder = 10 % 3; console.log(remainder); // 输出:1

比较运算符

用于比较两个值,并返回布尔值:

  1. 等于 () 和全等 (=)
console.log(5 == "5"); // 输出:true console.log(5 === "5"); // 输出:false
  1. 不等于 (!=) 和全不等 (!==)
console.log(5 != "5"); // 输出:false console.log(5 !== "5"); // 输出:true
  1. 大于 (>) 和大于等于 (>=)
console.log(5 > 3); // 输出:true console.log(5 >= 5); // 输出:true
  1. 小于 (<) 和小于等于 (<=)
console.log(5 < 3); // 输出:false console.log(5 <= 5); // 输出:true

逻辑运算符

用于逻辑判断:

  1. 逻辑与 (&&)
console.log(true && false); // 输出:false
  1. 逻辑或 (||)
console.log(true || false); // 输出:true
  1. 逻辑非 (!)
console.log(!true); // 输出:false

3. 字符串操作

字符串的定义与操作

字符串可以用单引号、双引号或反引号定义:

let singleQuoteStr = "Hello"; let doubleQuoteStr = "World"; let templateStr = `Hello, World!`;

字符串连接与模板字符串

  1. 字符串连接
let greeting = "Hello, " + "World!"; console.log(greeting); // 输出:"Hello, World!"
  1. 模板字符串
let name = "Alice"; let greeting = `Hello, ${name}!`; console.log(greeting); // 输出:"Hello, Alice!"

常用字符串方法

  1. length 属性
let str = "Hello"; console.log(str.length); // 输出:5
  1. toUpperCase() 和 toLowerCase() 方法
let str = "Hello"; console.log(str.toUpperCase()); // 输出:HELLO console.log(str.toLowerCase()); // 输出:hello
  1. charAt() 方法
let str = "Hello"; console.log(str.charAt(0)); // 输出:H
  1. substring() 方法
let str = "Hello, World!"; console.log(str.substring(0, 5)); // 输出:Hello
  1. split() 方法
let str = "apple, banana, cherry"; let fruits = str.split(", "); console.log(fruits); // 输出:["apple", "banana", "cherry"]
  1. trim() 方法
let str = " Hello, World! "; console.log(str.trim()); // 输出:"Hello, World!"
  1. 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

常用数组方法

  1. 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"]
  1. 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"]
  1. concat() 方法
let fruits1 = ["apple", "banana"]; let fruits2 = ["cherry", "date"]; let allFruits = fruits1.concat(fruits2); console.log(allFruits); // 输出:["apple", "banana", "cherry", "date"]
  1. slice() 方法
let fruits = ["apple", "banana", "cherry", "date"]; let someFruits = fruits.slice(1, 3); console.log(someFruits); // 输出:["banana", "cherry"]
  1. splice() 方法
let fruits = ["apple", "banana", "cherry"]; fruits.splice(1, 1, "date"); console.log(fruits); // 输出:["apple", "date", "cherry"]
  1. indexOf() 方法
let fruits = ["apple", "banana", "cherry"]; console.log(fruits.indexOf("banana")); // 输出:1
  1. includes() 方法
let fruits = ["apple", "banana", "cherry"]; console.log(fruits.includes("banana")); // 输出:true

数组的迭代方法

  1. forEach() 方法
let fruits = ["apple", "banana", "cherry"]; fruits.forEach(function (fruit) { console.log(fruit); }); // 输出: // apple // banana // cherry
  1. map() 方法
let numbers = [1, 2, 3]; let doubleNumbers = numbers.map(function (num) { return num * 2; }); console.log(doubleNumbers); // 输出:[2, 4, 6]
  1. filter() 方法
let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(function (num) { return num % 2 === 0; }); console.log(evenNumbers); // 输出:[2, 4]
  1. reduce() 方法
let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce(function (total, num) { return total + num; }, 0); console.log(sum); // 输出:15