箭头类

❤ 基本形状类

¥ 货币类

½ 数学类

♫ 音乐符号类

✖ 对错号

★ 全都是星星

♒ 星座类

♚ 国际象棋类

♣ 扑克牌类

Ω 希腊字母

☩ 十字

© 法律符号

@ 标点和符号

用法

三种用法都在里面了

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生命不必每时每刻都要冲刺

低沉时

就当给自己放了一个悠长假期

- 2024.04.24 -

JavaScript关键字是一种特殊的标识符，它们在语言中有固定的含义，不能用作变量名或函数名。这些关键字是JavaScript的基础，理解它们是掌握JavaScript的关键。

今天，我们将一起探索JavaScript中的26个关键字，了解这些关键字各自独特的含义、特性和使用方法。

一、JavaScript关键字是什么

Javascript关键字（Keyword）是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字，是 JavaScript 语言内部使用的一组名字（或称为命令）。

Javascript关键字是不能作为变量名和函数名使用的。使用Javascript关键字作为变量名或函数名，会使Javascript在载入过程中出现编译错误。

Java中的关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。

下面我们来详细介绍一下JavaScript关键字的作用和使用方法。

二、JavaScript的26个关键字

JavaScript是一种广泛使用的编程语言，它具有丰富的关键字，这些关键字在JavaScript语言中发挥着重要的作用，JavaScript一共提供了26个关键字：

break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with

其中，debugger在ECMAScript 5 新增的。

1、break：跳出 循环

break用于跳出循环结构。循环结构是一种重复执行某个代码块的结构，break关键字可以用于循环结构中的条件语句中，用于跳出循环。例如：

for (var i = 0; i < 10; i++) {
if (i == 5) {
break; // 当i等于5时跳出循环
}
console.log(i);
}

2、case：捕捉

它用于在switch语句中定义一个分支。switch语句是一种根据表达式的值执行不同代码块的结构，case关键字可以用于switch语句中，用于定义不同的分支。例如：

switch (n) {

case 1:
console.log('n等于1');
break;
case 2:
console.log('n等于2');
break;
default:
console.log('n不等于1或2');
break;
}

3、catch：配合try进行错误判断

catch是JavaScript中的一个关键字，它用于捕获异常。异常是一种程序运行时出现的错误，catch关键字可以用于try-catch语句中，用于捕获并处理异常。例如：

try {
// 代码
} catch (e) {
console.log('发生异常：' + e.message);
}

4、continue：继续

continue用于跳过当前循环中的某个迭代。循环结构是一种重复执行某个代码块的结构，continue关键字可以用于循环结构中的条件语句中，用于跳过当前迭代。例如：

for (var i = 0; i < 10; i++) {
if (i == 5) {
continue; // 当i等于5时跳过当前迭代
}
console.log(i);
}

5、debugger：设置断点

它用于在代码中设置断点，方便调试代码。调试是一种在代码运行时发现和解决问题的过程，debugger关键字可以用于代码中，用于设置断点。例如：

function foo() {
var x = 10;
debugger; // 在这里设置断点
console.log(x);
}

6、default：配合switch，当条件不存在时使用该项

default用于在switch语句中定义一个默认分支。switch语句是一种根据表达式的值执行不同代码块的结构，default关键字可以用于switch语句中，用于定义默认分支。例如：

switch (n) {
case 1:
console.log('n等于1');
break;
case 2:
console.log('n等于2');
break;
default:
console.log('n不等于1或2');
break;
}

7、delete：删除了一个属性

delete用于删除对象的属性或数组中的元素。对象是JavaScript中的一种数据类型，它由一组属性组成，delete关键字可以用于对象的属性中，用于删除属性。例如：

var obj = {a: 1, b: 2, c: 3};
delete obj.b; // 删除对象obj的属性b
console.log(obj); // 输出{a: 1, c: 3}

8、do：声明一个循环

do用于定义一个do-while循环结构。循环结构是一种重复执行某个代码块的结构，do关键字可以用于do-while循环中，用于定义循环体。例如：

var i = 0;
do {
console.log(i);
i++;
} while (i < 10);

9、else：否则//配合if条件判断，用于条件选择的跳转

else用于在if语句中定义一个分支。if语句是一种根据条件执行不同代码块的结构，else关键字可以用于if语句中，用于定义另一个分支。例如：

if (n == 1) {
console.log('n等于1');
} else {
console.log('n不等于1');
}

10、finally：预防出现异常时用的

finally用于定义一个try-catch-finally语句中的finally块。try-catch-finally语句是一种用于处理异常的结构，finally关键字可以用于finally块中，用于定义一些必须执行的代码。例如：

try {
// 可能会抛出异常的代码
} catch (e) {
// 处理异常的代码
} finally {
// 必须执行的代码
}

11、for：循环语句

for用于定义一个for循环结构。循环结构是一种重复执行某个代码块的结构，for关键字可以用于for循环中，用于定义循环条件。例如：

for (var i = 0; i < 10; i++) {
console.log(i);
}

12、function：定义函数的关键字

function用于定义一个函数。函数是一种封装了一段代码的结构，它可以接受参数并返回结果。function关键字可以用于函数定义中，用于定义函数名和参数列表。例如：

function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 输出3

13、if：定义一个if语句

if用于定义一个if语句。if语句是一种根据条件执行不同代码块的结构，if关键字可以用于if语句中，用于定义条件。例如：

if (n == 1) {
console.log('n等于1');
} else {
console.log('n不等于1');
}

14、in：判断某个属性属于某个对象

in用于判断一个对象是否包含某个属性。对象是JavaScript中的一种数据类型，它由一组属性组成，in关键字可以用于对象中，用于判断对象是否包含某个属性。例如：

var obj = {a: 1, b: 2, c: 3};
if ('a' in obj) {
console.log('obj包含属性a');
} else {
console.log('obj不包含属性a');
}

15、instanceof：某个对象是不是另一个对象的实例

instanceof用于判断一个对象是否是某个类的实例。类是JavaScript中的一种数据类型，它由一组属性和方法组成，instanceof关键字可以用于类中，用于判断对象是否是该类的实例。例如：

function Person(name) {
this.name = name;
}
var p = new Person('张三');
if (p instanceof Person) {
console.log('p是Person类的实例');
} else {
console.log('p不是Person类的实例');
}

16、new：创建一个新对象

new用于创建一个对象。对象是JavaScript中的一种数据类型，它由一组属性和方法组成，new关键字可以用于类中，用于创建该类的实例。例如：

function Person(name) {
this.name = name;
}
var p = new Person('张三');
console.log(p.name); // 输出张三

17、return：返回

return用于从函数中返回一个值。函数是JavaScript中的一种数据类型，它由一段代码块组成，return关键字可以用于函数中，用于返回函数的执行结果。例如：

function add(a, b) {
return a + b;
}

console.log(add(1, 2)); // 输出3

18、switch：弥补if的多重判断语句

switch用于根据不同的条件执行不同的代码块。switch语句是一种根据条件执行不同代码块的结构，switch关键字可以用于switch语句中，用于定义条件。例如：

var day = 3;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
default:
console.log('不是星期一、二、三');
}

19、this：总是指向调用该方法的对象

this用于引用当前对象。对象是JavaScript中的一种数据类型，它由一组属性和方法组成，this关键字可以用于对象中，用于引用当前对象的属性和方法。例如：

var obj = {
name: '张三',
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // 输出张三

20、throw：抛出异常

throw是JavaScript中的一个关键字，它用于抛出一个异常。异常是JavaScript中的一种错误类型，它可以用于在程序运行过程中发现错误并停止程序的执行。throw关键字可以用于函数中，用于抛出异常。例如：

function divide(a, b) {
if (b === 0) {
throw new Error('除数不能为0');

}
return a / b;
}
console.log(divide(10, 0)); // 抛出异常

21、try：接受异常并做出判断

try是JavaScript中的一个关键字，它用于捕获异常。异常是JavaScript中的一种错误类型，它可以用于在程序运行过程中发现错误并停止程序的执行。try语句是一种捕获异常的结构，try关键字可以用于try语句中，用于捕获异常。例如：

function divide(a, b) {
if (b === 0) {
throw new Error('除数不能为0');
}
return a / b;
}
try {
console.log(divide(10, 0)); // 抛出异常
} catch (e) {
console.log(e.message); // 输出除数不能为0
}

22、typeof：检测变量的数据类型

typeof是JavaScript中的一个关键字，它用于获取变量的类型。变量是JavaScript中的一种数据类型，它可以是数字、字符串、布尔值等。typeof关键字可以用于变量中，用于获取变量的类型。例如：

var a = 10;
console.log(typeof a); // 输出number

23、var：声明变量

var是JavaScript中的一个关键字，它用于声明变量。变量是JavaScript中的一种数据类型，它可以用于存储数据。var关键字可以用于变量中，用于声明变量。例如：

var a = 10;
console.log(a); // 输出10

24、void:空/ 声明没有返回值

void是JavaScript中的一个关键字，它用于执行一个表达式并返回undefined。undefined是JavaScript中的一种特殊值，它表示一个未定义的值。void关键字可以用于表达式中，用于执行表达式并返回undefined。例如：

function doSomething() {
console.log('执行了doSomething函数');
}
var result = void doSomething();
console.log(result); // 输出undefined

25、while

while是JavaScript中的一个关键字，它用于创建一个循环结构。循环是JavaScript中的一种控制结构，它可以用于重复执行一段代码。while关键字可以用于循环中，用于创建一个基于条件的循环。例如：

var i = 0;
while (i < 10) {
console.log(i);
i++;
}

26、with

with是JavaScript中的一个关键字，它用于创建一个作用域。作用域是JavaScript中的一种机制，它可以用于控制变量的作用范围。with关键字可以用于代码块中，用于创建一个作用域。例如：

var obj = {
name: '张三',
age: 20
};
with (obj) {
console.log(name); // 输出张三
console.log(age); // 输出20
}

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想-程序员必看的精品课程

三、JS关键字注意事项

在开发过程中使用关键字我们需要注意以下几点：

区分大小写：JavaScript是区分大小写的，因此关键字的大小写必须正确。

不能用作变量名：关键字不能被用作变量名，函数名等等，会出现问题。

不需要硬记关键字：关键字不用去硬记，我们在编写代码时根据系统的提示去规避就可以了。

保留字：JavaScript有一些保留字，不能用作变量名、函数名或属性名。

不要使用全局变量：尽量避免使用全局变量，以免与其他脚本或库发生冲突。可以使用立即执行函数表达式（IIFE）或模块模式来避免全局变量污染。

使用严格模式：在代码中添加"use strict"指令，以启用严格模式。这将有助于避免一些常见的错误，例如未声明的变量、隐式类型转换等。

避免使用eval()函数：eval()函数用于动态执行字符串中的JavaScript代码，但可能导致性能问题和安全风险。尽量避免使用eval()，寻找其他替代方案。

不要使用with语句：with语句会改变代码的作用域链，可能导致意外的错误。尽量避免使用with语句，改用局部变量或对象属性访问。

避免使用重复的标识符：确保变量名、函数名和属性名在同一作用域内是唯一的，以避免命名冲突。

遵循编码规范：遵循一致的命名约定、缩进风格和代码结构，以提高代码的可读性和可维护性。

四、关于保留字的了解

除了关键字还有个“保留字”的概念，所谓保留字，实际上就是预留的“关键字”。意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当充当变量名、函数名等标识符。

下面是JavaScript中保留字的含义，大家同样不用记，了解一下就行了。

以上就是关于JavaScript关键字的相关内容了，通过了解这26个JavaScript关键字的含义、特性和使用方法，你已经迈出了成为编程高手的重要一步。

记住，实践是学习的关键，不断地编写代码并应用这些关键字，你将逐渐掌握JavaScript的精髓。

如果觉得本文对你有所帮助，别忘了点赞和分享哦！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

过去的几年中，Python已成为机器学习和深度学习的首选编程语言。与机器学习和深度学习相关的大多数书籍和在线课程要么只用Python，要么再带上R语言。Python有着丰富的机器学习和深度学习库、专门优化的实现，具备可伸缩性和大量功能，因而广受欢迎。

但Python并不是编写机器学习应用程序的唯一选择。社区中有越来越多的开发人员正在使用JavaScript来运行机器学习模型。

尽管JavaScript（目前）并不能在机器学习领域替代根基深厚的Python，但掌握JavaScript机器学习技能也是有很多不错的理由的，

1.函数柯里化

函数柯里化的是一个为多参函数实现递归降解的方式。其实现的核心是:

要思考如何缓存每一次传入的参数

传入的参数和目标函数的入参做比较

这里通过闭包的方式缓存参数，实现如下：

使用方式如下：

函数柯里化仅仅只是上面求和的这种运用吗？？

这个问题，有必要去一下。其实利用函数柯里化这种思想，我们可以更好的实现函数的封装。

就比如有监听某一事件那么就会有移除该事件的操作，那么就可以利用柯里化的思想去封装代码了。

或者说一个输入A有唯一并且对应的输出B，那么从更大的角度去思想这样的工程项目是更安全，独立的。也便于去维护。

2.关于数组

手写map方法

map()方法根据回调函数映射一个新数组

手写filter方法

filter()方法返回一个数组，返回的每一项是在回调函数中执行结果true。

filter和map的区别：filter是映射出条件为true的item，map是映射每一个item。

手写reduce方法

reduce()方法循环迭代，回调函数的结果都会作为下一次的形参的第一个参数。

手写every方法

every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

手写some方法

some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

手写find方法

find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

拉平数组

将嵌套的数组扁平化，在处理业务数据场景中是频率出现比较高的。那如何实现呢？

利用ES6语法flat(num)方法将数组拉平。

该方法不传参数默认只会拉平一层，如果想拉平多层嵌套的数组，需要传入一个整数，表示要拉平的层级。该返回返回一个新的数组，对原数组没有影响。

利用reduce()方法将数组拉平。

利用reduce进行迭代，核心的思想是递归实现。

模拟栈实现数组拉平

该方法是模拟栈，在性能上相对最优解。

3.图片懒加载&惰性函数

实现图片懒加载其核心的思想就是将img的src属性先使用一张本地占位符，或者为空。然后真实的图片路径再定义一个data-set属性存起来，待达到一定条件的时将data-img的属性值赋给src。

如下是通过scroll滚动事件监听来实现的图片懒加载，当图片都加载完毕移除事件监听，并且将移除html标签。

scroll滚动事件容易造成性能问题。那可以通过IntersectionObserver自动观察img标签是否进入可视区域。

实例化IntersectionObserver实例，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

当img标签进入可视区域时会执行实例化时的回调，同时给回调传入一个entries参数，保存着实例观察的所有元素的一些状态，比如每个元素的边界信息，当前元素对应的DOM节点，当前元素进入可视区域的比率，每当一个元素进入可视区域，将真正的图片赋值给当前img标签，同时解除对其的观察。

如上是懒加载图片的实现方式。

值得思考的是，懒加载和惰性函数有什么不一样嘛？

我所理解的懒加载顾名思义就是需要了才去加载，懒加载正是惰性的一种，但惰性函数不仅仅是懒加载，它还可以包含另外一种方向。

惰性函数的另一种方向是在重写函数，每一次调用函数的时候无需在做一些条件的判断，判断条件在初始化的时候执行一次就好了，即下次在同样的条件语句不需要再次判断了，比如在事件监听上的兼容。

4.预加载

预加载顾名思义就是提前加载，比如提前加载图片。

当用户需要查看时，可直接从本地缓存中取。预加载的优点在于如果一张图片过大，那么请求加载图片一定会慢，页面会出现空白的现象，用户体验感就变差了，为了提高用户体验，先提前加载图片到本地缓存，当用户一打开页面时就会看到图片。

5.节流&防抖

针对高频的触发的函数，我们一般都会思考通过节流或者防抖去实现性能上的优化。

节流实现原理是通过定时器以和时间差做判断。定时器有延迟的能力，事件一开始不会立即执行，事件结束后还会再执行一次；而时间差事件一开始就立即执行，时间结束之后也会立即停止。

结合两者的特性封装节流函数：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

防抖实现原理是通过定时器，如果在规定时间内再次触发事件会将上次的定时器清除，即不会执行函数并重新设置一个新的定时器，直到超过规定时间自动触发定时器中的函数。

6.实现new关键字

7.实现instanceof

instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

8.实现call，apply，bind

call

call函数实现的原理是借用方法，关键在于隐式改变this的指向。

apply

apply函数实现的原理和call是相同的，关键在于参数的处理和判断。

实现的关键思路：

bind

bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

实现的关键思路：

1、拷贝保存原函数，新函数和原函数原型链接

2、生成新的函数，在新函数里调用原函数

9.封装数据类型函数

10.自记忆函数

11.是否存在循环引用

12.拷贝函数

拷贝数据一直是业务开发中绕不开的技巧，对于深浅拷贝数据之前写过一篇文章来讲述聊聊深拷贝浅拷贝。

通过深度优先思维拷贝数据（DFS）

深度优先是通过纵向的维度去思考问题，在处理过程中也考虑到对象环的问题。

解决对象环的核心思路是先存再拷贝。一开始先通过一个容器用来储存原来的对象再进行拷贝，在每一次拷贝之前去查找容器里是否已存在该对象。这样就切断了原来的对象和拷贝对象的联系。

通过广度优先思维拷贝数据（BFS）

广度优先是通过横向的维度去思考问题，通过创造源队列和拷贝数组队列之间的关系实现拷贝。

之前写过一篇关于Promise的学习分享。

Promsie.all

Promsie.race

14.实现async-await

30.动态属性名称

16.单例模式

单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现方法一般是先判断实例是否存在，如果存在直接返回，如果不存在就先创建再返回。

17.实现Object.create

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

18.实现ES6的class语法

使用Object.create()方法将子类的实例对象继承与父类的原型对象，通过Object.setPrototypeOf()能够实现从父类中继承静态方法和静态属性。

19.实现一个compose函数

compose函数是用来组合合并函数，最后输出值的思想。在redux源码中用于中间件的处理。

使用while循环实现

使用reduce迭代实现

20.实现异步并行函数

fn是一个返回Promise的函数才可使用下面的函数：

fn不是一个返回Promsie的话那就包一层：

21.实现异步串行函数

22.私有变量的实现

以上是es5实现的私有变量的封装，通过使用WeakMap可以扩展每个实例所对应的私有属性，私有属性在外部无法被访问，而且随this对象的销毁和消失。

这里有个小细节值得一提,请看如下的代码：

如上是挂在到原型上的方法和每个实例独有的方法不同写法。它们有什么区别呢？（ps:可以手动打印）

调用原型上的方法那么私有变量的值是与最近一个实例调用原型方法的值。其上一个实例的值也是随之改变的，那么就出现问题了...

而使用WeakMap可以解决如上的问题：做到将方法挂在到原型，且不同时期同一个实例调用所产生的结果是一致的。

源代码

javascript--，欢迎star

23.ReplaceAll

我们知道string.Replace()函数只会替换第一个项目。

你可以在这个正则表达式的末尾添加/g来替换所有内容。

var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"12345复制代码类型：[javascript]

24.提取唯一值

我们可以使用Set对象和Spread运算符，创建一个剔除重复值的新数组。

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]1234复制代码类型：[javascript]

25.将数字转换为字符串

我们只需使用带空引号的串联运算符即可。

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string12345复制代码类型：[javascript]

26.将字符串转换为数字

用+运算符即可。

请注意这里的用法，因为它只适用于“字符串数字”。

the_string = "123";
console.log(+the_string);
// 123
the_string = "hello";
console.log(+the_string);
// NaN123456复制代码类型：[javascript]

27.随机排列数组中的元素

每天我都在随机排来排去……

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]12345复制代码类型：[javascript]

28.展平多维数组

只需使用Spread运算符。

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]123复制代码类型：[javascript]

29.短路条件

举个例子：

if (available) {
    addToCart();
}123复制代码类型：[javascript]

只需使用变量和函数就能缩短它：

available && addToCart()1复制代码类型：[javascript]

30.动态属性名称

我一直以为我必须先声明一个对象，然后才能分配一个动态属性。

const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }1234567复制代码类型：[javascript]

31.使用length调整大小/清空数组

基本上就是覆盖数组的length。

如果我们要调整数组的大小：

var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]12345678复制代码类型：[javascript]

如果我们要清空数组：