<!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学习</title>
</head>
<body>
<div id="app">
{{ a }}
</div>
<script>
/**
* async概念
* 解决异步回调函数问题（promise的then使用的是回调函数，而async的await没有使用回调函数，从而真正解决回调函数），同步流程表达异步操作
*/
let num = 1
function promiseUtil() {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('异步任务' + num + '执行成功')
let data = "我是异步任务"+num+"返回的数据xxxx";
num++
resolve(data)
},2000)
})
}
async function asyncUtil () {
console.log('函数开始执行')
let result = await promiseUtil() // 返回一个promise对象可以使用then调用
console.log('异步任务返回数据' + result)
console.log('函数继续执行')
result = await promiseUtil()
console.log('异步函数返回数据' + result)
console.log('函数执行结束')
}
asyncUtil()
/**
* 水平垂直居中的方式
* flex布局
* 绝对定位 + margin负边距
* 绝对定位 + transform
* 绝对定位 + margin:auto
* 设置line-height为元素高度
*/
/**
* do while代码
* do语句至少会执行一次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 回调函数
* 回调函数是可以作为一个参数传递给另外一个函数的函数，并在某些操作完成后执行
* es6解决了回调函数 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()函数详解,需搭配promise一起使用,axios已经封装过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强制类型转换（显式转换，隐式转换）
*/
var a1 = '42'
var b1 = 3 + a1
// 隐式类型转换
var c1 = Number(a1) + 3
// 显式类型转换
/**
* js相等性
* ==严格比较
* ===抽象比较
*/
var s = '43'
var z = 43
s == z // true
s === z // false
/**
* js null and undefined
* undefined 未定义
* null 空值
*/
/**
* js 数据类型
* 基本数据类型 and 引用数据类型
* 基本数据类型 String, Number, Boolean, Null, Undefined, Symbol
* 引用数据类型 Object, Array, Function
*/
/**
* js 事件冒泡
* 解释：嵌套再最深处的元素出发一个事件，然后这个事件顺着嵌套顺序再父元素上出发
* 阻止事件冒泡：event.cancelBubble 或者 event.stopProppa'geation()
*/
/**
* 检查一个数是否为整数
*/
function isint (Int) {
return isInt % 1 === 0
}
/**
* js IIFE 立即执行函数
*/
(function iife(){
console.log('hello,iife')
})()
/**
* es5 and es6 区别
* 箭头函数 jian((a,b) => {})，
* 字符串插值 `hell0 ${name}`,
* 常量const,
* 快作用域变量let,
* 类定义和继承,
* 展开符 var a = {a:1,b:2} var b = {c:3,d:4} var c = {...a,...b},
* promise,
* 模块导出与导入 const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
import myModule from './myModule';
*/
/**
* vue生命周期
* beforeCreate:组件实例刚被创建，组件属性计算之前，如data属性等
* create:组件实例创建完成，属性已绑定，DOM为生成，$el未存在
* beforMount:模板编译/挂载之前
* mounted:模板编译/挂在之后（组件不一定再dom中）
* beforupdate:组件更新之前
* update:组件更新之后
* befordestory:组件销毁前调用
* destory:组件销毁后调用
*
* // 常用生命周期
* beforCreate: data和el未初始化
* create:完成了data初始化el没有
* beforeMount:完成了data和el初始化
* mounted:完成挂在
*/
/**
* v-if and v-show的区别
* v-if:创建和销毁
* v-show:显示与隐藏
*/
/**
* 绑定class的数组用法
* 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
* 数组方法v-bind:class="[class1, class2]"
* 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
*/
/**
* computed 和 watch 的区别
* 计算属性是自动监听依赖值得变化，从而动态返回内容，监听是一个过程，再监听得值变化时，可以出发一个回调，并做一些事情，computed会缓存数据。
* 当监听响应数据变化时需要执行业务逻辑或者异步操作则使用watch
* computed是一个对象是拥有get,set选项
* computed和methods的区别：methods是一个方法，可接收参数，computed不能接收参数，computed可以缓存
* computed可以依赖其他的computed，也可以依赖组件的data
* watch配置
* handler
* deep：是否深度
* immediate：是否立即执行
*/
/**
* 为什么vue组件中的data是函数
* 解释：因为组件复用，再每次使用到组件的时候都能重新初始化data的数据
*/
/**
* keep-alive
* 保留公共的部分当路由变化时只切换相应需要响应切换的部分
*/
/**
* v-model
* 本质上就是语法糖，双向绑定
* 再利用v-model绑定数据后，既绑定了数据，又绑定了一个事件监听，数据变化利用MVVM模式实现view刷新
*/
/**
* 单项数据流
* 出现再组件通讯，父组件通过prop向子组件传递数据，子组件通过$emit向父组件派发一个自定义事件，再子组件中不能改变父组件的数据，
* 通常情况下，未保证数据逻辑清晰，子不能改父的数据，由子组件通过$emit派发事件来改变父组件的数据
*/
/**
* 路由跳转
* 1.<router-link to='home'>
* 2.常用 router.push('/home')
*/
/**
* 双向绑定原理
* 简单理解：数据变化更新视图，视图变化更新数据
*/
/**
* nextTick()
* 再下次DOM更新循环结束之后执行延迟回调，在修改数据之后，立即使用这个函数，获取更新后的DOM
*/
/**
* Render渲染函数
* vue由template创建DOM
* js创建DOM
*/
/**
* solt插槽
* 匿名插槽，具名插槽，作用域插槽
*/
var vm = new Vue({
el: '#app',
data: {
a: 1,
render(h) { //h后边可带参数
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面试题详解
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 一、什么是 Promise promise 是目前 JS 异步编程的主流解决方案，遵循 Promises/A+ 方...
- 本系列文章将整理到我在GitHub上的《Java面试指南》仓库，更多精彩内容请到我的仓库里查看 https://g...
- 今天来聊聊Python常见面试题中面试频率特别高的一个题目：TCP 协议中的三次握手与四次挥手。 涉及到的知识点有...
- （原文链接：http://www.studyshare.cn/blog/details/1178/1 一、开发中到...
