js语言代码大全：JavaScript代码大全，从入门到精通的实用指南

JavaScript是Web开发中不可或缺的语言,无论是前端开发还是后端开发（如Node.js），JavaScript都扮演着重要角色，本文将为你整理JavaScript的核心语法、常用技巧、最佳实践以及一些实用代码示例，帮助你从入门到精通，掌握这门强大的语言。

JavaScript基础语法

变量声明

// ES6之前
var a = "Hello";
let b = "World"; // ES6新增，块级作用域
const c = 123; // ES6新增，常量声明

数据类型

// 基本类型
let num = 10;
let str = "JavaScript";
let bool = true;
let nul = null;
let und = undefined;
let sym = Symbol("symbol");
let big = 1234567890123456789n;
// 类型检查
console.log(typeof str); // "string"
console.log(typeof null); // "object"（特殊情况）

函数定义

// 函数表达式
function add(a, b) {
  return a + b;
}
// 箭头函数（ES6）
const multiply = (a, b) => a * b;

DOM操作

获取元素

// 通过ID获取
const elementById = document.getElementById("myId");
// 通过标签名获取
const elementsByTagName = document.getElementsByTagName("div");
// 通过类名获取
const elementsByClassName = document.getElementsByClassName("myClass");
// querySelector
const elementByQuery = document.querySelector(".myClass");

修改元素内容

const para = document.getElementById("para");
para.textContent = "新的内容";
para.innerHTML = "<strong>富文本内容</strong>";

事件处理

// 直接绑定
button.onclick = function() {
  alert("点击了按钮！");
};
// 使用addEventListener
button.addEventListener("click", function() {
  console.log("事件被触发");
});

异步编程

Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("数据返回");
  }, 1000);
}
fetchData((data) => {
  console.log(data);
});

Promises

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise成功");
    }, 1000);
  });
};
fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Async/Await

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

数组操作

常用方法

const arr = [1, 2, 3, 4, 5];
// 遍历
arr.forEach(item => console.log(item));
// 过滤
const evenNumbers = arr.filter(num => num % 2 === 0);
// 映射
const doubled = arr.map(num => num * 2);
// 求和
const sum = arr.reduce((acc, num) => acc + num, 0);

ES6+数组方法

// includes
console.log(arr.includes(3)); // true
// find
const found = arr.find(num => num > 3);
// flat
const nested = [1, [2, 3], [4, 5]];
const flatArray = nested.flat();

闭包与作用域

闭包示例

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

作用域链

var outerVar = "outer";
function outerFunc() {
  var innerVar = "inner";
  function innerFunc() {
    console.log(innerVar); // "inner"
    console.log(outerVar); // "outer"
  }
  innerFunc();
}
outerFunc();

最佳实践与常见错误

避免全局变量

// 不好的做法
var globalVar = "全局变量";
// 好的做法
const module = (() => {
  const privateVar = "私有变量";
  return {
    publicMethod: () => console.log(privateVar)
  };
})();

防止内存泄漏

在使用大量DOM操作时,避免内存泄漏，尤其是在使用闭包时，注意清理事件监听器。

使用严格模式

"use strict";
// 严格模式下，禁止使用未声明的变量

学习建议

JavaScript是一门不断发展的语言,掌握其核心概念并持续学习是关键，以下是一些学习建议：

1. 打好基础：理解变量、作用域、闭包、原型链等核心概念。
2. 多练习：通过实际项目或代码挑战巩固知识。
3. 阅读文档：官方文档和MDN是学习JavaScript的最佳资源。
4. 使用现代工具：学习使用ESLint、Babel等工具提升代码质量。
5. 关注生态：了解流行的库和框架，如React、Vue、Node.js等。

JavaScript作为一门灵活且强大的语言,能够帮助开发者构建复杂而动态的Web应用，通过本文的代码大全，希望你能更高效地掌握JavaScript，提升开发效率，如果你有任何问题或需要进一步的代码示例，欢迎继续交流！