返回顶部
首页 > 资讯 > 前端开发 > JavaScript >学习JavaScript一定要知道的3个小技巧
  • 177
分享到

学习JavaScript一定要知道的3个小技巧

2024-04-02 19:04:59 177人浏览 独家记忆
摘要

目录一、神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二、进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三、使用 .map()、.reduce() 和 .

前言:

通常在 angular React 项目中,code review 时看到一些老式的 javascript 代码,就会将开发人员归类为初学者。但是,如果您知道以下 3 个技巧,您将被视为现代 JavaScript 的尤达大师。那么,让我们开始我们的旅程吧!

一、神奇的扩展运算符

扩展运算符(spread)是三个点( ... ), 可以说我在 JavaScript 中最喜欢的运算符了。我主要在以下 3 种情况下使用:

1.拷贝数组


const arr = [1, 2, 3, 4]
const newArr = [...arr]

console.log(newArr)  // [1, 2, 3, 4]


2.合并数组


const numArr = [1, 2, 3, 4]
const alphaArr = ['a', 'b', 'c']
const newArr = [...numArr, ...alphaArr]

console.log(newArr) // [1, 2, 3, 4, 'a', 'b', 'c']


3.展开对象


const rectangle = { width: 10, height: 10 }
const cube = { ...rectangle, length: 7 }

console.log(cube) // {width: 10, height: 10, length: 7}


二、进行空检查的最佳方法

你还记得你写的第一个空检查代码吗?当 JavaScript 还没有现在这个完善时,我曾在我的旧代码中这样写:


if (foo !== null && foo !== undefined) { }


后来,我的生命被简单的 if 拯救!


if (foo) {}


只要条件值 foo 不是下列值,都将为真值“

除了简单的 if 之外,现代 JavaScript 的可选链操作符 ?. 与空值合并运算符 ?? 可以使我们的代码更加简洁

1.可选链操作符

可选链操作符是访问嵌套对象属性的安全方式。这意味着在访问一长串对象属性时,我们不必进行多次空检查。当尝试访问可能不存在的对象属性时,可选链操作符将会使表达式更短、更简明

以下示例检查客户地址的邮政编码是否为 null :


const client = {
  name: 'Liu Xing',
  address: {
    zipcode: '1234'
  }
}

// 老的取值方式
if (client && client.address && client.address.zipcode) {}
// 更加现代的可选链操作符方式
if (client?.address?.zipcode) {}


2.空值合并运算符

空值合并操作符( ?? )是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。


const defaultMessage = 'Hello JavaScript 之禅'
const msg = defaultMessage ?? 'Hello Liu Xing';
console.log(msg); // Hello JavaScript 之禅'


如果 defaultMessage 是 null 或者 undefined 则将打印出 Hello Liu Xing

当我们按顺序使用它时,它会变得更强大:


console.log(firstName ?? lastName ?? 'anonymous')


在这个例子中,如果 firstName 不是 null/undefined,它将显示 firstName, 否则,如果 lastName 不是 null/undefined,它将显示 lastName。 最后,如果它们都为 null/undefined,它将显示“anonymous”。

三、使用 .map()、.reduce() 和 .filter()

接下来,谈论函数式和反应式编程的强大技术!几年前我第一次使用它时,它真的为我打开了一扇新的大门。 现在每次看到这些简洁的代码,我仍然被它的美丽所震撼。

今天我举例介绍三个最常用的方法:map、reduce 和 filter。

在新冠疫情 之前,我们去巴黎度假。于是他们去超市买了些东西。他们买了食物和日用品。但是所有的物品都是欧元,他们想知道每件物品的价格以及他们食物的人民币总成本。

鉴于 1 欧元等于 7.18 日元。

以传统方式,我们将使用经典循环来完成:


const items = [
  {
    name: 'pineapple',
    price: 2,
    type: 'food'
  },
  {
    name: 'beef',
    price: 20,
    type: 'food'
  },
  {
    name: 'advocate',
    price: 1,
    type: 'food'
  },
  {
    name: 'shampoo',
    price: 5,
    type: 'other'
  }
]

let sum = 0
const itemsInYuan = []

for (let i = 0; i < items.length; i++) {
  const item = items[i]
  item.price *= 7.18
  itemsInYuan.push(item)
  if (item.type === 'food') {
    sum += item.price
  }
}

console.log(itemsInYuan)

console.log(sum) // 165.14
现在我们来使用现在 JavaScript 提供的函数式编程方法来实现这个计算。

const itemsInYuan = items.map(item => {
  const itemInYuan = { ...item }
  itemInYuan.price *= 7.18
  return itemInYuan
})

const sum = itemsInYuan.filter(item => item.type === 'food').reduce((total, item) => total + item.price, 0)

上述示例使用 map 方法将欧元转为日元,使用 filter 过滤掉非食品的项目,使用 reduce 来计算价格总和。

到此这篇关于学习JavaScript一定要知道的3个小技巧的文章就介绍到这了,更多相关JavaScript小技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 学习JavaScript一定要知道的3个小技巧

本文链接: https://www.lsjlt.com/news/159955.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 学习JavaScript一定要知道的3个小技巧
    目录一、神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二、进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三、使用 .map()、.reduce() 和 ....
    99+
    2024-04-02
  • 一定要知道的 25 个 Vue 技巧
    目录1. 将 prop 限制为类型列表2. 默认内容和扩展点3. 使用引号观察嵌套值4. 知道何时使用 v-if(以及何时避免使用)5. 单作用域 slot 的简写(不需要模板标签!...
    99+
    2024-04-02
  • JavaScript需要知道的小技巧有哪些
    这篇文章主要介绍JavaScript需要知道的小技巧有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、神奇的扩展运算符扩展运算符(spread)是三个点( ... ), 可以说我在 JavaScript 中最喜...
    99+
    2023-06-22
  • 你一定不知道的Win8小技巧
      Win8.1上市也有些时日了,各种应用小技巧也被挖掘得差不多了。不过对于这种内涵博大的操作系统而言,偶尔冒出一两个“未知秘密”绝对不是新鲜事儿。比如说今天要跟大家介绍的这三条技巧...
    99+
    2022-06-04
    你一定 小技巧
  • 学习ASP框架的10个技巧,你知道几个?
    ASP框架(Active Server Pages)是微软公司推出的一种服务器端脚本语言,用于动态创建交互式网页和Web应用程序。ASP框架是一种非常流行的Web开发框架,因为它可以轻松地与其他Microsoft技术(如SQL Serve...
    99+
    2023-08-05
    框架 教程 学习笔记
  • 学习java一定要知道的垃圾收集器
    目录垃圾收集器如何演化的?年轻代收集器SerialParNewParallel Scavenge老年代收集器SerialOldParallelOldCMS(ConcurrentMar...
    99+
    2024-04-02
  • JavaScript的这5个技巧你知道了吗
    JavaScript的这5个技巧你知道了吗,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。谁要是说 JavaScript 是世界上比较好的语言,...
    99+
    2024-04-02
  • JavaScript和Python:你需要知道的开发技巧。
    JavaScript和Python:你需要知道的开发技巧 JavaScript和Python是两种广泛应用于Web开发、数据科学等领域的编程语言。这两种语言各自有其独特的特点和用途,但它们也有很多相似之处。在本文中,我们将介绍一些JavaS...
    99+
    2023-08-08
    apache npm javascript
  • 你需要知道的Java和JavaScript学习笔记。
    Java和JavaScript是现代编程中最重要的两种编程语言。Java是一种面向对象的编程语言,广泛用于后台开发、企业应用程序和Android应用程序开发。JavaScript是一种脚本语言,用于Web应用程序开发和前端开发。本文将为你介...
    99+
    2023-06-18
    javascript 关键字 学习笔记
  • 存储ASP学习笔记:你需要知道的数据类型技巧。
    在ASP中,数据类型是至关重要的概念。不同的数据类型可以存储不同类型的数据,并且可以使用不同的技巧和方法来操作这些数据。在本文中,我们将介绍ASP中的常见数据类型,并提供一些实用的技巧和演示代码,帮助你更好地理解和应用这些数据类型。 一、...
    99+
    2023-10-16
    学习笔记 存储 数据类型
  • Python学习教程:5个你一定要知道的图算法,附Python代码
    相信大家已经对 Pandas 或 SQL 等其他关系数据库非常熟悉了。我们习惯于将行中的用户视为列。但现实世界的表现真的如此吗?在互联世界中,用户不能被视为独立实体。他们之间具有一定的关系,在构建机器学习模型时,有时也希望包含这样的关系。在...
    99+
    2023-06-02
  • Windows 平台下的 Javascript 开发技术,你需要知道的几个实用技巧。
    Javascript 作为一门非常流行的编程语言,已经成为了 Web 开发中不可或缺的一部分。随着技术的不断发展,Javascript 的应用范围也不断扩大,从前端到后端,从浏览器到桌面应用,Javascript 已经成为了一门非常强大的...
    99+
    2023-06-19
    开发技术 windows javascript
  • 带你认识,19个学习Python的小技巧!
    如果你之前是一个c,c++,java的程序员,同时在学习python,或者干脆就是一个刚刚学习编程的新手,那么你应该会看到很多特别有用能让你感到惊奇的实用技巧。每一个技巧和语言用法都会在一个个实例中展示给大家,也不需要有其他的说明。但是因为...
    99+
    2023-06-02
  • 实时学习Java和Unix:你需要知道的一切!
    Java和Unix是当今最流行的编程语言和操作系统之一。Java是一种高级编程语言,广泛应用于各种应用程序的开发中,而Unix则是一种强大的操作系统,用于管理计算机资源。本文将向您介绍实时学习Java和Unix的重要性以及提供一些基本知识...
    99+
    2023-08-30
    unix 教程 实时
  • 学Java前一定要知道的4点是什么
    本篇内容主要讲解“学Java前一定要知道的4点是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“学Java前一定要知道的4点是什么”吧!一、Java是什么作为一门面向对象编程语言。Java程序...
    99+
    2023-06-16
  • 5个你应该知道的JavaScript技巧分别是哪些
    这篇文章将为大家详细讲解有关5个你应该知道的JavaScript技巧分别是哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript是目前最流行...
    99+
    2024-04-02
  • Java IDE中的JavaScript开发:你需要知道的所有技巧和技术
    随着web应用程序的不断发展,JavaScript已经成为了最受欢迎的编程语言之一。作为一种既能用于客户端也能用于服务器端的语言,JavaScript已经成为了现代web应用程序的必备技能。如果你是一名Java开发人员,那么你可能已经知道...
    99+
    2023-06-17
    ide bash javascript
  • Java和JavaScript学习笔记:你需要知道的所有内容。
    Java和JavaScript学习笔记:你需要知道的所有内容 Java和JavaScript是两种广泛使用的编程语言,它们在不同的领域有不同的应用。本文将为您提供Java和JavaScript的学习笔记,让您了解这两种语言的基本知识,以及它...
    99+
    2023-06-18
    javascript 关键字 学习笔记
  • 学习 ASP、Bash、教程和Shell:你需要知道的一切!
    ASP、Bash、教程和Shell是编程语言中最常用的几种。它们可以用于Web开发、系统管理、自动化任务等多种场景。在本文中,我们将介绍这几种语言的基础知识、学习资源、以及如何快速入门。 ASP ASP全称Active Server Pa...
    99+
    2023-07-19
    bash 教程 shell
  • 你需要知道的容器学习笔记的 Python 和 JavaScript 资源。
    你需要知道的容器学习笔记的 Python 和 JavaScript 资源 随着容器技术的不断发展,学习容器已经成为了程序员们必备的技能之一。无论你是一个 Python 还是 JavaScript 开发者,本文将为你介绍一些容器学习笔记中的 ...
    99+
    2023-10-04
    javascript 容器 学习笔记
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作