1，
reflow和repaint：回流和重繪。
回流：renderTree 重建。
重繪：外觀樣式風格進行更新。(color更改)
頁面在第一次加載時候必須進行了回流操作，有回流一定伴隨重繪，但是重繪不一定回流。
css3新增偽類，減少回流和重繪，也就是減少對renderTree的操作：
合并多次多DOM的修改
2，
瀏覽器對頁面的呈現流程基本如下：
1)瀏覽器把獲取到的html代碼解析成一個DOM樹，每個tag都是樹上的一個節點，根節點就是document對象，包括(display：none，和js動態創建的節點)
2)瀏覽器把所有樣式解析成樣式結構體(定義的和代理的所有樣式)，不同瀏覽器會自動去掉不能識別的樣式。
css框架bootstrap。3)DOM Tree 和樣式結構體合并生成 RenderTree，每個節點都有style，不包含隱藏的節點(display:none)，但是包含不可見的節點(visibility:hidden)。
4)瀏覽器根據RenderTree 繪制頁面
3，
內存泄漏
對于持續運行的服務進程，必須及時釋放不再用到的內存，不然內存會越來越多，導致進程越來越慢，甚至系統崩潰。
不用到的內存沒有及時釋放，就叫內存泄漏。
css框架。垃圾回收機制：引用計數法。如果一個值的引用次數為0，則證明不再使用，可以釋放。如果引用次數不為0，卻不再使用，無法釋放，導致了內存泄漏。
如何檢測是否存在：谷歌控制臺---memory--timeline
原因：
1)全局變量(可以在js文件開頭‘use strict’,嚴格解析，阻止意外的全局變量產生)
2)沒有及時清理定時器
3)閉包
CSS3新特性。4)超出DOM的引用
4，
const--let.png
const 只聲明，不賦值會報錯；一旦賦值，就不能修改，否則也報錯，不存在變量提升，常量
let 塊級作用域，不能重復聲明，不存在變量提升
var 函數作用域，可以重復聲明
css3有哪些新選擇器。5，
三列布局，兩邊定寬，中間自適應
1)
wrap包裹.png
position-margin.png
2)
vue babel、布局.png
float-margin.png
3)
布局.png
flex.png
6，
css3和html5新特性，兩列布局，左邊定寬，右邊自適應
1)
float--BFC.png
2)
position--margin.png
7，
css3樣式？flex
傳統布局：display+position+float解決方案。
flex布局的元素稱為容器，元素內的子元素稱為容器的項目。項目默認沿著主軸排序。
image.png
設置為flex布局后，子元素的float，vertical-align，clear屬性失效。
容器屬性：
css3。flex-direction:
row(默認)
row-reverse(主軸為水平方向，起點在右端)
column(主軸為垂直方向，起點在上沿)
column-reverse(主軸為垂直方向，起點在下沿)
flex-wrap:
css3布局。nowrap(默認)/
wrap(主軸方向換行)/
wrap-reverse(換行第一行在最下邊)
flex-flow: flex-direction | flex-wrap(以上兩種簡寫)
在主軸方向：
justify-content:
簡述css3有哪些新特性、flex-start(左對齊)/
flex-end(右對齊)/
center(居中)/
space-between(間隔相等，最左最右對齊)/
space-around(每個項目左右相等)
在交叉軸上:
css3選擇器有哪些類型，align-items:
flex-start(上對齊)/
flex-end(下對齊)/
center(居中)/
baseline(基線對齊)/
stretch(若項目沒設置高度，則占滿整個容器高度)
babel js？align-content: 多條主軸時候起作用
flex-start(上對齊)/
flex-end(下對齊)/
center(居中)/
space-between(間隔相等，上下對齊)/
space-around(每個主軸上下相等)
css3布局的幾種方式？stretch(軸線占滿整個交叉軸)
項目屬性：
order:數值(越小越靠前;默認是0)
flex-grow:放大倍數(默認是0)容器存在剩余空間時候才會生效。有放大屬性的項目會根據比例平分剩余空間。
image.png
flex-shrink: (默認是1)縮小倍數 。容器空間不足才會生效。有放大屬性的項目會根據比例縮小不夠的空間。屬性為0，其他項目都為1，則空間不足時，前者不縮小。
html5與css3好復雜？image.png
flex:0/1/auto(簡寫)
align-self: 可覆蓋父元素的align-items。
auto(繼承父元素的align-items)/
flex-start
flex-end
css自適應布局、baseline
stretch
8,
垂直水平居中
margin.png
transform.png
如何讓css只在當前組件中起作用。margin2.png
9，
position
absolute:最近的positioned的祖先元素，如果祖先都沒有positioned，相對于body
relative:偏移正常位置，其他元素不受影響
fixed:固定定位，即使滾動頁面，也不會改變相對瀏覽器窗口的位置
static：默認值，沒有positioned
10，
分析輸入URL到頁面被返回的過程：
1)輸入地址
2)瀏覽器查詢IP地址(DNS查找：瀏覽器緩存--系統緩存--路由緩存--遞歸搜索)
3)瀏覽器給web服務器發送一個http請求
4)服務器給瀏覽器返回一個永久重定向301(有利于搜素引擎SEO，兩個地址都看作同一個地址，增加了訪問量；增強緩存友好性)
5)瀏覽器跟蹤從定向的地址，繼續發送另一個請求
6)服務器處理請求
7)服務器返回200的反應
8)瀏覽器顯示HTML
9)瀏覽器發送獲取嵌入在HTML中的對象的請求(靜態文件資源)
10)瀏覽器發送異步ajax請求(頁面顯示完成后，瀏覽器仍與服務器連接)
11，
變量提升：只提升聲明，不提升賦值
var a = 2;
function A() {
var a = 1;
console.log(a);//1
console.log(this.a)//2
}
function B() {
var a = 4;
return A;
}
B()();
12，
DNS又稱域名系統，用來解析可讀主機名(www.baidu.com)為機器可讀的IP地址(204.13.248.115)
DNS是如何工作的：
1)本地DNS緩存查詢，如果未查到結果，則進行第二步驟；
2)計算機聯系ISP(網絡服務提供商)的遞歸DNS服務器，執行DNS查詢；如果未查詢到，進行第三步驟；
3)詢問根域名服務器，(從右向左)，將請求指向(.com)對應的頂級域服務器(TLD.com)，繼續檢查下一個信息(baidu)，并將查詢指向負責此域名的服務器。這些權威的服務器將信息存儲在DNS中。
4)遞歸服務器從權威服務器獲取到記錄，并存在本地緩存中。(記錄都是有有效期的)
5)返回計算機
13，
webStorage和cookie
cookie：存儲量4KB左右，比webStorage存儲小，且方式不直觀
webStorage：
localStorage:本地永久存儲，除非主動刪除，不然不會消除；
sessionStorage：瀏覽器頁面打開中會存在，關閉頁面，數據消失；
API：setItem()，getItem()，removeItem()，clear()，addEventListener()
14，
跨域問題
js語言安全機制--同源策略(同一協議，同一域名，同一端口號)引起的跨域問題。
解決方案：
1)jsonp實現跨域
動態創建script標簽，src屬性值為 跨域地址+傳入的數據+回調函數。執行完之后再動態刪除之前創建的script.
jsonp.png
2)H5的postMessage(message,targetOrigin)
向其他window對象發送message，通過監聽其他對象message事件，來獲取傳過來的信息。
postMessage.png
3)document.domain
試用情況：主域相同，子域不同的情況；通過控制iframe
document.png
15，
獲取url的指定參數：
字符串切割.png
16,
事件監聽
事件流：捕獲型事件(從外向內)和冒泡型事件(從內向外)
使用‘return false’阻止默認行為(提交按鈕，超鏈接)
1)綁定HTML元素上
image.png
2)綁定到DOM上
image.png
3)addEvent:可以添加多個事件
image.png
17，
前端性能優化
content方面：
1)減少HTTP請求(CSS Sprites，合并多個CSS文件和js文件)
2)減少DNS查找(主流瀏覽器都是有自己獨有的緩存，而不是操作系統的；一個網站最少2個域，但不多余四個)
3)使用AJAX緩存
4)延遲加載組件，預加載組件
5)減少DOM節點數量
6)最小化Iframe的數量
server方面：
1)使用內容分發網絡(CDN)(網站內容分散到多個CDN，處在不同地域位置的訪問下載速度快)
2)使用Etag(判斷瀏覽器緩存和服務器的原始內容是否匹配)
3)對Ajax請求用Get
cookie方面：
1)減少cookie大小
Css方面
1)避免使用css表達式
2)使用link代提import
3)放在head中
圖片方面：
1)優化圖片大小
2)通過CSS Sprites整合圖片
JS方面：
1)減少對DOM的操作
2)js和CSS文件外部引入
3)放在頁面底部
18，
promise
函數回調成功：
resolve.png
函數回調失敗：
then語法兩個參數--成功和失敗.png
catch語法：(和失敗語法意義相同)
image.png
不同點：
出錯可以繼續執行.png
19，
js單線程，執行完主線程，瀏覽器維護一個任務隊列task queue；主線程的任務執行完，去task queue中拿最先放進queue的task放到主線程，循環反復event loops
macro-task: script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, 原生Promise, Object.observe, MutationObserver
在執行完主線程的任務后，會去看micro-task隊列，把所有任務依次執行，之后再去看macro-task隊列。
image.png
20，
js模塊化的發展歷程
第一階段：無模塊化
一個JS文件相當于一個模塊，引入多個JS文件
第二階段：CommonJS規范
起初是用在node端的，前端的webpack也支持原生CommonJS的。
通過require方法同步加載所需要依賴的模塊，然后通過module.exports或者exports導出對外暴露的接口，解決了全局變量污染的問題。
注意：因為module.exports本身就是一個對象，所以，我們在導出時可以使用 module.exports = {foo: 'bar'} 和 module.exports.foo = 'bar'。但是, exports 是 module.exports 的一個引用，或者理解為exports是一個指針，exports指向module.exports，這樣，我們就只能使用 exports.foo = 'bar' 的方式，而不能使用exports = {foo: 'bar'}這種方式，因為exports = {foo: 'bar'}這種方式的使用就會導致exports指向了別的對象。
第三階段：AMD規范
非同步加載模塊，實現是require.js。適合瀏覽器端。異步加載，依賴前置。
requrie([module]，callback)//引用模塊
define('id',[depends],callback)//定義模塊
第四階段：CMD規范
按需加載，依賴就近，同樣實現了瀏覽器端的模塊化加載。sea.js
AMD---CMD.png
第五階段：ES6模塊化
import導入---export導出
21，
js中數組方法：
forEach:讓數組中每個item做一件事(例如：輸出item)；
map:讓數組中每個item進行某種運算，返回新數組(例如：*2)；
filter：選出符合條件的item，組合成新數組(例如：>4)；
reduce:數組中前后兩項進行相應操作，返回最終結果(例如：相乘)；
every:數組中 所有item都滿足條件才會返回true；
some:只要有一個滿足條件，就返回true；
image.png
22，
數組去重
ES6：
image.png
ES5：
image.png
reduce.png
23,
轉義符.png
24，
box-sizing:content-box
標準盒子總寬度 = margin + border + padding + content(width)
W3C標準盒模型.png
IE盒子總寬度 = margin + width(margin + padding + border)
box-sizing:border-box
怪異盒模型.png
***background填充padding
絕對定位不包含border.png
25,
vue數據雙向綁定原理及實現
1，對數據劫持監聽
Obj.defineProperty()監聽所有屬性是否變化，給屬性設置set函數，當數據改變了就會觸發set函數。讀取的時候觸發get函數。
2，結合發布者-訂閱者模式
通知變化給訂閱者(watcher)，訂閱者看是否需要更新。同時需要一個指令解析器(compile)，掃描解析每個元素節點，根據相關指令初始化成一個訂閱者，并且替換模板數據或者綁定更新函數。
發布者-訂閱者模式.png
26，
DOM,Jquery,React
DOM:文檔對應的對象模型；
jQuery和react都是庫。
jQuery是一個JS庫，開發者使用它直接和DOM進行溝通。
React：給開發者和DOM直接建立了聯系。他的三項核心技術：
1)響應式UI
2)虛擬DOM
3)組件
27，
this 在js中的使用
this .png
28,
斐波那契數列
數列.png
29,
增加原生字符串方法
字符串重復次數方法.png
30，
同字母異序(兩個字符串，由相同字母組成，字母順序可以不同)
比較.png
31，
CSS3屬性
CSS3 2D轉換：
translate(50px,100px)平移
rotate(30deg) 旋轉
scale(2,4) 放大或縮小
skew(30deg,30deg) 翻轉
CSS3 3D轉換：
translateX/Y/Z平移
rotateX/Y/Z 旋轉
scaleX/Y/Z 放大或縮小
CSS3過渡
transition : width 2s liner 2s(CSS屬性、持續時間、動畫曲線、開始時間)
CSS3動畫
@keyframes myfirstdiv {
from{ background:yellow}
to{background:green}
}
或者
@keyframes myfirstdiv
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
animation: myfirstdiv 5s
32，
css hack手段
解決瀏覽器兼容問題，跨平臺應用
1)IE條件注釋法
IE條件注釋法.png
2)css屬性前綴法
屬性前綴.png
3)選擇器前綴法
選擇器前綴.png
33，
var 重復聲明
var.png
var可以重復聲明，如果重復聲明的一個變量有初始值，那就相當于復制語句；如果沒有初始值，則對之前聲明不會有任何影響.
34,
js繼承
1)
原型鏈.png
2)
構造.png
3)
實例.png
4)
組合.png
5)
寄生組合.png
35，
判斷一個數組是數組
1)instanceof
arr instanceof Array//true
2)constructor
arr.constructor === Array //true
arr._ _proto_ _.constructor === Array //true
instanceof 和constructor 判斷的變量，必須在當前頁面聲明的，比如，一個頁面(父頁面)有一個框架，框架中引用了一個頁面(子頁面)，在子頁面中聲明了一個ary，并將其賦值給父頁面的一個變量，這時判斷該變量，Array == object.constructor;會返回false；
原因：
1、array屬于引用型數據，在傳遞過程中，僅僅是引用地址的傳遞。
2、每個頁面的Array原生對象所引用的地址是不一樣的，在子頁面聲明的array，所對應的構造函數，是子頁面的Array對象；父頁面來進行判斷，使用的Array并不等于子頁面的Array；切記，不然很難跟蹤問題！
3) Object.prototype.toString.call(a) //[object Array]
4 ) Array.isArray(arr) //true
36,
回文字符串判斷
回文.png
37，
解決for循環輸出最后一個值的問題
JS單線程原因，后調用setTimeout，此時for循環已經執行完了
閉包.png
38，
npm install react --save
npm install安裝所有依賴
webpack 進行打包
babel-loader 把ES6轉換成ES5
loader.png
webpack dev server 搭建本地服務器；自動刷新
node server 把app掛載到本地服務器上
webpack dev serve --hot --inline 要想讓HMR生效，就要在應用熱替換模塊或者根模塊加入允許熱替換的代碼
jQuery 事件驅動。用戶點擊button，派發事件，根據事件更新操作UI
react 數據驅動。會把數據映射到UI上，不用管UI。核心思想就是模塊化組件化。
數據：state(組件本身的數據)和props(其他組件傳入的數據)
第一次加載組件涉及到的組件生命周期順序：
image.png
image.png
react-router:
browserHistory: baidu.com/a/b
hashHistory: baidu.com/#a/b
react-router組件: 裝載頁面的組件，把組件傳給他來展示頁面
indexRoute：第一次進入系統，沒有存入URL的時候
Route
頁面切換的時候組件會被銷毀，所以根據需求把相應功能放在根組件里。
事件訂閱：全局事件管理器，發布事件操作，只要訂閱事件的部分，就會監聽到事件，做事件處理。
virtual Dom : 存儲DOM信息的數據結構，存在內存當中，也就是JS對象中，能夠完整描述DOM的結構。
DOM Diff：對比兩個virtual Dom ，數據更新的時候會生成新的virtual Dom 。
image.png
解決方案：immutable
組件間通信方式：
1、事件回調，
2、事件訂閱(缺乏統一管理)，
3、redux(統一對系統事件的管理)
39，
ES6解構賦值
image.png
變量名必須和屬性名一致，node.name的值存給了變量名為name的變量。
40，
new四部曲
1.首先在內存堆上開辟一個空間存儲對象
2.this會指向實例也就是指向當前對象
3.設置屬性和方法,執行代碼塊
4.返回實例,也就是當前對象
41，
重排序數組
image.png
42,
image.png
淺拷貝和深拷貝
淺拷貝：兩個對象同時指向一個引用地址，一個修改，其他也跟著變。地址存放在棧中。數據在堆中。
數組淺copy.png
深拷貝：
1.單層對象，沒有嵌套
對象深copy方法一.png
對象深copy方法二.png
ES6擴展運算符.png
克隆數組.png
//數組深拷貝
var arr2 = arr.slice(0);
var arr3 = arr.concat();
2.多層嵌套(以上三種 方法不好使了)
JSON對象的parse和stringify
const newObj = JSON.parse(JSON.stringify(oldObj));
JSON字符串反序列化成JS對象，stringify方法可以將JS對象序列化成JSON字符串,
// 構造函數
function person(pname) {
this.name = pname;
}
const Messi = new person('Messi');
// 函數
function say() {
console.log('hi');
};
const oldObj = {
a: say,
b: new Array(1),
c: new RegExp('ab+c', 'i'),
d: Messi
};
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a);
//undefined , ? say() {console.log('hi');}
console.log(newObj.b[0], oldObj.b[0]);
//null , undefined
console.log(newObj.c, oldObj.c);
// {} ,/ab+c/i
console.log(newObj.d.constructor, oldObj.d.constructor);
// ? Object() { [native code] }, ? person(pname) {this.name = pname;}
const oldObj = {};
oldObj.a = oldObj;
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON
1)對于正則表達式類型、函數類型等無法進行深拷貝(而且會直接丟失相應的值)。
2)它會拋棄對象的constructor。也就是深拷貝之后，不管這個對象原來的構造函數是什么，在深拷貝之后都會變成Object。
3).對象有循環引用,會報錯
43,
this問題
全局作用域中的this指向window
函數體內的this 哪個對象調用這個函數，this指向誰
call和apply改變函數內this的指向.png
44,
ajax請求過程
1，創建XMLHttpRequest對象(異步調用對象)
2，創建新的HTTP請求，指定方法，URL和驗證信息
3，發送HTTP請求
4，異步處理請求的數據
ajax.png
45，
url轉換成json
參數url--json.png
46，
js中的遍歷
object獨有遍歷方法
1
Object.keys.png
2
getOwnPropertyNames.png
3
Reflect.ownKeys.png
數組獨有遍歷方法
image.png
for..of.png
for...in遍歷數組index，對象key
for...in.png
47,
ES6數組的擴展
1.復制、合并數組
image.png
2.rest參數必須在數組最后一項
image.png
3.類數組轉為數組
from.png
4,
filter.png
Array()存在不足，當參數為1個時候，參數為數組長度，當參數大于1時，參數為數組值
Array.of.png
Array.prototype.copyWithin(target, start = 0, end = this.length):
target:復制到哪里去
start:從哪里開始
end:從哪里結束
start和end若為負數，則是倒數 數組
copyWithin.png
find返回第一個符合條件的成員，若沒有，返回undefind；
findIndex:返回第一個符合條件的成員位置，若沒有，返回-1;
includes:返回true或者false，第二個參數為從哪里開始查找，若是負數，則倒數。
find.png
findIndex.png
includes.png
image.png
8.fill:填充數組
fill.png
9.flat 拉平數組
image.png
48，
js創建對象屬性加引號和不加引號對區別
var info = {
'first-name':'ss',
name:'lh'
}
在使用非法命名規則的時候，必須加引號，其他情況兩者都是可以的。還要注意的是：使用非法命名規則在獲取屬性的時候，不能用點語法(.first-name)，必須使用中括號(info[first-name])。
49，
簡潔的if-else判斷寫法
當case2和case3邏輯一樣當時候，可以省去執行語句和break。
// status 活動狀態:1 開團進行中 2 開團失敗 3 商品售完 4 開團成功
const onButtonClick = (status) => {
switch (status) {
case 1:
sendLog('processing')
jumpTo('IndexPage')
break
case 2:
case 3:
sendLog('fail')
jumpTo('FailPage')
break
case 4:
sendLog('success')
jumpTo('SuccessPage')
break
default:
sendLog('other')
jumpTo('Index')
break
}
}
升級寫法：
const actions = {
'1': ['processing', 'IndexPage'],
'2': ['fail', 'FailPage'],
'3': ['fail', 'FailPage'],
'4': ['success', 'SuccessPage'],
'default': ['other', 'Index']
}
const onButtonClick1 = (status) => {
let action = actions[status] || actions['default'],
logName = action[0],
pageName = action[1];
sendLog(logName);
jumpTo(pageName);
}
Map對象: 打破了傳統對象 鍵(字符串)--值對，而現在是值--值。
const actions = new Map([
[1, ['processing', 'IndexPage']],
[2, ['fail', 'FailPage']],
[3, ['fail', 'FailPage']],
[4, ['success', 'SuccessPage']],
['default', ['other', 'Index']],
])
const onButtonClick1 = (status) => {
let action = actions.get(status) || actions.get('default');
sendLog(action[0]);
jumpTo(action[1]);
}
如果判斷條件升級為兩個，status 和 identity
最原始if--else判斷方法：
/**
* 按鈕點擊事件
* @param {number} status 活動狀態：1開團進行中 2開團失敗 3 開團成功 4 商品售罄 5 有庫存未開團
* @param {string} identity 身份標識：guest客態 master主態
*/
const onButtonClick = (status, identity) => {
if (identity == 'guest') {
if (status == 1) {
//do sth
} else if (status == 2) {
//do sth
} else if (status == 3) {
//do sth
} else if (status == 4) {
//do sth
} else {
//do sth
}
} else if (identity == 'master') {
if (status == 1) {
//do sth
} else if (status == 2) {
//do sth
} else if (status == 3) {
//do sth
} else if (status == 4) {
//do sth
} else {
//do sth
}
}
}
升級為Map后(把兩個判斷條件拼接成字符串)：
const actions = new Map([
['guest_1', () => {/*do sth...*/}],
['guest_2', () => {/*do sth...*/}],
['guest_3', () => {/*do sth...*/}],
['guest_4', () => {/*do sth...*/}],
['master_1', () => {/*do sth...*/}],
['master_2', () => {/*do sth...*/}],
['master_3', () => {/*do sth...*/}],
['master_4', () => {/*do sth...*/}],
['default', () => {/*do sth...*/}],
]);
const onButtonClick1 = (identity, status) => {
let action = actions.get(`${identity}_${status}`) || actions.get('default');
action.call(this)
}
再升級一下，去掉字符串拼接(Map可以是任意類型對數據作為key)：
const actions = new Map([
[{
identity: 'guest',
status: 1
}, () => {/* do sth... */}],
[{
identity: 'guest',
status: 2
}, () => {/* do sth... */}],
[{
identity: 'guest',
status: 3
}, () => {/* do sth... */}],
])
const onButtonClick2 = (identity, status) => {
// 過濾出和參數相同的數組item
let action = [...actions].filter(([key, value]) => (key.identity == identity && key.status == status));
action.forEach(([key, value]) => value.call(this));
}
如果1和2的處理邏輯一樣呢(functionA)，如下：
const actions = new Map([
[{
identity: 'guest',
status: 1
}, () => {/* functionA */}],
[{
identity: 'guest',
status: 2
}, () => {/* functionA */}],
[{
identity: 'guest',
status: 3
}, () => {/* functionB */}],
])
可以把處理邏輯函數進行緩存：
const actions = () => {
const functionA = () => {/* do sth ... */}
const functionB = () => {/* do sth ... */}
return new Map([
[{
identity: 'guest',
status: 1
}, functionA],
[{
identity: 'guest',
status: 2
}, functionA],
[{
identity: 'guest',
status: 3
}, functionB],
])
}
console.log([...actions()]);//[arr1, arr2, arr3]
const onButtonClick2 = (identity, status) => {
// 過濾出和參數相同的數組item
let action = [...actions()].filter(([key, value]) => (key.identity == identity && key.status == status));
action.forEach(([key, value]) => value.call(this));
}
相同處理邏輯的函數寫了好多遍，看著還是冗余，可以再次升級(正則表達式作為key)：
const actions = () => {
const functionA = () => {/* do sth ... */}
const functionB = () => {/* do sth ... */}
return new Map([
[/^guest_[1-2]$/, functionA],
[/^guest_3$/, functionB],
])
}
const onButtonClick2 = (identity, status) => {
// 過濾出和參數相同的數組item
let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`));
action.forEach(([key, value]) => value.call(this));
}
50，編寫一個js函數，返回一個數組，數組由實現隨機生成n個11-41之間的整數，且不重復。
function foo(n) {
var arr = [];
var isNum = !isNaN(Number(n));//判斷n是不是一個數字，包含字符串類型的數字
var isRandOk = (n >= 11 && n <= 41 && n <= 30) ? true : false;//判斷n的取值是否符合要求
if (n && isRandOk && isNum) {
for (var i = 0; i < n; i++) {
var rand = Math.ceil(Math.random()*30+11);
if(arr.indexOf(rand) > -1){
i--
}else {
arr.push(rand)
}
}
}
console.log(arr);
}
foo(11);
51,不使用循環，生成一個長度100的數組，且每一個元素等同于它的下標
var arr = [...Array(100).keys()];
console.log(arr);
var arr = Array.from({length:100}, (v,k) => k);
console.log(arr);
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
![centsos7修改主机名 [root@st152 ~]# cat /etc/hostname](http://static.blog.csdn.net/images/save_snippets.png)
