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

資訊專欄INFORMATION COLUMN

JS奇謀詭計(jì)——16 Hacks

impig33 / 2018人閱讀

摘要：前個(gè)來(lái)源于年的博客，后個(gè)來(lái)源于年底的博客。的計(jì)時(shí)設(shè)置斷點(diǎn)老式手段全局變量利用全局變量可以在控制臺(tái)中查詢變量信息，但要記得在正式上線發(fā)布時(shí)刪除這些全局變量。

前言

好久沒(méi)寫(xiě)博客啦~這次寫(xiě)一篇輕松的內(nèi)容，JS里的16個(gè)有趣的技巧，簡(jiǎn)單總結(jié)自Tal Bereznitskey 的兩篇博客，代碼摘自原文。

Javascript Hacks for Hipsters (2013)

7 Hacks for ES6 Developers (2017)

Hacks!

前9個(gè)來(lái)源于2013年的博客，后7個(gè)來(lái)源于2017年底的博客。

1.條件運(yùn)算符實(shí)現(xiàn)方法調(diào)用 
// Boring
if (success) {
    obj.start();
} else {
    obj.stop();
}
// Hipster-fun
var method = (success ? "start" : "stop");
obj[method]();
2.join方法實(shí)現(xiàn)字符串拼接 
["milk", "coffee", "suger"].join(", "); // = "milk, coffee, suger"
3.或運(yùn)算符 || 設(shè)置默認(rèn)值 
var name = myName || "No name";
4.與運(yùn)算符 && 代替 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標(biāo)記代替TODO標(biāo)記

快速定位未完成的內(nèi)容，因?yàn)檎Ｇ闆r下代碼不會(huì)出現(xiàn)xxx。

6.Console的 Timing 計(jì)時(shí) 
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 設(shè)置斷點(diǎn) 
var x = 1;
debugger; // Code execution stops here, happy debugging
x++;
8.老式Debug手段——全局變量

利用全局變量可以在控制臺(tái)中查詢變量信息，但要記得在正式上線發(fā)布時(shí)刪除這些全局變量。

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);

個(gè)人建議在ES6的時(shí)代還是優(yōu)雅地用``、${}模板字符串吧。

10.解構(gòu)實(shí)現(xiàn)變量互換 
let a = "world", b = "hello"
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world
11.解構(gòu)簡(jiǎn)化Async/Await語(yǔ)句 
const [user, account] = await Promise.all([
  fetch("/user"),
  fetch("/account")
])
12.Console妙用

打印對(duì)象

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.單行語(yǔ)句計(jì)算數(shù)組最大值、和 
// Find max value
const max = (arr) => Math.max(...arr); //也是利用了解構(gòu)
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.解構(gòu)實(shí)現(xiàn)數(shù)組拼接 
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] //沒(méi)錯(cuò)，又是解構(gòu)！
15.解構(gòu)實(shí)現(xiàn)淺拷貝 
const obj = { ...oldObj }
const arr = [ ...oldArr ]
// 強(qiáng)大的解構(gòu)
16.使用命名變量提高解構(gòu)的可讀性 
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

到此為止!
感悟：解構(gòu)（Destructuring）真的很強(qiáng)大~~~(? ?_?)?

PS: 個(gè)人github包含更多文章哦~項(xiàng)目哦~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95053.html

相關(guān)文章

  • 2017-06-16 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選漸進(jìn)式動(dòng)畫(huà)解決方案從前端開(kāi)發(fā)看面向未來(lái)的敏捷學(xué)習(xí)法知乎專欄深度剖析現(xiàn)代應(yīng)用眾成翻譯譯關(guān)于你需要知道的一切構(gòu)建離線優(yōu)先的應(yīng)用知乎專欄中文為何默認(rèn)開(kāi)啟四進(jìn)程不犧牲內(nèi)存占用異步一淺出異步事件性能調(diào)優(yōu)之內(nèi)存篇二知乎專欄之性能 2017-06-16 前端日?qǐng)?bào) 精選 漸進(jìn)式動(dòng)畫(huà)解決方案從前端開(kāi)發(fā)看面向未來(lái)的敏捷學(xué)習(xí)法 - 知乎專欄深度剖析現(xiàn)代 JavaScript 應(yīng)用 — SiteP...

    _ipo 評(píng)論0 收藏0

  • 瀏覽器的CSS Hacks

    摘要：我不再使用了，相反的是，我將使用的條件判斷將類應(yīng)用到標(biāo)簽。但是，我想記錄我之前碰到過(guò)的每一個(gè)瀏覽器特定的選擇器和樣式屬性。我相信也沒(méi)有其他方式提供樣式表給獨(dú)特的利用這些，你能夠更好的針對(duì)和，代碼如下瀏覽器特定的綜合列表原文 我不再使用CSS Hacks了，相反的是，我將使用IE的條件判斷將類應(yīng)用到body標(biāo)簽。 但是，我想記錄我之前碰到過(guò)的每一個(gè)瀏覽器特定的CSS 選擇器和樣式屬性。...

    lieeps 評(píng)論0 收藏0

  • 2017-09-27 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選是如何工作的內(nèi)存管理如何處理個(gè)常見(jiàn)的內(nèi)存泄漏譯中的面向?qū)ο笤驮玩溊^承源碼事件機(jī)制考拉升級(jí)經(jīng)驗(yàn)掘金中文第期你知道編譯與解釋的區(qū)別嗎視頻在白鷺引擎中的實(shí)踐王澤變量自定義屬性使用指南眾成翻譯禁止手機(jī)虛擬鍵盤(pán)彈出做 2017-09-27 前端日?qǐng)?bào) 精選 JavaScript是如何工作的：內(nèi)存管理 + 如何處理4個(gè)常見(jiàn)的內(nèi)存泄漏(譯) js中的面向?qū)ο蟆⒃汀⒃玩湣⒗^承Vue....

    wangym 評(píng)論0 收藏0

  • webpack 4.x學(xué)習(xí)使用總結(jié)

    摘要：最近一周一直都在折騰一些項(xiàng)目中常用的記錄下來(lái)，以后免去簡(jiǎn)單的配置再去查文檔。常規(guī)入口指示應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部依賴圖的開(kāi)始。把代碼轉(zhuǎn)換成，在使用語(yǔ)言中有介紹。擴(kuò)展語(yǔ)法，使用下一代，在使用中有介紹。用于忽略部分文件。 最近一周一直都在折騰webpack,一些項(xiàng)目中常用的記錄下來(lái)，以后免去簡(jiǎn)單的配置再去查文檔。 常規(guī) 1.入口 指示 webpack 應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建...

    ls0609 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<