餓了么內(nèi)推餓了么內(nèi)推碼

餓了么前端筆試

一、HTML 與 CSS

簡述題：請解釋 HTML5 語義化標(biāo)簽（如<header>、<nav>、<article>、<section>、<footer>）的作用，以及在實(shí)際項(xiàng)目中使用它們的好處。
布局實(shí)現(xiàn)題：使用 CSS Flexbox 布局實(shí)現(xiàn)一個頁面結(jié)構(gòu)，要求包含一個頂部導(dǎo)航欄、中間主體內(nèi)容區(qū)（分為左右兩欄，左欄寬度為 25%，右欄寬度為 75%）和底部頁腳。請寫出 HTML 結(jié)構(gòu)和 CSS 樣式代碼。
樣式問題排查：給定一段 HTML 和 CSS 代碼，其中存在樣式顯示不符合預(yù)期的問題（例如元素間距異常、文本顏色未生效等），請指出代碼中的錯誤并給出正確的修改方案。

二、JavaScript 基礎(chǔ)

代碼輸出題：給出一段包含閉包、作用域、原型鏈等概念的 JavaScript 代碼，要求分析并寫出代碼的輸出結(jié)果，并解釋原因。例如：

function outer() {    let a = 10;    function inner() {        let b = 20;        return a + b;    }    return inner;}let func = outer();console.log(func());

函數(shù)實(shí)現(xiàn)題：編寫一個 JavaScript 函數(shù)，實(shí)現(xiàn)對數(shù)組去重功能，要求返回一個新的不包含重復(fù)元素的數(shù)組。例如輸入[1, 2, 2, 3, 4, 4, 5]，輸出[1, 2, 3, 4, 5]。
事件處理題：在 HTML 頁面中有一個按鈕元素，當(dāng)按鈕被點(diǎn)擊時，要在控制臺輸出 “按鈕被點(diǎn)擊了”，并且修改按鈕的文本為 “已點(diǎn)擊”。請使用 JavaScript 實(shí)現(xiàn)相關(guān)的事件綁定和處理邏輯。

三、JavaScript 高級特性

Promise 與異步編程：描述 JavaScript 中 Promise 的作用和基本用法。編寫一個使用 Promise 的示例代碼，模擬異步加載圖片的過程，當(dāng)圖片加載成功時，在控制臺輸出圖片的尺寸信息，加載失敗時輸出錯誤信息。
ES6 + 特性：簡述 ES6 中l(wèi)et、const與var聲明變量的區(qū)別。使用 ES6 的class語法定義一個簡單的Person類，包含name和age屬性，以及一個sayHello方法，用于在控制臺輸出 “Hello, 我是 [名字]，我 [年齡] 歲了”。

四、前端框架（以 Vue 為例，若有要求其他框架可替換）

Vue 基礎(chǔ)題：解釋 Vue.js 中指令（如v - bind、v - model、v - if、v - for）的作用和使用場景。給出一個簡單的 Vue 組件代碼示例，包含數(shù)據(jù)綁定、事件處理和條件渲染。
組件化開發(fā)題：設(shè)計(jì)一個簡單的 Vue 組件，用于展示商品列表。組件接收一個商品數(shù)組作為 props，每個商品對象包含name、price和imageUrl屬性。在組件內(nèi)部，使用v - for指令循環(huán)渲染商品列表項(xiàng)，每個列表項(xiàng)展示商品圖片、名稱和價格。
Vue Router 與 Vuex：簡述 Vue Router 在 Vue 項(xiàng)目中的作用，以及如何配置一個簡單的路由。如果要在一個 Vue 電商項(xiàng)目中管理用戶購物車狀態(tài)，你會如何使用 Vuex 來實(shí)現(xiàn)？請簡要描述實(shí)現(xiàn)思路和關(guān)鍵步驟。

五、性能優(yōu)化與其他

前端性能優(yōu)化：列舉至少三種前端性能優(yōu)化的方法，并簡要說明其原理和作用。例如從代碼壓縮、圖片優(yōu)化、緩存策略等方面回答。
跨域問題：解釋什么是跨域問題，以及在前端開發(fā)中常見的跨域解決方案有哪些（如 JSONP、CORS 等），請?jiān)敿?xì)描述其中一種解決方案的實(shí)現(xiàn)原理和步驟。
算法與邏輯題：給定一個字符串，要求統(tǒng)計(jì)字符串中每個字符出現(xiàn)的次數(shù)，并按照出現(xiàn)次數(shù)從高到低的順序輸出字符及其出現(xiàn)次數(shù)。例如輸入字符串 “hello world”，輸出{ 'l': 3, 'o': 2, 'h': 1, 'e': 1, 'w': 1, 'r': 1, 'd': 1 }。