返回

127个最常使用的JS代码片段,看完即懂,讲解清晰!

前端

前言

JavaScript 是目前最流行的编程语言之一,它被广泛用于Web开发、移动开发和桌面开发等领域。JavaScript代码片段是JavaScript程序员的必备工具,它们可以帮助程序员快速地完成各种常见的任务,提高开发效率。

本文列出了127个最常用的JavaScript代码片段,每个片段都用简明扼要的语言解释,并附有示例代码,帮助读者快速理解和掌握这些代码片段。这些代码片段涵盖了JavaScript的各个方面,包括基本语法、数据类型、运算符、控制流语句、函数、对象、数组、字符串、正则表达式、事件处理、DOM操作等,是JavaScript开发人员必备的工具包。

代码片段

1. 基本语法

// 变量声明
var name = "John Doe";

// 数据类型转换
var age = parseInt("30");

// 运算符
var sum = 1 + 2;

// 控制流语句
if (age > 18) {
  console.log("You are an adult.");
}

// 函数定义
function sayHello(name) {
  console.log("Hello, " + name);
}

// 对象创建
var person = {
  name: "John Doe",
  age: 30
};

// 数组创建
var numbers = [1, 2, 3, 4, 5];

// 字符串操作
var str = "Hello, world!";
console.log(str.toUpperCase());

// 正则表达式
var re = /\d+/;
console.log(re.test("12345"));

// 事件处理
document.getElementById("btn").addEventListener("click", function() {
  console.log("Button clicked!");
});

// DOM操作
document.getElementById("div").innerHTML = "Hello, world!";

2. 数据类型

// undefined
var x;

// null
var y = null;

// boolean
var z = true;

// number
var a = 123;

// string
var b = "Hello, world!";

// object
var c = {
  name: "John Doe",
  age: 30
};

// array
var d = [1, 2, 3, 4, 5];

// function
var e = function() {
  console.log("Hello, world!");
};

3. 运算符

// 加法
var sum = 1 + 2;

// 减法
var difference = 5 - 3;

// 乘法
var product = 2 * 3;

// 除法
var quotient = 10 / 2;

// 取余
var remainder = 11 % 3;

// 自增
var x = 1;
x++;

// 自减
var y = 2;
y--;

// 赋值
var z = 3;

// 比较
var a = 1;
var b = 2;
console.log(a < b); // true

// 逻辑与
var c = true;
var d = false;
console.log(c && d); // false

// 逻辑或
var e = true;
var f = false;
console.log(e || f); // true

// 逻辑非
var g = true;
console.log(!g); // false

4. 控制流语句

// if语句
if (age > 18) {
  console.log("You are an adult.");
}

// else if语句
if (age > 65) {
  console.log("You are a senior citizen.");
} else if (age > 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a child.");
}

// switch语句
switch (day) {
  case "Monday":
    console.log("Today is Monday.");
    break;
  case "Tuesday":
    console.log("Today is Tuesday.");
    break;
  case "Wednesday":
    console.log("Today is Wednesday.");
    break;
  default:
    console.log("Today is not a weekday.");
}

// for循环
for (var i = 0; i < 5; i++) {
  console.log(i);
}

// while循环
var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do-while循环
var i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

5. 函数

// 函数定义
function sayHello(name) {
  console.log("Hello, " + name);
}

// 函数调用
sayHello("John Doe");

// 匿名函数
var greeter = function(name) {
  console.log("Hello, " + name);
};

// 箭头函数
var greeter = (name) => {
  console.log("Hello, " + name);
};

6. 对象

// 对象创建
var person = {
  name: "John Doe",
  age: 30
};

// 对象属性访问
console.log(person.name); // "John Doe"

// 对象方法调用
person.sayHello(); // "Hello, world!"

// 对象构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

// 对象实例化
var john = new Person("John Doe", 30);

// 对象实例属性访问
console.log(john.name); // "John Doe"

// 对象实例方法调用
john.sayHello(); // "Hello, my name is John Doe"

7. 数组

// 数组创建
var numbers = [1, 2, 3, 4, 5];

// 数组元素访问
console.log(numbers[2]); // 3

// 数组长度
console.log(numbers.length); // 5

// 数组遍历
for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// 数组方法调用
console.log(numbers.join(", ")); // "1, 2, 3, 4, 5"

// 数组排序
numbers.sort(); // [1, 2, 3, 4, 5]

// 数组反转
numbers.reverse(); // [5, 4, 3, 2, 1]

8. 字符串

// 字符串创建
var str = "Hello, world!";

// 字符串长度
console.log(str.length); // 13

// 字符串遍历
for (var i = 0; i < str.length; i++) {
  console.log(str[i]);
}

// 字符串方法调用
console.log(str.toUpperCase()); // "HELLO, WORLD!"

// 字符串搜索
console.log(str.indexOf("world")); // 7

// 字符串替换
console.log(str.replace("world", "universe")); // "Hello, universe!"

// 字符串拆分
console.log(str.split(", ")); // ["Hello", "world!"]

9. 正则表达式

// 正则表达式创建
var re = /\d+/;

// 正则表达式测试
console.log(re.test("12345")); // true

// 正则表达式匹配
console.log(re.exec("12345")); // ["12345"]

// 正则表达式替换
console.log("12345".replace(re, "abc")); // "abc"

// 正则表达式搜索
console.log("12345".search(re)); // 0

10. 事件处理

// 事件监听器添加
document.getElementById("btn").addEventListener("click", function() {
  console.log("Button