从0开始学习JavaScript--JavaScript数据类型与数据结构

news2024/9/21 11:02:43

JavaScript作为一门动态、弱类型的脚本语言，拥有丰富的数据类型和数据结构，这些构建了语言的基础，为开发者提供了灵活性和表达力。本文将深入探讨JavaScript中的各种数据类型，包括基本数据类型和复杂数据类型，并介绍常用的数据结构，以丰富的示例代码帮助读者更好地理解和应用这些概念。

基本数据类型

JavaScript有七种基本数据类型，分别是：

Number（数字）
String（字符串）
Boolean（布尔）
Null（空）
Undefined（未定义）
Symbol（符号，ES6新增）
BigInt（大整数，ES2020新增）

// 示例：基本数据类型
let num = 42; // Number
let str = 'Hello, World!'; // String
let isTrue = true; // Boolean
let empty = null; // Null
let notDefined = undefined; // Undefined
let sym = Symbol('unique'); // Symbol
let bigInt = 9007199254740991n; // BigInt

引用数据类型

引用数据类型包括：

Object（对象）
Array（数组）
Function（函数）
Date（日期）
RegExp（正则表达式）
Map（映射）
Set（集合）

// 示例：引用数据类型
let obj = { key: 'value' }; // Object
let arr = [1, 2, 3]; // Array
let func = function() { /* 函数体 */ }; // Function
let today = new Date(); // Date
let regex = /pattern/; // RegExp

let map = new Map();
map.set('name', 'John'); // Map

let set = new Set();
set.add(1).add(2).add(3); // Set

类型转换

JavaScript是一门弱类型语言，它会自动进行类型转换。了解类型转换有助于我们更好地理解代码的执行过程。

// 示例：类型转换
let numAsString = '42';
let convertedNum = Number(numAsString);
console.log(convertedNum); // 输出：42

let boolAsString = 'true';
let convertedBool = Boolean(boolAsString);
console.log(convertedBool); // 输出：true

数据结构

1 数组（Array）

数组是一种有序的集合，可以包含任意类型的数据。

// 示例：数组
let fruits = ['apple', 'orange', 'banana'];
console.log(fruits[0]); // 输出：apple
console.log(fruits.length); // 输出：3

2 对象（Object）

对象是一种无序的集合，由键值对组成。

// 示例：对象
let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
console.log(person.name); // 输出：John

3 Map和Set

Map是一种键值对的集合，而Set是一种值的集合，它们提供了更灵活的数据组织方式。

// 示例：Map和Set
let userMap = new Map();
userMap.set('name', 'Alice').set('age', 25);

let uniqueNumbers = new Set([1, 2, 3, 4, 5, 5, 5]);

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。

// 示例：JSON
let jsonData = '{"name": "Bob", "age": 28}';
let parsedData = JSON.parse(jsonData);
console.log(parsedData.name); // 输出：Bob

let dataToBeSent = { status: 'success', code: 200 };
let jsonString = JSON.stringify(dataToBeSent);

迭代与遍历

JavaScript提供了多种迭代和遍历数据结构的方式，如for...of循环、forEach方法等。

// 示例：迭代与遍历
let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
  console.log(num);
}

numbers.forEach(num => {
  console.log(num);
});

数据类型与数据结构的选择

在实际开发中，选择合适的数据类型和数据结构至关重要。例如，使用数组来存储有序的数据集合，使用对象或Map来存储键值对。

// 示例：数据类型与数据结构的选择
let student1 = { name: 'Alice', age: 20, grade: 'A' };
let student2 = { name: 'Bob', age: 22, grade: 'B' };
let studentsArray = [student1, student2];

let studentsMap = new Map();
studentsMap.set('Alice', { age: 20, grade: 'A' });
studentsMap.set('Bob', { age: 22, grade: 'B' });

常见问题与解决方案

在处理JavaScript数据类型和数据结构时，常常会遇到一些常见的问题，例如如何遍历嵌套对象、如何判断数据类型等。以下是一些常见问题的解决方案。

1 遍历嵌套对象

遍历嵌套对象需要使用递归或其他迭代方法。

// 示例：遍历嵌套对象
function recursiveIteration(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      recursiveIteration(obj[key]);
    } else {
      console.log(obj[key]);
    }
  }
}

let nestedObject = {
  key1: 'value1',
  key2: {
    key3: 'value3',
    key4: {
      key5: 'value5'
    }
  }
};

recursiveIteration(nestedObject);

2 判断数据类型

判断数据类型可以使用typeof运算符，但对于对象和数组，更准确的方式是使用Array.isArray和Object.prototype.toString方法。

// 示例：判断数据类型
let data = [1, 2, 3];

console.log(typeof data); // 输出：object
console.log(Array.isArray(data)); // 输出：true
console.log(Object.prototype.toString.call(data)); // 输出：[object Array]

实战示例

结合实际场景，可以使用数据类型和数据结构来解决具体问题。比如，在一个学生信息管理系统中，可以使用对象存储学生信息，数组存储所有学生，通过遍历和查询实现各种功能。

// 示例：学生信息管理系统
let students = [
  { name: 'Alice', age: 20, grade: 'A' },
  { name: 'Bob', age: 22, grade: 'B' },
  // 更多学生...
];

function addStudent(student) {
  students.push(student);
}

function findStudentByName(name) {
  return students.find(student => student.name === name);
}

// 其他功能函数...

// 添加新学生
addStudent({ name: 'Charlie', age: 21, grade: 'A' });

// 查找学生信息
let foundStudent = findStudentByName('Bob');
console.log(foundStudent); // 输出：{ name: 'Bob', age: 22, grade: 'B' }