JavaScript小技巧:11个鲜为人知的技巧
2023-09-19 12:21:34
11个鲜为人知的JavaScript小技巧,让你的代码更简洁、更高效!
1. 使用Set过滤唯一值
Set类型是在ES6中新增的,它类似于数组,但是它只保存唯一的值。我们可以利用这一点来过滤数组中的重复项,如下所示:
const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // {1, 2, 3, 4, 5}
2. 使用Array.from()将类数组对象转换为数组
类数组对象是指那些具有length属性且可以被迭代的对象,例如NodeList、Arguments对象等。我们可以使用Array.from()方法将类数组对象转换为真正的数组,如下所示:
const nodeList = document.querySelectorAll('li');
const array = Array.from(nodeList);
console.log(array); // [li, li, li]
3. 使用Object.assign()合并对象
Object.assign()方法可以将一个或多个对象的属性合并到另一个对象中,如下所示:
const obj1 = {
name: 'John',
age: 30
};
const obj2 = {
city: 'New York'
};
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // {name: "John", age: 30, city: "New York"}
4. 使用Array.find()查找数组中的第一个满足条件的元素
Array.find()方法可以查找数组中的第一个满足条件的元素,如下所示:
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find(number => number % 2 === 0);
console.log(firstEvenNumber); // 2
5. 使用Array.findIndex()查找数组中第一个满足条件的元素的索引
Array.findIndex()方法可以查找数组中第一个满足条件的元素的索引,如下所示:
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumberIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenNumberIndex); // 1
6. 使用Array.includes()检查数组中是否包含某个元素
Array.includes()方法可以检查数组中是否包含某个元素,如下所示:
const numbers = [1, 2, 3, 4, 5];
const isTwoIncluded = numbers.includes(2);
console.log(isTwoIncluded); // true
7. 使用Array.sort()对数组进行排序
Array.sort()方法可以对数组进行排序,如下所示:
const numbers = [1, 2, 3, 4, 5];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]
8. 使用Array.reverse()反转数组
Array.reverse()方法可以反转数组,如下所示:
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
9. 使用String.trim()去除字符串首尾的空格
String.trim()方法可以去除字符串首尾的空格,如下所示:
const str = ' Hello, world! ';
const trimmedStr = str.trim();
console.log(trimmedStr); // 'Hello, world!'
10. 使用String.slice()截取字符串
String.slice()方法可以截取字符串,如下所示:
const str = 'Hello, world!';
const slicedStr = str.slice(0, 5);
console.log(slicedStr); // 'Hello'
11. 使用String.toUpperCase()将字符串转换为大写
String.toUpperCase()方法可以将字符串转换为大写,如下所示:
const str = 'Hello, world!';
const upperCaseStr = str.toUpperCase();
console.log(upperCaseStr); // 'HELLO, WORLD!'