1. 前端$取的值如何做三目運算
$("#id").val()=="123"?true:false 這樣寫就行了
2. web前端diff 演算法深入一下
有同學問：能否詳細說一下 diff 演算法。
詳細的說，請閱讀這篇文章，有疑問的地方歡迎留言一起討論。
因為 diff 演算法是 vue2.x ， vue3.x 以及 react 中關鍵核心點，理解 diff 演算法，更有助於理解各個框架本質。
說到「diff 演算法」，不得不說「虛擬 Dom」，因為這兩個息息相關。
比如：
等等
我們先來說說虛擬 Dom，就是通過 JS 模擬實現 DOM ，接下來難點就是如何判斷舊對象和新對象之間的差異。
Dom 是多叉樹結構，如果需要完整的對比兩棵樹的差異，那麼演算法的時間復雜度 O(n ^ 3)，這個復雜度很難讓人接收，尤其在 n 很大的情況下，於是 React 團隊優化了演算法，實現了 O(n) 的復雜度來對比差異。
實現 O(n) 復雜度的關鍵就是只對比同層的節點，而不是跨層對比，這也是考慮到在實際業務中很少會去跨層的移動 DOM 元素。
虛擬 DOM 差異演算法的步驟分為 2 步：
實際 diff 演算法比較中，節點比較主要有 5 種規則的比較
部分源碼 https://github.com/vuejs/vue/blob//src/core/vdom/patch.js#L501 如下：
在 reconcileChildren 函數的入參中
diff 的兩個主體是：oldFiber（current.child）和 newChildren（nextChildren，新的 ReactElement），它們是兩個不一樣的數據結構。
部分源碼
很多時候手工優化 dom 確實會比 virtual dom 效率高，對於比較簡單的 dom 結構用手工優化沒有問題，但當頁面結構很龐大，結構很復雜時，手工優化會花去大量時間，而且可維護性也不高，不能保證每個人都有手工優化的能力。至此，virtual dom 的解決方案應運而生。
virtual dom 是「解決過多的操作 dom 影響性能」的一種解決方案。
virtual dom 很多時候都不是最優的操作，但它具有普適性，在效率、可維護性之間達到平衡。
virutal dom 的意義：
vue2.x 的 diff 位於 patch.js 文件中，該演算法來源於 snabbdom，復雜度為 O(n)。了解 diff 過程可以讓我們更高效的使用框架。react 的 diff 其實和 vue 的 diff 大同小異。
最大特點：比較只會在同層級進行, 不會跨層級比較。
對比之前和之後：可能期望將 直接移動到
的後邊，這是最優的操作。
但是實際的 diff 操作是：
vue 中也使用 diff 演算法，有必要了解一下 Vue 是如何工作的。通過這個問題，我們可以很好的掌握，diff 演算法在整個編譯過程中，哪個環節，做了哪些操作，然後使用 diff 演算法後輸出什麼？
解釋：
mount 函數主要是獲取 template，然後進入 compileToFunctions 函數。
compileToFunction 函數主要是將 template 編譯成 render 函數。首先讀取緩存，沒有緩存就調用 compile 方法拿到 render 函數的字元串形式，在通過 new Function 的方式生成 render 函數。
compile 函數將 template 編譯成 render 函數的字元串形式。後面我們主要講解 render
完成 render 方法生成後，會進入到 mount 進行 DOM 更新。該方法核心邏輯如下：
上面提到的 compile 就是將 template 編譯成 render 函數的字元串形式。核心代碼如下：
compile 這個函數主要有三個步驟組成：
分別輸出一個包含
parse 函數：主要功能是 將 template 字元串解析成 AST（抽象語法樹） 。前面定義的 ASTElement 的數據結構，parse 函數就是將 template 里的結構（指令，屬性，標簽） 轉換為 AST 形式存進 ASTElement 中，最後解析生成 AST。
optimize 函數（src/compiler/optomizer.js）:主要功能是 標記靜態節點 。後面 patch 過程中對比新舊 VNode 樹形結構做優化。被標記為 static 的節點在後面的 diff 演算法中會被直接忽略，不做詳細比較。
generate 函數（src/compiler/codegen/index.js）:主要功能 根據 AST 結構拼接生成 render 函數的字元串 。
其中 genElement 函數（src/compiler/codgen/index.js）是根據 AST 的屬性調用不同的方法生成字元串返回。
總之：
就是 compile 函數中三個核心步驟介紹，
patch 函數 就是新舊 VNode 對比的 diff 函數，主要是為了優化 dom，通過演算法使操作 dom 的行為降低到最低， diff 演算法來源於 snabbdom，是 VDOM 思想的核心。snabbdom 的演算法是為了 DOM 操作跨級增刪節點較少的這一目標進行優化， 它只會在同層級進行，不會跨層級比較。
總的來說：
在創建 VNode 就確定類型，以及在 mount/patch 的過程中採用位運算來判斷一個 VNode 的類型，在這個優化的基礎上再配合 Diff 演算法，性能得到提升。
可以看一下 vue3.x 的源碼：https://github.com/vuejs/vue/blob//src/core/vdom/patch.js
對 oldFiber 和新的 ReactElement 節點的比對，將會生成新的 fiber 節點，同時標記上 effectTag，這些 fiber 會被連到 workInProgress 樹中，作為新的 WIP 節點。樹的結構因此被一點點地確定，而新的 workInProgress 節點也基本定型。在 diff 過後，workInProgress 節點的 beginWork 節點就完成了，接下來會進入 completeWork 階段。
snabbdom 演算法：https://github.com/snabbdom/snabbdom
定位：一個專注於簡單性、模塊化、強大功能和性能的虛擬 DOM 庫。
snabbdom 中定義 Vnode 的類型(https://github.com/snabbdom/snabbdom/blob//src/vnode.ts#L12)
init 函數的地址：
https://github.com/snabbdom/snabbdom/blob//src/init.ts#L63
init() 函數接收一個模塊數組 moles 和可選的 domApi 對象作為參數，返回一個函數，即 patch() 函數。
domApi 對象的介麵包含了很多 DOM 操作的方法。
源碼：
https://github.com/snabbdom/snabbdom/blob//src/init.ts#L367
源碼：
https://github.com/snabbdom/snabbdom/blob//src/h.ts#L33
h() 函數接收多種參數，其中必須有一個 sel 參數，作用是將節點內容掛載到該容器中，並返回一個新 VNode。
在 vue2.x 不是完全 snabbdom 演算法，而是基於 vue 的場景進行了一些修改和優化，主要體現在判斷 key 和 diff 部分。
1、在 snabbdom 中 通過 key 和 sel 就判斷是否為同一節點，那麼在 vue 中，增加了一些判斷 在滿足 key 相等的同時會判斷，tag 名稱是否一致，是否為注釋節點，是否為非同步節點，或者為 input 時候類型是否相同等。
https://github.com/vuejs/vue/blob//src/core/vdom/patch.js#L35
2、diff 差異，patchVnode 是對比模版變化的函數，可能會用到 diff 也可能直接更新。
https://github.com/vuejs/vue/blob//src/core/vdom/patch.js#L404
3. js中這些符號是什麼意思：&，||，＝＝＝，！，＋＋
&：邏輯與，&&同樣可以表示邏輯與；
||：邏輯或，|也可以表示邏輯或；
＝＝＝：先判斷左右兩邊的數據類型，如果數據類型不一致，直接返回false；
！：邏輯非；
＋＋：自加符號，在原有的基礎上加上1；
js運算符雙豎杠「||」的用法
1、JS雙豎線運算符：是或比較。如null||『1』，返回』1』;『2』||『1』，返回』2』。即或運算符中，第一個為真，後面的就不用計算了，所以得』2』。
2、js 中 使用雙豎線運算符"||"，返回第一個有效值
var objOne = undefined || 1 || null || new Date();
var objTwo = new Date();
var objThree = objOne || objTwo;
alert(objThree.toString()); //out put 「1」
(3)前端位運算擴展閱讀：
1、邏輯運算符&&、 || 和&、| 性能上的比較
邏輯運算符&& || 中，如果&&的第一個運算數是false，就不再考慮第二個運算數，直接返回false；
如果||的第一個運算數是true，也不再考慮第二個運算數，直接返回true。而&和|運算符卻不是這樣的，它們總是要比較兩個運算數才得出結果，因而性能上&&和||會比&和|好。
2、功能用法
&&和||只能進行邏輯運算，而&和|除了可以進行"邏輯運算"外，還可以進行位運算。
3、位運算
&和|本是位運算符，之所以可以進行"邏輯運算"，是由於JS是無類型的語言、各數據類型可以自由轉換這一特性決定的，當用&和|進行"邏輯運算"時，實際上true被轉換成1，false被轉換成0，再進行逐位運算：
document.write(true & false); //JS，結果為0
4. 前端運算符有哪些
算術運算符 加減乘除 自增i++ 自減i-- %求余
賦值運算符 a+=c 相當於 a+c
邏輯運算符 與&& 或|| 非!
比較運算符 大於等於小於 不等於！=
5. 【Web前端基礎】算數運算符是什麼意思
算術運算符的運算數必須是數字類型。算術運算符不能用在布爾類型上，但是可以用在char類型上，因為實質上在Java中，char類型是int類型的一個子集。
6. JS中的「&&」與「&」和「||」「|」有什麼區別
在JS「&&」和「||」是邏輯運算符；「&」和「|」是位運算符。
1、運算表達的不同
只要「||」前面為false,不管「||」後面是true還是false，都返回「||」後面的值。只要「||」前面為true,不管「||」後面是true還是false，都返回「||」前面的值。
JavaScript中的位運算符：「|」運算方法：兩個位只要有一個為1，那麼結果都為1。否則就為0
2、使用方式的不同
只要「&&」前面是false，無論「&&」後面是true還是false，結果都將返「&&」前面的值;只要「&&」前面是true，無論「&&」後面是true還是false，結果都將返「&&」後面的值;
3、運算邏輯的不同
按位與：a&b是把a和b都轉換成二進制數然後再進行與的運算；邏輯與：a&&b就是當且僅當兩個操作數均為true時，其結果才為true；只要有一個為零，a&&b就為零。
(6)前端位運算擴展閱讀
js中的||的使用：
只有前後都是false的時候才返回false，否則返回true；
alert(2||1);//2
前面2是true,後面1也是true,結果是2；
alert('a'||1);//'a'
前面'a'是true，後面1也是true;測試結果是'a'；
alert(''||1);//1
前面」是false,後面1是true,而返回結果是1；
alert('a'||0);//'a'
前面'a'是true，而後面0是false,返回結果是'a'；
alert(''||0);//0
前面」是false,後面0同樣是false,返回結果是0；
alert(0||'');//''
前面0是false，後面」是false，返回結果是」。
7. 學習web前端要注意什麼工作中最常用的技術是什麼怎樣著手學更快
都說前端入門低，想學好前端絕對不容易，可以說現在前端所需要掌握的技能超過後端和以往，新技術概念層出不窮，到底所謂的前端都應該幹些什麼都應該會寫什麼呢?
本人身邊有太多的人會切幾張圖, 會用jQuery做個特效, 會從bootstrap里復制粘貼, 會用html游戲框架寫個flappy bird, 會在Github里找各種模板自和庫拼拼湊湊, 就口口聲聲大言不慚的稱自己為前端工程師. 說什麼前端好簡單啊, 前端找工作好難啊, 沒有出路啊, 想轉行啊. 甚至有更多的人還不明白什麼是HTML, 就到處問(知乎里尤其多)怎麼開始學前端啊, 前端前景好不好啊. 依照本人的經驗, 什麼東西難不難, 什麼東西好不好, 可不是這樣問出來的. 我相信在這在這種網路信息資源及其豐富的年代, 花個半小時自行搜索一下你應該可以得到你想要的答案.
好了言歸正傳, 前端工程師真的是一個無關緊要的職位么? 我們先來看看前端工程師都要做些什麼, 看看那些稱自己是'所謂'的前端同學們都能走到哪一步.
這里直接跳過最基本的HTML+CSS+JS, 包括但不僅限於:
- HTML各種element怎麼用什麼時候用?
- Event? EventLitsener? HTML中觸發event以及JS中處理event?
- DOM tree? 添加? 修改? 刪除? 搜索? 遍歷? 選擇? children? parent? sibling?
- 什麼是window? 什麼是document?
- JS基本語法? function? loop&condition? scope&closure? array&object? this?
- CSS 什麼是box modal? position? float? 各種選擇器(*, >, ~, :nth-child)?
如果看到這里有任何一項完全沒聽說過沒用過, 或者查各種文檔後'大概'知道怎麼用的同學們, 很遺憾, 你們現在算不上是一個合格的前端工程師. 如果不是, 請繼續.
### 程序員的基本素質和知識
(有些人覺得前端不同於傳統意義上的程序員, 這點我十分不贊同. 或許把前端工程師叫做JS程序員更加貼切, HTML和CSS就好比其他語言中的UI庫)-
- 高數, 基本的概率統計 (連簡單的微分方程都不會解的朋友們就不要稱自己為前端人員了!)
- 基本數據結構 能用JS寫出linked list, stack, queue, (binary)tree, graph, hashtable么?
- 基本演算法 能用JS實現各種search(linear, binary..), 各種sort(bubble, insertion, merge, quick, selection), 以及樹的搜索(Breadth First/Depth First)和遍歷(3種順序)么?
- 設計模式 知道什麼是singleton, factory, strategy, decrator么?
- Git 不要只是停留在把Github當做一個網路儲存器的層面上, 知道branch, diff, merge么?
- 基本的英語能力(不要求聽說, 只用來讀/寫文檔資料)
- 基本的計算機知識 知道位運算, 溢出, thread, lock, concurrency, parallelism么?
- 熟悉unix的基本命令么? 知道ssh public/private key都是幹嘛的么?
- 知道正則么? 能夠熟練的使用么?
- 能寫出詳細的注釋/文檔, 讓閱讀你代碼的人知道你要幹嘛么? 能短時間內快速地讀懂來自你同事或者其他地方(github, blog)的代碼, 知道什麼東西應該寫在什麼地方, 以便迅速地參與其中么?
- 給你一個你從來沒有接觸過的庫/語言, 能能夠在較短的時間內在你的代碼里正確使用么?
- 有一個得心應手用的熟練地編輯器/IDE么? 不要求大家都是vim/emacs大神, 但也不要做什麼都是用滑鼠來點.
- 基本的檢索查詢能力(google, stackoverflow, MDN)
- 單獨思考解決問題的能力, 團隊合作, 與人相處
如果以上的內容都有所了解(這里不會強調精通), 恭喜你, 你擁有了成為前端工程師的基礎知識. 繼續.
### 前端專業知識
- 知道什麼是AMD, COMMONJS么? 知道call, apply, bind么? 知道JS中foreach, filter, some, every么? 知道怎麼實現functional JS(curry等)么?
- 知道各種所謂的高級HTML的API(File, Web Audio, WebSocket)么?
- 知道各種CSS Preprocessors么? 能講出他們各自的優點和缺點么? 熟悉並且會用其中的一種么?
- 知道各種CSS框架么? 能講出他們各自的優點和缺點么? 熟悉並且會用其中的一種么?
- 知道canvas, SVG么?
- 知道怎麼把你的東西做成responsive, cross-browser support么?
- 知道什麼是SEO並且怎麼優化么? 知道各種meta data的含義么?
- 知道什麼是Ajax, restful, get, post么? 知道怎麼和後台交互么?
- 知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能講出他們各自的優點和缺點么? 熟悉並且會用其中的一種或多種么?
- 知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
- 知道現在前端一般的工作流程(gulp, grunt, git, svn, npm)么?
- 知道怎麼測試代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
- 知道前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用么?
- 知道npm, V8, node, express, socket么? (這里補充一點, 現在越來越多的公司都採用: '前端網頁 -> 前端後台 -> 後台'這種構架來搭建東西, 也就是說, 前端工程師不僅要做傳統前端的網頁, 還要寫自己的後台, 來跟真正的後台進行交互, 至於前端的後台用什麼語言來寫, 一般是node/python/ruby, 不太會用到龐大的java, 所以這里我把node列為前端工程師必須要掌握的技能之一) 知道cache, authentication么?
- (如果要用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
- 另外, 前端這個行業跟傳統的c/c++/java程序員還是有一定的差別的. 由於是新興產業, 所以各種行業標准, 框架, 庫會隨時隨地的產生和更新 (作為一個c程序員, 十年前怎麼寫東西現在還是怎麼寫東西). 今天出了node和react, 明天又出了io和mean. 所以, 積極關注各種前端產品, 跟上變化的節奏, 也是身為一個前端程序員必備的技能之一. 知道ECMAScript 6里怎麼寫class么? 知道react, flux, reflux么? 知道polymer, dart么? 知道meteor么?
以上是摘自知乎某大牛的文章=====
感覺對新人挺打擊的，不過理清從大體上重新認識前端對學習理解也有一定幫助，只要自己想好了就堅持下去，學前端的最重要的隨時學習能力，應該前端領域知識面涵蓋太廣，很多技術也不成熟，正在發展中，只能不停學習各種新技術新知識。。能分辨哪些技術是必須掌握的，哪些是少數人創造用來提」升逼格「的概念，能把PS+HTML+CSS+js玩熟，會一兩個框架，懂點設計。就可以了
8. 【Web前端基礎】算術運算符的優先順序順序
算術運算的優先順序順序：先乘除，後加減。如有括弧，先算括弧內的算式，後算括弧外的算式。如有小括弧、中括弧、大括弧，先算小括弧內的，再算中括弧內的，再算大括弧內的。