8个编写JS代码的小技巧和窍门

2023-05-16

下面js教程栏目给大家介绍8个编写javascript代码的技巧和窍门。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

推荐教程:《JavaScript视频教程》

1. 生成指定区间内的数字

有时候需要创建在某个数字范围内的数组。比如在选择生日时。以下是最简单的实现方法。

let start = 1900,
    end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]

// 也可以这样,但是大范围结果不稳定
Array.from({ length: end - start + 1 }, (_, i) => start + i);

2. 把值数组中的值作为函数的参数

有时候我们需要先把值放到数组中,然后再作为函数的参数进行传递。使用 ES6 语法可以只凭借扩展运算符(...)就可以把值从数组中提取出来: [arg1,arg2] => (arg1,arg2)

const parts = {
  first: [0, 2],
  second: [1, 3],
};

["Hello", "World", "JS", "Tricks"].slice(...parts.second);
// ["World", "JS", "Tricks"]

这个技巧在任何函数中都适用,请继续看第 3 条。

3. 把值数组中的值作为 Math 方法的参数

当需要在数组中找到数字的最大或最小值时,可以像下面这样做:

// 查到元素中的 y 位置最大的那一个值
const elementsHeight =  [...document.body.children].map(
  el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 输出最大的那个值

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

4. 展平嵌套数组

Array 有一个名为 Array.flat 的方法,它需要一个表示深度的参数来展平嵌套数组(默认值为 1)。但是如果你不知道深度怎么办,这时候只需要将 Infinity 作为参数即可。另外还有一个很好用的 flatMap 方法。

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]];
arrays.flat(Infinity);
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. 防止代码崩溃

如果在代码中存在不可预测的行为,后果是难以预料的,所以需要对其进行处理。

例如当你想要获取的属性为 undefined 或 null 时,会得到 TypeError 错误。

如果你的项目代码不支持可选链( optional chaining)的话,可以这样做:

const found = [{ name: "Alex" }].find(i => i.name === 'Jim');
console.log(found.name);
// TypeError: Cannot read property 'name' of undefined

可以这样避免

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {};
console.log(found.name);
// undefined

不过这要视情况而定,对于小规模的代码进行处理完全没什么问题。不需要太多代码就可以处理它。

6. 传参的好方法

在 ES6 中可以把 模板字面量(Template literal) 当作是不带括号的函数的参数。这在进行格式化或转换文本的时非常好用。

const makeList = (raw) =>
  raw
    .join()
    .trim()
    .split("\n")
    .map((s, i) => `${i + 1}. ${s}`)
    .join("\n");

makeList`
Hello, World
Hello, World
`;

// 1. Hello
// 2. World

7. 像变戏法一样交换变量的值

通过解构赋值语法,可以轻松地交换变量。

let a = "hello";
let b = "world";

// 错误 ❌
a = b
b = a
// { a: 'world', b: 'world' }

// 正确 ✅
[a, b] = [b, a];
// { a: 'world', b: 'hello' }

8. 遮蔽字符串

某些时候我们需要遮蔽字符串的一部分,当然不只是对密码做这种操作。下面代码中通过 substr(-3)  得到字符串的一部分,即从字符串末尾开始往前 3 个字符,然后再用你喜欢的字符填充剩余的位置(比如说用 *

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme

结语

在编码时还需要保持代码整洁,平时注意积累在编码时所使到的技巧,并关注 JavaScript 的新增特性。

原文地址:https://dev.to/gigantz/9-javascript-tips-tricks-to-code-like-a-wizard-559i

作者:Orkhan Jafarov

更多编程相关知识,请访问:编程课程!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

8个编写JS代码的小技巧和窍门 的相关文章

  • 18个用于创建漂亮图表的JavaScript库推荐

    几乎不可能想象没有图形和图表的任何仪表盘 它们快速有效地呈现复杂的统计数据 此外 xff0c 一个好的图表还可以增强网站的整体设计 在本文中 xff0c 我将向您展示一些用于图形和图表的最佳JavaScript库 这些库将帮助您为将来的项目
  • JavaScript基础--引用数据类型 (对象)

    本文主要讲述了JavaScript对象的属性和对象的引用 xff0c 以及对象的读取 赋值 删除和获取对象键名的操作 1 对象 对象就是一组 键值对 xff08 key value xff09 的集合 xff0c 是一种无序的复合数据集合
  • javascript面向对象设计

    javascript和java语言不一样 xff0c 它没有类这个说法 xff0c 更没有子类父类一说 xff0c 所以它所谓的继承机制 xff0c 也是和其他语言完全不同的 创建对象三种方式 1 最简单的方式 xff0c 创建一个obje
  • 关键CSS和Webpack:自动最小化渲染阻止CSS

    消除渲染阻止的JavaScript和CSS 这是我始终坚持使用的Google Page Speed Insights建议 Google建议您在页面加载准备就绪时将最初需要的CSS 内插 CSS内嵌并加载CSS的其余部分 当访问web页面时
  • 如何用SASS编写可重用的CSS

    Sass是一个CSS预处理程序 xff0c 它在前端工程师的工具箱中变得至关重要 Sass之所以流行 xff0c 是因为它修复了几个CSS缺陷 相关推荐 xff1a css在线手册 这也是Bootstrap 4运行的基础 这意味着为了理解如
  • JS 变量的作用域及闭包

    与闭包有关的概念 xff1a 变量的作用域和变量的生存周期 下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包 xff0c 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 一 变量的作用域 1 变
  • 理解JavaScript中的变量、范围和提升

    变量是许多编程语言的基本组成部分 xff0c 也是新手需要学习的第一个也是最重要的概念 JavaScript中有许多不同的变量属性 xff0c 以及命名变量时必须遵循的一些规则 在JavaScript中 xff0c 有三个关键字用于声明变量
  • 用于VueJS和Webpack的代码分割模式

    拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法 由于用户不必一次性下载所有代码 xff0c 他们将能够更快地看到页面并与页面进行交互 这将提高用户体验 xff0c 特别是在移动领域 xff0c 这是搜索引擎优化的一个胜利 x
  • javascript掌握正则表达式

    正则表达式 xff08 英语 xff1a Regular Expression xff0c 在代码中常简写为regex regexp或RE xff09 使用单个字符串来描述 匹配一系列符合某个句法规则的字符串搜索模式 我想正则表达式之所以难
  • 知道要测试什么——Vue组件单元测试

    关于单元测试Vue组件 xff0c 我看到的最常见的问题是 我到底应该测试什么 虽然测试过多或过少都是可能的 xff0c 但我的观察是 xff0c 开发人员通常会在测试过多时犯错误 毕竟 xff0c 没有人愿意成为一个组件测试不足导致应用程
  • 软件测试 | 测试开发书单 | 测试工程师必读经典好书,你读过几本?

    测试好书1080 480 46 3 KB 软件测试入行容易进阶难 在持续交付体系背景下 xff0c 要成为测试开发高手意味着非常系统综合的知识储备 广泛阅读经典好书是快速成长的必要方式 霍格沃兹测试学院重点推荐几本测试经典好书以及必读清单
  • 使用webpack提升vue.js应用程序的四种方法

    Webpack是开发Vue js单页面应用程序的必要工具 通过管理复杂的构建步骤 xff0c 它使您的开发工作流更加简单 xff0c 并且可以优化应用程序的大小和性能 在本文中 xff0c 我将解释Webpack提升Vue应用程序的四种方法
  • 了解Node.js中的流(Stream)

    Node js 中的流 xff08 Stream xff09 是出了名的难用甚至是难以理解 用 Dominic Tarr 的话来说 xff1a 流是 Node 中最好的 xff0c 也是最容易被误解的想法 即使是 Redux 的创建者和 R
  • 深入了解Vue.js的作用域插槽

    作用域槽是Vue js的一个有用特性 xff0c 它可以使组件更加通用和可重用 唯一的问题是它们很难理解 试着让你的头在父母和孩子的范围内交织 xff0c 就像解决一个棘手的数学方程 当你不能很容易地理解某件事时 xff0c 一个好的方法是
  • JavaScript常用基础算法

    一个算法只是一个把确定的数据结构的输入转化为一个确定的数据结构的输出的function 算法内在的逻辑决定了如何转换 基础算法 一 排序 1 冒泡排序 冒泡排序function bubbleSort arr for var i 61 1 l
  • HTML中的meta标签属性的使用

    之前学习前端中 xff0c 对meta标签的了解仅仅只是这一句 lt meta charset 61 34 UTF 8 34 gt 但是打开任意的网站 xff0c 其head标签内都有一列的meta标签 下面我们就来详细介绍一下meta标签
  • 移动端H5开发常用小技巧(总结)

    本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享 xff0c 这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题 xff0c 希望能给大家带来或多或少的帮助 html 篇 常用的meta属性设置 meta对于移动端的一些特殊
  • JavaScript中Switch语句的使用方法

    除了if else之外 xff0c JavaScript还有一个称为switch语句的功能 switch是一种条件语句 xff0c 它将针对多种可能的情况评估表达式 xff0c 并根据匹配的情况执行一个或多个代码块 switch语句与包含许
  • 如何构建可运行的JavaScript规范

    编程不仅仅是给计算机下达如何完成一项任务的指令 xff0c 它还包括以一种精确的方式与他人交流思想 xff0c 甚至是与未来的自己 这样的交流可以有多个目标 xff0c 也许是为了共享信息 xff0c 或者只是为了更容易地修改 如果你不理解

随机推荐

  • javascript中函数的5个高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数对任何一门语言来说都是一个核心的概念 xff0c 在javascript中更是如此 本文将深入介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符
  • 理解JavaScript中的原型和继承

    本文主要讲了原型如何在JavaScript中工作 xff0c 以及如何通过 Prototype 所有对象共享的隐藏属性链接对象属性和方法 xff1b 以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值 介绍 JavaScrip
  • 大学毕业后转行软件测试我后悔了

    来自一篇新学员的留言 大学本科幼师专业 xff0c 家里人都想让我考教师资格证 xff0c 等毕业了当一名人民教师 xff0c 说这个职业是一辈子的铁饭碗 xff0c 风吹不着雨淋不到 xff0c 还有寒暑假 xff0c 找个离家近的 xf
  • 分享5个JS函数的高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数对任何一门语言来说都是一个核心的概念 xff0c 在javascript中更是如此 本文将深入介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符
  • 详解vue.js中watch的使用

    在vue中 xff0c 使用watch来响应数据的变化 watch的用法大致有三种 下面代码是watch的一种简单的用法 xff1a lt input type 61 34 text 34 v model 61 34 cityName 34
  • Vue中值得关注的21个开源项目(推荐)

    Vue 相对不于 React 的一个优点是它易于理解和学习 xff0c 且在国内占大多数 咱们可以在 Vue 的帮助下创建任何 Web 应用程序 因此 xff0c 时时了解一些新出现又好用的Vue 开源项目也是挺重要 xff0c 一方面可以
  • javaScript面向对象的三个基本特征介绍

    了解过面向对象的同学应该都知道 xff0c 面向对象三个基本特征是 xff1a 封装 继承 多态 xff0c 但是对于这三个词具体可能不太了解 对于前端来讲接触最多的可能就是封装与继承 xff0c 对于多态来说可能就不是那么了解了 封装 在
  • 7个实用的CSS background-image小技巧

    xff08 推荐教程 xff1a CSS教程 xff09 background image可能是我们所有人 xff08 前端开发人员 xff09 在我们的职业生涯中至少使用过几次的CSS属性之一 大多数人认为背景图像没有什么不寻常的 xff
  • 值得收藏的css grid构建复杂布局的小技巧!

    xff08 推荐教程 xff1a CSS教程 xff09 网格布局是现代CSS中最强大的功能之一 使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的 快速响的布局 在这篇文章中 xff0c 将会介绍所有我们需要了解的 CS
  • 10个值得了解的Chrome开发工具和技巧

    1 模拟慢速网络和慢速设备 我们可能习惯了在城市的网速 xff0c 那是杠杠的 xff0c 并不意味网速在中国哪个都一样的 xff0c 在一些偏远地方 xff0c 网速依然慢的可怜 xff0c 所以有时候我们所做的产品是需要考虑网速慢的情况
  • JS中判断变量是否为数字方法

    推荐教程 xff1a JavaScript视频教程 JavaScript 是一种动态类型语言 xff0c 这意味着解释器在运行时确定变量的类型 实际上 xff0c 这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据 如果没有文档和
  • vue+webpack2实现路由懒加载的方法介绍

    下面Vue js教程栏目给大家介绍一下vue 43 webpack2实现路由的懒加载的方法 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 当打包构建应用时 xff0c Javascript 包会变得
  • JS Math对象的10 个实用方法

    推荐教程 xff1a JavaScript视频教程 JavaScript中的math 对让我们能够对执行一些数学操作 它具有数学常数和函数的属性和方法 在今天的文章中将介绍 Math对象的一些有用方法 1 Math min Math min
  • PDF文档电子公章的初试

    PART 1 大家在日常生活中经常会接触到电子公章 xff0c 比如电子发票上一般会包含电子公章信息 xff0c 比如下图发票中就带有两个电子公章 xff0c 顶部的公章是普通的图形公章 xff0c 右下角的电子公章不仅包含图形公章还包含了
  • css grid构建复杂布局的小技巧

    xff08 推荐教程 xff1a CSS教程 xff09 网格布局是现代CSS中最强大的功能之一 使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的 快速响的布局 在这篇文章中 xff0c 将会介绍所有我们需要了解的 CS
  • vue.js中使用v-for以及获取索引的方法介绍

    下面Vue js教程栏目带大家了解一下vue js中v for的使用及索引获取 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 2 x版本 xff1a v for 61 34 item index i
  • HTML网页自动跳转的5种方法

    xff08 推荐教程 xff1a html教程 xff09 在我们进行网站创建时经常会遇到需要进行网页跳转的情况 xff0c 本文就来为大家介绍五种网页自动跳转的方法 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望
  • 深入讨论JavaScript中Set对象如何让代码更快

    我确信有很多开发人员坚持使用基本的全局对象 xff1a 数字 xff0c 字符串 xff0c 对象 xff0c 数组和布尔值 对于许多用例 xff0c 这些都是需要的 但是如果想让你的代码尽可能快速和可扩展 xff0c 那么这些基本类型并不
  • ES6中的for ... of循环和可迭代对象

    推荐教程 xff1a JavaScript视频教程 本文将研究 ES6 的 for of 循环 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 旧方法 在过去 xff0c 有两种方法可以遍历 java
  • 8个编写JS代码的小技巧和窍门

    下面js教程栏目给大家介绍8个编写javascript代码的技巧和窍门 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 推荐教程 xff1a JavaScript视频教程 1 生成指定区间内的数字 有