分享 2023 年最新的 15 种 JavaScript 速记技巧 【终极秘籍】

强大且广受欢迎的编程语言 JavaScript 具有庞大的内置函数库，可用于执行各种任务。

本文涵盖了每个开发人员都应该知道的 15 个 JavaScript 特性。无论您是新手还是经验丰富的开发人员，这些功能都会派上用场。那么，让我们来讨论一下这 15 个重要的 JavaScript 特性。

1.重复一个字符串

要在 JavaScript中多次重复一个字符串，您可以使用普通方法或速记方法。

速写：

您可以使用循环多次重复一个字符串。

以下是如何使用for循环执行此操作的示例：

function  repeatString ( string , num ) {
 let result = '' ;
 for ( let i = 0 ; i < num; i++) {
   结果 +=字符串;
}
 返回结果；
}

console.log ( repeatString ( '你好' , 5 ));  

// 输出："HelloHelloHelloHelloHello"

速记：

在速记方法中，我们使用该repeat()方法多次重复一个字符串。

repeat()仅支持现代浏览器，因此您必须使用普通方法来支持旧浏览器。

例子：

console.log（'你好'。重复（5））;  

// 输出："HelloHelloHelloHelloHello"

2.数组的组合

在 JavaScript 中，您可以使用普通方法和快捷方法来合并两个或多个数组。

速写：

以下是如何使用for循环执行此操作的示例：

让array1 = [ 10 , 20 , 30 ];
让array2 = [ 40 , 50 , 60 ];
让mergedArray = [];

for ( let i = 0 ; i < array1.length ; i++) {
 mergedArray. 推（array1[i]）；
}

for ( let i = 0 ; i < array2.length ; i++) {
 mergedArray. 推（array2[i]）；
}

控制台。日志（合并数组）；  

// 输出：[10, 20, 30, 40, 50, 60]

速记：

对于速记，您可以使用concat()、...和reduce()方法。concat()and方法通过...将第二个数组的元素附加到第一个数组的末尾来组合两个或多个数组的元素。

以下是如何使用contact(),...方法的示例：

// concat()
让array1 = [ 10 , 20 , 30 ];
让array2 = [ 40 , 50 , 60 ];
让mergedArray = array1。连接（数组 2）；

控制台。日志（合并数组）；  // 输出：[10, 20, 30, 40, 50, 60]


// ...
let array1 = [ 10 , 20 , 30 ];
让array2 = [ 40 , 50 , 60 ];
让mergedArray = [...array1, ...array2];

控制台。日志（合并数组）；  // 输出：[10, 20, 30, 40, 50, 60]

如果您想以不同的方式组合数组，可以使用reduce()方法。

例子：

// reduce()
let array1 = [ 10 , 20 , 30 ];
让array2 = [ 40 , 50 , 60 ];
让mergedArray = array1。reduce ( ( acc, val ) => acc.concat (val), array2);

控制台。日志（合并数组）；  // 输出：[40, 50, 60, 10, 20, 30]

3.函数接受的参数

您可以通过 3 种不同的方式找到函数接受的参数数量。

方法一：

根据函数定义中命名参数的数量，函数的length属性返回函数期望接收的参数数量。

function  myFunction ( a, b, c ) {
 // 函数体
}

console . 日志（myFunction.length ）；  // 输出：3

方法二：

传递给函数的参数存储在一个名为 的对象中argument，它看起来像一个数组。使用length参数对象的属性，您可以找出有多少参数传递给函数。

由于对象arguments不是真正的数组，因此并非所有数组方法都可以访问。如果您希望在对象上使用数组方法，请使用该Array.from()函数将arguments对象转换为实际数组。

函数 myFunction(a, b, c) {myFunction (a, b, c) {
 console .log (arguments.length);  // 输出：3
}

myFunction ( 1 , 2 , 3 );

您不能使用该arguments对象来计算函数期望从函数外部获得多少参数，因为它只能在函数内部访问。length然后需要使用该属性，就像在方法 1 中一样。

4. JavaScript 中的循环

JavaScript 提供了几种类型的循环来重复重复代码块。

一些常用的循环示例是：

for循环

自增或自减表达式、循环条件和 for 循环的变量是它的三个主要部分。只要条件为真，循环就会一直运行。

从 1 计数到 5 的 for 循环示例：

for (让i = 1 ; i <= 5 ; i++) {
 console.log（一）；
}

输出：

1
2
3
4
5

for-in 循环

您可以使用循环遍历对象的属性for-in。

在此示例中，我们使用循环遍历对象的属性for-in。

例子：

让对象 = {a: 1, b: 2, c: 3}; 对象= {a: 1 , b: 2 , c: 3 };
for (let property  in  object ) {
 console.log( property + ": " + object [ property ]);
}

输出：

一个：1
乙：2
丙：3

for循环

如果可迭代对象是数组或字符串，您可以使用for-of循环来迭代这些值。

for-of使用循环迭代元素数组：

让数组 = [ 1 , 2 , 3 ];
for ( let数组元素) {
 console . 日志（元素）；
}

输出：

1
2
3

5. 字符串转数组

您可以使用该split方法在 JavaScript 中将字符串转换为数组。此方法使用分隔符字符串或正则表达式将字符串拆分为子字符串。

以下示例显示如何使用 方法将字符串转换为数组split：

let string = "apple,banana,orange"; string = "苹果、香蕉、橘子" ;
let array = string .split( "," );
安慰。日志（数组）；// 打印 [ "apple" , "banana" , "orange" ]

使用速记方法，您可以获得相同的结果：

let string = "apple,banana,orange"; string = "苹果、香蕉、橘子" ; 
let array = [... string .split( "," )]; 
安慰。日志（数组）；// 打印 [ "apple" , "banana" , "orange" ]

您可以使用for loop. 使用此方法，您可以通过将每个字符推入其自己的数组来将字符串转换为数组。

一个例子是：

let string = "apple,banana,orange"; string = "苹果、香蕉、橘子" ;
让数组 = [];
for (let i = 0 ; i < string .length; i++) {
 array.push( string [i]);
}
控制台。日志（数组）；// 打印 [ "a" , "p" , "p" , "l" , "e" , "," , "b" , "a" , "n" , "a" , "n" , "a " , ", ", "n" , "g" , "e" ]

在此方法中，不是将字符串拆分为子字符串，而是字符串的每个字符都是数组中的一个单独元素。split 方法允许您根据分隔符分隔字符串，如前两个示例所示。

6. 数组中的最大值和最小值

您可以使用下面的 JavaScript 示例查找数组中的最大数和最小数。

速写：

// 找出数组中的最大数
const  array = [ 3 , 7 , 1 , 9 , 2 , 5 ];
让 maxNumber = array [ 0 ];
for (let i = 1 ; i < array .length; i++) {
 if ( array [i] > maxNumber) {
   maxNumber = array [i]; }
}
}
控制台。日志（最大数量）；  // 输出：9
// 找到数组中的最小数
const  array = [ 3 , 7 , 1 , 9 , 2 , 5 ];
让 minNumber = array [ 0 ];
for (let i = 1 ; i < array .length; i++) {
 if ( array [i] < minNumber) {
   minNumber = array [i]; }
}
}
控制台。日志（最小数量）；  // 输出：1

使用Math.max()and Math.min()，您可以轻松计算最大值或最小值：

// 找出数组中的最大数
const array = [ 3 , 7 , 1 , 9 , 2 , 5 ];
常数maxNumber =数学。最大值（...数组）；
控制台。日志（最大数量）；  // 输出：9
// 找到数组中的最小数
const array = [ 3 , 7 , 1 , 9 , 2 , 5 ];
const minNumber =数学。分钟（...数组）；
控制台。日志（最小数量）；  // 输出：1

7.将字符串转换为数字

要在 JavaScript 中将字符串转换为数字，有几种方法。

使用parseInt()或parseFloat()功能：

// 将字符串转换为整数
const num1 = "42" ;
const num2 = parseInt (num1);  // num2 现在是值为 42 的数字类型

// 将字符串转换为浮点数
const num3 = "3.14" ;
const num4 = parseFloat (num3);  // num4 现在是数字类型，值为 3.14

使用一元加运算符(+)：

// 将字符串转换为数字
const num1 = "42" ;
常量num2 = +num1;  // num2 现在是值为 42 的数字类型

// 将字符串转换为负数
const num3 = "-42" ;
常量num4 = +num3;  // num4 现在是数字类型，值为 -42

8. 为多个变量赋值

JavaScript 提供了普通函数和速记函数来为多个变量赋值：

使用单独的赋值语句方法：

让x;
让你；
让z;

x = 1;
y = 2；
z = 3;

解构赋值简写法：

让x, y, z;

[ x, y, z ] = [ 1 , 2 , 3 ];

解构赋值也可用于从对象分配变量：

const obj = { a : 1 , b : 2 , c : 3 };
设a、b、c；
({a, b, c} = 对象);

9.指数幂

在 JavaScript 中有几种方法可以计算一个数的指数幂。这里有些例子：

使用for循环：

function  power ( base, exponent ) {
 让结果 = 1 ;
 for ( let i = 0 ; i < exponent; i++) {
   结果 *= base;
}
 返回结果；
}
控制台。日志(功率( 2 , 3 ));  // 输出：8

使用Math.pow()功能：

函数 幂（基数，指数）{
 返回 数学。pow（基数，指数）；
}
控制台。日志(功率( 2 , 3 ));  // 输出：8

此外，您还可以使用求幂运算符 ( **) 求出数字的指数幂：

常量 基础= 2 ;
常量指数 = 3 ;
常量结果 =基数** 指数；  // 结果现在是 8

10.双位非运算符(~~)

在 ( ~~) 运算符的帮助下，您可以将数字四舍五入为最接近的整数。

例子：

const num = 3.14 ;
const roundedNum = ~~num;  // roundedNum 现在是 3

您可以使用 ( ~~) 运算符代替Math.floor().

const num = 3.14 ;
const roundedNum = 数学。楼层（数量）；  // roundedNum 现在是 3

您还可以使用 ( ~~) 将非整数值转换为整数。

例如：

const num = "3.14" ;
const intNum = ~~num;  // intNum 现在是 3

这类似于使用parseInt()函数：

const num = "3.14" ;
const intNum = parseInt (num);  // intNum 现在是 3

11.函数参数的默认值

在 JavaScript 中，您可以通过不同的方式为函数参数分配默认值。

速写：

函数 问候（名称）{
 名称=名称|| '匿名' ;
 控制台。日志（`你好，${name}！`）;
}

在上面的示例中，name参数的默认值为'Anonymous'。name如果调用函数时没有为参数传递值greet，它将使用默认值。

速记：

功能 问候（名称= '匿名'）{
 控制台。日志（`你好，${name}！`）;
}

在此示例中，参数的默认值是使用语法name在函数定义中直接指定的。如果调用函数时没有为参数=传递值，它将使用默认值。name``greet

12. 三元运算符

它也被称为条件运算符或三元条件运算符。

JavaScript 中三元运算符的语法是：

健康）状况 ？value_if_true : value_if_false;

如果别的

您可以使用 if-else 语句获得与三元运算符相同的结果。

例子：

让x = 10 ;
让y = 20 ;

如果(x > y) {
 最大值 = x;
} else {
 最大值 = y;
}
控制台。日志（最大值）；  // 输出 20

在下面的示例中，我们将使用 JavaScript 三元运算符：

让x = 10 ;
让y = 20 ;
让maxValue = (x > y) ? x：y；
控制台。日志（最大值）；  // 输出 20

在此示例中，条件x > y被评估为false，因此 的值y被分配给maxValue。如果条件为true，x则将分配给的值maxValue。

三元运算符有助于在单行代码中表达条件逻辑，尽管它比 if-else 形式更难阅读和理解。

当条件逻辑变得更加复杂时，使用三元运算符是个好主意。

13.交换两个变量

在 JavaScript 中，要交换两个变量的值，可以使用不同的方法。

这里有些例子：

速写：

让x = 1;
让y = 2;

让温度= x；
x = y;
y = 温度；

在上面的示例中，我们创建了一个临时变量（temp）来存储 x 的值，然后将 x 的值赋给 y 的值，将 y 的值赋给 temp。

让x = 1 ;
让y = 2 ;
[ x, y ] = [y, x];

在此示例中，使用解构赋值方法交换 x 和 y 的值。您可以使用解构赋值将变量分配给数组或对象的元素。无需临时变量，它可以成为交换值的便捷方式。

如果使用任何一种方法，x 将为 2，y 将为 1。

14.检查多个条件

有几种不同的方法可以在 JavaScript 中检查多个条件。

这里有几个选项：

1. 使用**&&**运营商：

此运算符允许您检查多个条件是否为真。

例如：

if (x > 0 && y < 10) {0 && y < 10 ) {
 // 执行一些代码
}

如果两个条件（x > 0 和 y < 10）都为真，这将只执行 if 语句中的代码。

2. 使用**||**运营商：

此运算符允许您检查多个条件中是否至少有一个为真。

例如：

if (x === 1 || x === 2 || x === 3) {1 || x === 2 || x === 3 ) {
 // 执行一些代码
}

如果 x 等于 1、2 或 3，这将执行 if 语句中的代码。

3.使用switch语句：

这允许您检查多个条件并根据给定表达式的值执行不同的代码块。例如：

switch (x) {
 case  1 :
   // 执行一些代码
   break ;
 case  2 :
   // 执行一些代码
   break ;
 case  3 :
   // 执行一些代码
   break ;
 default :
   // 执行一些代码
}

这将执行 case 块内匹配 x 值的代码。如果所有情况都不匹配，则将执行 default 块内的代码。

请务必注意，&&and||运算符具有特定的优先顺序，因此您可能需要使用括号以您想要的方式对条件进行分组。

4.数组.prototype.include()

您可以使用 Array.prototype.include() 方法检查 JavaScript 中的多个条件。

例子：

常数值 = 2 ;
if ([ 1 , 'one ', 2 , 'two '] .includes (value)) {
 控制台。log ( '该值为1、"one"、2或"two" ');
} else {
 控制台。log ( '该值不是1、"one"、2或"two" ');
}
// 输出：值为 1、“one”、2、

该Array.prototype.include() the函数检查值是否存在。如果存在该值，则 if 块内的代码将在上面的示例中运行。如果找不到该值，将执行 else 块中的代码。

15. 删除属性

delete 运算符允许您从对象中删除多个属性。

以下面为例：

让obj = {
 prop1 : 'value1' ,
 prop2 : 'value2' ,
 prop3 : 'value3' ,
 prop4 : 'value4'
};

删除对象。支柱1；
删除对象。支柱 3 ;

控制台。日志（对象）；  // 输出 { prop2: 'value2', prop4: 'value4' }

或者，您可以使用该Object.assign()方法创建一个删除了所需属性的新对象。

例子：

让obj = {
 prop1 : 'value1' ,
 prop2 : 'value2' ,
 prop3 : 'value3' ,
 prop4 : 'value4'
};

让newObj =对象。分配（{}，对象）；
删除新对象。支柱1；
删除新对象。支柱 3 ;

控制台。日志（新对象）；  // 输出 { prop2: 'value2', prop4: 'value4' }

在现代 JavaScript（ES6 及更高版本）中，您可以使用Object.entries()和Object.fromEntries()方法从对象中删除多个属性。

例子：

让obj = {
 prop1 : 'value1' ,
 prop2 : 'value2' ,
 prop3 : 'value3' ,
 prop4 : 'value4'
};

让newObj =对象。fromEntries (
 Object . entries (obj). filter ( ( [key] ) => key !== 'prop1' && key !== 'prop3' )
);

控制台。日志（新对象）；  // 输出 { prop2: 'value2', prop4: 'value4' }

如果对你有帮助，记得点赞支持哦，目前我们的系统班正在讲解JavaScript正则表达式，这个课程讲完系统班的JavaScript阶段就算完结了，正式开始进入ES6阶段了，这几个月我们在JavaScript课程中融入了大量的面试题、算法以及底层原理知识，目的就是为了帮助大家夯实基础，查漏补缺，有 扎实的JavaScript基础，对于学到后面阶段更加有帮助！这也是2023年通向职业道路，面试求职必须要懂得的技术能力！感兴趣可以联系我参与！

为了更好的让大家认识到JavaScript的精髓，我们在三十天计划群里推出了几节非常重要的JavaScript课程体系，而且每个系列知识点都保障是完整的。感兴趣可以通过下方的练习方式参与课程哦 。如果你正在学习JavaScript，我们已经在三十天计划中完成了4个综合项目实战，那不妨可以听下这个课程体系，三十天计划群里还提供了算法、数组等知识体系！

更多完整 JavaScript 课程体系在我们的系统班里有完整的呈现，包含了 JavaScript 基础篇、重点、算法、原理、面试题、实战案例讲解！同时也为你提供了前端高级工程师成长体系！(详细看下图内容)

如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式！（不定期会推出活动，有大额优惠券推出，活动详情联系助理老师了解即可！）如果你才开始学习前端，那么可以先学习我们的三十天计划（零基础的同学报名系统班同学可以和老师沟通制定学习计划，可以得到更快的成长！）

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自优快云！老师会邀请你进入学习，并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程