资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS奇谋诡计——16 Hacks

JS奇谋诡计——16 Hacks

impig33 / 2217人阅读

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

前言

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

Javascript Hacks for Hipsters (2013)

7 Hacks for ES6 Developers (2017)

Hacks!

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

1.条件运算符实现方法调用 
</>复制代码 
  1. // Boring
  2. if (success) {
  3.     obj.start();
  4. } else {
  5.     obj.stop();
  6. }
  7. // Hipster-fun
  8. var method = (success ? "start" : "stop");
  9. obj[method]();
2.join方法实现字符串拼接 
</>复制代码 
  1. ["milk", "coffee", "suger"].join(", "); // = "milk, coffee, suger"
3.或运算符 || 设置默认值 
</>复制代码 
  1. var name = myName || "No name";
4.与运算符 && 代替 if 判断 
</>复制代码 
  1. // Boring
  2. if (isThisAwesome) {
  3.  alert("yes"); // it"s not
  4. }
  5. // Awesome
  6. isThisAwesome && alert("yes");
  7. // Also cool for guarding your code
  8. var aCoolFunction = undefined;
  9. aCoolFunction && aCoolFunction(); // won"t run nor crash
5.xxx标记代替TODO标记

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

6.Console的 Timing 计时 
</>复制代码 
  1. var a = [1,2,3,4,5,6,7,8,9,10];
  2. console.time("testing_forward");
  3. for (var i = 0; i < a.length; i++);
  4. console.timeEnd("testing_forward");
7.Debugger 设置断点 
</>复制代码 
  1. var x = 1;
  2. debugger; // Code execution stops here, happy debugging
  3. x++;
8.老式Debug手段——全局变量

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

</>复制代码 
  1. var deeplyNestedFunction = function() {
  2.  var private_object = {
  3.  year: "2013"
  4.  };
  5.  // Globalize it for debugging:
  6.  pub = private_object;
  7. };
  8. // Now from the console (Chrome dev tools, firefox tools, etc)
  9. pub.year;
9.老式字符串模板 
</>复制代码 
  1. var firstName = "Tal";
  2. var screenName = "ketacode"
  3. // Super
  4. var template = "Hi, my name is {first-name} and my twitter screen name is @{screen-name}";
  5. var txt = template.replace("{first-name}", firstName)
  6.  .replace("{screen-name}", screenName);

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

10.解构实现变量互换 
</>复制代码 
  1. let a = "world", b = "hello"
  2. [a, b] = [b, a]
  3. console.log(a) // -> hello
  4. console.log(b) // -> world
11.解构简化Async/Await语句 
</>复制代码 
  1. const [user, account] = await Promise.all([
  2.   fetch("/user"),
  3.   fetch("/account")
  4. ])
12.Console妙用

打印对象

</>复制代码 
  1. const a = 5, b = 6, c = 7
  2. console.log({ a, b, c })
  3. // outputs this nice object:
  4. // {
  5. //    a: 5,
  6. //    b: 6,
  7. //    c: 7
  8. // }

打印表格

</>复制代码 
  1. console.table(data [, columns]);

13.单行语句计算数组最大值、和 
</>复制代码 
  1. // Find max value
  2. const max = (arr) => Math.max(...arr); //也是利用了解构
  3. max([123, 321, 32]) // outputs: 321
  4. // Sum array
  5. const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
  6. sum([1, 2, 3, 4]) // output: 10
14.解构实现数组拼接 
</>复制代码 
  1. const one = ["a", "b", "c"]
  2. const two = ["d", "e", "f"]
  3. const three = ["g", "h", "i"]
  4. // Old way #1
  5. const result = one.concat(two, three)
  6. // Old way #2
  7. const result = [].concat(one, two, three)
  8. // New
  9. const result = [...one, ...two, ...three] //没错，又是解构！
15.解构实现浅拷贝 
</>复制代码 
  1. const obj = { ...oldObj }
  2. const arr = [ ...oldArr ]
  3. // 强大的解构
16.使用命名变量提高解构的可读性 
</>复制代码 
  1. const getStuffNotBad = (id, force, verbose) => {
  2.   ...do stuff
  3. }
  4. const getStuffAwesome = ({ id, name, force, verbose }) => {
  5.   ...do stuff
  6. }
  7. // Somewhere else in the codebase... WTF is true, true?
  8. getStuffNotBad(150, true, true)
  9. // Somewhere else in the codebase... I ❤ JS!!!
  10. 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 评论0 收藏0

  • 浏览器的CSS Hacks

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

    lieeps 评论0 收藏0

  • 2017-09-27 前端日报

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

    wangym 评论0 收藏0

  • webpack 4.x学习使用总结

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

    ls0609 评论0 收藏0

发表评论

登陆后可评论

0条评论

impig33

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<