JavaScript 技巧和窍门。

在本文中，我们将介绍一些有用的 JavaScript 技巧和窍门。

位置.重新加载（）

这将重新加载当前文档，其作用与浏览器中的重新加载按钮相同。当在用户界面中实现刷新按钮时，这非常方便。

const btnRefresh = document.querySelector('button')

btnRefresh.addEventListener('click',() => {
  location.reload()
})

JavaScript 样式

使用 javascript 应用的 CSS 样式将作为内联样式应用。

<h1>Cakes & Bakes 🧁</h1>

document.querySelector('h1').style.color = "coral"

<h1 style="color: coral;">  // HTML Element

类型强制

从一种数据类型到另一种数据类型的值的隐式转换称为类型强制，即strings to numbers。

如果是加法运算符，则值会被连接并转换为字符串。

console.log("2" * 10)  // output: 20
console.log(10 - '2')  // output: 8
console.log(2 + '2')   // output: '22'

活性元素

如果您很难确定当前聚焦的是哪个元素，请使用document.activeElement它返回当前聚焦的元素。

console.log(document.activeElement)

原语

JavaScript 中有七种原始数据类型。

number, string, boolean, undefined, null, BigInt, Symbol

余数运算符

余数运算符%只是返回除法的余数，即5 % 2 = 1。您可以使用余数运算符来检查数字是偶数还是奇数

const number = 10

console.log(number % 2 === 0 ? 'Even ❤️' : 'Odd 🧡') 

// output: Even ❤️

设计模式

将 document.designMode 设置为 on 以使您的网页内容可编辑。

document.designMode = "on"

包含方法

检查 HTML 元素是否包含特定类。

<h1 class="title">Page title</h1>

document.querySelector('h1').classList.contains('title')
document.querySelector('h1').classList.contains('subtitle')

// output: true
// output: false

Var 提升

使用 var 声明的变量会被提升，但返回undefined.

console.log(a)
var a = 10;

// output: undefined

Remove 方法

删除方法允许您从文档中删除 HTML。

<h1>Page title ⚙️</h1>

const pageTitle = document.querySelector('h1')
pageTitle.remove()

Eval 方法

Eval 是一个内置的 Javascript 函数，它允许您评估给定的值，即strings, numbers.它可以用来构建一个像这样的简单计算器。

eval(2 * '5')  
// output: 10

eval(12 / '2')  
// output: 6

Typeof 运算符

typeof 运算符允许您检查值的类型。

console.log(typeof 42);
// output: "number"

console.log(typeof 'markdown ⚡');
// output: "string"

console.log(typeof true);
// output: "boolean"

Replace 方法

replace 方法允许您用指定的实体替换字符串实体的第一个实例，同样，我们也有 replaceAll 来替换所有实例。

const string = 'cake'
string.replace('c','b')  

// output: 'bake'

默认参数

使用赋值运算符为函数设置默认参数，如果没有传递参数，函数将返回默认值。

我写这篇文章是为了详细讨论这个主题。

 function printName(name = "Anonymous"){
  console.log(name)
 }

 printName()  // output: "Anonymous"

文档网址

document.URL 以字符串形式返回文档 URL/位置。

console.log(document.URL)

// output: "https://developer.mozilla.org/en-US/"

字符串索引

同样，数组字符串索引也从 0 开始。

let string = 'cake'

string[0]  // output: 'c'

string[1]  // output: 'a'

包含方法

检查字符串或数组是否包含特定值。该方法返回布尔值。

const string = 'JavaScript'

string.includes('J')  // output: true

const hearts = ['🧡', '💙', '🤍']

console.log(hearts.includes('🧡'))  // output: true

console.log(hearts.includes('❤️'))  // output: false

希望您喜欢阅读这篇文章！如果您有话要说或有任何疑问，请随时在下面发表评论。

文章来源：https://dev.to/devsyedmohsin/javascript-tips-and-tricks-you-need-to-know-1g2k