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前端基础】算术运算符的优先级顺序
算术运算的优先级顺序：先乘除，后加减。如有括号，先算括号内的算式，后算括号外的算式。如有小括号、中括号、大括号，先算小括号内的，再算中括号内的，再算大括号内的。