前端基础面试题·第三篇——JavaScript（其四）

---

highlight: atom-one-dark

1.JSON.stringify

JSON.stringify() 方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串，如果指定了一个 replacer 函数，则可以替换值。

语法：

    JSON.stringify(value, replacer, space)

参数

1. value： 要转换的值。
2. replacer： 替换值，可以是一个函数或者数组。（这个参数可以是一个函数，在转化时被序列化的值的每一个属性都会经过该函数的处理。如果是一个数组，这个数组就是被序列化的值的属性集合，只会序列化包含在这个数组中的属性名，这个值默认为null,代表需要转化对象的所有属性）
3. space： 指定缩进，如果是一个数字，那么在序列化时每一级缩进都会以该数字表示的空格数来换行，最多不超过10。如果是一个字符串，那么每一级缩进都会使用该字符串作为换行符。如果这个参数为null或者未提供，则没有空格插入到结果字符串中。（这个参数默认为null）

序列化的过程

1. 如果对象存在一个名为toJSON的函数，并且能通过调用该函数获得一个有效的值，那么序列化过程就会使用该函数的返回值。
2. 基本数据类型的的包装对象会被转换为基本数据类型
3. 函数、正则表达式、undefined会被忽略，NaN和Infinity也会被转换为null。
4. 所有的Symbol属性都会被完全忽略。
5. 对象上的不可枚举属性也会被直接忽略
6. 遇到对象内部循环引用，即对象内部的属性或者深层属性应用外部对象，会抛出错误。
7. ES2020中引入的BigInt类型的无法被序列化，会抛出错误。

2.Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。Set 对象类似于数组，但是成员的值都是唯一的，没有重复的值。

创建Set对象：

    let mySet = new Set();

添加值：

    mySet.add(1);
    mySet.add("some text");
    let obj = {a: 1, b: 2};
    mySet.add(obj);

删除值：

    mySet.delete(1);

判断值是否存在：

    mySet.has(1);

清空Set对象：

    mySet.clear();

遍历Set对象：

    for (let item of mySet) {
        console.log(item);
    }

Set 与 WeakSet 的区别：

• Set 对象是 ES6 新增的数据结构，WeakSet 对象是 ES6 中新增的引用类型。
• Set 对象是集合，WeakSet 对象是弱集合。
• Set 对象的成员是唯一的，WeakSet 对象的成员是对象。
• Set 对象是可遍历的，WeakSet 对象是不可遍历的。

3.Map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（包括对象）都可以作为一个键或一个值。

创建Map对象：

    let myMap = new Map();

添加键值对：

    myMap.set('name', '张三');
    myMap.set('age', 18);
    myMap.set('gender', '男');

获取值：

    myMap.get('name');

判断键是否存在：

    myMap.has('name');

删除键值对：

    myMap.delete('name');

清空Map对象：

    myMap.clear();

遍历Map对象：

    for (let [key, value] of myMap) {
        console.log(key, value);
    }

4. 展开运算符与rest

展开运算符：
展开运算符是三个点（…）。它可以将一个数组展开，然后把剩余的元素放入一个新的数组中。

rest参数：
Rest为解决传⼊的参数数量不⼀定；不会为每个变量给⼀个单独的名称，参数对象包含所有参数传递给函数；

• arguments不是真正的数组，rest参数是真实的数组。
• 剩余参数只包含那些没有对应形参的实参，arguments包含传给函数的所有实参。

5.Proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。
创建Proxy对象：

    let myProxy = new Proxy(target, handler);
    

target： 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler： 一个对象，其属性是当执行一个操作时定义代理的行为的函数。

// handler:
    {
        get: () {
            // 代理对象的属性被读取时的操作
        },
        set:() {
            // 代理对象的谁属性被设置时的操作
        },
        has: () {
            // 代理对象的属性被in操作符检查时的操作
        },
        deleteProperty: () {
            // 代理对象的属性被delete操作时的操作
        },
        apply: () {
            // 代理对象作为函数被调用时的操作(这个捕捉器只有当代理对象是函数时才会被调用)
        },
        construct: () {
            // 代理对象作为构造函数被使用new关键字创建实例时的操作
        },
        getPrototypeOf: () {
            // 代理对象的原型对象被读取时的操作
        },
        setPrototypeOf: () {
            // 代理对象的原型对象被设置时的操作
        },
        isExtensible: () {
            // 代理对象被使用Object.isExtensible检查时的操作
        },
        preventExtensions: () {
            // 代理对象被使用Object.preventExtensions检查时的操作
        },
        defineProperty: () {
            // 代理对象被使用Object.defineProperty检查时的操作
        }

    }

6.Ajax,Fetch,Axios

Ajax： 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

    const ajax = XMLHttpRequest();
    ajax.open("GET",url,true)
    ajax.send();
    ajax.onreadystatuschange = function () {
        if (ajax.readystatus === 4 && ajax.status === 200) {
            console.log(ajax.responseText);
        }
    }
    ajax.onerror = function () {}
    ajax.ontimeout = function () {}

Fetch： Fetch API 提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

    fetch(url,{
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then(res => {
        const data = res.json();
        console.log(data);
    })

Axios： 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

    axios({
        url: url,
        method: 'GET',
        params: {
            // 请求参数
        },
        data: {}
        // 请求体参数
        headers: {}
        // 请求头
    }).then(res => {
        console.log(res);
    })