當(dāng)人們嘗試學(xué)習(xí) JavaScript , 或者其他編程技術(shù)的時(shí)候，常常會(huì)遇到同樣的挑戰(zhàn)：

• 有些概念容易混淆，特別是當(dāng)你學(xué)習(xí)過(guò)其他語(yǔ)言的時(shí)候。
• 很難找到學(xué)習(xí)的時(shí)間（有時(shí)候是動(dòng)力）。
• 一旦當(dāng)你理解了一些東西的時(shí)候，卻很容易再一次忘記。
• 可以使用的工具甚多且經(jīng)常變化,所以不知道從哪里開(kāi)始入手。

幸運(yùn)的是，這些挑戰(zhàn)最終都可以被戰(zhàn)勝。在這篇文章里，我將介紹 6 個(gè)思維技巧來(lái)幫你更快的學(xué)習(xí) JavaScript ，讓你成為一個(gè)更快樂(lè)更多產(chǎn)的程序員。

對(duì)于很多學(xué)習(xí) JavaScript 的人來(lái)說(shuō)，他們問(wèn)的第一個(gè)問(wèn)題是選用哪個(gè)框架（現(xiàn)有框架非常多）。但是如果你還不熟悉原生的 JavaScript ，那這就是個(gè)不該問(wèn)的問(wèn)題。你會(huì)花費(fèi)你全部的時(shí)間去查詢不同的框架并且不會(huì)取得任何進(jìn)展。

基本類型值有：undefined，NUll，Boolean，Number和String，這些類型分別在內(nèi)存中占有固定的大小空間，他們的值保存在?？臻g，我們通過(guò)按值來(lái)訪問(wèn)的。

今天在微博上看到了 有人分享了下面的這段函數(shù)式代碼，我把代碼貼到下面，不過(guò)我對(duì)原來(lái)的代碼略有改動(dòng)，對(duì)于函數(shù)式的版本，咋一看，的確令人非常費(fèi)解，仔細(xì)看一下，你可能就暈掉了，似乎完全就是天書，看上去非常裝逼，哈哈。不過(guò)，我感覺(jué)解析那段函數(shù)式的代碼可能會(huì)一個(gè)比較有趣過(guò)程，而且，我以前寫過(guò)一篇《函數(shù)式編程》的入門式的文章，正好可以用這個(gè)例子，再升華一下原來(lái)的那篇文章，順便可以向大家更好的介紹很多基礎(chǔ)知識(shí)，所以寫下這篇文章。

先看代碼

這個(gè)代碼平淡無(wú)奇，就是從一個(gè)數(shù)組中找到一個(gè)數(shù)，O(n)的算法，找不到就返回 null。

下面是正常的 old-school 的方式。不用多說(shuō)。

//正常的版本 function find (x, y) { for ( let i = 0; i < x.length; i++ ) { if ( x[i] == y ) return i;
  } return null;
} let arr = [0,1,2,3,4,5] console.log(find(arr, 2)) console.log(find(arr, 8))

前言

隨著 Hybrid 應(yīng)用的豐富，HTML5 工程師們已經(jīng)不滿足于把桌面端體驗(yàn)簡(jiǎn)單移植到移動(dòng)端，他們覬覦移動(dòng)原生應(yīng)用人性化的操作體驗(yàn)，特別是原生應(yīng)用與生俱來(lái)的豐富的手勢(shì)系統(tǒng)。HTML5 沒(méi)有提供開(kāi)箱即用的手勢(shì)系統(tǒng)，但是提供了更底層一些的對(duì) touch 事件的監(jiān)聽(tīng)?；诖?，我們可以做出自己的手勢(shì)庫(kù)。

手勢(shì)

常用的 HTML5 手勢(shì)可以分為兩類，單點(diǎn)手勢(shì)和兩點(diǎn)手勢(shì)。單點(diǎn)手勢(shì)有 tap（單擊），double tap（雙擊），long tap（長(zhǎng)按），swipe（揮），move（移動(dòng)）。兩點(diǎn)手勢(shì)有 pinch（縮放），rotate（旋轉(zhuǎn)）。

接下來(lái)我們實(shí)現(xiàn)一個(gè)檢測(cè)這些手勢(shì)的 javaScript 庫(kù)，并利用這個(gè)手勢(shì)庫(kù)做出炫酷的交互效果。

當(dāng)涉及到Web開(kāi)發(fā)時(shí)，JavaScript框架往往是一些開(kāi)發(fā)人員和企業(yè)的平臺(tái)?？赡?，你有機(jī)會(huì)嘗試過(guò)一兩個(gè)的JavaScript框架，但你仍然有點(diǎn)不確定哪個(gè)才是最佳的最值得掌握的，或者哪個(gè)值得你建議你的開(kāi)發(fā)人員選擇用于下一個(gè)web開(kāi)發(fā)項(xiàng)目。

JavaScript正在以驚人的速度前進(jìn)，并且添加新的技能到你的存儲(chǔ)庫(kù)變得有不斷的壓力。為了做到這一點(diǎn)，知道和了解更多的JavaScript框架在現(xiàn)在看來(lái)是必要的。在ValueCoders進(jìn)行了徹底的研究后，我們?nèi)雵似渲衅邆€(gè)框架，它們是：

1.AngularJS 2.0&1.x

在最受期待的AngularJS 2.0正式發(fā)布之后，框架的普及已經(jīng)達(dá)到了一個(gè)新的水平。然而，如果你不確定的話，跳到新版本仍然是一個(gè)冒險(xiǎn)的決定。讓我們通過(guò)這個(gè)流程圖來(lái)幫助你做出決定：

最近項(xiàng)目遇到一個(gè)小問(wèn)題代碼我會(huì)簡(jiǎn)化成小例子展示給大家。

用心看到最后會(huì)有收獲哈，基礎(chǔ)扎實(shí)的童鞋可以直接跳到數(shù)組類型使用。

說(shuō)到 indexOf 大家并不陌生，判斷字符串是否包涵子字符串時(shí)特別常用（正則不熟練同學(xué)的利器）。

String 類型的使用

溫習(xí)一下大家熟知的字符串用法，舉個(gè)例子

let str = 'orange';

str.indexOf('o'); //0 str.indexOf('n'); //3 str.indexOf('c'); //-1

這里 0 和 3 分別是 o 和 n 在字符串中出現(xiàn)的位置。起始下標(biāo)是 0。而 -1 代表未匹配。

1. 什么是 arguments

MDN 上解釋：

arguments 是一個(gè)類數(shù)組對(duì)象。代表傳給一個(gè)function的參數(shù)列表。

我們先用一個(gè)例子直觀了解下 JavaScript 中的 arguments 長(zhǎng)什么樣子。

function printArgs() { console.log(arguments);
}

printArgs("A", "a", 0, { foo: "Hello, arguments" })；

執(zhí)行結(jié)果是：

介紹

這里所描述的過(guò)程將使你能夠創(chuàng)建一個(gè)簡(jiǎn)單的基于jQuery / XML的解析器和搜索機(jī)制。此過(guò)程將通過(guò)一個(gè)AJAX請(qǐng)求檢索XML，然后在jQuery中分析數(shù)據(jù)，為搜索機(jī)制做準(zhǔn)備。該解決方案將基于不區(qū)分大小寫的全部或部分關(guān)鍵字匹配地返回結(jié)果。來(lái)自于關(guān)鍵字搜索的返回結(jié)果設(shè)置將被格式化為一個(gè)直接鏈接到相應(yīng)網(wǎng)站的超鏈接。jQuery搜索方法非常類似于Mike Endale的一個(gè)項(xiàng)目，不過(guò)增加了一個(gè)DOM解析器，正則表達(dá)式以及結(jié)果集分組。

背景

客戶端需要一個(gè)簡(jiǎn)單的搜索工具來(lái)查找基于關(guān)鍵字搜索的本地內(nèi)部網(wǎng)站。關(guān)鍵字搜索必須不區(qū)分大小寫，并允許返回部分匹配的結(jié)果。歸咎于客戶端內(nèi)容管理系統(tǒng)的架構(gòu)，因此（SharePoint）只能執(zhí)行客戶端腳本。其解決方案的另一個(gè)障礙是，源數(shù)據(jù)將來(lái)自多個(gè)源。數(shù)據(jù)被存儲(chǔ)在多個(gè)Excel電子表格，CSV文件和MS Access數(shù)據(jù)庫(kù)內(nèi)。這就對(duì)我們提出了這樣的需要：開(kāi)發(fā)具有一系列查詢和一個(gè)宏的Access解決方案，充當(dāng)可合并、擦洗，并最后格式化數(shù)據(jù)作為XML輸出的偽ETL。對(duì)于這個(gè)解決方案的目的，我們將詳細(xì)介紹JavaScript XML分析器的設(shè)計(jì)，而不是偽Access ETL宏工具的設(shè)計(jì)。

使用代碼

該解決方案的做法是利用一個(gè)簡(jiǎn)單的基于JavaScript / XML的搜索來(lái)發(fā)送數(shù)據(jù)結(jié)果到HTML / JavaScript前端。前端將引用腳本：jQuery，XML和CSS文件。XML格式將因?yàn)樗目勺x性和它是數(shù)據(jù)交換行業(yè)標(biāo)準(zhǔn)格式之一的事實(shí)而被使用。 XML數(shù)據(jù)將通過(guò)使用AJAX的客戶端jQuery解析，并通過(guò)Internet Explorer 11呈現(xiàn)。

解決方案將使用RegExp對(duì)象來(lái)處理關(guān)鍵字匹配，驗(yàn)證和特殊字符處理。RegExp對(duì)象字符串將檢查危險(xiǎn)語(yǔ)法從而提高解決方案的穩(wěn)定性和整體可用性。

我們將默認(rèn)使用JavaScript分組功能來(lái)返回匹配結(jié)果作為折疊的紀(jì)錄集。折疊的記錄集線項(xiàng)目將被URL鏈接到相關(guān)的Project Workspace網(wǎng)站。在擴(kuò)展的組記錄集下，結(jié)果將存在于相關(guān)的子記錄中，當(dāng)通過(guò)On Click事件展開(kāi)的時(shí)候。

ReactJS是一個(gè)開(kāi)源的JavaScript庫(kù)，并且由Facebook和Instagram這樣的頂尖IT企業(yè)以及開(kāi)發(fā)者社區(qū)所維護(hù)。該框架廣泛使用于為web應(yīng)用程序開(kāi)發(fā)用戶界面的時(shí)候。這個(gè)特殊的框架被發(fā)明時(shí)帶有這樣一個(gè)目的：

“構(gòu)建數(shù)據(jù)隨著時(shí)間的推移一次又一次改變的大型應(yīng)用程序?！?

我們經(jīng)常使用的工具有很多，但只有少數(shù)徹底改變了我們的工作流程。ReactJS就是其中之一。隨著現(xiàn)在可用框架變得越來(lái)越多，我們很難找到一個(gè)最終不會(huì)窮途末路的框架。這就是為什么在ValueCoders我們建議去往React。

為什么說(shuō)能使用html/css解決的問(wèn)題就不要使用JS呢？?jī)蓚€(gè)字，因?yàn)楹?jiǎn)單。簡(jiǎn)單就意味著更快的開(kāi)發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)，下面介紹幾個(gè)實(shí)例。

1. 導(dǎo)航高亮

導(dǎo)航高亮是一種很常見(jiàn)的問(wèn)題，包括當(dāng)前頁(yè)面的導(dǎo)航在菜單里面高亮和hover時(shí)高亮。你可以用js控制，但是用一點(diǎn)CSS技巧就可以達(dá)到這個(gè)目的，不需要使用JS。

在正常態(tài)時(shí)，每個(gè)導(dǎo)航的默認(rèn)樣式為：