常见却易忽略的知识点

1. 实现页面全屏

data() {
    return {
        fullscreen: false,
    }
}
methods: {
    handleFullScreen() {
        const element = document.documentElement;
        // 如果是全屏，退出
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) { // 兼容Chrome、Safari和Opera
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {  // 兼容Firefox
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {  // 兼容IE/Edge
                document.msExitFullscreen();
            }
        } else { // 否则，进入全屏
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {  // 兼容Chrome、Safari和Opera
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {  // 兼容Firefox
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {  // 兼容IE/Edge
                element.msRequestFullscreen();
            }
        }
    },
}

2. var a=b=1；和 var a=1，b=1；的区别

以上代码可以看出，使用var a=b=1创建变量，b变成了全局变量；相当于 var a=1; b=1

使用var a=1，b=1；创建变量，两者还是局部变量；相当于 var a=1; var b=1

在严格模式下, 变量必须先声明，直接给变量赋值，不会隐式创建全局变量

3. parseInt() 函数; 结合Array.map()

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数,string ------ 要被解析的值。如果参数不是一个字符串，则将其转换为字符串 (使用 ToString抽象操作)。字符串开头的空白符将会被忽略；假如指定 0 或未指定，基数将会根据字符串的值进行推算。注意，推算的结果不会永远是默认值 10！ ;radix ------ 是[2,36]之间的整数，表示被解析字符串的基数,如果超出这个范围，将返回 NaN。
返回值 ：从给定的字符串中解析出的一个整数或者 NaN，当radix 小于 2 或大于 36，或第一个非空格字符不能转换为数字。

以下是MDN上的解析描述：

需要注意的是八进制转换规则

结合Array.map()经常出现的一道面试题

4. console.dir, console.table()

(1) console.dir 当你需要在开发过程中打印dom元素时，使用console.log往往只会打印出整个dom元素，而无法查看该dom元素的内部属性。而使用console.dir则可以查看具体的内部属性

(2) console.table() 将数据以表格的形式展示在控制台

5. 可枚举性

每个对象属性都有一个描述对象（descriptor），使用Object.getOwnPropertyDescriptor获取该属性的描述对象。 下面是descriptor对象的常见属性：

• value：属性的值。默认为undefined。
• writable：布尔值，指示属性是否可写。默认为false。
• enumerable：布尔值，指示属性是否可枚举。默认为false。
• configurable：布尔值，指示属性是否可配置（能否使用delete操作符删除属性或改变属性的特性）。默认为false。

目前，有四个操作会忽略 enumerable 为 false 的属性：

1. for...in：遍历对象自身和继承的可枚举属性

2. Object.keys()：遍历对象自身可枚举属性

3. JSON.stringify()：只串行化对象自身可枚举属性

4. Object.assign()：只拷贝对象自身的可枚举属性

   引入可枚举是为了避免for...in，遍历时获取到内部属性和方法，比如对象的toString方法和数组的 length 属性等。使用for...in循环时，会搭配Object.hasOwn()或者 obj.hasOwnProperty()获取获取自身的属性。建议使用Object.keys() 代替 for...in

6. new String()和 String()、Object.create()和new Object()的区别；扩展运算符（Spread Operator）...和 Object.assign()复制对象

a. new String()和 String()的区别：

    let strObj = new String('Hello'); 
    let string = String('Hello');
    let str = 'Hello'; 
    console.log(str == strObj); // 输出: true 
    console.log(str === strObj); // 输出: false
     console.log(str == string); // 输出: true 
    console.log(string === strObj); // 输出: false

总结： 从以上代码运行结果可知，String()是将其他数据类型转换为字符串的函数，而new String创建了一个字符串对象。

b. Object.create()和new Object()的区别：

1）Object.create(proto, propertiesObject): Object.create()是一个静态方法，它创建一个新对象，并将该对象的原型设置为指定的原型对象。第一个参数 proto是新对象的原型，可以是一个对象或 null。第二个可选参数 propertiesObject是用来定义新对象的属性的对象。

2. new Object(): new Object()是通过调用Object构造函数创建一个新对象的实例。通过这种方式创建的对象是一个常规的空对象。

    const person = { name: "Alice", age: 25, }; 
    const alice = Object.create(person); 
    console.log(alice.name); // 输出: "Alice"
    
    const obj = new Object(); 
    obj.name = "John"; 
    console.log(obj.name); // 输出: "John"

总结： Object.create()创建的对象继承了指定原型对象的属性，而 new Object()创建的对象是一个空对象，没有任何原型。

c. 扩展运算符（Spread Operator）...和 Object.assign()复制对象

    <script>
        const obj = {
           name: 'parentObj',
           age: 40
        }

        const childObj = Object.create(obj, {
           childName: { value: 'childObj', enumerable: false },
           childAge: { value: 20, enumerable: true },
        });

        const obj_1 = { ...childObj}
        const obj_2 = Object.assign({}, childObj)

        console.log('childObj:', childObj);
        console.log('obj_1:', obj_1);
        console.log('obj_2:', obj_2);
    </script>

总结： 扩展运算符 ...和 Object.assign()复制对象时只会复制源对象自身的可枚举属性，并且不会复制原型链上的属性到新对象中。

7. JSON.stringify()

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。 语法：

    JSON.stringify(value[, replacer [, space]])

!!!注意
a. undefined、任意的函数以及symbol值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
b. NaN 和 Infinity 格式的数值及 null 都会被当做 null。

示例：

    JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
    // '[1,"false",false]'

    JSON.stringify({ x: undefined, y: Object, z: Symbol("") });
    // '{}'

    JSON.stringify([undefined, Object, Symbol("")]);
    // '[null,null,null]'

更多内容详见：developer.mozilla.org/zh-CN/docs/...

8. 如何更改 Chorm 浏览器字体大小

谷歌浏览器默认设置字体最小为12px, 因此我们在代码中更改 font-size 小于 12 像素，会发现字体大小没发生变化，如何更改字体大小呢？
【方法一】 设置 -> 外观 -> 自定义字体 -> 最小字号进行调整（不建议此方法）

【方法二】 使用 transform 的 scale属性

eg: 设置字体大小为10px

font-size: 20px;
transform: scale(0.5);

更改前：

更改后：

注意！！！ MDN 规定 transform 的布局受 CSS 框模型控制的所有元素，行内元素设置transform不生效

9. 零宽字符

以下是包含零宽字符的字符串示例：

"Hello\u200BWorld" 这个字符串在 "Hello" 和 "World" 之间插入了一个零宽空格，但在屏幕上不会显示出来，肉眼所见其长度跟不含"零宽字符"的一样，但是其内暗藏玄机。

以下是一些常见的零宽字符：

1.  零宽空格（Zero Width Space）：'·'或 \u200B

    这个字符用于插入一个不可见的空格，通常用于调整文本布局或防止换行。

2.  零宽连字号（Zero Width Joiner）：\u200D

    这个字符用于连接两个相邻的字符，使它们形成一个新的复合字符，常用于支持特定语言或符号之间的连字效果。

3.  零宽非连接符（Zero Width Non-Joiner）：\u200C

    这个字符与零宽连字号相反，用于在两个相邻的字符之间插入一个不可连接的间隔，常用于确保某些字符独立显示。

4.  零宽断行符（Zero Width Breakable Space）：\u2060

    这个字符用于在单词内部的特定位置插入一个可换行的间隔，以允许在此处进行断行。

这些零宽字符可以在特定的文本处理场景中发挥作用，但也需要小心使用，以避免滥用或引起不必要的问题。

10. 位运算符

与运算符(&)可以做清零操作， num&0 => 0; 判断奇偶性, 根据最未位是0还是1来决定，为0就是偶数，为1就是奇数, 使用 if((num & 1) === 0) 来代替 if(num % 2 === 0)