JS基础 - 技术栈

JavaScript 的基本语法是掌握前端开发的一个重要步骤。以下是关于这些基础知识的详细讲解，以及每一部分的示例。

变量

JavaScript 中有三种主要的变量声明方式：var、let 和 const。了解它们的区别以及适用场景是非常重要的。

var: 是最早用于 JavaScript 中的变量声明方法。它的作用域是函数作用域，或者全局作用域。在块作用域中声明与不在块作用域声明无异。
javascript 复制代码
```
function example() {
    if (true) {
        var x = 5;
    }
    console.log(x);  // 输出 5
}
example();
```

let : 是 ES6 引入的一种声明变量的方法。它的作用域是块作用域，也就是说，只在 let 被定义的 {} 内有效。

javascript 复制代码

function example() {
    if (true) {
        let x = 5;
        console.log(x);  // 输出 5
    }
    console.log(x);  // 报错，变量 x 未定义
}
example();

const: 用于声明常量，一旦赋值后不能再更改。同样是块作用域。
javascript 复制代码
```
const y = 10;
console.log(y); // 输出 10

y = 20; // 报错，无法重新赋值给常量
```

控制结构

条件语句 : 包括 if...else 和 switch 。

javascript 复制代码

let num = 10;

if (num > 0) {
    console.log("Positive number");
} else {
    console.log("Non-positive number");
}

let fruit = "apple";

switch (fruit) {
    case "banana":
        console.log("This is a banana.");
        break;
    case "apple":
        console.log("This is an apple.");
        break;
    default:
        console.log("Fruit not found.");
}

循环 : 包括 for、while 和 do...while。

javascript 复制代码

// for循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while循环
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// do...while循环
i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

函数

JavaScript 支持多种定义函数的方式。

普通函数:

javascript 复制代码

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

console.log(add(2, 3));  // 输出 5

匿名函数: 通常作为回调函数使用。

javascript 复制代码

const anonymous = function(a, b) {
    return a + b;
};

console.log(anonymous(2, 3));  // 输出 5

立即执行函数（IIFE）:

javascript 复制代码

(function() {
    console.log("This is an IIFE");
})();

箭头函数 (ES6):

javascript 复制代码

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 输出 6

对象

创建对象: 包括字面量方式和构造函数方式。

javascript 复制代码

// 字面量方式
const person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};
person.greet();

// 构造函数方式
function Person(name='Jame', age) {
    this.name = 'name-'+name;
    this.age = 'age-'+age;
}
const person1 = new Person("Alice", 25);
console.log(person1.name)

访问和修改属性:

javascript 复制代码

console.log(person.name);  // 输出 "John"
person.age = 35;
console.log(person.age);   // 输出 35

数组

数组操作:

javascript 复制代码

const fruits = ["apple", "banana", "cherry"];

// 添加元素
fruits.push("date");
console.log(fruits); // ["apple", "banana", "cherry", "date"]

// 删除元素
fruits.pop();
console.log(fruits); // ["apple", "banana", "cherry"]

// 遍历数组
fruits.forEach((fruit) => console.log(fruit));

常用数组方法:
- map: 创建一个新数组，其结果是对原数组中的每个元素调用一个提供的函数后返回的结果。
  javascript 复制代码
```
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8]
```
- filter: 创建一个新数组，包含所有通过测试的元素。
  javascript 复制代码
```
const evens = numbers.filter(number => number % 2 === 0);
console.log(evens); // [2, 4]
```
- reduce: 对数组包含的每个值应用一个函数，将其归并为单个值。
  javascript 复制代码
```
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 10
```