10 个超棒的 JavaScript 简写技巧

这篇具有很好参考价值的文章主要介绍了10 个超棒的 JavaScript 简写技巧。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.合并数组

普通写法:

我们通常使用Array中的concat()方法合并两个数组。用concat()方法来合并两个或多个数组,不会更改现有的数组,而是返回一个新的数组。请看一个简单的例子:

let apples = ['🍎', '🍏']; 
let fruits = ['🍉', '🍊', '🍇'].concat(apples); 
console.log( fruits ); //=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

简写写法:

我们可以通过使用ES6扩展运算符(...)来减少代码,如下所示:

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇', ...apples];  
console.log( fruits ); //=> ["🍉", "🍊", "🍇", "🍎", "🍏"]`

2.合并数组(在开头位置)

普通写法: 假设我们想将apples数组中的所有项添加到Fruits数组的开头,而不是像上一个示例中那样放在末尾。我们可以使用Array.prototype.unshift()来做到这一点:

let apples = ['🍎', '🍏']; 
let fruits = ['🥭', '🍌', '🍒']; 
//Add all items from apples onto fruits at start Array.prototype.unshift.apply(fruits, apples)
console.log( fruits ); //=> ["🍎", "🍏", "🥭", "🍌", "🍒"]`

简写写法:

我们依然可以使用ES6扩展运算符(...)缩短这段长代码,如下所示:

let apples = ['🍎', '🍏']; 
let fruits = [...apples, '🥭', '🍌', '🍒']; 
console.log( fruits ); //=> ["🍎", "🍏", "🥭", "🍌", "🍒"]`

3.克隆数组

普通写法:

我们可以使用Array中的slice()方法轻松克隆数组,如下所示:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = fruits.slice();
console.log( cloneFruits ); //=> ["🍉", "🍊", "🍇", "🍎"]`

简写写法:

我们可以使用ES6扩展运算符(...)像这样克隆一个数组:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = [...fruits];  
console.log( cloneFruits ); //=> ["🍉", "🍊", "🍇", "🍎"]`

4.解构赋值

普通写法:

在处理数组时,我们有时需要将数组“解包”成一堆变量,如下所示:

let apples = ['🍎', '🍏']; 
let redApple = apples[0]; 
let greenApple = apples[1];
console.log( redApple );//=> 🍎 console.log( greenApple );  //=> 🍏`

简写写法:

我们可以通过解构赋值用一行代码实现相同的结果:

let apples = ['🍎', '🍏'];
let [redApple, greenApple] = apples;  
console.log( redApple );    //=> 🍎 
console.log( greenApple );  //=> 🍏`

5.模板字面量

普通写法:

通常,当我们必须向字符串添加表达式时,我们会这样做:

// Display name in between two strings 
let name = 'Palash'; 
console.log('Hello, ' + name + '!'); //=> Hello, Palash! // Add & Subtract two numbers 
let num1 = 20; 
let num2 = 10;
console.log('Sum = ' + (num1 + num2) + ' and Subtract = ' + (num1 - num2)); //=> Sum = 30 and Subtract = 10`

简写写法:

通过模板字面量,我们可以使用反引号(``),这样我们就可以将表达式包装在${…}`中,然后嵌入到字符串,如下所示:

// Display name in between two strings 
let name = 'Palash';
console.log(`Hello, ${name}!`);  // <-- No need to use + var + anymore //=> Hello, Palash! // Add two numbers 
let num1 = 20;
let num2 = 10; 
console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`); //=> Sum = 30 and Subtract = 10``

6.For循环

普通写法:

我们可以使用for循环像这样循环遍历一个数组:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
 // Loop through each fruit 
for (let index = 0; index < fruits.length; index++) {
  console.log( fruits[index] );
 // <-- get the fruit at current index 
} //=> 🍉 //=> 🍊 //=> 🍇 //=> 🍎`

简写写法:

我们可以使用for...of语句实现相同的结果,而代码要少得多,如下所示:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
// Using for...of statement  
for (let fruit of fruits) { 
   console.log( fruit ); 
} //=> 🍉 //=> 🍊 //=> 🍇 //=> 🍎`

7.箭头函数

普通写法:

要遍历数组,我们还可以使用Array中的forEach()方法。但是需要写很多代码,虽然比最常见的for循环要少,但仍然比for...of语句多一点:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
 // Using forEach method 
fruits.forEach(function(fruit){
console.log( fruit );
}
); //=> 🍉 //=> 🍊 //=> 🍇 //=> 🍎`

简写写法:

但是使用箭头函数表达式,允许我们用一行编写完整的循环代码,如下所示:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(fruit =>
console.log( fruit )
);  // <-- Magic ✨ //=> 🍉 //=> 🍊 //=> 🍇 //=> 🍎`

8.在数组中查找对象

普通写法:

要通过其中一个属性从对象数组中查找对象的话,我们通常使用for循环:

let inventory = [  
{name: 'Bananas', quantity: 5},  
{name: 'Apples', quantity: 10}, 
{name: 'Grapes', quantity: 2}
]; 
// Get the object with the name `Apples` inside the array 
function getApples(arr, value) {   
for (let index = 0; index < arr.length; index++) {
// Check the value of this object property `name` is same as 'Apples'     
if (arr[index].name === 'Apples') {
//=> 🍎 
// A match was found, return this object
return arr[index];     
}
} 
} 
let result = getApples(inventory);
console.log( result ) //=> { name: "Apples", quantity: 10 }``

简写写法:

上面我们写了这么多代码来实现这个逻辑。但是使用Array中的find()方法和箭头函数=>,允许我们像这样一行搞定:

// Get the object with the name `Apples` inside the array 
function getApples(arr, value) { 
  return arr.find(obj => 
  obj.name === 'Apples'
  );  // <-- here } 
  let result = getApples(inventory); 
  console.log( result ) //=> { name: "Apples", quantity: 10 }``

9.将字符串转换为整数

普通写法:

parseInt()函数用于解析字符串并返回整数:

let num = parseInt("10") 
console.log( num ) //=> 10 console.log( typeof num )  //=> "number"`

简写写法:

我们可以通过在字符串前添加+前缀来实现相同的结果,如下所示:

let num = +"10"; 
console.log( num )           
//=> 10 console.log( typeof num )  => "number" console.log( +"10" === 10 )  //=> true`

10.短路求值

普通写法:

如果我们必须根据另一个值来设置一个值不是falsy值,一般会使用if-else语句,就像这样:

function getUserRole(role) {  
let userRole;  
  // If role is not falsy value   
  // set `userRole` as passed `role` value  
if (role) {     
   userRole = role;   
} else { 
// else set the `userRole` as USER 
 userRole = 'USER';  
}  
 return userRole; 
} 
console.log( getUserRole() )         //=> "USER" console.log( getUserRole('ADMIN') )  //=> "ADMIN"``

简写写法:

但是使用短路求值(||),我们可以用一行代码执行此操作,如下所示:

function getUserRole(role) {  
 return role || 'USER'; 
 console.log( getUserRole() )        
//=> "USER" console.log( getUserRole('ADMIN') )  //=> "ADMIN"`

补充几点

箭头函数:

如果你不需要this上下文,则在使用箭头函数时代码还可以更短:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(console.log);`

在数组中查找对象:

你可以使用对象解构和箭头函数使代码更精简:

``Get the object with the name `Apples` inside the array 
const getApples = array => array.find(({ name }) => name === "Apples");
let result = getApples(inventory);
console.log(result); //=> { name: "Apples", quantity: 10 }``

短路求值替代方案:文章来源地址https://www.toymoban.com/news/detail-457521.html

const getUserRole1 = (role = "USER") => role;
const getUserRole2 = role => role ?? "USER";
const getUserRole3 = role => role ? role : "USER";`

到了这里,关于10 个超棒的 JavaScript 简写技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 10 个超赞的 C 语言开源项目

    今天给大家分享10个超赞的C语言开源项目,希望这些内容能对大家有所帮助! 01. Webbench Webbench 是一个在 Linux 下使用的非常简单的网站压测工具。 它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能。 最多可以模拟 3 万个并发连接去测试网站的

    2023年04月17日
    浏览(101)
  • 10个超炫酷的前端3D开源项目

    本文将分享 10 个超炫酷的前端 3D 开源项目。从令人惊叹的视觉效果到富有创新概念的交互体验,这些项目展示了前端技术的无限可能。无论你是新手还是经验丰富的开发者,都值得一探究竟! 基于 Three.js 的前端 WebGL 页面开发合集,包含冰墩墩、数字城市、3D人像、车模展示

    2024年02月08日
    浏览(89)
  • 轻松掌握JavaScript字符串操作的10个小技巧

            在JavaScript中,字符串是一种基本的数据类型,表示文本字符序列。JavaScript提供了许多内置的字符串操作方法和属性,可以方便地对字符串进行处理。本教程将介绍一些常用的JavaScript字符串操作。 访问字符串长度 可以使用 length 属性获取一个字符串的长度。例如

    2024年02月06日
    浏览(45)
  • JavaScript 中 try...catch 的 10 个使用技巧

    作为一位 Web 前端工程师,JavaScript 中的 try…catch 是我们常用的特性之一。 try…catch 可以捕获代码中的异常并防止应用程序崩溃。但是try…catch 不仅仅是简单地捕获异常。本文我将分享 10 个有用的 try…catch 使用技巧,让你在处理异常时更加得心应手。 如果你想捕获代码中所

    2024年02月01日
    浏览(39)
  • 发掘JavaScript潜力:掌握高级技巧,成为JavaScript编程大师!

    🎬 岸边的 风:个人主页  🔥 个人专栏  :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 众所周知, JavaScript  是一种非常流行 🔥 的编程语言,它已经成为了网页开发的必备技能。但是,在我们从事 JavaScript编程 的时候,我们却没有完全发掘和利用它的

    2024年02月14日
    浏览(47)
  • MATLAB:很好用的画图函数tiledlayout(),超棒 ~~

    @TOC   最近用MATLAB画图,发现使用subplot()画多个图时,不能共享一个颜色栏,而且布局和填充非常不方便,偶尔看到有位仁兄在留言中说了这个函数,不用不知道,简直太好用了,必须写个博客记录一下! 提示:以下是本篇文章正文内容,下面案例可供参考tiledlayout的官方

    2024年02月16日
    浏览(45)
  • JavaScript 练手小技巧:键盘事件

    键盘事件应该是鼠标事件之外,使用频率最高的 JS 事件了吧? 一般用于 全局 或者 表单 。 键盘事件由用户击打键盘触发,主要有 keydown 、 keypress 、 keyup 三个事件。 keydown :按下键盘时触发。Ctrl、Shift、Alt 等和其它 按键组合 时,组合键的事件监听通常要使用 keydown 。 ke

    2024年02月09日
    浏览(42)
  • 9 个实用的 JavaScript 技巧

    JavaScript 最初是为了给网站添加一些功能而被设计出来的简单语言。但是时至今日,它无处不在,而且还更加复杂了。随着 Web 应用程序越来越复杂,JavaScript 也发展得越来越快。编写简洁、可读且可维护的 JavaScript 程序不再像以前那么容易了。 今天我们总结 9 个实用的 Java

    2024年02月09日
    浏览(31)
  • JavaScript中的20个小技巧

    箭头函数可在没有参数时更简洁 箭头函数用于定义并创建函数的常用方式。如果没有参数,则可以使用下面的代码: 使用setInterval()实现计时器 setInterval()是一个用于重复调用函数的内置函数。下面是一个setInterval()计时器的例子: 数组查找/搜索 使用Array.find()方法可以快速查

    2023年04月08日
    浏览(39)
  • JavaScript高级技巧:深入探索JavaScript语言的高级特性和用法

    当我们谈论JavaScript高级技巧时,以下是一些示例来说明这些概念: 闭包(Closures): 在上面的例子中, innerFunction 是一个闭包,它可以访问外部函数 outerFunction 中的 outerVariable 变量,即使在外部函数执行结束后也可以。 高阶函数(Higher-Order Functions): 在上面的例子中,

    2024年02月08日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包