html5 javascript写法,9 个强大而非主流的JS写法(各种 Hack 写法)
在日常开发中优雅的写法可提高代码的可读性,以及使代码整洁,本篇文章介绍了9种非常主流且又优雅的写法(各种 Hack 写法)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
1. 全局替换
我们知道,字符串函数 replace () 仅替换第一次出现的情况。
您可以通过在正则表达式的末尾添加 /g 来替换所有出现的内容。var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"
2. 提取唯一值
通过使用 Set 对象和展开运算符,我们可以创建一个只有唯一值的新数组。var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]
3. 将数字转换为字符串
我们只需要连接一组空引号。var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string
4. 将字符串转换为数字
我们需要的只有 + 运算符。
需要注意的一点是仅适用于 “字符串数字”。the_string = "123";
console.log(+the_string);
// 123
the_string = "hello";
console.log(+the_string);
// NaN
5. 随机排列数组中的元素
我每天都在洗牌var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
return Math.random() - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
6. 多维数组扁平化
只需使用扩展运算符。var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]
7. 短路条件
让我们来看这个例子:if (available) {
addToCart();
}
只需将变量与函数一起使用即可将其缩短:available && addToCart()
8. 动态属性名
我一直以为我必须先声明一个对象才能分配动态属性。const dynamic = 'flavour';
var item = {
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }
9. 使用 length 去调整或清空一个数组
我们主要重写了数组的长度。
如果我们想要调整数组的大小:var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]
如果我们想要空数组:var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
// []
更多web前端知识,请查阅 HTML中文网 !!
html5 javascript写法,9 个强大而非主流的JS写法(各种 Hack 写法)相关推荐
- LEADTOOLS HTML5/JavaScript 实现客户端图像处理
实现零足迹(zero footprint)应用程序的方法虽多,然而许多的应用只是简单的把所有的图片推给服务器端处理,图像处理性能和质量就大打折扣.有了LEADTOOLS JavaScript库,这些问 ...
- html5 函数大全,5 个强大的HTML5 API 函数推荐
HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序.本文将介绍5个新型的API,希望对你的开发工作有所帮助. 1. 全屏API(Fulls ...
- 《HTML5+JavaScript动画基础》——2.4 JavaScript对象
本节书摘来自异步社区<HTML5+JavaScript动画基础>一书中的第2章,第2.4节,作者:[美]Billy Lamberta , Keith Peters著,更多章节内容可以访问云 ...
- 1.6 前端设计——HTML5+Javascript+CSS基础
前端设计时,为了兼容微信内置浏览器,我们采用H5页面的方式进行设计,设计界面时,我们必须充分考虑当前界面是要适配手机操作的. 结合前面的介绍,本章结束时,我们能够完成一个简单的小项目(程序)--选课系 ...
- 【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐 新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...
- devexpress能开发出html,DevExpress推出HTML5 JavaScript控件集
你是否正在创建传统的网站.基于移动平板电脑的应用程序.又或是用WinJS创建桌面应用程序,现在DevExpress在2013年初推出HTML5& JavaScript工具集,这个高性能的数据可 ...
- 经典 HTML5 Javascript 俄罗斯方块游戏
Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...
- html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
- HTML5/JavaScript 图像边缘羽化— 打造图像处理类库第二步
由于之前略忙,主要也还是因为自己太懒,拖了好久才把这篇博客写完.这篇博客是关于图像边缘羽化(柔化)的,也是 JavaScript 图像处理这一系列的第二篇.上一篇是关于Gamma校正的,有兴趣的朋友可 ...
最新文章
- 1106C程序语法树
- Windows server 2008 r2企业版安装步骤
- Android安全教程(2)---Fiddler简易使用教程之使用
- GitHub清除commit记录
- Ruby on Rails 生成指定版本的 Rails 项目
- 【问题和解决《NLTK PYTHON》自然语言处理中文翻译版中的一处代码错误
- python写前端图形界面_Python图形界面开发
- bbs论坛 Android客户端简单设计
- 用简单易懂的例子解释隐马尔可夫模型
- python的OOP机制
- WIN7系统设置保护视力的豆沙绿过程
- python编程快速上手办公自动化_关于疯狂填词(Mad Libs)程序的解答
- android摄氏度转为华氏温度
- 讯飞语音测评的简单demo演示
- BFM:总线功能模型 zz
- 连续办了16年,为什么阿里坚持搞集体婚礼?
- PCI GXL学习之安装篇
- 当你输入网址到网页呈现发生了什么?
- Intellij IDEA如何修改文件的打开方式,创建文件添加后缀名无效!始终默认text文件打开
- 新钛云服助力国际连锁酒店集团实现高效安全运维
热门文章
- 【虹科ELPRO - EMS系统】实现苏州某医药仓库温湿度自动监测 - 100% GxP合规(下)
- TS-修饰符 与 static
- 写一个辨别素数的函数,在主函数输入一个整数,输出是否为素数信息。
- 网易员工哀叹:来公司一年,被裁员搞得没心情上班,想考公务员
- webpack Vue热加载配置好的确不行解决方法,限于webstorm编辑
- 知识点 - 多项式插值法
- qemu学习之添加一个新machine
- Opencv3学习笔记(C++Python双语)---视屏读取与保存
- win10系统如何搜索计算机,让您电脑搜索查找更方便!Win10系统建立索引教程
- 琐记之生活感悟(关于日常生活的东西都丢这里)