javascript
javascript实现图片轮播_第2章 第9节 JavaScript(四)
● 知道哪些ES6,ES7的語法
參考回答:
promise,await/async,let、const、塊級作用域、箭頭函數(shù)
● promise和await/async的關(guān)系
參考回答:
都是異步編程的解決方案
● 問了一段js代碼,輸出結(jié)果是什么
● js的數(shù)據(jù)類型
參考回答:
字符串,數(shù)字,布爾,數(shù)組,null,Undefined,symbol,對象。
● js加載過程阻塞,解決方法。
參考回答:
指定script標簽的async屬性。
如果async="async",腳本相對于頁面的其余部分異步地執(zhí)行(當頁面繼續(xù)進行解析時,腳本將被執(zhí)行)
如果不使用async 且 defer="defer":腳本將在頁面完成解析時執(zhí)行
● js對象類型,基本對象類型以及引用對象類型的區(qū)別
參考回答:
分為基本對象類型和引用對象類型
基本數(shù)據(jù)類型:按值訪問,可操作保存在變量中的實際的值。基本類型值指的是簡單的數(shù)據(jù)段。基本數(shù)據(jù)類型有這六種:undefined、null、string、number、boolean、symbol。
引用類型:當復制保存著對象的某個變量時,操作的是對象的引用,但在為對象添加屬性時,操作的是實際的對象。引用類型值指那些可能為多個值構(gòu)成的對象。
引用類型有這幾種:Object、Array、RegExp、Date、Function、特殊的基本包裝類型(String、Number、Boolean)以及單體內(nèi)置對象(Global、Math)。
● JavaScript中的輪播實現(xiàn)原理?假如一個頁面上有兩個輪播,你會怎么實現(xiàn)?
參考回答:
圖片輪播的原理就是圖片排成一行,然后準備一個只有一張圖片大小的容器,對這個容器設(shè)置超出部分隱藏,在控制定時器來讓這些圖片整體左移或右移,這樣呈現(xiàn)出來的效果就是圖片在輪播了。
如果有兩個輪播,可封裝一個輪播組件,供兩處調(diào)用
● 怎么實現(xiàn)一個計算一年中有多少周?
參考回答:
首先你得知道是不是閏年,也就是一年是365還是366.
其次你得知道當年1月1號是周幾。假如是周五,一年365天把1號 2號3號減去,也就是把第一個不到一周的天數(shù)減去等于362還得知道最后一天是周幾,加入是周五,需要把周一到周五減去,也就是362-5=357.正常情況 357這個數(shù)計算出來是7的倍數(shù)。357/7=51 。即為周數(shù)。
● 面向?qū)ο蟮睦^承方式
參考回答:
原型鏈繼承
核心:?將父類的實例作為子類的原型
特點:
非常純粹的繼承關(guān)系,實例是子類的實例,也是父類的實例
父類新增原型方法/原型屬性,子類都能訪問到
簡單,易于實現(xiàn)
缺點:
要想為子類新增屬性和方法,不能放到構(gòu)造器中
無法實現(xiàn)多繼承
來自原型對象的所有屬性被所有實例共享
創(chuàng)建子類實例時,無法向父類構(gòu)造函數(shù)傳參
構(gòu)造繼承
核心:使用父類的構(gòu)造函數(shù)來增強子類實例,等于是復制父類的實例屬性給子類(沒用到原型)
特點:
解決了子類實例共享父類引用屬性的問題
創(chuàng)建子類實例時,可以向父類傳遞參數(shù)
可以實現(xiàn)多繼承(call多個父類對象)
缺點:
實例并不是父類的實例,只是子類的實例
只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法
無法實現(xiàn)函數(shù)復用,每個子類都有父類實例函數(shù)的副本,影響性能
實例繼承
核心:為父類實例添加新特性,作為子類實例返回
特點:
不限制調(diào)用方式,不管是new 子類()還是子類(),返回的對象具有相同的效果
缺點:
實例是父類的實例,不是子類的實例
不支持多繼承
拷貝繼承
特點:
支持多繼承
缺點:
效率較低,內(nèi)存占用高(因為要拷貝父類的屬性)
組合繼承
核心:通過調(diào)用父類構(gòu)造,繼承父類的屬性并保留傳參的優(yōu)點,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復用
特點:
可以繼承實例屬性/方法,也可以繼承原型屬性/方法
既是子類的實例,也是父類的實例
不存在引用屬性共享問題
可傳參
函數(shù)可復用
寄生組合繼承
核心:通過調(diào)用父類構(gòu)造,繼承父類的屬性并保留傳參的優(yōu)點,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復用
參考https://www.cnblogs.com/humin/p/4556820.html
● JS的數(shù)據(jù)類型
參考回答:
字符串,數(shù)字,布爾,數(shù)組,null,Undefined,symbol,對象。
● 引用類型常見的對象
參考回答:
Object、Array、RegExp、Date、Function、特殊的基本包裝類型(String、Number、Boolean)以及單體內(nèi)置對象(Global、Math)等
● es6的常用
參考回答:
promise,await/async,let、const、塊級作用域、箭頭函數(shù)
● class
參考回答:
ES6提供了更接近傳統(tǒng)語言的寫法,引入了Class(類)這個概念,作為對象的模板。通過class關(guān)鍵字,可以定義類。
● 口述數(shù)組去重
參考回答:
法一:indexOf循環(huán)去重
法二:ES6 Set去重;Array.from(new Set(array))
法三:Object 鍵值對去重;把數(shù)組的值存成 Object 的 key 值,比如 Object[value1] = true,在判斷另一個值的時候,如果 Object[value2]存在的話,就說明該值是重復的。
● 繼承
參考回答:
原型鏈繼承
核心:?將父類的實例作為子類的原型
特點:
非常純粹的繼承關(guān)系,實例是子類的實例,也是父類的實例
父類新增原型方法/原型屬性,子類都能訪問到
簡單,易于實現(xiàn)
缺點:
要想為子類新增屬性和方法,不能放到構(gòu)造器中
無法實現(xiàn)多繼承
來自原型對象的所有屬性被所有實例共享
創(chuàng)建子類實例時,無法向父類構(gòu)造函數(shù)傳參
構(gòu)造繼承
核心:使用父類的構(gòu)造函數(shù)來增強子類實例,等于是復制父類的實例屬性給子類(沒用到原型)
特點:
解決了子類實例共享父類引用屬性的問題
創(chuàng)建子類實例時,可以向父類傳遞參數(shù)
可以實現(xiàn)多繼承(call多個父類對象)
缺點:
實例并不是父類的實例,只是子類的實例
只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法
無法實現(xiàn)函數(shù)復用,每個子類都有父類實例函數(shù)的副本,影響性能
實例繼承
核心:為父類實例添加新特性,作為子類實例返回
特點:
不限制調(diào)用方式,不管是new 子類()還是子類(),返回的對象具有相同的效果
缺點:
實例是父類的實例,不是子類的實例
不支持多繼承
拷貝繼承
特點:
支持多繼承
缺點:
效率較低,內(nèi)存占用高(因為要拷貝父類的屬性)
組合繼承
核心:通過調(diào)用父類構(gòu)造,繼承父類的屬性并保留傳參的優(yōu)點,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復用
特點:
可以繼承實例屬性/方法,也可以繼承原型屬性/方法
既是子類的實例,也是父類的實例
不存在引用屬性共享問題
可傳參
函數(shù)可復用
寄生組合繼承
核心:通過調(diào)用父類構(gòu)造,繼承父類的屬性并保留傳參的優(yōu)點,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復用
參考https://www.cnblogs.com/humin/p/4556820.html
● call和apply的區(qū)別
參考回答:
apply:調(diào)用一個對象的一個方法,用另一個對象替換當前對象。例如:B.apply(A, arguments);即A對象應(yīng)用B對象的方法。
call:調(diào)用一個對象的一個方法,用另一個對象替換當前對象。例如:B.call(A, args1,args2);即A對象調(diào)用B對象的方法。
● es6的常用特性
參考回答:
promise,await/async,let、const、塊級作用域、箭頭函數(shù)
● 箭頭函數(shù)和function有什么區(qū)別
參考回答:
箭頭函數(shù)根本就沒有綁定自己的this,在箭頭函數(shù)中調(diào)用 this 時,僅僅是簡單的沿著作用域鏈向上尋找,找到最近的一個 this 拿來使用
● new操作符原理
參考回答:
1. 創(chuàng)建一個類的實例:創(chuàng)建一個空對象obj,然后把這個空對象的__proto__設(shè)置為構(gòu)造函數(shù)的prototype。
2. 初始化實例:構(gòu)造函數(shù)被傳入?yún)?shù)并調(diào)用,關(guān)鍵字this被設(shè)定指向該實例obj。
3. 返回實例obj。
● bind,apply,call
參考回答:
apply:調(diào)用一個對象的一個方法,用另一個對象替換當前對象。例如:B.apply(A, arguments);即A對象應(yīng)用B對象的方法。
call:調(diào)用一個對象的一個方法,用另一個對象替換當前對象。例如:B.call(A, args1,args2);即A對象調(diào)用B對象的方法。
bind除了返回是函數(shù)以外,它的參數(shù)和call一樣。
● bind和apply的區(qū)別
參考回答:
返回不同:bind返回是函數(shù)
參數(shù)不同:apply(A, arguments),bind(A, args1,args2)
● 數(shù)組的去重
參考回答:
法一:indexOf循環(huán)去重
法二:ES6 Set去重;Array.from(new Set(array))
法三:Object 鍵值對去重;把數(shù)組的值存成 Object 的 key 值,比如 Object[value1] = true,在判斷另一個值的時候,如果 Object[value2]存在的話,就說明該值是重復的。
● 閉包
參考回答:
(1)什么是閉包:
閉包是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)。
閉包就是函數(shù)的局部變量集合,只是這些局部變量在函數(shù)返回后會繼續(xù)存在。閉包就是就是函數(shù)的“堆棧”在函數(shù)返回后并不釋放,我們也可以理解為這些函數(shù)堆棧并不在棧上分配而是在堆上分配。當在一個函數(shù)內(nèi)定義另外一個函數(shù)就會產(chǎn)生閉包。
(2)為什么要用:
匿名自執(zhí)行函數(shù):我們知道所有的變量,如果不加上var關(guān)鍵字,則默認的會添加到全局對象的屬性上去,這樣的臨時變量加入全局對象有很多壞處,比如:別的函數(shù)可能誤用這些變量;造成全局對象過于龐大,影響訪問速度(因為變量的取值是需要從原型鏈上遍歷的)。除了每次使用變量都是用var關(guān)鍵字外,我們在實際情況下經(jīng)常遇到這樣一種情況,即有的函數(shù)只需要執(zhí)行一次,其內(nèi)部變量無需維護,可以用閉包。
結(jié)果緩存:我們開發(fā)中會碰到很多情況,設(shè)想我們有一個處理過程很耗時的函數(shù)對象,每次調(diào)用都會花費很長時間,那么我們就需要將計算出來的值存儲起來,當調(diào)用這個函數(shù)的時候,首先在緩存中查找,如果找不到,則進行計算,然后更新緩存并返回值,如果找到了,直接返回查找到的值即可。閉包正是可以做到這一點,因為它不會釋放外部的引用,從而函數(shù)內(nèi)部的值可以得以保留。
● promise實現(xiàn)
參考回答:
Promise實現(xiàn)如下
復制代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | function Promise(fn) { var state =?'pending', value = null, callbacks = []; this.then = function (onFulfilled, onRejected) { return new Promise(function (resolve, reject) { handle({ onFulfilled: onFulfilled || null, onRejected: onRejected || null, resolve: resolve, reject: reject }); }); }; function handle(callback) { if (state ===?'pending') { callbacks.push(callback); return; } var cb = state ===?'fulfilled' ? callback.onFulfilled : callback.onRejected, ret; if (cb === null) { cb = state ===?'fulfilled' ? callback.resolve : callback.reject; cb(value); return; } ret = cb(value); callback.resolve(ret); } function resolve(newValue) { if (newValue && (typeof newValue ===?'object' || typeof newValue ===?'function')) { var then = newValue.then; if (typeof then ===?'function') { then.call(newValue, resolve, reject); return; } } state =?'fulfilled'; value = newValue; execute(); } function reject(reason) { state =?'rejected'; value = reason; execute(); } function execute() { setTimeout(function () { callbacks.forEach(function (callback) { handle(callback); }); },?0); } fn(resolve, reject); } |
● assign的深拷貝
參考回答:
function clone( obj ) {var copy;
switch( typeof obj ) {
case "undefined":
break;
case "number":
copy = obj - 0;
break;
case "string":
copy = obj + "";
break;
case "boolean":
copy = obj;
break;
case "object": ?//object分為兩種情況 對象(Object)和數(shù)組(Array)
復制代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | if(obj === null) { copy = null; } else { if( Object.prototype.toString.call(obj).slice(8,?-1) ===?"Array") { copy = []; for( var i =?0 ; i < obj.length ; i++ ) { copy.push(clone(obj[i])); } } else { copy = {}; for( var j in obj) { copy[j] = clone(obj[j]); } } } break; default: copy = obj; break; } return copy; } |
● 說promise,沒有promise怎么辦
參考回答:
沒有promise,可以用回調(diào)函數(shù)代替
● 事件委托
參考回答:
把一個元素響應(yīng)事件(click、keydown......)的函數(shù)委托到另一個元素;
優(yōu)點:減少內(nèi)存消耗、動態(tài)綁定事件。
● ?怎么用原生的js實現(xiàn)jquery的一個特定方法
● 箭頭函數(shù)和function的區(qū)別
參考回答:
箭頭函數(shù)根本就沒有綁定自己的this,在箭頭函數(shù)中調(diào)用 this 時,僅僅是簡單的沿著作用域鏈向上尋找,找到最近的一個 this 拿來使用
● arguments
參考回答:
arguments是類數(shù)組對象,有l(wèi)ength屬性,不能調(diào)用數(shù)組方法
可用Array.from()轉(zhuǎn)換
● 箭頭函數(shù)獲取arguments
參考回答:
可用…rest參數(shù)獲取
● Promise
參考回答:
Promise對象是CommonJS工作組提出的一種規(guī)范,目的是為異步編程提供統(tǒng)一接口。每一個異步任務(wù)返回一個Promise對象,該對象有一個then方法,允許指定回調(diào)函數(shù)。
f1().then(f2);
一個promise可能有三種狀態(tài):等待(pending)、已完成(resolved,又稱fulfilled)、已拒絕(rejected)。
promise必須實現(xiàn)then方法(可以說,then就是promise的核心),而且then必須返回一個promise,同一個promise的then可以調(diào)用多次,并且回調(diào)的執(zhí)行順序跟它們被定義時的順序一致。
then方法接受兩個參數(shù),第一個參數(shù)是成功時的回調(diào),在promise由“等待”態(tài)轉(zhuǎn)換到“完成”態(tài)時調(diào)用,另一個是失敗時的回調(diào),在promise由“等待”態(tài)轉(zhuǎn)換到“拒絕”態(tài)時調(diào)用。同時,then可以接受另一個promise傳入,也接受一個“類then”的對象或方法,即thenable對象。
● 模塊化開發(fā)(require)
● 事件代理
參考回答:
事件代理是利用事件的冒泡原理來實現(xiàn)的,何為事件冒泡呢?就是事件從最深的節(jié)點開始,然后逐步向上傳播事件,舉個例子:頁面上有這么一個節(jié)點樹,div>ul>li>a;比如給最里面的a加一個click點擊事件,那么這個事件就會一層一層的往外執(zhí)行,執(zhí)行順序a>li>ul>div,有這樣一個機制,那么我們給最外面的div加點擊事件,那么里面的ul,li,a做點擊事件的時候,都會冒泡到最外層的div上,所以都會觸發(fā),這就是事件代理,代理它們父級代為執(zhí)行事件。
● Eventloop
參考回答:
任務(wù)隊列中,在每一次事件循環(huán)中,macrotask只會提取一個執(zhí)行,而microtask會一直提取,直到microsoft隊列為空為止。
也就是說如果某個microtask任務(wù)被推入到執(zhí)行中,那么當主線程任務(wù)執(zhí)行完成后,會循環(huán)調(diào)用該隊列任務(wù)中的下一個任務(wù)來執(zhí)行,直到該任務(wù)隊列到最后一個任務(wù)為止。而事件循環(huán)每次只會入棧一個macrotask,主線程執(zhí)行完成該任務(wù)后又會檢查microtasks隊列并完成里面的所有任務(wù)后再執(zhí)行macrotask的任務(wù)。
macrotasks:?setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks:?process.nextTick, Promise, MutationObserver
總結(jié)
以上是生活随笔為你收集整理的javascript实现图片轮播_第2章 第9节 JavaScript(四)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: restful接口开发实例_Restfu
- 下一篇: group by 去重_【小学英语口语】