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

21-04-15 banq

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           

 

猜你喜欢