你应该知道的一些 JavaScript 原则。类型、表达式、提升、全局块绑定、For 循环中的块绑定、箭头函数

2025-06-07

您应该了解的一些 JavaScript 原则。

类型

表达式

提升

全局块绑定

For 循环中的块绑定

箭头函数

在这篇博客中,我将讨论一些 JavaScript 的核心概念。如果您是 JavaScript 新手,那么您一定对这个主题有一个清晰的认识。我会尽量清晰简洁地解释这些概念。

类型

JavaScript 中有 7 种原始数据类型。它们是:

  • 数字
  • 细绳
  • 布尔值
  • 无效的
  • 不明确的
  • 大整数
  • 象征

以及 2 种结构数据类型:

  • 目的
  • 功能

没有其他类型?在 JavaScript 中,除了我们刚刚列举的这些类型之外,没有其他基本值类型。其余的都是对象!

例如,即使是数组、日期和正则表达式从根本上来说也是 JavaScript 中的对象。

表达式

表达式是一组有效的文字、变量、运算符和表达式,其计算结果为单个值。

0 // 0

1 + 1 // 2

'Hello' + ' ' + 'World' // 'Hello World'

{ answer: 42 } // { answer: 42 }

Object.assign({}, { answer: 42 }) // { answer: 42 }

answer !== 42 ? 42 : answer // 42
Enter fullscreen mode Exit fullscreen mode

上面显示的每个示例都是一个表达式。每一行代表一个值。

提升

在 JS 中,提升是一种行为,其中所有用var关键字声明的变量和所有用函数声明定义的函数都被移动到程序的顶部。

因此,如果您在函数声明之前使用函数,它将不会引发任何错误。

greeting('Programmer'); // Programmer

// functions declaration
function greeting(name){
  console.log(name);
}
Enter fullscreen mode Exit fullscreen mode

尽管你在声明之前使用了该函数,但这段程序仍然能够完美运行。但是 JS 代码提升会将函数移到所有代码之上。例如:

// functions declaration
function greeting(name){
  console.log(name);
}

greeting('Programmer');
Enter fullscreen mode Exit fullscreen mode

这就是它完美运行的原因。

记住,函数声明时会发生提升。如果你通过函数表达式定义函数,就会报错。

就变量而言,当我们使用var关键字声明变量时,JavaScript 会将变量提升到程序的顶部。但是,在赋值之前,它的值不会被赋值。

console.log(name); // undefined

var name = 'John Doe';

console.log(name); // 'John Doe'
Enter fullscreen mode Exit fullscreen mode

运行这段代码,不会出现任何错误,而是会打印出 undefined。由于变量提升,变量声明移到了顶部,但并没有赋值。因此,变量的值是 undefined。到达赋值的那一行之后,该值就作为变量的值可见了。

let从 ES6 开始,使用and声明变量const不会出现任何变量提升问题。我们稍后会讨论这个问题。

全局块绑定

当我们用var关键字声明一个变量时,它会改变全局对象。对于浏览器来说,它是一个窗口对象。

var RegExp = 'Regular Expression';

console.log(window.RegExp === RegExp); // true
Enter fullscreen mode Exit fullscreen mode

这是一个大问题,因为我们正在改变全局对象。在上面的例子中,'RegExp' 变量改变了全局变量 'RegExp',这是意料之外的。

这里letconst涉及到了 和 。如果我们使用let和声明一个变量const,它永远不会改变全局对象。

let RegExp = 'Regular Expression';

console.log(window.RegExp === RegExp); // false
Enter fullscreen mode Exit fullscreen mode

For 循环中的块绑定

for (var i = 0; i < 5; i++){
  console.log(i); // 0 1 2 3 4 
}

console.log(i) // 5
Enter fullscreen mode Exit fullscreen mode

在上面的例子中,我用关键字定义了变量“i” var。循环执行完成后,变量“i”在块或for循环外部可见。但我们不希望这样。这时let关键字就派上用场了。

for (let i = 0; i < 5; i++){
  console.log(i); // 0 1 2 3 4 
}

console.log(i) // i is not defined.
Enter fullscreen mode Exit fullscreen mode

这里变量的值仅存在于 for 循环内部。因此,在循环下面,我们会得到一个错误。

箭头函数

箭头函数是 JavaScript 中一种新的函数编写方式。
语法:

const func = (param1, param2, ...) => {
  // ....
}
Enter fullscreen mode Exit fullscreen mode

语法很简单,对吧?如果只有一个参数,则无需使用括号,并且可以直接返回值,而无需使用第二个括号。

const func = x => x * x;

func(2); // returns 4
Enter fullscreen mode Exit fullscreen mode

记住,当我们定义一个箭头函数表达式时,它不会被提升。它是一个表达式,而不是声明。函数声明会被提升,而函数表达式则不会。
这就是为什么我们需要在使用函数之前先写好它。另外,箭头函数没有自己的this.

综上所述,我强烈建议你继续学习 JavaScript。相信我,它是一门非常强大且令人印象深刻的语言。

感谢您阅读我的博客。欢迎在领英推特上与我联系。

文章来源:https://dev.to/shaharafat/some-javascript-principles-you-should-know-22il
PREV
我如何提高我的 CSS 技能
NEXT
CSS 3 与 Tailwind CSS 的比较