第3章：数据处理与准备

3.1 数据类型与格式

理论讲解

在AI应用开发中，数据是基础。了解不同的数据类型和格式对于构建有效的AI模型至关重要。常见的数据类型包括：

数值数据：连续或离散的数值，如温度、年龄等
分类数据：具有固定类别的数据，如性别、颜色等
图像数据：像素矩阵，通常以RGB或灰度格式表示
文本数据：字符串形式的文本，如文章、评论等
音频数据：声波的数字化表示

数据格式方面，常见的有：

CSV：逗号分隔值，用于表格数据
JSON：轻量级的数据交换格式
PNG/JPEG：图像文件格式
WAV/MP3：音频文件格式
TFRecord：TensorFlow专用的数据格式

代码示例

// 不同数据类型的示例
const numericData = [1, 2, 3, 4, 5];
const categoricalData = ['红色', '绿色', '蓝色'];
const textData = '这是一个文本示例';

// 处理CSV数据的简单函数
function parseCSV(csvString) {
  const lines = csvString.split('\n');
  const headers = lines[0].split(',');
  const result = [];
  
  for (let i = 1; i < lines.length; i++) {
    const values = lines[i].split(',');
    if (values.length === headers.length) {
      const row = {};
      for (let j = 0; j < headers.length; j++) {
        row[headers[j]] = values[j];
      }
      result.push(row);
    }
  }
  
  return result;
}

// 示例CSV数据
const csvData = `姓名,年龄,性别\n张三,25,男\n李四,30,女\n王五,28,男`;
const parsedData = parseCSV(csvData);
console.log('解析后的CSV数据：', parsedData);

实践练习

创建一个包含5行数据的CSV字符串，包含姓名、年龄、城市等字段
使用上述parseCSV函数解析该字符串
编写一个函数，将解析后的数据转换为JSON格式

3.2 数据收集与清洗

理论讲解

数据收集是AI项目的第一步，常见的数据来源包括：

公开数据集：如Kaggle、UCI Machine Learning Repository等
API接口：从第三方服务获取数据
用户生成内容：如网站评论、社交媒体帖子等
传感器数据：如摄像头、麦克风等设备采集的数据

数据清洗是数据处理的重要步骤，包括：

缺失值处理：删除或填充缺失值
异常值检测：识别并处理异常数据点
数据标准化：将数据缩放到统一范围
数据归一化：将数据转换为0-1范围
数据平衡：处理类别不平衡问题

代码示例

// 数据清洗示例
const rawData = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: null, city: '上海' }, // 缺失值
  { name: '王五', age: 150, city: '广州' }, // 异常值
  { name: '赵六', age: 30, city: '' }, // 空值
  { name: '钱七', age: 28, city: '深圳' }
];

// 数据清洗函数
function cleanData(data) {
  return data
    // 处理缺失值和空值
    .filter(item => item.age !== null && item.city !== '')
    // 处理异常值（年龄应该在合理范围内）
    .filter(item => item.age > 0 && item.age < 120)
    // 标准化城市名称
    .map(item => ({
      ...item,
      city: item.city.charAt(0).toUpperCase() + item.city.slice(1)
    }));
}

const cleanedData = cleanData(rawData);
console.log('清洗后的数据：', cleanedData);

实践练习

创建一个包含10个元素的原始数据数组，包含一些缺失值和异常值
编写数据清洗函数，处理缺失值、异常值和格式问题
对比清洗前后的数据，分析清洗效果

3.3 数据可视化

理论讲解

数据可视化是理解数据的重要手段，它可以帮助我们：

发现数据中的模式和趋势
识别异常值和离群点
理解变量之间的关系
向他人展示数据洞察

在前端环境中，常用的数据可视化库包括：

D3.js：强大的SVG可视化库
Chart.js：简单易用的图表库
Plotly.js：交互式图表库
TensorFlow.js Vis：专门用于TensorFlow.js模型的可视化

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化示例</title>
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        canvas {
            max-width: 600px;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>
<body>
    <h1>数据可视化示例</h1>
    <canvas id="myChart"></canvas>

    <script>
        // 准备数据
        const labels = ['一月', '二月', '三月', '四月', '五月', '六月'];
        const data = {
            labels: labels,
            datasets: [{
                label: '销售额',
                data: [65, 59, 80, 81, 56, 55],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        // 配置图表
        const config = {
            type: 'line',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };

        // 创建图表
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
</body>
</html>

实践练习

创建一个HTML页面，使用Chart.js绘制柱状图
准备包含5-10个类别的分类数据
自定义图表的颜色、标题和标签
添加交互功能，如悬停显示详细信息

3.4 实战：处理图像和文本数据

理论讲解

图像和文本是前端AI应用中最常见的数据类型。处理这些数据需要特定的技术和方法：

图像数据处理：

调整图像大小和分辨率
转换图像格式（如RGB到灰度）
数据增强（旋转、翻转、缩放等）
归一化像素值

文本数据处理：

分词（将文本分割为单词或字符）
去除停用词（如"的"、"是"等无意义词）
词干提取和词形还原
词向量化（如One-Hot编码、Word2Vec等）

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像和文本数据处理</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        .image-box {
            width: 300px;
            border: 1px solid #ddd;
            padding: 10px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .text-box {
            flex: 1;
            border: 1px solid #ddd;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>图像和文本数据处理实战</h1>
    
    <div class="container">
        <div class="image-box">
            <h3>图像处理</h3>
            <input type="file" id="imageInput" accept="image/*">
            <div>
                <h4>原图</h4>
                <img id="originalImage" src="" alt="原图">
            </div>
            <div>
                <h4>处理后</h4>
                <canvas id="processedCanvas" width="200" height="200"></canvas>
            </div>
        </div>
        
        <div class="text-box">
            <h3>文本处理</h3>
            <textarea id="textInput" rows="5" cols="50" placeholder="输入文本..."></textarea>
            <button onclick="processText()">处理文本</button>
            <div id="textResult"></div>
        </div>
    </div>

    <script>
        // 图像处理
        const imageInput = document.getElementById('imageInput');
        const originalImage = document.getElementById('originalImage');
        const processedCanvas = document.getElementById('processedCanvas');
        const ctx = processedCanvas.getContext('2d');
        
        imageInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    originalImage.src = e.target.result;
                    originalImage.onload = processImage;
                };
                reader.readAsDataURL(file);
            }
        });
        
        function processImage() {
            // 绘制并处理图像
            ctx.drawImage(originalImage, 0, 0, 200, 200);
            
            // 获取图像数据
            const imageData = ctx.getImageData(0, 0, 200, 200);
            const data = imageData.data;
            
            // 转换为灰度图
            for (let i = 0; i < data.length; i += 4) {
                const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                data[i] = avg;     // 红色通道
                data[i + 1] = avg; // 绿色通道
                data[i + 2] = avg; // 蓝色通道
            }
            
            // 绘制处理后的图像
            ctx.putImageData(imageData, 0, 0);
        }
        
        // 文本处理
        function processText() {
            const text = document.getElementById('textInput').value;
            if (!text) return;
            
            // 简单的文本处理
            const processed = {
                original: text,
                lowercase: text.toLowerCase(),
                uppercase: text.toUpperCase(),
                words: text.split(/\s+/),
                charCount: text.length,
                wordCount: text.split(/\s+/).length
            };
            
            // 显示结果
            const resultDiv = document.getElementById('textResult');
            resultDiv.innerHTML = `
                <h4>处理结果：</h4>
                <p><strong>小写：</strong>${processed.lowercase}</p>
                <p><strong>大写：</strong>${processed.uppercase}</p>
                <p><strong>单词数：</strong>${processed.wordCount}</p>
                <p><strong>字符数：</strong>${processed.charCount}</p>
                <p><strong>单词列表：</strong>${processed.words.join(', ')}</p>
            `;
        }
    </script>
</body>
</html>

实践练习

运行上面的代码，测试图像和文本处理功能
扩展图像处理功能，添加模糊、锐化等效果
改进文本处理功能，添加分词和停用词去除
将处理后的数据保存到本地或显示在页面上

章节总结

核心知识点回顾

了解了不同的数据类型和格式
掌握了数据收集和清洗的基本方法
学会了使用Chart.js进行数据可视化
实践了图像和文本数据的处理技术

学习收获

理解了数据处理在AI应用中的重要性
掌握了基本的数据清洗和预处理技术
学会了如何可视化数据以发现模式
能够处理常见的图像和文本数据

下一步学习

在下一章中，我们将学习机器学习的基础概念，包括监督学习、无监督学习和模型训练流程，为后续的AI模型开发打下基础。

课程分类：前端开发、AI技术开发

学习建议：

深入学习统计学基础知识
了解更多数据可视化库的使用
实践处理不同类型的真实数据集

资源链接：