文档章节

15个必备的javascript小技巧

孟飞阳
 孟飞阳
发布于 2017/07/23 21:38
字数 1338
阅读 6
收藏 0

1、变量转换

看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法。始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

转换日期(new Date(myVar))和正则表达式(new RegExp(myVar))必须使用构造函数,而且创建正则表达式的时候要使用/pattern/flags的形式。

2、玩转数字

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

3、判断属性是否存在

这个问题包含两个方面,既有检查属性时候存在,还要获取属性的类型。但我们总是忽略了这些小事情:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

但是,有的情况下,我们有更深的结构和需要更合适的检查的时候,可以这样:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

4、对数组排序进行“洗牌”随机排序

这段代码在这里使用Fisher Yates洗牌算法给一个指定的数组进行洗牌(随机排序)。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

5、返回对象的函数能够用于链式操作

当创建面向对象的JavaScript对象的function时,函数返回一个对象将能够让函数可链式的写在一起来执行。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

6、为replace()方法传递一个函数

有的时候你想替换字符串的某个部分为其它的值,最好的方法就是给String.replace()传递一个独立的函数。下面是一个简单例子:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

7、十进制转换为十六进制或者八进制,或者反过来

你是不是写个单独的函数来转换十六进制(或者八进制)呢?马上停下吧!有更容易的现成的函数可以用:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

8、更快的四舍五入

今天的技巧是关于性能。见到过双波浪线"~~"操作符吗?它有时也被称为double NOT运算符。你可以更快的使用它来作为Math.floor()替代品。为什么呢?

单位移~将32位转换输入-(输入+1),因此双位移将输入转换为-(-(输入+1)),这是个趋于0的伟大的工具。对于输入的数字,它将模仿Math.ceil()取负值和Math.floor()取正值。如果执行失败,则返回0,这可能在用来代替Math.floor()失败时返回一个NaN的时候发挥作用。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

虽然~~可能有更好的表现,为了可读性,请使用Math.floor()。

前端有什么不懂的,或者不知道怎么学习的可以来我的前端群:589651705,不管你是小白还是大牛,小编都欢迎,不定期分享干货,欢迎初学和进阶中的小伙伴。

9、模板字符串

截至ES6,JS已经有模板字符串作为替代经典的结束引用的字符串。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

10、处理一个数组或单个元素作为参数的方法

相比于写个单独的方法去分别操作一个数组和一个元素作为参数的函数,更好的是写一个通用的函数,这样就都可以操作。这类似于一些jQuery的方法(css匹配将修改所有的选择器)。

你仅需要先将一切放进数组,Array.concat会接收数组或单一的对象:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

printUpperCase现在可以接收无论单一的元素作为参数还是一个数组:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

11、Javascript版本检测

你知道你的浏览器支持哪一个版本的Javascript吗?如果不知道的话,去维基百科查一下Javascript版本表吧。出于某种原因,Javascript 1.7版本的某些特性是没有得到广泛的支持。不过大部分浏览器都支持了1.8版和1.8.1版的特性。(注:所有的IE浏览器(IE8或者更老的版本)只支持1.5版的Javascript)这里有一个脚本,既能通过检测特征来检测JavaScript版本,它还能检查特定的Javascript版本所支持的特性。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

12、循环中标签的使用

有的时候,循环中又嵌套了循环,你可能想在循环中退出,则可以用标签:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

13、提升

理解提升将帮助你组织你的function。只需要记住,变量声明和定义函数会被提升到顶部。变量的定义是不会的,即使你在同一行中声明和定义一个变量。此外,变量声明让系统知道变量存在,而定义是将其赋值给它。

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

为了使事情更容易阅读,在函数作用域内提升变量的声明将会让你明确该变量的声明是来自哪个作用域。在你需要使用变量之前定义它们。在作用域底部定义函数,确保代码清晰规范。

14、为replace()方法传递一个函数

有的时候你想替换字符串的某个部分为其它的值,最好的方法就是给String.replace()传递一个独立的函数。下面是一个简单例子:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

15、使用document.createDocumentFragment()

您可能需要动态地追加多个元素到文档中。然而,直接将它们插入到文档中会导致这个文档每次都需要重新布局一个,相反的,你应该使用文档碎片,建成后只追加一次:

15个必备的javascript小技巧,看的懂是入门,全会写就是大神

本文转载自:奔跑中的蜗牛

孟飞阳
粉丝 214
博文 1019
码字总数 559543
作品 5
朝阳
个人站长
私信 提问
12个必备的JavaScript装逼技巧

译者按: 无论你是初学者还是资深人士,都值得一读! 原文: 12 Amazing JavaScript Shorthand Techniques 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有...

Fundebug
2017/07/06
0
0
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
2018/05/02
0
0
Markyun.js—常用的js操作小技巧集合体

Markyun.js /* Name: 常用的js操作小技巧集合体 Description: 我常用的js操作技巧。来源于网络中的技术文章和自己工作需要写到的。不断更新中, 是帮助我快速和高效开发前端效率的利器。 Auth...

markYun
2013/04/16
0
3
Flutter开发之Dart必备基础知识

在本文中我们主要对标JavaScript来讲解Dart与JavaScript的异同,对JavaScript还不熟悉的小伙伴可以省略JavaScript部分,直接学习Flutter部分。 程序入口 JavaScript没有预定义的入口函数,但...

CrazyCodeBoy
03/19
0
0
JavaScript 开发者的 10 款必备工具

JavaScript,一种所有主流浏览器都支持的语言,是开发基于浏览器的 Web 应用程序的主力,几乎每年都会受到来自众多开发人员的关注。自然地,框架和库的生态系统自然而然地围绕着 JavaScript...

oschina
2017/10/19
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

《精进》的读后感作文2600字

《精进》的读后感作文2600字: 首先,我想先分享我读这本书的过程,我是一名大一的学生,在我高考完的暑假,有一次一位知乎用户的朋友推荐了这本书。当时我看了这本书的封面,有一句话非常的...

原创小博客
30分钟前
2
0
亿万pv的混合云规划实施

基础服务: keepalive,lvs,nginx,dns,ntp,redis集群,yum仓库,web资源 网络高可用 防火墙冗余,交换机堆叠 专线互联 物理机虚拟化 VMware vcenter/ Proxmox...

以谁为师
51分钟前
4
0
聊聊dubbo的LRUCache

序 本文主要研究一下dubbo的LRUCache LRUCache dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/utils/LRUCache.java public class LRUCache<K, V> extends LinkedHashMap<......

go4it
53分钟前
1
0
前端知识点总结——H5

前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖动API (8)Web Worker (9)Web Storage (10)Web Socket 2.增强...

智云编程
56分钟前
0
0
微服务之架构技术选型与设计

本文主要介绍了架构技术选型与设计-微服务选型,Spring cloud 实现采用的技术,希望对您的学习有所帮助。 架构技术选型与设计-DUBBODubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿...

别打我会飞
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部