一宾娜、選擇題
1.要?jiǎng)討B(tài)改變層中的內(nèi)容可以使用的方法有谒撼？
- A：innerHTML
- B：innerText
- C：通過(guò)設(shè)置層的隱藏和顯示來(lái)實(shí)現(xiàn)
- D：通過(guò)設(shè)置層的樣式屬性的display屬性
// 答案： A,B，注意動(dòng)態(tài)改變拟烫，內(nèi)容
2. 看下面的代碼弥鹦，給出輸出的結(jié)果？
for (var i = 1; i <= 3; i++){
setTimeout(function(){
console.log(i);
},0)
}
// 答案： 4 4 4 寒跳，因?yàn)閟etTimeout是異步函數(shù)
3. 看下面代碼聘萨，給出輸出結(jié)果？
var a = 1;
function foo() {
if(!a){
var a = 2
}
alert(a);
}
foo()
- A：1
- B：2
- C：undefined
- D：報(bào)錯(cuò)
答案是：B童太，
涉及到的知識(shí)點(diǎn)有作用域米辐，變量提升。
因?yàn)関ar是函數(shù)級(jí)作用域书释，foo函數(shù)中出現(xiàn)var a=2 的存在翘贮，
就默認(rèn)在函數(shù)內(nèi)頂端 聲明var a；此時(shí)這個(gè)a沒有被賦值所以是undefined爆惧；
然后執(zhí)行
if(!a)等價(jià)于!undefined肯定是true择膝。然后給a賦值為2.所以打印的是2。
二检激、問(wèn)答題
1. 請(qǐng)用css實(shí)現(xiàn)水平居中肴捉，HTML結(jié)構(gòu)如下
<div class="wrapper">
<div class="content"></div>
</div>
答案：
/*第一種通過(guò)定位和位移（未知子模塊寬高）或者margin（已知子元素寬高）*/
html,
body,
.wrapper{
width:100%;
height:100%;
}
.content{
width:30%;
height:30%;
position:absolute;
top:50%;
left:50%;
transform:tranlate(-50%,-50%);
}
/*或者*/
.content{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
/*第二種通過(guò)flex布局*/
.wrapper{
width:100%;
height:500px;
display:flex;
flex-flow: row nowrap;
/*align-items 定義子元素交叉軸也就是垂直方向的對(duì)齊方式*/
align-items:center;
/*justify-content 定義子元素水平方向的對(duì)齊方式*/
justify-content:center;
}
.content{
width:100px;
height:100px;
background: red;
}
2. 下面這個(gè)ul，如何點(diǎn)擊每一列的時(shí)候alert其index叔收？
<ul id="test">
<li>這是第一條</li>
<li>這是第二條</li>
<li>這是第三條</li>
<li>這是第四條</li>
</ul>
- 這算是一個(gè)閉包和作用域的的考點(diǎn)吧齿穗，用ES6的聲明很簡(jiǎn)單。直接上答案饺律。
const test = document.querySelector('#test');
const lis = test.querySelectorAll('li')
/*第一種用 let 聲明*/
for(let i = 0; i<lis.length; i++){
lis[i].addEventListener('click',function(e){
console.log(i);
},false)
// ------兩種寫法而已-----
// lis[i].onclick=function() {
// console.log(i);
// }
}
/*第二種窃页，用 var 聲明，采用自執(zhí)行函數(shù)*/
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener(
'click',
(function(num) {
return function() {
console.log(num);
};
})(i),
false
);
}
------課外延伸复濒，點(diǎn)擊某一列脖卖，顯示其內(nèi)容的值？
- 這是一種事件委托巧颈，也叫事件代理畦木，是事件捕獲和事件冒泡的一種運(yùn)用。
舉個(gè)例子砸泛，比如一個(gè)宿舍的同學(xué)同時(shí)快遞到了十籍，一種方法就是他們都傻傻地一個(gè)個(gè)去領(lǐng)取，還有一種方法就是把這件事情委托給宿舍長(zhǎng)唇礁，讓一個(gè)人出去拿好所有快遞勾栗，然后再根據(jù)收件人一一分發(fā)給每個(gè)宿舍同學(xué)；
在這里盏筐，取快遞就是一個(gè)事件围俘，每個(gè)同學(xué)指的是需要響應(yīng)事件的 DOM 元素，而出去統(tǒng)一領(lǐng)取快遞的宿舍長(zhǎng)就是代理的元素，所以真正綁定事件的是這個(gè)元素，按照收件人分發(fā)快遞的過(guò)程就是在事件執(zhí)行中，需要判斷當(dāng)前響應(yīng)的事件應(yīng)該匹配到被代理元素中的哪一個(gè)或者哪幾個(gè)换棚。
- 優(yōu)點(diǎn)：
- 減少內(nèi)存消耗。不用給每一個(gè) li 都綁定一個(gè)函數(shù)。綁定到ul上面奋蔚，執(zhí)行事件的時(shí)候去匹配判斷目標(biāo)元素她混。
- 動(dòng)態(tài)綁定事件。增加或者去除列表項(xiàng)元素泊碑，那么在每一次改變的時(shí)候都需要重新給新增的元素綁定事件坤按，給即將刪去的元素解綁事件；
const test = document.querySelector('#test');
test.addEventListener(
'click',
function(e) {
// 處理兼容性的問(wèn)題
const event = e || window.event;
const target = event.target || event.srcElement;
console.log(target.innerText);
},
false
);
參考事件捕獲馒过，事件冒泡臭脓，事件代理詳細(xì)內(nèi)容
3. 說(shuō)出一下函數(shù)的作用是？空白區(qū)域應(yīng)該填寫說(shuō)明腹忽？
(function(window) {
function fn(str) {
this.str = str;
}
fn.prototype.format = function() {
// var arg = '________';
var arg = arguments;
// return this.str.replace(_______, function(a, b, c, d) {
return this.str.replace(/\{(\d+)\}/g, function(match, b, offset, string) {
console.log(match); // 根據(jù)正則匹配到{}的字符串
console.log(b); // {}中的數(shù)字字符串
// 假如replace()方法的第一個(gè)參數(shù)是一個(gè)RegExp 對(duì)象来累，則代表第n個(gè)括號(hào)匹配的字符串。
// 例如窘奏，用 /\{(\d+)\}/g 這個(gè)來(lái)匹配嘹锁，b 就是匹配的 \d+。
console.log(offset); // 該字字段在字符串中的開始索引位置
console.log(string); // 原始字符串
console.log(arg[b]);
return arg[b] || '';
});
};
window.fn = fn;
})(window);
//use
(function() {
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log(t.format('http://www.alibaba.com', 'Alibaba', 'Welcome'));
})();
- 這個(gè)函數(shù)的作用就是格式化一段代碼着裹，將傳入的參數(shù)替換掉html里面{}中的內(nèi)容领猾。類似于vue中{}的實(shí)現(xiàn)。
replace()函數(shù)中的b為什么會(huì)輸出{}里面的內(nèi)容骇扇。請(qǐng)參考這個(gè)鏈接描述那段里的第二段
4. 寫一個(gè)function,清除字符串前后的空格摔竿。（兼容所有瀏覽器）
// 函數(shù)方法
function strTrim(str) {
return str.replace(/(^\s+)|(\s+$)/g,'')
}
// 重寫trim方法
if(!String.prototype.trim){
String.prototype.trim=function(){
//利用正則匹配去除字符串前后空格
return this.replace(/(^\s+)|(\s+$)/g,"");
}
}
const str = ' Hello，Arthas! http://www.xueyunhao.com '
console.log(str);
console.log(strTrim(str));
console.log(str.trim());
5. 用js實(shí)現(xiàn)隨機(jī)選取10-100之間的10個(gè)數(shù)字少孝，存入一個(gè)數(shù)組继低，并排序。
let newArray = []; // 創(chuàng)建一個(gè)空數(shù)組稍走，用來(lái)存放獲取的數(shù)字
// 封裝一個(gè)獲取10-100隨機(jī)數(shù)的函數(shù)
function getRandomNumber(startNum, endNum) {
const rangeChoice = endNum - startNum + 1; // +1 是為了能夠取到100郁季；
const result = Math.floor(Math.random() * rangeChoice + startNum);
return result;
}
// 循環(huán)10次獲取數(shù)字并填入數(shù)組
for (let i = 0; i < 10; i++) {
newArray.push(getRandomNumber(10, 100));
}
console.log(newArray);
// 將數(shù)組進(jìn)行排序
newArray.sort(function(a, b) {
return a - b;
});
console.log(newArray);
6. 使用js編寫一個(gè)函數(shù)，能夠?qū)魅氲某Ｒ妼?duì)象進(jìn)行clone（深拷貝）
// 第一種方法钱磅，使用JSON.parse（）和JSON.stringify（）對(duì)對(duì)象進(jìn)行深拷貝
const arthas = {
fn: function() {
console.log('hello Arthas');
},
b: { c: 1 },
c: [1, 2, 3],
name: 'Arthas',
nowDate: new Date(),
f: null,
g: undefined,
n:123,
};
function deepClone(obj){
return JSON.parse(JSON.stringify(obj))
}
const xue = deepClone(arthas);
console.log(arthas);
console.log(xue);
// 上述clone的方法會(huì)忽略function和undefined的字段梦裂，對(duì)date類型支持貌似也不友好。而且只能克隆原始對(duì)象自身的值盖淡，不能克隆它繼承的值
// 對(duì)于純數(shù)據(jù)的json對(duì)象的深克隆年柠，可以使用JSON.parse()和JSON.stringify()方法，
// 第二種方法，
const arthas = {
fn: function() {
console.log('hello Arthas');
},
b: { c: 1 },
c: [1, 2, 3],
name: 'Arthas',
nowDate: new Date(),
f: null,
g: undefined,
n:123,
};
function deepClone(obj) {
if (obj === null) {
return null
}
const result = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object') {
result[key] = deepClone(obj[key]); // 如果是對(duì)象冗恨，再次調(diào)用該方法自身
} else {
result[key] = obj[key];
}
}
}
return result;
}
const xue = deepClone(arthas);
console.log(arthas);
console.log(xue);
7. 某種藥方要求非常嚴(yán)格答憔，你每天需要同時(shí)服用A.B兩種藥片各一顆，不能多也不能少掀抹。這種藥非常貴虐拓，你不希望有任何一點(diǎn)浪費(fèi)。一天傲武，你打開藥片A的藥瓶蓉驹，倒出一粒藥片放在手心，然后打開另一個(gè)藥瓶揪利，但是不小心倒出了兩粒藥片√耍現(xiàn)在，你手上有一顆藥片A疟位，兩顆藥片B瞻润，并且你無(wú)法區(qū)別哪個(gè)是A，哪個(gè)是B甜刻。你如何才能嚴(yán)格遵循藥方服用藥片绍撞，并且不能有任何的浪費(fèi)？
- 把現(xiàn)有的三個(gè)藥片各切一半得院，分成兩個(gè)堆楚午。
- 再?gòu)腁藥瓶中拿出一粒切半，分別放入兩堆尿招。
- 這樣今天先吃第一堆矾柜，明天再吃第二堆。
