行业知识
2024年前端最新精简ES6知识点(1)，10年阿里开发架构师经验分享
Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
Object.keys()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
-
Object.preventExtensions()；让一个对象变的不可扩展，也就是永远不能再添加新的属性
-
Object.isExtensible()；判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）
-
Object.seal()；封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变
-
Object.isSealed()；判断一个对象是否被密封
-
Object.freeze()；可以冻结一个对象
-
Object.isFrozen()；方法判断一个对象是否被冻结
回到顶部 目录
ES6
新增加的语法
-
局部变量/常量：let/const
-
对象方法简写:const obj = { aa(){} }
// 对象结构赋值
const str = {user1: ‘he’, user2: 20};
const {user1: name, user2: sex} = str;
// 数组结构赋值
const [a, b, c] = [1, 2 ,3];
// 字符串结构赋值
const [a1, b1, c1, d1, e1] = ‘hello’;
// default
function fn1(name = ‘he’, age = 26){}
// rest参数
function fn2(x, …y){
return x * y.length;
}
fn2(1, “hello”, true); // => 2
// …
function fn3(q, w, e, r){
return q + w + e + r;
}
fn3(4, 3, 2, 1) //=>10
- 箭头函数(自动绑定this)：var fn = () => {}
const [name, age] = [‘he’, 20];
console.log(姓名：${name}，今年：${age});
// 姓名：he，今年：20
-
遍历对象：
-
for…in：循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
-
Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
-
Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
-
Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名
-
Reflect.ownKeys(obj)：返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举
-
迭代器 + for…of
-
迭代器有一个next方法，该方法有两个属性：
-
第一次迭代：{value：elem, done: false}
-
最后一次迭代：{value：returnValue, done: true}
-
for…of：遍历迭代对象
const arr = [1,2,3,4,5];
for(value of arr){
console.log(value)
}
// 1,2,3,4,5
function* myGenerator() {
yield ‘hello’;
yield ‘world’;
return ‘Generator’;
}
var g = myGenerator();
g.next(); // { value: ‘hello’, done: false }
class A{
constructor(name){
this.name = name;
}
ace(){
return ${this.name}第一名
}
}
class B extends A{
constructor(name, age){
super(name);
this.age = age;
}
ace(){
return ${super.ace()},今年${this.age}
}
}
const user = new B(‘he’, 20);
console.log(user.ace()) // he第一名,今年20
console.log(user instanceof A) // true
console.log(user instanceof B) // true
- Modules：import * from url
const s = new Set();
s.add(‘hello’).add(‘world’);
console.log(s.size === 2); //true
console.log(s.has(‘hello’)) // true
const ws = new WeakSet();
ws.add({data: 42});
console.log(ws)
const m = new Map();
m.set(‘hello’, 10);
m.set(s, 10);
console.log(m.get(‘hello’)) // 10
console.log(m.get(s)) // 10
const wm = new WeakMap();
wm.set(s, {ece: 10});
console.log(wm.get(s)) // {ece: 10}
- Symbol：值类型，唯一性const s = Symbol('symbol')
function gettime(url){
return new Promise((resolve, reject)=>{
if(!url){
resolve()
}else{
reject()
}
})
}
var p = gettime();
p.then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(err)
})
async function test1(){
return 111;
}
async function test2(){
const res = await test1();
console.log(res);
}
test2();
const target = {};
const handler = {
get(receiver, name){
return hello ${name};
}
};
const p = new Proxy(target, handler)
console.log(p.world === ‘hello world’) // true
回到顶部 目录
新增加的方法：
- String：
-
String.fromCodePoint()：可以识别大于0xFFFF的字符
-
String.raw()：模板字符处理转义字符
-
String.prototype.codePointAt()：32 位的 UTF-16 字符的码点
总结
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
解。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
- String：
- Symbol：值类型，唯一性const s = Symbol('symbol')
- Modules：import * from url
-
- 箭头函数(自动绑定this)：var fn = () => {}
