JavaScript 的基本语法

跳房子的前端

于 2024-09-15 10:59:53 发布

阅读量609

点赞数 8

分类专栏： JavaScript 初级学习文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/shenfangda520/article/details/142281525

版权

JavaScript 初级学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

理解 JavaScript 的基本语法是掌握这门语言的第一步。以下是 JavaScript 基本语法的详细介绍，包括变量和常量声明、数据类型、操作符、控制结构、函数、对象和数组等核心概念。

1. JavaScript 简介

JavaScript 是一种高层次、解释型的编程语言，广泛用于网页开发。它可以在浏览器中运行，提供动态功能，增强用户交互体验。

2. 变量与常量声明

变量：用于存储和操作数据。JavaScript 中有三种主要的变量声明方式：var、let 和 const。

var：
- 作用域：函数作用域。
- 变量提升：var 声明的变量会被提升到函数顶部。
```
var x = 10;
console.log(x); // 10
```
let：
- 作用域：块级作用域。
- 不提升：变量在声明之前不可用。
```
let y = 20;
console.log(y); // 20
```
const：
- 作用域：块级作用域。
- 常量：声明后不能重新赋值。
```
const z = 30;
console.log(z); // 30
```

3. 数据类型

JavaScript 中的数据类型分为基本数据类型和复杂数据类型。

基本数据类型：
- undefined：变量未赋值时的默认值。
```
let a;
console.log(a); // undefined
```
- null：表示空值或无效值。
```
let b = null;
console.log(b); // null
```
- boolean：布尔值，true 或 false。
```
let isTrue = true;
let isFalse = false;
```
- number：数字，支持整数和浮点数。
```
let num = 123;
let floatNum = 123.45;
```
- string：字符串，可以用单引号、双引号或反引号（模板字面量）表示。
```
let str1 = 'Hello';
let str2 = "World";
let str3 = `Hello, ${str2}!`; // 模板字面量
```
- symbol：唯一且不可变的数据类型，用于对象属性的唯一标识。
```
let sym = Symbol('description');
```
- bigint：用于表示大整数。
```
let bigInt = 1234567890123456789012345678901234567890n;
```
复杂数据类型：
- object：对象，是键值对的集合。
```
let person = {
  name: 'John',
  age: 30
};
```
- array：数组，是值的有序集合。
```
let colors = ['red', 'green', 'blue'];
```

4. 操作符

操作符用于执行计算和操作数据。

算术操作符：

let sum = 5 + 3; // 8
let difference = 5 - 3; // 2
let product = 5 * 3; // 15
let quotient = 5 / 3; // 1.666...
let remainder = 5 % 3; // 2

比较操作符：

let isEqual = (5 == 5); // true
let isStrictEqual = (5 === '5'); // false
let isNotEqual = (5 != 3); // true
let isGreater = (5 > 3); // true
let isLessOrEqual = (5 <= 5); // true

逻辑操作符：

let and = (true && false); // false
let or = (true || false); // true
let not = !true; // false

赋值操作符：

let x = 10; // 赋值
x += 5; // x = x + 5
x -= 3; // x = x - 3
x *= 2; // x = x * 2
x /= 4; // x = x / 4

位操作符：

let bitwiseAnd = 5 & 3; // 1
let bitwiseOr = 5 | 3; // 7
let bitwiseXor = 5 ^ 3; // 6
let bitwiseNot = ~5; // -6
let leftShift = 5 << 1; // 10
let rightShift = 5 >> 1; // 2

5. 控制结构

控制结构用于控制代码的执行流程。

条件语句：

if (true) {
  console.log('Condition is true');
} else {
  console.log('Condition is false');
}

let day = 'Monday';
switch (day) {
  case 'Monday':
    console.log('Start of the work week');
    break;
  case 'Friday':
    console.log('End of the work week');
    break;
  default:
    console.log('Midweek');
}

循环语句：

// for 循环
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// while 循环
let count = 0;
while (count < 5) {
  console.log(count); // 0, 1, 2, 3, 4
  count++;
}

// do...while 循环
let num = 0;
do {
  console.log(num); // 0, 1, 2, 3, 4
  num++;
} while (num < 5);

跳转语句：

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // 退出循环
  }
  console.log(i); // 0, 1, 2
}

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) {
    continue; // 跳过当前迭代
  }
  console.log(i); // 1, 3
}

6. 函数

函数是 JavaScript 中的一等公民，可以用来组织和复用代码。

函数声明：

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!

函数表达式：

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3)); // 5

箭头函数：

const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20

高阶函数：函数可以作为参数传递给另一个函数，也可以作为返回值。

function execute(fn) {
  return fn();
}

function sayHello() {
  return 'Hello!';
}

console.log(execute(sayHello)); // Hello!

7. 对象与数组

对象：表示具有键值对的数据结构。

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2021
};

console.log(car.brand); // Toyota
console.log(car['model']); // Corolla

数组：表示一组有序的数据集合。

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // apple

fruits.push('date');
console.log(fruits); // ['apple', 'banana', 'cherry', 'date']