JS奇谋诡计——16 Hacks

impig33 发布于2019-08-22 17:18 / 2017人阅读

摘要：前个来源于年的博客，后个来源于年底的博客。的计时设置断点老式手段全局变量利用全局变量可以在控制台中查询变量信息，但要记得在正式上线发布时删除这些全局变量。

前言

好久没写博客啦~这次写一篇轻松的内容，JS里的16个有趣的技巧，简单总结自Tal Bereznitskey 的两篇博客，代码摘自原文。

Javascript Hacks for Hipsters (2013)

7 Hacks for ES6 Developers (2017)

Hacks!

前9个来源于2013年的博客，后7个来源于2017年底的博客。

1.条件运算符实现方法调用

// Boring
if (success) {
    obj.start();
} else {
    obj.stop();
}
// Hipster-fun
var method = (success ? "start" : "stop");
obj[method]();

2.join方法实现字符串拼接

["milk", "coffee", "suger"].join(", "); // = "milk, coffee, suger"

3.或运算符 || 设置默认值

var name = myName || "No name";

4.与运算符 && 代替 if 判断

// Boring
if (isThisAwesome) {
 alert("yes"); // it"s not
}
// Awesome
isThisAwesome && alert("yes");
// Also cool for guarding your code
var aCoolFunction = undefined;
aCoolFunction && aCoolFunction(); // won"t run nor crash

5.xxx标记代替TODO标记

快速定位未完成的内容，因为正常情况下代码不会出现xxx。

6.Console的 Timing 计时

var a = [1,2,3,4,5,6,7,8,9,10];
console.time("testing_forward");
for (var i = 0; i < a.length; i++);
console.timeEnd("testing_forward");

7.Debugger 设置断点

var x = 1;
debugger; // Code execution stops here, happy debugging
x++;

8.老式Debug手段——全局变量

利用全局变量可以在控制台中查询变量信息，但要记得在正式上线发布时删除这些全局变量。

var deeplyNestedFunction = function() {
 var private_object = {
 year: "2013"
 };
 // Globalize it for debugging:
 pub = private_object;
};
// Now from the console (Chrome dev tools, firefox tools, etc)
pub.year;

9.老式字符串模板

var firstName = "Tal";
var screenName = "ketacode"
// Super
var template = "Hi, my name is {first-name} and my twitter screen name is @{screen-name}";
var txt = template.replace("{first-name}", firstName)
 .replace("{screen-name}", screenName);

个人建议在ES6的时代还是优雅地用``、${}模板字符串吧。

10.解构实现变量互换

let a = "world", b = "hello"
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world

11.解构简化Async/Await语句

const [user, account] = await Promise.all([
  fetch("/user"),
  fetch("/account")
])

12.Console妙用

打印对象

const a = 5, b = 6, c = 7
console.log({ a, b, c })
// outputs this nice object:
// {
//    a: 5,
//    b: 6,
//    c: 7
// }

打印表格

console.table(data [, columns]);

13.单行语句计算数组最大值、和

// Find max value
const max = (arr) => Math.max(...arr); //也是利用了解构
max([123, 321, 32]) // outputs: 321
// Sum array
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
sum([1, 2, 3, 4]) // output: 10

14.解构实现数组拼接

const one = ["a", "b", "c"]
const two = ["d", "e", "f"]
const three = ["g", "h", "i"]
// Old way #1
const result = one.concat(two, three)
// Old way #2
const result = [].concat(one, two, three)
// New
const result = [...one, ...two, ...three] //没错，又是解构！

15.解构实现浅拷贝

const obj = { ...oldObj }
const arr = [ ...oldArr ]
// 强大的解构

16.使用命名变量提高解构的可读性

const getStuffNotBad = (id, force, verbose) => {
  ...do stuff
}
const getStuffAwesome = ({ id, name, force, verbose }) => {
  ...do stuff
}
// Somewhere else in the codebase... WTF is true, true?
getStuffNotBad(150, true, true)
// Somewhere else in the codebase... I ❤ JS!!!
getStuffAwesome({ id: 150, force: true, verbose: true })

The last

到此为止!
感悟：解构（Destructuring）真的很强大~~~(ง •_•)ง

PS: 个人github包含更多文章哦~项目哦~

云服务器 GPU云服务器 Hacks 诡计奇谋 js 16进制存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95053.html

2017-06-16 前端日报

摘要：前端日报精选渐进式动画解决方案从前端开发看面向未来的敏捷学习法知乎专栏深度剖析现代应用众成翻译译关于你需要知道的一切构建离线优先的应用知乎专栏中文为何默认开启四进程不牺牲内存占用异步一浅出异步事件性能调优之内存篇二知乎专栏之性能 2017-06-16 前端日报精选渐进式动画解决方案从前端开发看面向未来的敏捷学习法 - 知乎专栏深度剖析现代 JavaScript 应用 — SiteP...

_ipo 2019-08-20 17:18 评论0 收藏0
浏览器的CSS Hacks

摘要：我不再使用了，相反的是，我将使用的条件判断将类应用到标签。但是，我想记录我之前碰到过的每一个浏览器特定的选择器和样式属性。我相信也没有其他方式提供样式表给独特的利用这些，你能够更好的针对和，代码如下浏览器特定的综合列表原文我不再使用CSS Hacks了，相反的是，我将使用IE的条件判断将类应用到body标签。但是，我想记录我之前碰到过的每一个浏览器特定的CSS 选择器和样式属性。...

lieeps 2019-08-28 18:04 评论0 收藏0
2017-09-27 前端日报

摘要：前端日报精选是如何工作的内存管理如何处理个常见的内存泄漏译中的面向对象原型原型链继承源码事件机制考拉升级经验掘金中文第期你知道编译与解释的区别吗视频在白鹭引擎中的实践王泽变量自定义属性使用指南众成翻译禁止手机虚拟键盘弹出做 2017-09-27 前端日报精选 JavaScript是如何工作的：内存管理 + 如何处理4个常见的内存泄漏(译) js中的面向对象、原型、原型链、继承Vue....

wangym 2019-08-21 16:47 评论0 收藏0
webpack 4.x学习使用总结

摘要：最近一周一直都在折腾一些项目中常用的记录下来，以后免去简单的配置再去查文档。常规入口指示应该使用哪个模块，来作为构建其内部依赖图的开始。把代码转换成，在使用语言中有介绍。扩展语法，使用下一代，在使用中有介绍。用于忽略部分文件。最近一周一直都在折腾webpack,一些项目中常用的记录下来，以后免去简单的配置再去查文档。常规 1.入口指示 webpack 应该使用哪个模块，来作为构建...

ls0609 2019-08-26 12:17 评论0 收藏0