最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS:
console.log(s1) // Set {}
console.log(s2) // Set { 1, 2, 3, 4 }
`Set`类的属性——获取`Set`类中有几个数据。
const s1 = new Set();
const s2 = new Set([1,2,3,4]);
console.log(s1.size) // 0
console.log(s2.size) // 4
Set类的方法—Set.add(value)——Set.add(value) 添加一个数据,返回Set结构本身
成员的值都是唯一的,没有重复的值,所以在后面添加相同的值到set结构中是无效的
s1.add(‘a’).add(‘b’);
console.log(s1) //Set { ‘a’, ‘b’ }
s2.add(‘c’)
console.log(s2); //Set { 1, 2, 3, 4, ‘c’ }
s2.add(1);
console.log(s2); //已经有相同的值了,所以添加无效还是原来的 Set { 1, 2, 3, 4, ‘c’ }
Set类的方法—Set.delete(value) set.delete(value) 删除指定数据,返回一个布尔值,表示删除是否成功
const s2 = new Set([1,2,3,4]);
var ba1 = s2.delete(1)
var ba2 = s2.delete(‘c’)
console.log(ba1); //true
console.log(ba2); //false
console.log(s2); //Set { 2, 3, 4 }
Set类的方法—Set.has(value)——判断该值是否为set的成员,返回一个布尔值
const s = new Set([1,2,3,4]);
const bs1 = s.has(1);
const bs2 = s.has(‘a’);
console.log(bs1,bs2); //true false
Set类的方法—Set.clear()——清除所有的数据,没有返回值
const s = new Set([1,2,3,4]);
s.clear();
console.log(s); // Set {}
Set的遍历器——keys() 返回键名的遍历器,values() 返回键值的遍历器,entries() 返回键值对的遍历器,forEach() 使用回调函数遍历每个成员
const s = new Set([1,2,3,4]);
console.log(s.keys()); // SetIterator { 1, 2, 3, 4 }
console.log(s.values()); //SetIterator { 1, 2, 3, 4 }
console.log(s.entries()); //SetIterator { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] }
//该方法可以接收三个参数,分别是:键值,健名,set本身
s.forEach(function(value,key,set){
console.log(value+‘lina’);
console.log(set)
})
利用Set为数组去重——直接将要给数组放入到,set`的`构造方法中即可
const arr = [1,2,3,45,2,3,4,13,5,7,1,3,2]
const s = new Set(arr);
console.log(s); // Set { 1, 2, 3, 45, 4, 13, 5, 7 }
console.log(arr); //[ 1, 2, 3, 45, 2, 3, 4, 13, 5, 7, 1, 3, 2 ]
console.log([…s]);//将set转成数组,结果是[ 1, 2, 3, 45, 4, 13, 5, 7 ]
### 三、Map数据结构
Map数据结构概述 字典:是用来存储不重复key的Hash结构,不同于集合(Set)的是,字典使用的是[键,值]的形式来存储数据的
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
创建Map和Map类的属性——获取Map类中有几个数据
const m = new Map([
[‘a’,1],
[‘b’,2]
]);
console.log(m); //Map { ‘a’ => 1, ‘b’ => 2 }
console.log(m.size); //2
Map类的方法—set(key,value) 设置键名key对应的键值为value,然后返回整个Map结构,如果key已经有值,则键值会被更新,否则就生成该键
Map类的方法—get(key)——get方法读取key对应的键值,如果找不到key,返回undefined
const m = new Map([
[‘a’,1],
[‘b’,2]
]);
m.set(‘miaov’,‘ketang’).set(‘xing’,‘huang’);//因为返回的是Map结构本身,所以可以使用调用链的方式
console.log(m);//Map { ‘a’ => 1, ‘b’ => 2, ‘miaov’ => ‘ketang’, ‘xing’ => ‘huang’ }
m.set(‘b’,5);//有相同的key,值会被覆盖
console.log(m); //Map { ‘a’ => 1, ‘b’ => 5, ‘miaov’ => ‘ketang’, ‘xing’ => ‘huang’ }
console.log(m.get(‘b’)); //5
console.log(m.get(‘c’)); //undefined
Map类的方法—delete(key) 删除某个键,删除成功放回true,如果删除失败,返回false
const m = new Map([
[‘a’,1],
[‘b’,2]
]);
console.log(m.delete(‘b’));//true
console.log(m.delete(‘c’));//false
console.log(m);//Map { ‘a’ => 1 }
Map类的方法—has(key) 方法返回一个布尔值,表示某个键是否在当前Map对象之中
Map类的方法—clear() 清楚Map结构中的所有数据,没有返回值
const m = new Map([
[‘a’,1],
[‘b’,2]
]);
console.log(m.has(‘b’));//true
console.log(m.has(‘c’));//false
m.clear();
console.log(m);//Map {}
Map的遍历器 keys() 返回键名的遍历器;values() 返回键值的遍历器;entries() 返回键值对的遍历器;forEach() 使用回调函数遍历每个成员
const m = new Map([
[‘a’,1],
[‘b’,2],
[‘c’,3]
]);
console.log(m.keys());//MapIterator { ‘a’, ‘b’, ‘c’ }
console.log(m.values()); //MapIterator { 1, 2, 3 }
console.log(m.entries()); //MapIterator { [ ‘a’, 1 ], [ ‘b’, 2 ], [ ‘c’, 3 ] }
//该方法可以接收三个参数:值,键,Map本身
m.forEach(function (value, key, Map) {
console.log(value);
console.log(key);
})
Map在使用过程中的一些注意事项一两个NaN本身是不相等的,但在Map结构中,NaN作为键的话,视为相等的(同一个键)
const map = new Map();
map.set(NaN,1);
map.set(NaN,2);
console.log(map); //Map { NaN => 2 }
Map在使用过程中的一些注意事项二 如果Map结构中的key是一个对象的情况下,每个对象都是不同的键,即使是两个空的对象,因为两个对象的地址值不同,以后引用别人的插件,使用对象作为键,就能避免同名碰撞的情况
const map = new Map();
map.set({},‘x’).set({},‘y’);
console.log(map); //Map { {} => ‘x’, {} => ‘y’ }
Map 结构转为数组结构——比较快速的方法是使用扩展运算符(…)。
const m = new Map([
[‘a’,1],
[‘b’,2]
]);
专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容