国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS奇謀詭計——16 Hacks

impig33 / 2029人閱讀

摘要：前個來源于年的博客，后個來源于年底的博客。的計時設置斷點老式手段全局變量利用全局變量可以在控制臺中查詢變量信息，但要記得在正式上線發布時刪除這些全局變量。

前言

好久沒寫博客啦~這次寫一篇輕松的內容，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包含更多文章哦~項目哦~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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條評論

最新活動
閱讀需要支付1元查看
<