返回
127个最常使用的JS代码片段,看完即懂,讲解清晰!
前端
2024-01-01 04:11:17
前言
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