1. 一個合格的web前端需要會什麼
1. div和table
這個是最簡單的，也是最基礎的。要熟練掌握div、form table、ul li 、p、span、font這些標簽，這些都是最常用的，特別是div和table，div用於布局、table也可以用於布局，但是不靈活，基本 table是用來和數據打交道。
2.html
HTML是指超文本標簽語言，是目前web領域應用廣泛的語言，我們只需要在html文檔中插入對應的標簽，即可實現web頁面的編寫與排列，所以要熟練掌握HTML基本知識，包括每個標簽的用法等。
3. CSS
CSS指層疊樣式表，可以為HTML標簽自定義樣式，通過設置HTML標簽的樣式，來改變其外形，達到美化與排版web頁面的目的。
4.Javascript
Javascript是網頁腳本語言，它可以在html中運行，設置並修改瀏覽器中的各種對象與變數。例如用來改進設計、驗證表單、檢測瀏覽器、創建 cookies等等，現在各大網站都可以看見 Javascript的蹤影，常見的網站首頁大眼晴、警告提示框、頁面動畫效果等等。Javascript更是一種在客戶端廣泛使用的腳步語言，在 Javascript當中提供了一些內置函數、對象和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等!
5.Jquery
Jquery是相當於把js封裝了一套的一個js插件，目的就是操作起來更方便，代碼寫的更少。 Jquery是一個免費、開源的輕量級的Javascript庫，並且兼容各種瀏覽器，同時現在有很多基於 Jquery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度。
6.框架
從 bootstrap開始，響應式的珊格系統被後來框架一直沿用，建議學一套主流mvc框架，vue，react， angular兩選一種。
7.會點後台語言
對於前端工程師來說，並不需要像網站程序員樣，編寫對象、開發特殊功能、搭建資料庫。但是前端工程師要掌握基本的頁面GET＆POST傳參、程序判斷語法、程序輸出語法、頁面提交、資料庫查詢與記錄插入，以及掌握HTTP與WEB工作原理、掌握Socket長連接實時網路通信技術、掌握 NOSQL中的 MONGODB的應用、了解PHP語法、了解 MYSQL資料庫的基本操作。
當然，以上技能能夠幫助你成為一個合格的前端工程師，但要成為一個優秀的前端，必須掌握除技術以外的東西，例如設計，用戶等等，因此還需不斷的堅持學習。
2. 阿里前端面試題（1）——解構/非同步/markdown語法解析
a. 不完全解構，也會成功，不會報錯
b. 只要支持 Iterator 介面，都可以被解構賦值
c. null 可以替代默認值，而成功的解構賦值
d. 解構中不定參數可以出現在除第一個以外的其他位置
e. 解構是先找到同名屬性，然後再賦給對應的變數
f. 默認值可以引用解構賦值的其他變數，但該變數必須已經聲明
(d)
迭代一個對象的屬性
不定參數只能放在最後一個位置
a. 在JavaScript中，任務被分為兩種，一種宏任務（MacroTask），一種叫微任務（MicroTask），setTimeout 屬於微任務
b. setTimeout(func, 500) 會精確的在 500ms 後執行 func
c. Promise、generator、async/await 都是非同步解決方案
d. process.nextTick、Promise 都屬於 node 中的微隊列
e. 瀏覽器的 Event Loop 和 node 的 Event Loop 是不同的，實現機制也不一樣
f. 在 node 中setTimeout 和 setImmediate 執行階段是一致的
(c,d,e)
解析：f 兩者的執行順序要根據當前的執行環境才能確定
（那怎麼知道主線程執行棧為空啊？js引擎存在monitoring process進程，會持續不斷的檢查主線程執行棧是否為空，一旦為空，就會去Event Queue那裡檢查是否有等待被調用的函數）
https://juejin.im/post/59e85eebf265da430d571f89
Markdown 是非常受技術人員喜歡的一種文本格式，請使用 JavaScript 來實現 marked 方法來進行 markdown 文本的 HTML 渲染，可以滿足以下需求：
function marked(str) {
// your code here
}
marked('@@whatever@@').trim() // <p><blink>whatever</blink></p >
marked(' abc @@def@@ ghi ').trim() // <p><em>abc</em> <blink>def</blink> <strong>ghi</strong></p >
marked('@@ cool @@').trim() // <p><blink><strong>cool</strong></blink></p >
可以實現題目中的要求，但是還不能滿足「@@abc」這樣缺少對應字元串的情況
3. Web前端工程師應該知道的JavaScript使用小技巧
今天小編要跟大家分享的文章是關於Web前端工程師應該知道的JavaScript使用小技巧。任何一門技術在實際中都會有一些屬於自己的小技巧。同樣的，在使用JavaScript時也有一些自己的小技巧，只不過很多時候有可能容易被大家忽略。而在互聯網上，時不時的有很多同行朋友會總結(或收集)一些這方面的小技巧。
今天在這篇文章中，小編會整理一些大家熟悉或不熟悉的有關於JavaScript的小技巧，希望能夠對大家的學習和工作有所幫助。
一、數組
先來看使用數組中常用的一些小技巧。
01、數組去重
ES6提供了幾種簡潔的數組去重的方法，但該方法並不適合處理非基本類型的數組。對於基本類型的數組去重，可以使用...new
Set()來過濾掉數組中重復的值，創建一個只有唯一值的新數組。constarray=[1,1,2,3,5,5,1]
constuniqueArray=[...newSet(array)];
console.log(uniqueArray);
>Result:(4)[1,2,3,5]
這是ES6中的新特性，在ES6之前，要實現同樣的效果，我們需要使用更多的代碼。該技巧適用於包含基本類型的數組：undefined、null、boolean、string和number。如果數組中包含了一個object,function或其他數組，那就需要使用另一種方法。
除了上面的方法之外，還可以使用Array.from(newSet())來實現：constarray=[1,1,2,3,5,5,1]
Array.from(newSet(array))
>Result:(4)[1,2,3,5]
另外，還可以使用Array的.filter及indexOf()來實現：
constarray=[1,1,2,3,5,5,1]
array.filter((arr,index)=>array.indexOf(arr)===index)
>Result:(4)[1,2,3,5]
注意，indexOf()方法將返回數組中第一個出現的數組項。這就是為什麼我們可以在每次迭代中將indexOf()方法返回的索引與當索索引進行比較，以確定當前項是否重復。
02、確保數組的長度
在處理網格結構時，如果原始數據每行的長度不相等，就需要重新創建該數據。為轎並了確保每行的數據長度相等，可以使用Array.fill來處理：letarray=Array(5).fill('');
console.log(array);
>Result:(5)["","","","",""]
03、數組映射
不使用Array.map來映射數組值的方法。constarray=[
{
ame:'大漠',
email:'w3cplus@#'
},
{
ame:'Airen',
email:'airen@#'
}
]
constname=Array.from(array,({name})=>name)
>Result:(2)["大漠","Airen"]
04、數組截斷
如果你想從數組末尾刪除值(刪除數組中的最後一項)，有比使用飢沖splice()更快的替代方法。
例如，你知道原始數組的大小，可以重新定義數組的length屬性的值，就可以實現從數組末尾刪除值：
letarray=[0,1,2,3,4,5,6,7,8,9]
console.log(array.length)
>Result:10
array.length=4
console.log(array)
>Result:(4)[0,1,2,3]
這是一個特別簡潔的解決方案。但是，slice()方法運行更閉肢跡快，性能更好：
letarray=[0,1,2,3,4,5,6,7,8,9];
array=array.slice(0,4);
console.log(array);
>Result:[0,1,2,3]
05、過濾掉數組中的falsy值
如果你想過濾數組中的falsy值，比如0、undefined、null、false，那麼可以通過map和filter方法實現：
constarray=[0,1,Ɔ',Ƈ','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN',Ƈ'+0]
array.map(item=>{
returnitem
}).filter(Boolean)
>Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]
06、獲取數組的最後一項
數組的slice()取值為正值時，從數組的開始處截取數組的項，如果取值為負整數時，可以從數組末屬開始獲取數組項。
letarray=[1,2,3,4,5,6,7]
constfirstArrayVal=array.slice(0,1)
>Result:[1]
constlastArrayVal=array.slice(-1)
>Result:[7]
console.log(array.slice(1))
>Result:(6)[2,3,4,5,6,7]
console.log(array.slice(array.length))
>Result:[]
正如上面示例所示，使用array.slice(-1)獲取數組的最後一項，除此之外還可以使用下面的方式來獲取數組的最後一項：
console.log(array.slice(array.length-1))
>Result:[7]
07、過濾並排序字元串列表
你可能有一個很多名字組成的列表，需要過濾掉重復的名字並按字母表將其排序。
在我們的例子里准備用不同版本語言的JavaScript
保留字的列表，但是你能發現，有很多重復的關鍵字而且它們並沒有按字母表順序排列。所以這是一個完美的字元串列表(數組)來測試我們的JavaScript小知識。
varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];
因為我們不想改變我們的原始列表，所以我們准備用高階函數叫做filter，它將基於我們傳遞的回調方法返回一個新的過濾後的數組。回調方法將比較當前關鍵字在原始列表裡的索引和新列表中的索引，僅當索引匹配時將當前關鍵字push到新數組。
最後我們准備使用sort方法排序過濾後的列表，sort只接受一個比較方法作為參數，並返回按字母表排序後的列表。
在ES6下使用箭頭函數看起來更簡單:
=keywords
.filter((keyword,index)=>keywords.lastIndexOf(keyword)===index)
.sort((a,b)=>a
這是最後過濾和排序後的JavaScript保留字列表：
console.log(filteredAndSortedKeywords);
>Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']
08、清空數組
如果你定義了一個數組，然後你想清空它。通常，你會這樣做：
letarray=[1,2,3,4];
functionemptyArray(){
array=[];
}
emptyArray();
但是，這有一個效率更高的方法來清空數組。你可以這樣寫:
letarray=[1,2,3,4];
functionemptyArray(){
array.length=0;
}
emptyArray();
09、拍平多維數組
使用...運算符，將多維數組拍平：
10、從數組中獲取最大值和最小值
可以使用Math.max和Math.min取出數組中的最大小值和最小值：
constnumbers=[15,80,-9,90,-99]
constmaxInNumbers=Math.max.apply(Math,numbers)
constminInNumbers=Math.min.apply(Math,numbers)
console.log(maxInNumbers)
>Result:90
console.log(minInNumbers)
>Result:-99
另外還可以使用ES6的...運算符來完成：
constnumbers=[1,2,3,4];
Math.max(...numbers)
>Result:4
Math.min(...numbers)
>>Result:1
二、對象
在操作對象時也有一些小技巧。
01、使用...運算符合並對象或數組中的對象
同樣使用ES的...運算符可以替代人工操作，合並對象或者合並數組中的對象。
//合並對象
constobj1={
ame:'大漠',
url:'#'
}
constobj2={
ame:'airen',
age:30
}
constmergingObj={...obj1,...obj2}
>Result:{name:"airen",url:"#",age:30}
//合並數組中的對象
constarray=[
{
ame:'大漠',
email:'w3cplus@#'
},
{
ame:'Airen',
email:'airen@#'
}
]
constresult=array.rece((accumulator,item)=>{
return{
...accumulator,
[item.name]:item.email
}
},{})
>Result:{大漠:"w3cplus@#",Airen:"airen@#"}
02、有條件的添加對象屬性
不再需要根據一個條件創建兩個不同的對象，以使它具有特定的屬性。為此，使用...操作符是最簡單的。
constgetUser=(emailIncluded)=>{
return{
ame:'大漠',
blog:'w3cplus',
...emailIncluded&&{email:'w3cplus@#'}
}
}
constuser=getUser(true)
console.log(user)
>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}
constuserWithoutEmail=getUser(false)
console.log(userWithoutEmail)
>Result:{name:"大漠",blog:"w3cplus"}
03、解構原始數據
你可以在使用數據的時候，把所有數據都放在一個對象中。同時想在這個數據對象中獲取自己想要的數據。
在這里可以使用ES6的Destructuring特性來實現。比如你想把下面這個obj中的數據分成兩個部分：
constobj={
ame:'大漠',
blog:'w3cplus',
email:'w3cplus@#',
joined:-06-19',
followers:45
}
letuser={},userDetails={}
({name:user.name,email:user.email,...userDetails}=obj)
>{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}
console.log(user)
>Result:{name:"大漠",email:"w3cplus@#"}
console.log(userDetails)
>Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}
04、動態更改對象的key
在過去，我們首先必須聲明一個對象，然後在需要動態屬性名的情況下分配一個屬性。在以前，這是不可能以聲明的方式實現的。不過在ES6中，我們可以實現：
constdynamicKey='email'
letobj={
ame:'大漠',
blog:'w3cplus',
[dynamicKey]:'w3cplus@#'
}
console.log(obj)
>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}
05、判斷對象的數據類型
使用Object.prototype.toString配合閉包來實現對象數據類型的判斷：
constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)
constisArray=isType('Array')([1,2,3])
console.log(isArray)
>Result:true
上面的代碼相當於：
functionisType(type){
returnfunction(target){
return`[object${type}]`===Object.prototype.toString.call(target)
}
}
isType('Array')([1,2,3])
>Result:true
或者：
constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)
constisString=isType('String')
constres=isString((Ƈ'))
console.log(res)
>Result:true
06、檢查某對象是否有某屬性
當你需要檢查某屬性是否存在於一個對象，你可能會這樣做：
varobj={
ame:'大漠'
}
if(obj.name){
console.l
4. 做前端需要會JAVA嗎
從我的理解來看，題主洞掘早應該是非計算機專業吧，如果是計算機專業，多多少少會學習編程語言、資料庫相關納雀的知識，而Java一般是計算機專業的必修或選修課程，至於什麼都不懂，大學即使是睡過來的，但是要說自己什麼都不懂，還是很少的。
從學生的角度來看，做前端會html、css、js就可以了，但是從前端工程師的角度而言，這遠遠不夠，只會寫document元素、會寫層疊樣式表、會寫js腳本，這遠遠不夠的，雖然我主要做Java後端，基於SpringMVC+Dubbo或SpringBoot+SpringCloud的技術線開發，但是要完成一個完整的項目，沒有前端同事的協助開發是不可能的。一個項目的開發完成，往往是前後端的精誠團結、彼此理解才能順利進行。當然，主要有兩種合作模式，即完整的前後端分離（包括後台管理項目也做前後端分離）或是後端開發完成整個後台管理項目的開發。
一般而言，前端所做的項目都是直接面向終端用戶的，需要考慮的東西很多，用戶體驗、用戶行為習慣、自適應、各端H5頁面嵌入APP的模式等都需要考慮的。從網路獲知，一個合格的前端應該熟悉並使用以下技術內容：
html,css,jQuery三者完全掌握，相信每個公司對於前端程序員都會有此要求，這些也是前端寫網頁的基礎技術；掌握原生HTML5和CSS3技術，能夠獨立完成移動端頁面開發；
了解ES6的所有新特性，如：箭頭操作符、類的支持、增強的對象字面量、字元串模板、解構、默認參數值、不定參數、拓展參數、let與const關鍵字、forof值遍歷、iterator,generator、模塊、Proxies等等；
熟練使用命令行，包括gulp、webpack、vue-cli、git；
理解前端常用設計模式（裝逼詞彙），如閉包、面向對象、MVC、MVVM、單項數據流、路由、單元測試、SSR、義大利面條、模塊化、組件化、函數式、純函數、高階函數、不可變數據；
能熟練使用至少三大前端框架中的一個，如vue、Angular和react，也許今年有某一個框架會勝出，所以有時間的話，三大框架都學學吧；
熟悉HTTP，了解請求、響應、緩存、代理、反向代理https等；
在GitHub至少有一個star超過42的開源代碼作品（markdown不算）
就我個人而已，在做Java的同時，除了很緊急的項目做嚴格的前後端分離只需提供restful風格的http介面，很多時候都會自己操刀進行後台管理頁面的開發，以JSP和Freemarker模板引擎，結合bootstrap+jquery技術線，或是比較流行的vue完成管理後台散橘的開發也是常見的工作任務。除此之外，在缺乏前端開發人員時，去學習和使用前端開發技術（如React+Rex+Flux）也是有可能的事。
總之，對於程序員或准備從事程序員職業的人而言，保持技術深度的同時，保持技術的廣度是很有必要的事情。