<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.min.js"></script>
<title>ES6學(xué)習(xí)</title>
</head>
<body>
<div id="app">
{{ a }}
</div>
<script>
/**
* async概念
* 解決異步回調(diào)函數(shù)問題（promise的then使用的是回調(diào)函數(shù)，而async的await沒有使用回調(diào)函數(shù)壹堰，從而真正解決回調(diào)函數(shù)）燃观，同步流程表達(dá)異步操作
*/
let num = 1
function promiseUtil() {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('異步任務(wù)' + num + '執(zhí)行成功')
let data = "我是異步任務(wù)"+num+"返回的數(shù)據(jù)xxxx";
num++
resolve(data)
},2000)
})
}
async function asyncUtil () {
console.log('函數(shù)開始執(zhí)行')
let result = await promiseUtil() // 返回一個promise對象可以使用then調(diào)用
console.log('異步任務(wù)返回?cái)?shù)據(jù)' + result)
console.log('函數(shù)繼續(xù)執(zhí)行')
result = await promiseUtil()
console.log('異步函數(shù)返回?cái)?shù)據(jù)' + result)
console.log('函數(shù)執(zhí)行結(jié)束')
}
asyncUtil()
/**
* 水平垂直居中的方式
* flex布局
* 絕對定位 + margin負(fù)邊距
* 絕對定位 + transform
* 絕對定位 + margin:auto
* 設(shè)置line-height為元素高度
*/
/**
* do while代碼
* do語句至少會執(zhí)行一次do代碼塊
*/
if (0) {
console.log('0是否為真')
} else {
console.log('0不為真')
}
let a = 0
do {
console.log(a)
a++
// break
} while (a < 5);
/**
* js閉包
*/
function fn() {
let num = 0
return function(){
let a = 0
console.log(++a)
console.log(++num)
}
}
let fn1 = fn()
fn1()
fn1()
/**
* es6 class
*/
class person{
constructor(x,y) {
this.x = x,
this.y = y
}
print(type) {
switch(type) {
case 'num':
console.log('x + y:' + (this.x + this.y))
break
case 'add':
console.log('x - y:' + (this.x - this.y))
break
}
}
}
class studes extends person{
constructor(x,y,z){
super(x,y)
this.z = z
}
add() {
console.log('x + y + z:' + (this.x + this.y + this.z))
}
}
let num_ = new person(3,2)
num_.print('num')
num_.print('add')
let stu = new studes(4,3,2)
console.log('stu' + stu.x + stu.y)
// class會繼承父類的方法
stu.add()
/**
* javascript 回調(diào)函數(shù)
* 回調(diào)函數(shù)是可以作為一個參數(shù)傳遞給另外一個函數(shù)的函數(shù)湿镀，并在某些操作完成后執(zhí)行
* es6解決了回調(diào)函數(shù) promise and async await
*/
function huidiao (arr,hui) {
console.log('this arr', arr)
arr.push('sdd')
hui()
}
let huidiaoarr = [1,2,3,4]
huidiao(huidiaoarr,function(){
console.log('arr',huidiaoarr)
})
/**
* .then()函數(shù)詳解,需搭配promise一起使用,axios已經(jīng)封裝過promise
*/
var thenhan = (() => {
return new Promise((resolve,reject) => {
let a = 1
if (a) {
resolve('asd')
} else {
reject('error')
}
})
})
thenhan().then((res) => {
console.log(res)
},(err) => {
console.log(err)
})
/**
* js強(qiáng)制類型轉(zhuǎn)換（顯式轉(zhuǎn)換扭弧，隱式轉(zhuǎn)換）
*/
var a1 = '42'
var b1 = 3 + a1
// 隱式類型轉(zhuǎn)換
var c1 = Number(a1) + 3
// 顯式類型轉(zhuǎn)換
/**
* js相等性
* ==嚴(yán)格比較
* ===抽象比較
*/
var s = '43'
var z = 43
s == z // true
s === z // false
/**
* js null and undefined
* undefined 未定義
* null 空值
*/
/**
* js 數(shù)據(jù)類型
* 基本數(shù)據(jù)類型 and 引用數(shù)據(jù)類型
* 基本數(shù)據(jù)類型 String, Number, Boolean, Null, Undefined, Symbol
* 引用數(shù)據(jù)類型 Object, Array, Function
*/
/**
* js 事件冒泡
* 解釋：嵌套再最深處的元素出發(fā)一個事件，然后這個事件順著嵌套順序再父元素上出發(fā)
* 阻止事件冒泡：event.cancelBubble 或者 event.stopProppa'geation()
*/
/**
* 檢查一個數(shù)是否為整數(shù)
*/
function isint (Int) {
return isInt % 1 === 0
}
/**
* js IIFE 立即執(zhí)行函數(shù)
*/
(function iife(){
console.log('hello,iife')
})()
/**
* es5 and es6 區(qū)別
* 箭頭函數(shù) jian((a,b) => {})，
* 字符串插值 `hell0 ${name}`,
* 常量const,
* 快作用域變量let,
* 類定義和繼承,
* 展開符 var a = {a:1,b:2} var b = {c:3,d:4} var c = {...a,...b},
* promise,
* 模塊導(dǎo)出與導(dǎo)入 const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
import myModule from './myModule';
*/
/**
* vue生命周期
* beforeCreate:組件實(shí)例剛被創(chuàng)建，組件屬性計(jì)算之前细溅，如data屬性等
* create:組件實(shí)例創(chuàng)建完成，屬性已綁定坟岔，DOM為生成，$el未存在
* beforMount:模板編譯/掛載之前
* mounted:模板編譯/掛在之后（組件不一定再dom中）
* beforupdate:組件更新之前
* update:組件更新之后
* befordestory:組件銷毀前調(diào)用
* destory:組件銷毀后調(diào)用
*
* // 常用生命周期
* beforCreate: data和el未初始化
* create:完成了data初始化el沒有
* beforeMount:完成了data和el初始化
* mounted:完成掛在
*/
/**
* v-if and v-show的區(qū)別
* v-if:創(chuàng)建和銷毀
* v-show:顯示與隱藏
*/
/**
* 綁定class的數(shù)組用法
* 對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
* 數(shù)組方法v-bind:class="[class1, class2]"
* 行內(nèi) v-bind:style="{color: color, fontSize: fontSize+'px' }"
*/
/**
* computed 和 watch 的區(qū)別
* 計(jì)算屬性是自動監(jiān)聽依賴值得變化摔桦，從而動態(tài)返回內(nèi)容社付，監(jiān)聽是一個過程，再監(jiān)聽得值變化時邻耕，可以出發(fā)一個回調(diào)鸥咖，并做一些事情，computed會緩存數(shù)據(jù)兄世。
* 當(dāng)監(jiān)聽響應(yīng)數(shù)據(jù)變化時需要執(zhí)行業(yè)務(wù)邏輯或者異步操作則使用watch
* computed是一個對象是擁有g(shù)et,set選項(xiàng)
* computed和methods的區(qū)別：methods是一個方法啼辣，可接收參數(shù)，computed不能接收參數(shù)御滩，computed可以緩存
* computed可以依賴其他的computed鸥拧，也可以依賴組件的data
* watch配置
* handler
* deep：是否深度
* immediate：是否立即執(zhí)行
*/
/**
* 為什么vue組件中的data是函數(shù)
* 解釋：因?yàn)榻M件復(fù)用，再每次使用到組件的時候都能重新初始化data的數(shù)據(jù)
*/
/**
* keep-alive
* 保留公共的部分當(dāng)路由變化時只切換相應(yīng)需要響應(yīng)切換的部分
*/
/**
* v-model
* 本質(zhì)上就是語法糖削解，雙向綁定
* 再利用v-model綁定數(shù)據(jù)后富弦，既綁定了數(shù)據(jù)，又綁定了一個事件監(jiān)聽氛驮，數(shù)據(jù)變化利用MVVM模式實(shí)現(xiàn)view刷新
*/
/**
* 單項(xiàng)數(shù)據(jù)流
* 出現(xiàn)再組件通訊腕柜，父組件通過prop向子組件傳遞數(shù)據(jù)，子組件通過$emit向父組件派發(fā)一個自定義事件矫废，再子組件中不能改變父組件的數(shù)據(jù)盏缤，
* 通常情況下，未保證數(shù)據(jù)邏輯清晰蓖扑，子不能改父的數(shù)據(jù)唉铜，由子組件通過$emit派發(fā)事件來改變父組件的數(shù)據(jù)
*/
/**
* 路由跳轉(zhuǎn)
* 1.<router-link to='home'>
* 2.常用 router.push('/home')
*/
/**
* 雙向綁定原理
* 簡單理解：數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)
*/
/**
* nextTick()
* 再下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)律杠，在修改數(shù)據(jù)之后打毛，立即使用這個函數(shù)，獲取更新后的DOM
*/
/**
* Render渲染函數(shù)
* vue由template創(chuàng)建DOM
* js創(chuàng)建DOM
*/
/**
* solt插槽
* 匿名插槽俩功，具名插槽幻枉，作用域插槽
*/
var vm = new Vue({
el: '#app',
data: {
a: 1,
render(h) { //h后邊可帶參數(shù)
return h('div',{
props:{
value:params.row.checkBox
},
style: {
},
on:{
'on-change':(e)=>{
}
}
})
}
},
computed: {
aDouble() {
return this.a * 2
},
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
return this.a - v
}
}
},
watch: {
a:{
handler(val,newval) {
console.log(val)
console.log(this.a * 3)
},
deep: false
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeDestroy() {
},
destroyed() {
},
methods: {
add(){
this.a += 1
}
},
})
</script>
</body>
</html>
常見js面試題詳解
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門贡这，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人厂榛，你說我怎么就攤上這事盖矫。” “怎么了击奶？”我有些...
- 文/不壞的土叔 我叫張陵辈双，是天一觀的道長。 經(jīng)常有香客問我柜砾，道長湃望，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任痰驱，我火速辦了婚禮证芭，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘担映。我一直安慰自己檩帐，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布另萤。 她就那樣靜靜地躺著湃密，像睡著了一般。 火紅的嫁衣襯著肌膚如雪四敞。 梳的紋絲不亂的頭發(fā)上泛源，一...
- 文/蒼蘭香墨 我猛地睜開眼解滓，長吁一口氣：“原來是場噩夢啊……” “哼赃磨！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起洼裤，我...
- 序言：老撾萬榮一對情侶失蹤邻辉，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體值骇，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡莹菱，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了吱瘩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片道伟。...
- 正文 年R本政府宣布娜汁，位于F島的核電站嫂易，受9級特大地震影響兄朋，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜怜械，卻給世界環(huán)境...
- 文/蒙蒙 一颅和、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧缕允，春花似錦峡扩、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至驾霜，卻和暖如春案训，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背粪糙。 一陣腳步聲響...
- 正文 我出身青樓城舞，卻偏偏與公主長得像，于是被迫代替她去往敵國和親寞酿。 傳聞我的和親對象是個殘疾皇子家夺，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 一、什么是 Promise promise 是目前 JS 異步編程的主流解決方案伐弹，遵循 Promises/A+ 方...
- 本系列文章將整理到我在GitHub上的《Java面試指南》倉庫秦踪，更多精彩內(nèi)容請到我的倉庫里查看 https://g...
- 今天來聊聊Python常見面試題中面試頻率特別高的一個題目：TCP 協(xié)議中的三次握手與四次揮手。 涉及到的知識點(diǎn)有...
- （原文鏈接：http://www.studyshare.cn/blog/details/1178/1 一、開發(fā)中到...
- 表情是什么椅邓，我認(rèn)為表情就是表現(xiàn)出來的情緒柠逞。表情可以傳達(dá)很多信息。高興了當(dāng)然就笑了景馁，難過就哭了板壮。兩者是相互影響密不可...
