前端高频面试（1）

/**
 * 实现add   minus功能  原型属性
 * 
 * 例如：5+3-2  结果为6
 */
Number.prototype.add = function (num: number): number {
    return this.valueOf() + num;
}

Number.prototype.minus = function (num: number): number {
    return this.valueOf() - num;
}
//使用
console.log((5).add(3).minus(2));

/********************************************************* */
/**
 * Vue响应原理中Object.defineProperty的缺点
 */
//为什么在Vue3.0采用Proxy，抛弃了Object.defineProperty
//Proxy的优势
//1.Proxy可以直接监听对象而非属性
//2.Proxy可以直接监听数组的变化
//3.Proxy有多达13种拦截方法
//4.Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，
//而Object.defineProperty只能遍历对象属性直接修改
//5.Proxy作为新标准将受到浏览器厂商重点持续的性能优化

/**
 * object.defineProperty是js中用于定义或修改对象属性的方法
 * 使用方法：
 * Object.defineProperty(obj, prop, descriptor)
 * 参数说明：
 * obj: 需要定义属性的对象
 * prop: 需要定义或修改的属性的名称或 Symbol
 * descriptor: 属性描述符
 */
let obj={
    name:'张三',
    age:20
}
Object.defineProperty(obj,'name',{
    writable:false, //是否可修改
    configurable:false, //是否可删除
    enumerable:false, //是否可枚举
    value:'李四'
})
console.log(obj.name); //输出：李四

/**
 * object.defineProperties无法监控到数组下标的变化，导致通过数组下标
 * 添加元素，不能实时响应
 * Object。defineProperties只能劫持对象的属性，从而需要对每个对象
 * ，每个属性进行遍历。如果属性值还是对象，则深度遍历。
 * Proxy可以劫持整个对象，并返回一个新的对象。
 * Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加
 * 的属性。
 */


/********************************************************* */
/**
 * 怎么让一个div水平垂直居中？
 */
<div class='parent'>
    <div class="child">

    </div>
</div>
<style>
// 方法一
 div.parent{
    display: flex;
    justify-content:center;
    align-items:center;
 }
//  方法二
div.parent{
    display: grid;
    place-items: center;
}
div.child{
    justify-self: center;
    align-self: center;
}
// 方法三
div.parent{
    position: relative;
}
div.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

/********************************************************* */
/**
 * Array.from 五个好用的用法用途
 */
// 1.将类数组对象或可遍历对象转换为真正的数组
const arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
const arr = Array.from(arrayLike)
console.log(arr) // ['a', 'b', 'c']

// 2.将字符串转换为数组
const str = 'hello'
const arr = Array.from(str)
console.log(arr) // ['h', 'e', 'l', 'l', 'o']

// 3.将Set结构转换为数组
const set = new Set(['a', 'b', 'c'])
const arr = Array.from(set)
console.log(arr) // ['a', 'b', 'c']

// 4.将Map结构转换为数组
const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const arr = Array.from(map)
console.log(arr) // [['a', 1], ['b', 2], ['c', 3]]

// 5.将伪数组转换为真正的数组
const divs = document.querySelectorAll('div')
const arr = Array.from(divs)
console.log(arr) // [<div>, <div>, <div>]

/********************************************************* */
/**
 * 填充数组
 * 
 * 由 Array.from 返回的 resultA 使用不同空对象实例进行初始化。
 * 之所以发生这种情况是因为每次调用时，mapFunction，即此处的 () => ({})
 *  都会返回一个新的对象。
 * 然后，fill() 方法创建的 resultB 使用相同的空对象实例进行初始化。
 * 不会跳过空项
 */
const length=3;
const resultA = Array.from({length},()=>({}));
const resultB = Array(length).fill({});
console.log(resultA);//[{},{},{}]
console.log(resultB);//[{},{},{}]

resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true

/**
 * 使用array.map怎么样？
 * 
 * map() 方法似乎不正常，创建出来的数组不是预期的 [0, 0, 0]，
 * 而是一个有3个空项的数组。
 * 这是因为 Array(length) 创建了一个有3个空项的数组(也称为稀疏数组)，
 * 但是 map() 方法会跳过空项。
 */
const lenght=3;
const init=0;
const result = Array(length).map(()=>init);
console.log(result);//[undefined,undefined,undefined]

/**
 * 数组去重  Array.from 方法
 * Set 集合会删除重复项。
 */
function unique(arr) {
    return Array.from(new Set(arr))
}
const arr1 = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
const arr2 = Array.from(new Set(arr1));
console.log(arr2); // [1, 2, 3, 4, 5]


/********************************************************* */
/**
 * 获取当前页面的一个系统域名配置
 */
var a=DOMAIN;
console.log('当前域名配置',a.www);

/**
 * Set方法 数据结构的使用
 * 
 * set允许存储唯一的值，每个在Set中只能出现依一次
 */
//创建Set
let mySet = new Set();
//添加元素
mySet.add(1);
mySet.add(2);
mySet.add(1);// 1只会被添加一次，因为Set不能有重复值
//删除元素
mySet.delete(1);
//检查元素是否存在
mySet.has(1);//false
mySet.has(2);//true
//遍历Set元素  可以使用for...of循环遍历Set中的元素
for(let item of mySet){
    console.log(item);
}
//也能使用Array.from()方法将Set结构转换为数组
let myArray = Array.from(mySet);
console.log(myArray);//[2]
//清空Set
mySet.clear();