餓了么前端筆試

一、HTML 與 CSS

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

二、JavaScript 基礎(chǔ)

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

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

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

三、JavaScript 高級特性

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

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

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

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

1. 前端性能優(yōu)化：列舉至少三種前端性能優(yōu)化的方法，并簡要說明其原理和作用。例如從代碼壓縮、圖片優(yōu)化、緩存策略等方面回答。
2. 跨域問題：解釋什么是跨域問題，以及在前端開發(fā)中常見的跨域解決方案有哪些（如 JSONP、CORS 等），請詳細描述其中一種解決方案的實現(xiàn)原理和步驟。
3. 算法與邏輯題：給定一個字符串，要求統(tǒng)計字符串中每個字符出現(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 }。

阿里餓了么26可轉(zhuǎn)正實習|2月27日正式啟動！

?每人可投遞一次，包含兩個志愿，快快行動起來吧！

熱招崗位：研發(fā)類、算法類、數(shù)據(jù)類、設(shè)計類等，大量崗位等你來投！

??base北京/上海/杭州

??崗位面向2025年11月-2026年10月期間畢業(yè)并拿到畢業(yè)證的海內(nèi)外應(yīng)屆畢業(yè)生

??投遞方式：https://talent.ele.me/campus/qrcode/home?code=P5368qSwikRqDddjIvppesioCxERb1ens38Sj14pu_o%3D

?? 內(nèi)推簡歷優(yōu)先處理，可幫查看進度、推動流程！大家投遞完可以在評論區(qū)打上姓名縮寫+崗位，我來確認有沒有內(nèi)推成功嘍

另附上阿里系的內(nèi)推碼，互相獨立，都可投遞：

阿里巴巴集團26屆可轉(zhuǎn)正實習項目，每個集團公司可單獨投遞，互不影響~

1、阿里淘天集團（所有實習崗位均有轉(zhuǎn)正機會，靈活入職4-6月期間均可入職）預計發(fā)出預計發(fā)出?1000+?個Offer！招聘崗位涵蓋?7?大職類，50+職位方向！?

內(nèi)推鏈接：https://talent.taotian.com/campus/qrcode/home?code=xT0QjPZ0g0ilZYx5cbuAKSZe1yUTSUwVVdq3qEap_00%3D（內(nèi)推碼：6GJN62T）

2、阿里螞蟻集團（兩個志愿）

內(nèi)推鏈接：https://u.alipay.cn/_7AJ0fSkQDupxSc0amNdCH3（用了內(nèi)推鏈接無需填內(nèi)推碼）

3、阿里餓了么（每人可投遞一次，包含兩個志愿）

【內(nèi)推鏈接】https://talent.ele.me/campus/qrcode/home?code=P5368qSwikRqDddjIvppesioCxERb1ens38Sj14pu_o%3D（用了內(nèi)推鏈接無需內(nèi)推碼）

4、阿里云（每位同學僅有1次投遞機會，2個意向）

【內(nèi)推鏈接】https://careers.aliyun.com/campus/qrcode/home?code=zur3rFlvZDZFVvuDycNhQuxAf0UBqoXtkR0YKZ2cxN8%3D（用了內(nèi)推鏈接無需內(nèi)推碼）

5、阿里靈犀互娛（大廠有競爭力的薪資+超體貼的福利）

【內(nèi)推鏈接】https://talent.lingxigames.com/campus/qrcode/home?code=WDpQN6iY3Kwxt%2FH9%2FATJr6d3AqPDUhOY5YSel6y6NRI%3D（用了內(nèi)推鏈接無需內(nèi)推碼）