- js中數(shù)據(jù)類型有哪些？
答：Number(數(shù)字類型)嬉挡、String(字符串類型)、Boolean(布爾類型)汇恤、Null(空對(duì)象)庞钢、undefined、Object
- 以下結(jié)果是什么
var str01='123abc';
alert(typeof str01++)
alert(str01)
答：number,NaN因谎。那出現(xiàn)這兩個(gè)的原因是什么呢基括？在執(zhí)行typeof str01++的時(shí)候，這個(gè)++運(yùn)算符會(huì)偷偷的將我們的str01轉(zhuǎn)成number類型财岔。這是因?yàn)樵谶@個(gè)過(guò)程中++運(yùn)算符內(nèi)部會(huì)隱式的調(diào)用Number()進(jìn)行類型轉(zhuǎn)換风皿。這個(gè)過(guò)程我們是看不見(jiàn)的河爹。所以把這一類稱之為隱式類型轉(zhuǎn)換。除了++運(yùn)算符之外還有--桐款，- +(加號(hào)比較特殊咸这，也可以轉(zhuǎn)字符類型) * /這些運(yùn)算符。那還有> < == !==這些運(yùn)算符和isNaN()會(huì)隱式的轉(zhuǎn)換成Boolean類型魔眨。還有一種是顯示類型轉(zhuǎn)換媳维，常見(jiàn)的就是Number(),String(),Boolean(),parseInt()這些方法。
第二個(gè)NaN是為什么呢遏暴？因?yàn)閟tr01這個(gè)字符串既包含了數(shù)字也有字母侄刽。在執(zhí)行++操作的時(shí)候因?yàn)樽帜傅挠绊懡Y(jié)果會(huì)是非數(shù)字，js中NaN代表非數(shù)字拓挥，非常特殊唠梨。他和任何東西都不等，包括他自己侥啤。如果把是str01=‘123’,那么其結(jié)果就是先轉(zhuǎn)換成數(shù)字類型123当叭，在自增一，結(jié)果是數(shù)字類型的 124盖灸。
- 以下輸出的結(jié)果是什么蚁鳖？
var a=10;
function test(){
console.log(a);
var a=20;
console.log(a);
}
test()
答：第一個(gè)console（a）的結(jié)果是undefined;第二個(gè)console（a）是20。這是因?yàn)関ar關(guān)鍵字聲明的變量會(huì)有聲明提升現(xiàn)象赁炎。它會(huì)將聲明提升到當(dāng)前作用域最頂端醉箕。在本題中也就是提升到test函數(shù)作用域的最頂端。相當(dāng)于下面的樣子徙垫。
var a=10;
function test(){
var a;//聲明提升至當(dāng)前作用域最頂端
console.log(a);//undefined
a=20;//變量賦值操作
console.log(a)//20
}
test()
alert(function(){})的結(jié)果是讥裤？
答：function說(shuō)一說(shuō)px，em姻报，rem的區(qū)別己英？
答：px（像素）
px單位的名稱為像素，它是一個(gè)固定大小的單元吴旋，像素的計(jì)算是針對(duì)（電腦/手機(jī)）屏幕的损肛，一個(gè)像素（1px）就是（電腦/手機(jī)）屏幕上的一個(gè)點(diǎn)，即屏幕分辨率的最小分割荣瑟。由于它是固定大小的單位治拿，單獨(dú)用它來(lái)設(shè)計(jì)的網(wǎng)頁(yè)，如果適應(yīng)大屏幕（電腦）笆焰，在小屏幕（手機(jī)）上就會(huì)很不友好劫谅，做不到自適應(yīng)的效果。
em（相對(duì)長(zhǎng)度單位）
em是相對(duì)長(zhǎng)度單位，它是用來(lái)設(shè)置文本的字體尺寸的同波，它是相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸鳄梅；一般瀏覽器默認(rèn)1em=16px，通過(guò)設(shè)置font-size大小來(lái)代表未檩。em是相對(duì)于父級(jí)元素的單位戴尸，會(huì)隨父級(jí)元素的屬性（font-size或其它屬性）變化而變化。
rem（css3新增的相對(duì)長(zhǎng)度單位）
rem是css3新增的一個(gè)相對(duì)長(zhǎng)度單位冤狡，它的出現(xiàn)是為了解決em的缺點(diǎn)孙蒙，em可以說(shuō)是相對(duì)于父級(jí)元素的字體大小，當(dāng)父級(jí)元素字體大小改變時(shí)悲雳，又得重新計(jì)算挎峦。rem出現(xiàn)就可以解決這樣的問(wèn)題，rem只相對(duì)于根目錄合瓢，即HTML元素坦胶。所以只要在html標(biāo)簽上設(shè)置字體大小，文檔中的字體大小都會(huì)以此為參照標(biāo)準(zhǔn)晴楔，一般用于自適應(yīng)布局顿苇。
rem是相對(duì)于根目錄（HTML元素）的，所有它會(huì)隨HTML元素的屬性（font-size）變化而變化.
6.如何讓一個(gè)不確定寬高的元素在水平垂直方向居中税弃。至少說(shuō)出三種方式
答：通過(guò)定位和transform屬性來(lái)實(shí)現(xiàn)纪岁。看代碼
第一種方法：
HTML
<div class="method01">
<div class="children">方法1：通過(guò)定位和transform來(lái)實(shí)現(xiàn)元素的水平垂直居中</div>
</div>
CSS
<style>
.method01{
width:100%;
height:400px;
background:blue;
position:relative;
}
.children{
position:absolute;
top:50%;
left:50%;
background:red;
transform:translate(-50%,-50%);
}
</style
第二種方法：通過(guò)flex彈性布局,給元素父級(jí)元素添加display:flex屬性
HTML
<div class="method02">
<div class="children">水平垂直居中方法2:通過(guò)flex布局來(lái)實(shí)現(xiàn)</div>
</div>
CSS
<style>
.method02{
width:100%;
height:400px;
background:blue;
display:flex;
align-items:center;
justify-content:center;
}
.children{
background:red;
}
</style>
第三種：設(shè)置table屬性
HTML
<div class="method03">
<div class="children">元素垂直水平居中方式三,將父元素設(shè)置為table则果，子元素設(shè)置為table-cell幔翰，利用table屬性</div>
</div>
CSS
<style>
.method03{
display:table;
width:100%;
height:400px;
background:blue;
}
.children{
display:table-cell;
vertical-align:middle;
text-align:center;
background:red;
}
</style>
7.說(shuō)一說(shuō)this的使用：
- 構(gòu)造函數(shù)中使用∥髯常看代碼
// 如果函數(shù)作為構(gòu)造函數(shù)用遗增，那么其中的this就代表它即將new出來(lái)的對(duì)象
function Person(){
this.name='張三';
this.age=28;
console.log(this);//person{name: "張三", age: 28}
}
var f1=new Person();
console.log(f1.name);//'張三'
console.log(f1.age);//28
// 如果直接調(diào)用Person函數(shù)，this是window
- 用call或者apply調(diào)用,看代碼
// 當(dāng)一個(gè)函數(shù)被call或是apply調(diào)用時(shí)款青，this的值就取傳入的對(duì)象的值
var obj={
a:10
};
var func=function(){
console.log(this);//Object {a: 10}
console.log(this.a);//10
}
func.call(obj);
- 最常見(jiàn)的普通函數(shù)的調(diào)用贡定。看代碼
// 在全局環(huán)境下可都，this永遠(yuǎn)是window
console.log(this===window);//true
// 普通函數(shù)在調(diào)用時(shí)，其中的this也都是window
var a=10;
function test(){
console.log(this);//window
console.log(this.a);//10
}
test();//相當(dāng)于 window.test()
- cookies蚓耽，sessionStorage 和 localStorage 的區(qū)別.
答：cookies==>
- cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù) -
一般是經(jīng)過(guò)加密的 - cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶渠牲，每次都會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。
- sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器步悠，僅在本地保存
- 大小只有4kb签杈。可設(shè)置有效時(shí)間。
sessionStorage==> - sessionStorage:數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除答姥。會(huì)話級(jí)別铣除。
localStorage==> - 持久存儲(chǔ)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)鹦付。大小在5M左右尚粘。
- 除了ajax你還了解其他實(shí)現(xiàn)前后端通信技術(shù)嗎？
答：Websockets敲长，F(xiàn)etch郎嫁。
10.vue中的父子組件是怎么通信的。
答：見(jiàn)代碼
父組件
<template>
<div class="parent">
我是父組件
<!--父組件監(jiān)聽(tīng)子組件觸發(fā)的say方法祈噪，調(diào)用自己的parentSay方法-->
<!--通過(guò):msg將父組件的數(shù)據(jù)傳遞給子組件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
// 引入子組件
components:{
children: Children
},
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 參數(shù)就是子組件傳遞出來(lái)的數(shù)據(jù)
parentSay(msg){
console.log(msg) // hello, parent
}
},
}
</script>
子組件
<template>
<div class="hello">
<div class="children" @click="say">
我是子組件
<div>
父組件對(duì)我說(shuō)：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
//父組件通過(guò)props屬性傳遞進(jìn)來(lái)的數(shù)據(jù)
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子組件通過(guò)emit方法觸發(fā)父組件中定義好的函數(shù)泽铛，從而將子組件中的數(shù)據(jù)傳遞給父組件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>
兄弟組件之間可以使用vuex或者編寫(xiě)一個(gè)中間件。
11.vue中數(shù)據(jù)綁定原理辑鲤。
答：vue中采用了數(shù)據(jù)劫持和發(fā)布者-訂閱者模式盔腔。通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter月褥，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者弛随，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。就必須要實(shí)現(xiàn)以下幾點(diǎn)：
1吓坚、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer撵幽，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)，如有變動(dòng)可拿到最新值并通知訂閱者
2礁击、實(shí)現(xiàn)一個(gè)指令解析器Compile盐杂，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)哆窿，以及綁定相應(yīng)的更新函數(shù)
3链烈、實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁挚躯，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知强衡，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖
4码荔、mvvm入口函數(shù)漩勤，整合以上三者
一共分四步, 每一步都有大堆解釋和一大堆的代碼, 然而我真的只是一個(gè)名副其實(shí)的理工科生, 看到了文中的發(fā)布者-訂閱者模式, 于是乎我去網(wǎng)上各種百度, 個(gè)人理解就是getter函數(shù)里面執(zhí)行的任務(wù)就是watcher訂閱者, 而setter函數(shù)執(zhí)行的任務(wù)就是發(fā)布者; 相信很多人看過(guò)了這個(gè)也是一知半解, 下面我來(lái)解釋一波:
ECMAScript中有兩種屬性: 數(shù)據(jù)屬性和訪問(wèn)器屬性, 數(shù)據(jù)屬性一般用于存儲(chǔ)數(shù)據(jù)數(shù)值, 訪問(wèn)器屬性對(duì)應(yīng)的是set/get操作, 不能直接存儲(chǔ)數(shù)據(jù)值, 每種屬性下面又都含有四個(gè)特性.下面介紹一下:
數(shù)據(jù)屬性
1.[[Configurable]]: 表示能否通過(guò)delete將屬性刪除，能否把屬性修改為訪問(wèn)器屬性, 默認(rèn)為false缩搅。當(dāng)把屬性Configurable設(shè)置為false后越败，該屬性不能通過(guò)delete刪除，并且也無(wú)法再將該屬性的Configurable設(shè)置回true
2.[[Enumerable]]: 表示屬性可否被枚舉(即是否可以通過(guò)for in循環(huán)返回)硼瓣，默認(rèn)false
3.[[Writable]]: 表示屬性是否可寫(xiě)(即是否可以修改屬性的值)究飞，默認(rèn)false
4.[[Value]]: 該屬性的數(shù)據(jù)值, 默認(rèn)是undefined
訪問(wèn)器屬性
1.[[Configurable]]: 表示能否通過(guò)delete將屬性刪除，能否把屬性修改為數(shù)據(jù)屬性, 默認(rèn)為false。當(dāng)把屬性Configurable設(shè)置為false后亿傅，該屬性不能通過(guò)delete刪除媒峡，并且也無(wú)法再將該屬性的Configurable設(shè)置回true
2.[[Enumerable]]: 表示屬性可否被枚舉(即是否可以通過(guò)for in循環(huán)返回)，默認(rèn)false
3.[[Get]]: 讀取屬性時(shí)調(diào)用的函數(shù), 默認(rèn)為undefined
4.[[Set]]: 寫(xiě)入屬性時(shí)調(diào)用的函數(shù), 默認(rèn)是undefined
在修改屬性的特性或者定義訪問(wèn)器屬性的時(shí)候, 需要借助ECMAScript 5中的一個(gè)方法: Object.defineProperty(), 這個(gè)方法接收三個(gè)參數(shù): 屬性所在對(duì)象, 屬性的名字, 描述符對(duì)象; 為對(duì)象定義多個(gè)屬性的話, 就用函數(shù)的復(fù)數(shù)寫(xiě)法:Object.defineProperties();
那么通過(guò)這個(gè)ES5的方法就可以直接很簡(jiǎn)單粗暴的說(shuō)明雙向綁定的原理:
<input type="text" id="inp" />
<div id="box"></div>
<script>
let obj = {};
let oInp = document.getElementById('inp');
let oBox = document.getElementById('box');
Object.defineProperty(obj, 'name', {
configurable: true,
enumerable: true,
get: function() {
console.log(111)
return val;
},
set: function(newVal) {
oInp.value = newVal;
oBox.innerHTML = newVal;
}
});
oInp.addEventListener('input', function(e) {
obj.name = e.target.value;
});
obj.name = '蘇日儷格';
那么實(shí)現(xiàn)數(shù)據(jù)雙向綁定的核心就是利用為每一個(gè)屬性都創(chuàng)建了訂閱者的實(shí)例對(duì)象, 以便觀察, getter函數(shù)里面返回一個(gè)value值,在setter函數(shù)中寫(xiě)入修改后的值并調(diào)用update方法更新視圖的數(shù)據(jù)值, Configurable和Enumerable這兩個(gè)特性描述符默認(rèn)是true, 因此不用寫(xiě)
function defineReactive (obj, key, val) {
var dep = new Dep(); //這是一個(gè)構(gòu)造函數(shù) 其原型是為屬性添加訂閱者
Object.defineProperty(obj, key, {
get: function() {
if(Dep.target) {
dep.addSub(Dep.target); //添加訂閱者到Dep實(shí)例對(duì)象
}
return val; // 返回監(jiān)聽(tīng)到的value值
},
set: function (newVal) {
if(newVal === val) return;
val = newVal; // 寫(xiě)入新的value值
dep.notify(); // 作為發(fā)布者發(fā)出通知 然后dep會(huì)迭代調(diào)用各自的update方法來(lái)更新視圖
}
});
}
function observe(obj, vm) {
Object.keys(obj).forEach(function(key) {
defineReactive(vm, key, obj[key]);
});
}
轉(zhuǎn)載于蘇日儷格鏈接：http://www.reibang.com/p/23180880d3aa
簡(jiǎn)化版vue雙向綁定demo地址葵擎。https://gitee.com/zhangxiaoniu007/vue_learning_notes
