收藏Javascript中常用的55个经典技巧

介绍

本文收集了Javascript中常用的55个经典技巧，每个技巧都包含简短的代码示例和详细的解释。这些技巧旨在帮助Javascript开发者提高他们的编程技能。

主要内容

以下是本文中包含的55个Javascript技巧：

1. 数组去重

   javascript
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr);

   解释：使用Set去重，然后将Set转换回数组。

2. 数组随机排序

   javascript
const arr = [1, 2, 3, 4, 5];
arr.sort(() => Math.random() - 0.5);
console.log(arr);

   解释：使用sort方法和Math.random函数来随机排序数组。

3. 数组最大最小值

   javascript
const arr = [1, 2, 3, 4, 5];
const max = Math.max(...arr);
const min = Math.min(...arr);
console.log(max, min);

   解释：使用Math.max和Math.min方法分别获得数组中的最大值和最小值。

4. 数组元素求和

   javascript
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((a, b) => a + b, 0);
console.log(sum);

   解释：使用reduce方法和初始值0，将数组元素相加获得总和。

5. 字符串反转

   javascript
const str = 'hello';
const reversedStr = str.split('').reverse().join('');
console.log(reversedStr);

   解释：使用split方法将字符串转换为数组，使用reverse方法翻转数组，然后使用join方法将数组转换回字符串。

6. 随机生成颜色值

   javascript
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(randomColor);

   解释：使用Math.random和toString方法生成随机的16进制颜色值。

......

示例说明

假设我们需要随机从数组中选择一个元素来展示。我们可以使用第2个技巧--数组随机排序来实现：

const arr = [1, 2, 3, 4, 5];
arr.sort(() => Math.random() - 0.5);
const randomItem = arr[0];
console.log(randomItem);

在上述代码中，我们将数组随机排序，然后选择第一个元素展示。

又假设我们需要获取浏览器窗口大小。我们可以使用第28个技巧--获取浏览器窗口大小来实现：

const width = window.innerWidth || document.documentElement.clientWidth;
const height = window.innerHeight || document.documentElement.clientHeight;
console.log(`Window size is ${width} x ${height}`);

在上述代码中，我们使用window对象的innerWidth和innerHeight属性获得窗口大小。如果innerWidth或innerHeight的值为null，我们回退到document.documentElement.clientWidth和document.documentElement.clientHeight属性。

总结

本文介绍了55个Javascript技巧，这些技巧可以帮助Javascript开发人员提高他们的编程技能。从数组去重到嵌套对象，再到数组随机排序和获取浏览器窗口大小等。这些技巧中的许多都可以简化我们的代码，或者提供更高效的解决方案。