禅游空间

简体中文

English

简体中文

English

外观

JavaScript 语法速查手册

约 1423 字大约 5 分钟

JavaScript前端语法

2020-05-08

一份涵盖 JavaScript 核心语法、数据类型操作和常用工具函数的速查手册，适合有一定基础的开发者快速查阅。

背景与动机

JavaScript 是 Web 开发的核心语言，掌握其基础语法和常用操作是每个前端开发者的必备技能。本文整理了日常开发中高频使用的语法和代码片段，帮助你快速定位所需知识点。

适合读者：有一定 JavaScript 基础，需要快速查阅语法或解决特定问题的开发者。

基础语法

注释与语句

  • 单行注释：// 注释内容
  • 多行注释：/* 注释内容 */
  • 语句结束：;（分号，建议始终添加）
  • 语句块：{}（花括号）

变量声明

JavaScript 提供三种变量声明方式：

关键字作用使用建议
var函数作用域，可重复声明避免使用（旧语法）
let块级作用域，不可重复声明变量首选
const块级作用域，声明后不可重赋常量首选
// 推荐：优先使用 const，需要重新赋值时使用 let
const PI = 3.14159;
let count = 0;
count = 1; // 合法
// PI = 3.14; // 错误：Assignment to constant variable

数据类型与操作

数字类型

浮点数保留小数位：

const num = 3.14159;
const fixed = num.toFixed(2); // "3.14"（返回字符串）

字符串操作

字符串替换：

const str = 'hello world';
const replaced = str.replace(/\s/g, ' '); // 替换所有空格

字符串转换为数字：

const intVal = parseInt('42'); // 42
const floatVal = parseFloat('3.14'); // 3.14

JSON 操作

JSON 与字符串相互转换：

// JSON 对象转字符串
const jsonStr = JSON.stringify({ name: '张三', age: 25 });
// '{"name":"张三","age":25}'

// 字符串转 JSON 对象
const jsonObj = JSON.parse('{"name":"张三","age":25}');
// { name: '张三', age: 25 }

删除 JSON 属性：

const dataObj = { 部门: '研发部', 名称: '张三' };
delete dataObj['部门']; // 删除指定属性

判断数据类型：

typeof 'hello'; // "string"
typeof 42; // "number"
typeof {}; // "object"
typeof []; // "object"（数组也是对象）
typeof null; // "object"（历史遗留问题）

// 判断数组
Array.isArray([1, 2, 3]); // true

URL 编码

URL 编码与解码：

// 编码（推荐使用 encodeURIComponent）
const encoded = encodeURIComponent('你好世界'); // "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C"
const encodedURI = encodeURI('你好世界'); // "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C"

// 解码
const decoded = decodeURIComponent('%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C'); // "你好世界"

注意：encodeURIComponent 会编码所有特殊字符，适合编码 URL 参数值；encodeURI 不会编码 :/?#&= 等 URL 结构字符，适合编码完整 URL。

日期处理

JavaScript Date 对象提供基础的日期时间操作：

const now = new Date();

const year = now.getFullYear(); // 四位年份，如 2026
const month = now.getMonth() + 1; // 月份（0-11，需要 +1）
const day = now.getDate(); // 日（1-31）
const hours = now.getHours(); // 小时（0-23）
const minutes = now.getMinutes(); // 分钟（0-59）
const seconds = now.getSeconds(); // 秒（0-59）

DOM 节点操作

节点遍历

const element = document.getElementById('test');

// 节点遍历（包含文本节点）
const parent = element.parentNode;
const allChildren = element.childNodes; // NodeList
const firstChild = element.firstChild;
const lastChild = element.lastChild;
const prevSibling = element.previousSibling;
const nextSibling = element.nextSibling;

// 元素遍历（仅包含元素节点，推荐）
const parentEl = element.parentElement;
const firstElChild = element.firstElementChild;
const lastElChild = element.lastElementChild;
const prevElSibling = element.previousElementSibling;
const nextElSibling = element.nextElementSibling;

获取所有兄弟节点：

function getSiblings(element) {
  return Array.from(element.parentNode.children).filter(child => child !== element);
}

iframe 跨页面调用

父页面与子页面相互调用：

// 父页面调用子页面方法
const iframe = document.getElementById('myIframe');
iframe.contentWindow.childFunction();

// 子页面调用父页面方法
window.parent.parentFunction();

事件处理

事件委托

事件委托利用事件冒泡机制，将事件监听器绑定到父元素：

// jQuery 方式（旧）
$('#parent').delegate('.child', 'click', function () {
  // 处理逻辑
});

// 原生 JavaScript 方式（推荐）
document.getElementById('parent').addEventListener('click', function (e) {
  if (e.target.matches('.child')) {
    // 处理逻辑
  }
});

常用工具函数

自定义工具库模板

(function () {
  if (!window.MyUtils) {
    window['MyUtils'] = {};
  }

  // 遍历对象属性
  function inspect(obj) {
    const result = [];
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        result.push(`${key} = ${obj[key]}`);
      }
    }
    return result.join('\n');
  }
  window.MyUtils.inspect = inspect;

  // 获取 URL 参数
  function getQueryParam(name) {
    const params = new URLSearchParams(window.location.search);
    return params.get(name);
  }
  window.MyUtils.getQueryParam = getQueryParam;

  // 示例用法
  // MyUtils.inspect({ name: '张三', age: 25 });
  // MyUtils.getQueryParam('id');
})();

Excel 解析（使用 SheetJS）

import * as XLSX from 'xlsx';

function parseExcelFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      const data = e.target.result;
      const workbook = XLSX.read(data, { type: 'binary' });
      const sheetNames = workbook.SheetNames;
      const result = {};

      sheetNames.forEach(name => {
        const worksheet = workbook.Sheets[name];
        result[name] = XLSX.utils.sheet_to_json(worksheet);
      });

      resolve(result);
    };
    reader.onerror = reject;
    reader.readAsBinaryString(file);
  });
}

// 使用示例
// parseExcelFile(file).then(data => console.log(data));

常见坑点

浮点数精度问题

0.1 + 0.2 === 0.3; // false（结果是 0.30000000000000004）

// 解决方案：使用 toFixed 或专门的数学库
(0.1 + 0.2).toFixed(2) === '0.30'; // true

this 指向问题

const obj = {
  name: '张三',
  greet: function () {
    console.log(this.name);
  }
};

obj.greet(); // "张三"
const fn = obj.greet;
fn(); // undefined（this 指向全局对象或 undefined）

// 解决方案：使用箭头函数或 bind
const boundFn = obj.greet.bind(obj);
boundFn(); // "张三"

== 与 === 的区别

// == 会进行类型转换
'42' == 42; // true
null == undefined; // true

// === 严格比较，不转换类型（推荐）
'42' === 42; // false
null === undefined; // false

建议：始终使用 === 进行比较，除非你明确需要类型转换。

总结

本文整理了 JavaScript 开发中最常用的语法和操作：

  • 优先使用 const 和 let 声明变量
  • 字符串与 JSON 转换使用 JSON.stringify() 和 JSON.parse()
  • DOM 操作优先使用 Element 系列属性（如 firstElementChild）
  • 事件委托可减少事件监听器数量，提升性能
  • 注意浮点数精度、this 指向等常见陷阱

下一步建议：深入学习 ES6+ 新特性（箭头函数、解构赋值、Promise、async/await），以及现代前端框架（Vue、React）。

参考资源