返回

JavaScript小技巧:11个鲜为人知的技巧

前端

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!'