摘要:在給一個目標對象為構造函數的代理對象構造實例時觸發該操作,比如在執行時。
1、元素上下垂直居中的方式有哪些?
元素水平垂直居中的方式有哪些? absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加margin方案 div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%: margin-top: -50px; margin-left: -50px; } fixed 加 margin 方案 div{ position: fixed; width: 100px; height: 100px; top: 0; right:0; left: 0; bottom: 0; margin: auto; } display:table 方案 div{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; height: 100px; } 行內元素line-height方案 div{ text-align: center; line-height: 100px; } flex 彈性布局方案 div{ display: flex; align-items: center; justify-content:center } transform 未知元素寬高解決方案 div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }2、var let const的區別及使用場景?
首先3個都是js聲明變量所用 Var var 所聲明的變量,作用域為該語句所在的函數內,且存在變量提升 console.log(a) // 變量提升,var a 被提至所在作用域頂部, 所以這里輸出的值為 undefined var a = "JS" for (var i = 0; i <10; i++) { setTimeout(function() { // 同步注冊回調函數到 異步的 宏任務隊列。 console.log(i); // 執行此代碼時,同步代碼for循環已經執行完成 }, 0); } 10 ... 10 // 10個10 console.log(i) // i 作用域全局 輸出10 后面聲明的會覆蓋之前聲明的變量 var a = "JS" var a = "JavaScript" Let let 所聲明的變量,作用域為該語句的代碼塊內,不存在變量提升 console.log(a) // 變量沒有被提升, 輸出 ReferenceError: a is not defined let a = "JavaScript" for (let i = 0; i <10; i++) { setTimeout(function() { // 同步注冊回調函數到 異步的 宏任務隊列。 console.log(i); // 執行此代碼時,同步代碼for循環已經執行完成 }, 0); } 1...10 // 1到10 console.log(i) // i作用域for 塊級內,輸出 i is not defined 不允許重復聲明 let a = "JavaScript" let a = "JS" // "a" has already been declared Const const 包含let 所有特性, 區別是const聲明的變量是一個只讀的不可修改的 這里注意,const保證的不是所聲明的值不得改動, 而是變量指向的內存不可改動 代碼示例 const a = { content: "JavaScript" } a.content = "JS" // JS a = { content: "JS" // 這里改變了內存, 所以報錯 Assignment to constant variable } 三句話總結 使用var聲明的變量,其作用域為該語句所在的函數內,且存在變量提升現象,后面的覆蓋前面的 使用let聲明的變量,其作用域為該語句所在的代碼塊內,不存在變量提升, 不能重復聲明 使用const聲明的是常量,在后面出現的代碼中不能再修改該常量的內存3、如何理解es6中的類?
首先,JS作為一門非面向對象語言,在es6之前,并沒有提供對類的支持,我們常用的做法是通過構造函數來模擬類的實現, 通過將屬性及方法定義在原型上共享給其實例 簡單實現: function JS(name) { this.name = name } JS.prototype.getName = function(){ console.log(this.name) } const child = new JS("測試") ES6 中的Class es6中的class只是一個語法糖,class的寫法只是讓對象原型看起來更加清晰 簡單使用: class JS { constructor(name) { this.name = name } getName() { console.log( this.name ) } } const child = new JS("測試") 每個類中都有一個constructor方法,如果沒有顯示定義, 會默認添加一個空的constructor,等同于ES5中的構造函數, 類的所有方法都是定義在類的prototype屬性上面,二者的主要區別在于Class必須使用new調用, ES5中構造函數不使用new也可以調用, class 中新增靜態方法(static)關鍵字, 靜態方法不能被繼承只有通過類本身來調用 class JS { constructor(name) { this.name = name } static getName() { // static 方法只有類本身能調用,實例不能繼承 console.log(this.name) } } Extends 繼承 class 也可以通過extends 關鍵字實現繼承 代碼示例: class JS { constructor(name) { this.name = name } getName() { console.log(this.name) } } class Css extends Js{ constructor() { super(); } } const child = new Css("測試") child.getName() // "測試" extends 注意點 使用extends 繼承時,子類構造函數中必須調用super(), 代表調用父類的構造函數 super雖然代碼父類的constructor,但是返回的子類的實例 super作為函數調用時,代表類的構造函數 super作為對象調用時, 在普通方法中,指向父類的原型對象, 靜態方法中指向父類4、如何理解es6中的Promise?
js是單線程的,也就是說一次只能完成一個任務,為了解決這個問題,js將任務的執行模式分為兩種, 同步和異步, 在es5中我們處理異步只能通過的回調的方式進行處理,在多層異步中,回調會一層一層嵌套,也就是所謂的回調地獄,promise就是異步編程的一種解決方案 Promise 特點: 對象的狀態不受外界影響, promise對象代表一個異步操作,有三種狀態pendding(進行中), fulfilled(成功), rejected(失敗) 一旦狀態改變,就不會再變, 狀態的改變只有兩種可能, pendding => fulfilled及pendding => rejected 基本用法: const promise = new Promise( function(resolve,reject){ // ... some code if(/* 異步操作成功 */){ resolve(value); // 將狀態從pendding變成fulfilled }else{ reject(error); // 將狀態從pendding變成rejected } } ); promise 生成實例后可以使用then方法接收resolved狀態和rejected狀態的回調函數 promise.then(()=>{ console.log("resolved") },()=>{ console.log("rejected") }) promise原型上具有catch方法, catch方法是rejection的別名, 用于指定發生錯誤時的回調函數 promise.then(()=>{ console.log("resolved") },()=>{ console.log("rejected") }).catch((err)=>{ console.log("catch") }) promise原型上具有finally方法,用于不管promise對象最后的狀態如何,都會執行的操作 promise.then(()=>{ console.log("resolved") },()=>{ console.log("rejected") }).finally((err)=>{ console.log("end") }) Promise.all Promise.all方法用于將多個 Promise 實例,包裝成一個新的 Promise 實例 簡單使用: const p = Promise.all([p1,p2,p3]); 特點: 參數都是promise實例,如果不是會調用promise.resolve方法將其轉為promise實例 p的獎態由傳入的promise實例的狀態決定 promise實例狀態都變成fulfilled,p狀態為fulfilled promise實例狀態一個變成rejected,p狀態為rejected6、如何理解es6中的Proxy?
如何理解es6中的Proxy? 試題解析:對proxy的理解,可能會延伸到vue的雙向綁定 Proxy(代理) 定義 可以理解為為目標對象架設一層攔截,外界對該對象的訪問,都必須通過這層攔截 簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return "JS" console.log(`get ${key}`) }, set: (target, key, value, receiver) => { console.log(`set ${key}`) }, }) obj.name = "JS" // set name // JS obj.name // 這里進入get的回調函數,所有直接返回 JS 從上面的示例中可以看出,Proxy存在一種機制,可以對外界的讀寫操作進行改寫 Proxy 實例方法 proxy除了代理get,set操作,還能代理其它的操作,如下 handler.getPrototypeOf() // 在讀取代理對象的原型時觸發該操作,比如在執行 Object.getPrototypeOf(proxy) 時。 handler.setPrototypeOf() // 在設置代理對象的原型時觸發該操作,比如在執行 Object.setPrototypeOf(proxy, null) 時。 handler.isExtensible() // 在判斷一個代理對象是否是可擴展時觸發該操作,比如在執行 Object.isExtensible(proxy) 時。 handler.preventExtensions() // 在讓一個代理對象不可擴展時觸發該操作,比如在執行 Object.preventExtensions(proxy) 時。 handler.getOwnPropertyDescriptor() // 在獲取代理對象某個屬性的屬性描述時觸發該操作,比如在執行 Object.getOwnPropertyDescriptor(proxy, "foo") 時。 handler.defineProperty() // 在定義代理對象某個屬性時的屬性描述時觸發該操作,比如在執行 Object.defineProperty(proxy, "foo", {}) 時。 handler.has() // 在判斷代理對象是否擁有某個屬性時觸發該操作,比如在執行 "foo" in proxy 時。 handler. get () // 在讀取代理對象的某個屬性時觸發該操作,比如在執行 proxy.foo 時。 handler.set() // 在給代理對象的某個屬性賦值時觸發該操作,比如在執行 proxy.foo = 1 時。 handler.deleteProperty() // 在刪除代理對象的某個屬性時觸發該操作,比如在執行 delete proxy.foo 時。 handler.ownKeys() // 在獲取代理對象的所有屬性鍵時觸發該操作,比如在執行 Object.getOwnPropertyNames(proxy) 時。 handler.apply() // 在調用一個目標對象為函數的代理對象時觸發該操作,比如在執行 proxy() 時。 handler.construct() // 在給一個目標對象為構造函數的代理對象構造實例時觸發該操作,比如在執行new proxy() 時。 為什么要使用Proxy 攔截和監視外部對對象的訪問 降低函數或類的復雜度 在復雜操作前對操作進行校驗或對所需資源進行管理7、如何理解es6中的decorator?
Decorator是ES7中的提案,概念借鑒于python, 它作用于一個目標類為其添加屬性于方法 我們用一個比喻來理解Decorator, 把孫悟空看成是一個類,那么棒子就是裝飾器為其裝備的武器 代碼理解: @stick class Monkey{ } function stick(target){// 第一個參數就是目標類的本身 target.ATK = 100000 } Monkey.ATK // 為悟空裝備了棒子,攻擊力提高了100000 // 如果一個參數不夠用,可以在裝飾器外層再包一層 function stick(atk){ return function(targt){ target.ATK = atk } } @stick(200000) // 這樣我們就為悟空增加了200000攻擊力 class Monkey{ } Decorator 不僅能修飾類,也能修飾類的方法 class Monkey{ @setName name(){ this.name = "孫悟空" } } Decorator 只能修飾類及類的方法,不能修飾于函數,因為存在函數提升 Mixin 在修飾器基礎上,我們可以實現mixin(混入),意思在一個對象中混入另一個對象的方法 代碼示例: export function mixins(...list){ return function(target){ Object.assign(target.prototype,...list) } } const skill = { shapeshifting(){ console.log("72變") } } @mixins(skill) class Monkey{ } Object.assign(Monkey.prototype, skill) const swk = new Monkey() swk.shapeshifting() // 72變 使用Decorator的好處 擴展功能,相對于繼承增加了更多的靈活性 代碼可讀性更高,裝飾器正確命名相當于注釋8、Es6中新增的數據類型有哪些?使用場景?
Es6中新增的數據類型有哪些?使用場景? es6中新增一種原始數據類型Symbol,最大的特點是唯一性,Symbol值通過Symbol函數生成, 在es5中對象的屬性都是字符串,我們使用他人定義的對象,然后去新增自己的屬性,這樣容易起沖突覆蓋原有的屬性, Symbol也可以看成為一個字符串,不過這個字符能保證是獨一無二的 基本示例: // Object const obj = { name:"JS" } obj.name ="JS每日一題" // Symbol const name = Symbol("name") // 這里的參數沒有特殊意義,可以看成為Symbol加了一個標記 obj[name]="JS每日一題" Symbol用法 Symbol 目前有多種寫法 // 一 const title = Symbol() const obj = {} obj[title]="JS每日一題" // 二 const obj = { [title]:"JS每日一題" } // 三 Object.defineProperty(obj,title,{value:"JS每日一題"}) obj[title] // 輸出的結果都為JS每日一題 這里注意一下, Symbol 做為屬性名時,不能用點去讀取 obj.title // undefined Symbol作為屬性名,只有通過Object.getOwnPropertySymbols 方法返回 const attrs = Object.getOwnPropertySymbols(obj) // [Symbol[title]] Symbol.for() 如果我們想要重復Symbol可以使用Symbol.for, Smybol.for()及Smybol()的區別在于Symbol.for()會先去查找全局下有沒有聲明過,如果有就返回該值,沒有就新建一個,Symbol()每一次調用都會新建一個 代碼理解: const title = Symbol.for("JS每日一題") .... Symbol.for("JS每日一題") //調用多次都是使用的第一次聲明的值 Symbol.for("JS每日一題") === Symbol.for("JS每日一題") // true const title =Symbol("JS每日一題") Symbol("JS每日一題") === Symbol("JS每日一題") // false 總結 Symbol的特點 獨一無二 不能隱式轉換 不能與其它數據類型做運算 不能使用點運算符進行操作9、簡述一下你為什么要使用vue?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53609.html
摘要:筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄,每天分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入的專欄學習原文有的語音,如有侵權請聯系我,郵箱。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以...
摘要:筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄,每天分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入的專欄學習原文有的語音,如有侵權請聯系我,郵箱。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以...
摘要:筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄,每天分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入的專欄學習原文有的語音,如有侵權請聯系我,郵箱。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:因為工作中一直在使用,也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來,做成一本開源免費專業簡單的入門級別的小書,提供給社區。本書的后續可能會做成視頻版本,敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書 本文作者:胡子大哈本文原文:React.js 小書 轉載請注明出處,保留原文鏈接以及作者信息 在線閱讀:http://huzi...
摘要:無序列表無序列表是一個項目的列表,此列項目使用粗體圓點典型的小黑圓圈進行標記。可以取值為實心黑圓點空心圓點實心黑方點。有序列表有序列表同樣也是一列項目,列表項目使用數字進行標記。自定義列表自定義列表是項目及其注釋的組合。 前端基礎知識學習記錄(二) 1、HTML 輸入類型 元素的輸入類型: 1、定義供文本輸入的單行輸入字段; 2、定義密碼字段(password字段中的字符會被做掩碼處理...
閱讀 1948·2021-11-24 10:45
閱讀 1452·2021-11-18 13:15
閱讀 4524·2021-09-22 15:47
閱讀 3902·2021-09-09 11:36
閱讀 2006·2019-08-30 15:44
閱讀 3081·2019-08-29 13:05
閱讀 2495·2019-08-29 12:54
閱讀 1986·2019-08-26 13:47