返回
如何利用ES6代码解决现实难题？24个实用范例助您一臂之力！
前端
2023-10-18 05:14:54
ES6（又称ECMAScript 2015）是JavaScript语言的最新版本，它带来了许多新特性和改进。这些新特性可以帮助我们编写更简洁、更易维护的代码。
在本文中，我们将分享24个实用的ES6代码片段，它们可以帮助您解决现实生活中的问题。这些代码片段涵盖了字符串操作、数组处理、对象操作等多个方面。
希望这些代码片段能帮助您提升开发效率，并让您的代码更加简洁、优雅。
1. 字符串操作
1.1. 从字符串中删除所有空格
const str = "Hello, world!";
const newStr = str.replace(/\s/g, "");
console.log(newStr); // "HelloWorld!"
1.2. 将字符串转换为驼峰式命名法
const str = "hello_world";
const newStr = str.replace(/_/g, "").replace(/(^|.)(\w)/g, (match, p1, p2) => p1 + p2.toUpperCase());
console.log(newStr); // "HelloWorld"
1.3. 将字符串转换为下划线式命名法
const str = "HelloWorld";
const newStr = str.replace(/([A-Z])/g, "_$1").toLowerCase();
console.log(newStr); // "hello_world"
2. 数组处理
2.1. 从数组中删除重复项
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3, 4, 5]
2.2. 打乱数组
const arr = [1, 2, 3, 4, 5];
const newArr = arr.sort(() => Math.random() - 0.5);
console.log(newArr); // [2, 3, 1, 5, 4]
2.3. 数组去重
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const newArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(newArr); // [1, 2, 3, 4, 5]
3. 对象操作
3.1. 合并两个对象
const obj1 = { name: "John", age: 30 };
const obj2 = { city: "New York", country: "USA" };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { name: "John", age: 30, city: "New York", country: "USA" }
3.2. 从对象中删除属性
const obj = { name: "John", age: 30, city: "New York" };
const newObj = { ...obj };
delete newObj.age;
console.log(newObj); // { name: "John", city: "New York" }
3.3. 检查对象是否为空
const obj = {};
const isEmpty = Object.keys(obj).length === 0;
console.log(isEmpty); // true
4. 函数编程
4.1. 使用箭头函数简化代码
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
4.2. 使用filter函数过滤数组
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]
4.3. 使用reduce函数累加数组
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 15
5. 类和继承
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
speak() {
console.log(`My name is ${this.name} and I am ${this.age} years old.`);
}
}
class Student extends Person {
constructor(name, age, major) {
super(name, age);
this.major = major;
}
study() {
console.log(`I am studying ${this.major}.`);
}
}
const student = new Student("John", 20, "Computer Science");
student.speak(); // "My name is John and I am 20 years old."
student.study(); // "I am studying Computer Science."
6. 模板字符串
const name = "John";
const age = 30;
const city = "New York";
const message = `Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`;
console.log(message); // "Hello, my name is John. I am 30 years old and I live in New York."
7. 解构赋值
const person = {
name: "John",
age: 30,
city: "New York"
};
const { name, age, city } = person;
console.log(name); // "John"
console.log(age); // 30
console.log(city); // "New York"
8. 扩展运算符
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]
9. 箭头函数
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
10. 默认参数值
function greet(name = "John") {
console.log(`Hello, ${name}!`);
}
greet(); // "Hello, John!"
greet("Mary"); // "Hello, Mary!"
11. 尾调用优化
function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
12. 块级作用域
{
let x = 10;
console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined
13. Promise
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello, world!");
}, 2000);
});
promise.then((result) => {
console.log(result); // "Hello, world!"
});
14. 异步函数
async function greet() {
const result = await Promise.resolve("Hello, world!");
console.log(result); // "Hello, world!"
}
greet();
