学习前端面试知识

BHDDGT

已于 2024-08-10 09:53:19 修改

阅读量761

点赞数 23

分类专栏：前端学习文章标签：学习前端

于 2024-08-06 22:25:22 首次发布

本文链接：https://blog.csdn.net/BHDDGT/article/details/140920553

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

2024-8-6 打卡第七天学习视频链接

字符串新增方法

str.includes('name')判断这个方法中是否包含这个'name'字符串
str.startWith('1A')和str.endWith('1A') 判断是否以1A开头/结尾
用filter先循环打印出数组的值和对应的索引，indexOf(value,0)表示从索引0开始查找value的位置，有多个以上会返回找到的第一个，如果和当前索引是一样的表示第一次遍历到，结果是true保存，false就去除
比如[2,6,5,6]，遍历到第一个6的时候会返回索引1和当前遍历到的一致，结果是true所以保存，遍历到第二个6的时候返回的结果还是索引1，但是这个时候的指针指向了3，不一致，所以不保存

<script>
let name = 'encode'
let age = 18;
let str = `${name}${age}`
console.log(str);

let str1 = '223344name';
console.log(str1.includes('name')); // true

let a = '1A2B3C';
console.log(a.startsWith('1A'));
console.log(a.endsWith('3C'));

var arr = [1,2,2,3,4,4];
Array.prototype.unique = function() {
    return this.filter((val,index) => {
        return this.indexOf(val,0) === index;
    })
}

console.log(arr.unique());
</script>

es6数组新增哪些方法

Array.from() 将类数组转为数组，对象set,map都是类数组

<script>
var arr = [0,1,2,2,3,4,4];
Array.prototype.unique = function() {
    return Array.from(new Set(this));
}

console.log(arr.unique());
</script>

Array.of() 将一组值转为数组

<script>
console.log(Array.of(1,2,3)); // [1,2,3]
Array.of(3)[3]
console.log(Array.of(3).length); // 1
</script>

Array.fill() 填充数组

<script>
let arr = new Array(5);
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]
let arr1 = new Array(5);
arr1.fill(0,1,3);
console.log(arr1); // [empty, 0, 0, empty × 2]
</script>

Array,find() 返回一个满足条件的元素，和Array,filter()的区别是后者返回所有满足筛选条件的一个结果集，存放在新数组中

let arr = [2,4,6,8]
console.log(arr.find(val => val >= 2)); // 2
console.log(arr.filter(val => val >=2)); // [2, 4, 6, 8]

Array.findIndex() 和Array.find()功能类似，只是返回的是符合条件的元素坐标

let arr = [2,4,6,8]
console.log(arr.findIndex(val => val >= 2)); // 0

Array.entries() 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的 [key, value] 对

<script>
let arr = [2,4,6,8]
let res = arr.entries();
for(let v of res){
    console.log(v); // [0,2] [1,4] [2,6] [3,8]
}
</script>

Array.keys() 方法返回一个新的 Array Iterator，该迭代器包含数组中每个索引的键（即索引本身）

<script>
let arr = [2,4,6,8]
let res = arr.keys();
for(let v of res){
    console.log(v); // 0 1 2 3
}
</script>

Array.values() 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引处的值

<script>
let arr = [2,4,6,8]
let res = arr.values();
for(let v of res){
    console.log(v); // 2 4 6 8
}
</script>

Array.includes() 判断数组中是否包含指定的值

let arr = [2,4,6,8]
console.log(arr.includes(2)) // true

Array.flat() 用于将嵌套的数组“拉平”成一个新数组。这个方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。如果不传递深度，默认深度为 1。如果深度为 Infinity，则无论多少层嵌套，都会展开

<script>
let arr = [1,[2,[3]]];
console.log(arr.flat(Infinity)); // [1, 2, 3]
</script>

// 自定义flat方法
<script>
let arr = [1,[2,[3]]];

function myFlat(arr){
    while(arr.some(val => Array.isArray(val))){
        arr = [].concat(...arr);
    }
    return arr;
}

console.log(myFlat(arr)); // [1, 2, 3]
</script>

flatMap() 使用 arr.flatMap(x => [[x*2]]) 对 arr 进行处理。这里的映射函数 x => [[x*2]] 对 arr 中的每个元素 x 执行以下操作：计算 x 的两倍（x*2）。将结果放在一个新的数组中（[x*2]）。然后将这个新数组再包裹在一个数组中（[[x*2]]）。因此，对于 arr 中的每个元素，映射函数都会返回一个新的数组，这个新数组里又包含了一个元素（即原元素的两倍）

<script>
let arr = [1,2,3];

console.log(arr.flatMap(x => [[x*2]])); // [[2],[4],[6]]
</script>

es6中对对象的扩展

遍历对象的方法
- Object.keys()
- Reflect.ownKeys(obj)
- Object.is() 判断两个值是否相等
- Object.assign 对象的合并，浅拷贝（它在复制对象时不会递归地复制对象内部的值，如果属性值是对象或数组等复合数据类型，那么它只会复制内存地址的引用，而不是对象本身）
- ```
<script>
const target = {a:1}
const sour1 = {b:2}
const sour2 = {c:3}
console.log(Object.assign(target,sour1,sour2)); // {a: 1, b: 2, c: 3}
</script>
```

Generator

异步编程的解决方案，迭代器生成函数，被调用不会立即执行，返回一个迭代器，可以进行异步操作，支持挂起操作
定义格式 function * 函数名(){}
内部有yield定义不同的状态
next执行函数中下一yield

<script>
function * testG(){
    yield 1
    yield 2
}
var g = testG()
console.log(g.next()); // {value:1,done:false}
console.log(g.next()); // {value:2,done:false}
console.log(g.next()); // {value:undefined,done:true}
</script>

微前端中的应用隔离（没接触，先做笔记）

分为主应用和微应用，包括js隔离和css隔离
- css隔离：隔离css污染可以使用cssmodule或者命名空间的方式，添加特定前缀，使用postcss前缀，打包添加特定前缀。微应用之间css隔离 link style打标卸载的时候去标。使用shodowdom
- js隔离：window全局事件 sandbox 沙箱机制。js with window.Procy对象。

ES6模块和Common JS模块的相同点和区别

相同点：
- 对引入对象进行赋值，即改变对象内部属性的值
不同点：
- commonJS运行时加载，ES6编译时输出接口
- commonJS和require都是同步加载模块，ES6 import是异步的
- commonJS对模块的引入是浅拷贝，es6只读不改变其值，指针指向不能变const
- import接口只读，不能修改值