FAQGURU项目中的JavaScript核心概念解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00428/article/details/148507585

FAQGURU项目中的JavaScript核心概念解析

JavaScript类型系统基础

类型转换（Приведение типов）

JavaScript中的类型转换分为显式和隐式两种形式：

显式转换是通过明确调用类型转换函数实现的：

var str = "42";
var num = Number(str);  // 显式转换为数字

隐式转换是在操作中自动发生的类型转换：

var str = "42";
var num = str * 1;  // 隐式转换为数字

开发中应当注意隐式转换可能导致的意外结果，特别是在使用==运算符时。

typeof操作符详解

typeof是JavaScript中用于检测变量类型的一元运算符：

typeof "hello"   // "string"
typeof 42        // "number"
typeof true      // "boolean"
typeof {}        // "object"
typeof undefined // "undefined"
typeof null      // "object" (历史遗留问题)

需要注意的是，typeof null返回"object"是JavaScript的一个已知bug，但由于历史兼容性原因一直未修复。

对象与数组

对象类型

JavaScript对象是键值对的集合：

var person = {
  name: "张三",
  age: 30,
  isDeveloper: true
};

// 访问属性
person.name;       // 点表示法
person["age"];     // 方括号表示法

数组特性

数组是特殊的对象，使用数字索引：

var colors = ["红", "绿", "蓝"];

colors[0];      // "红"
colors.length;  // 3

数组可以包含任意类型的元素，甚至混合类型。

作用域与变量声明

作用域规则

JavaScript采用词法作用域（静态作用域），函数创建自己的作用域：

function outer() {
  var x = 10;
  
  function inner() {
    console.log(x);  // 可以访问外部作用域的x
  }
  
  inner();
}

let与const

ES6引入的let和const提供了块级作用域：

if (true) {
  let x = 10;    // 只在if块中有效
  const y = 20;   // 常量，不可重新赋值
}

函数进阶

回调函数

回调函数是作为参数传递给其他函数的函数：

function fetchData(callback) {
  // 模拟异步操作
  setTimeout(() => {
    callback("数据加载完成");
  }, 1000);
}

fetchData(function(message) {
  console.log(message);
});

闭包应用

闭包可以创建私有状态：

function createCounter() {
  let count = 0;
  
  return {
    increment: function() { count++; },
    getCount: function() { return count; }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1

ES6+特性

严格模式

严格模式通过"use strict"启用，提供更严格的错误检查：

function strictFunction() {
  "use strict";
  undeclaredVar = 42; // 抛出ReferenceError
}

集合与去重

使用Set可以轻松实现数组去重：

const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(numbers)]; // [1, 2, 3, 4, 5]

算法实践

寻找缺失数字

利用数学公式高效查找缺失数字：

function findMissing(arr, min, max) {
  const expectedSum = (max * (max + 1)) / 2 - (min * (min - 1)) / 2;
  const actualSum = arr.reduce((sum, num) => sum + num, 0);
  return expectedSum - actualSum;
}

反转字符串

多种方式实现字符串反转：

function reverseWords(str) {
  return str.split(" ").map(word => 
    word.split("").reverse().join("")
  ).join(" ");
}

数据结构实现

用栈实现队列

使用两个栈模拟队列操作：

class QueueWithStacks {
  constructor() {
    this.inStack = [];
    this.outStack = [];
  }
  
  enqueue(item) {
    this.inStack.push(item);
  }
  
  dequeue() {
    if (this.outStack.length === 0) {
      while (this.inStack.length > 0) {
        this.outStack.push(this.inStack.pop());
      }
    }
    return this.outStack.pop();
  }
}