Js字符串数组初始化小白攻略_字符串攻略教程

有时候我们需要初始化一个很长的字符串数组,举个例子:const tags = [‘html’,’body’,’h1′,’h2′,’h3′,’h4′,’h5′,’h6′,’form’,’input’,’label’,// 后面还有很长…
];后续的处理是需要遍历这整个数组去完成某些功能,不关心这些字符串的相对顺序。但我们在维护这个字符串数组的时候会感觉有些

Js字符串数组初始化小白攻略

有时候我们需要初始化一个很长的字符串数组,举个例子:

Js字符串数组初始化小白攻略_字符串攻略教程

const tags = [
  'html',
  'body',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'form',
  'input',
  'label',
  // 后面还有很长...
];

后续的处理是需要遍历这整个数组去完成某些功能,不关心这些字符串的相对顺序。但我们在维护这个字符串数组的时候会感觉有些不方便,比如太长、没有分类等。

最近在看一个开源项目正好看到一个小技巧来解决这个问题,直接上代码:

const tags = [
  // root
  'html,body',
  // content
  'h1,h2,h3,h4,h5,h6',
  // form
  'form,input,label,button',
  // ...
].join(',').split(',');

这段代码虽然不是神马很高深的技巧,但初看时还是很有感觉。虽然我们每天可能都会重复写一些代码,但应多花点心思去提升、去重构——“不积跬步,无以至千里”,这是一个永恒的话题 

海计划公众号
(0)
上一篇 2020/03/26 23:30
下一篇 2020/03/26 23:30

您可能感兴趣的内容

  • vue-cli中使用jquery指南教程_cli入门教程

    一.安装依赖npm install jquery –save二.全局导入(必须先安装依赖)第一步在webpack.base.conf.js里加入(新版的可能找不到这个文件,你可以npm install webpack –save-dev进行手动安装)var webpack = require(“webpack”)第二步在module.exports的最后

    2020/04/03
  • FooTable基础知识_高级的响应式表格jQuery插件

    FooTable基础知识 官方网址:https://fooplugins.com/footable/ GitHub:https://github.com/fooplugins/Fo…

    2020/03/06
  • micro小白知识_异步HTTP微服务

    micro小白知识 官方网址:https://zeit.co/blog/micro-8 GitHub:https://github.com/zeit/micro 简介描述:异步HT…

    2020/03/07
  • 前端开发Js变量命名规范入门基础知识_规范使用攻略

    JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题,你会词穷、纠结、惆怅吗?本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码。本文将通过大量的实例来试图自圆其说,形成一套系统化、实用的变量命名理化体系。通过按JavaScript的数据类型分类

    2020/03/29
  • javascript如何验证是否为11位有效电话号码?菜鸟教程网_验证小白攻略

    JavaScript中可以使用正则表达式var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;来判断是否为11位有效电话号码。JavaScript中可以使用正则表达式判断是否为11为有效电话号码:正则表达式:var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;这个表达式的意思是:1–以1为开头;2–第二位可为3,

    2020/03/24
  • GitHub发布史上最大更新,年度报告出炉!菜鸟教程_github基础知识入门

    在昨天的 GitHub Universe 开发者大会上,GitHub 发布了史上最大更新:可直接运行部分代码的 GitHub Actions,以及宣布了 2018 年的 GitHub 年度报告,包括最热门的开源项目和编程语言,让我们一起来先睹为快!自 2008 年推出,GitHub 目前已经是互联网上最大的项目管理和开源协作平台,目前拥有 9600 万个项目

    2020/04/03
  • Vue 数据更新后调用nextTick更新DOM菜鸟攻略_dom使用说明

    如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如: <d

    2020/03/23
  • 理解 JavaScript 执行栈入门基础教程_js知识小白基础

    引例首先来看一个引例:function foo() {console.log(‘1’);bar();console.log(‘3’);
    }function bar() {console.log(‘2’);
    }foo();这段代码将从上往下依次执行,并输出 ‘1’, ‘2’, ‘3’。我们可以看到,bar 函数的执行顺序似乎和它定义的顺序没有关系。为什么呢?这

    2020/04/03
  • 前端js实现Blob、DataURL、canvas、image的相互转换新手入门_blob基础知识教程

    canvas转dataURL:canvas对象、转换格式、图像品质function canvasToDataURL(canvas, format, quality){return canvas.toDataURL(format||’image/jpeg’, quality||1.0);
    }DataURL转canvasfunction dataURLToCan

    2020/03/30
  • filebrowser基础知识入门_一个文件管理器和WebDAV,可用作中间件或独立应用程序

    filebrowser基础知识入门 官方网址:https://filebrowser.xyz GitHub:https://github.com/filebrowser/fileb…

    2020/03/11
  • 程序员接单平台入门基础教程程序员接私活的网站整理_私活小白入门

    国内程序员接活的平台其实很多,这篇文章主要是在网上整理了一些国内程序员接接私活的网站,希望对大家有所帮助。程序员客栈近23万优秀开发者 , 您的专属云端开发团队,程序员客栈是领先的程序员自由工作平台,未来互联网企业用人方式。提供优秀程序员为您进行网站建设制作、测试运维服务、人工智能AI、大数据区块链、软件开发等优质服务。 程序员客栈的优势在于:网站:htt

    2020/04/03
  • 浅谈使用canvas绘制多边形入门指南_canvas小白知识

    本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改。 代码://id为html里canvas标签的属性id;
    //x,y为坐标轴的起始位置,因为canvas默认坐标轴在左上角
    //color为填充图形颜色
    //…side为边,如果有5个参数则绘制出来的为五边形,6个就是六边形
    var draw = funct

    2020/03/24
  • 有趣的Js面试题新手入门如何让 (a == 1 && a == 2 && a == 3) 返回 true_面试入门百科

    前两天在网上看到了一道很有趣的题目,题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?。这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。当时我也冥思苦想很久,甚至一度怀疑这道题目的答案就是 不能。直到在 stackoverflow 上面

    2020/04/05
  • PHP的高效率写法菜鸟教程网_php小白教程

    1、尽量静态化;如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍。当然了,这个测试方法需要在十万级以上次执行,效果才明显。其实静态方法和非静态方法的效率主要区别在内存:静态方法在程序开始时生成内存,实例方法在程序运行中生成内存,所以静态方法可以直接调用,实例方法要先成生实例,通过实例调用方法,静态速度很快,但是多

    2020/03/31
  • Node.js FS模块方法速查基础入门_node小白常识

    1. File System所有文件操作提供同步和异步的两种方式,本笔记只记录异步的API异步方式其最后一个参数是回调函数。回调函数的第一个参数往往是错误对象,如果没有发生参数,那么第一个参数可能是null或者undefinded。同步函数可以使用try catch 捕获异常多个异步函数在同一层次执行,是无法保证顺序的。最好将一个函数放在另一个函数的回调函数

    2020/04/03
  • Vue 动画的封装指南教程_动画小白帮助

    如何进行动画封装,让动画变的可复用,看下面代码.fade-enter,.fade-leave-to{opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active{transition: opacity 1s;
    }<div v-show="

    2020/03/31