大多数教程中都找不到的JavaScript技巧 - markodenic

Javascript是一种脚本语言，使您能够创建动态更新的内容，控制多媒体，动画图像等等。

1.使用history.back()创造了“返回”按钮：

<button onclick="history.back()">
  Go back
</button>

2.为了提高数字的可读性，可以使用下划线作为分隔符：

const largeNumber = 1_000_000_000;
console.log(largeNumber); // 1000000000"

3.如果要添加事件侦听器但仅运行一次，则可以使用“once”选项：

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});

4.可以在console.log()使用大括号将参数包装起来以查看变量名称：console.log({变量名})

5.使用Math.min()或Math.max()与价差运算符结合使用以查找数组中的最小值或最大值。

const numbers = [6, 8, 1, 3, 9];
console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1

6.使用KeyboardEvent.getModifierState()来检测是否Caps Lock打开。

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', function (event) {
  if (event.getModifierState('CapsLock')) {
    // CapsLock is on.
  }
});

7.可以使用ClipboardAPI创建“复制到剪贴板”功能：

function copyToClipboard(text) {
  navigator.clipboard.writeText(text);
}

8.使用MouseEventclientX和clientY属性获取鼠标的当前位置。

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});

9.可以设置length属性来缩短数组。

const numbers = [1, 2, 3, 4, 5];
numbers.length = 3;
console.log(numbers); // [1, 2, 3];

10.如果仅在条件为真时才必须执行功能，则可以使用短路short-circuit。

//If you have to execute a function only if the condition is true:
if (condition) {
    doSomething();
}
// You can use short-circuit:
condition && doSomething();

11.从数组中删除重复的元素：

const numbers = [2, 3, 4, 4, 2];
console.log([...new Set(numbers)]); // [2, 3, 4]

12.将字符串转换为数字：

const str = '404';
console.log(+str) // 404;

13.将数字转换为字符串

const myNumber = 403;
console.log(myNumber + ''); // '403'

14.DRY:不要重复自己。

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// Instead of:
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// You can:
if (techs.includes(myTech)) {
     // do something 
}

15.可以使用`reduce`方法来计算数组中所有元素的总和：

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;
console.log(myArray.reduce(reducer)); // 100