某公司前端工程师笔试题

1、了解 Promise 吗？Promise 解决的痛点是什么？Promise解决的痛点还有其他方法可以解决吗？

参考文章：https://blog.csdn.net/weixin_43964148/article/details/105879357

• 了解 Promise 吗？

  • Promise是一种异步编程的解决方案。

  • 根据PromiseA+定义，Promise有三种状态，分别是：pending（进行中） fulfilled(操作成功) rejected（操作失败）。

  • promise的状态只能由pending变成fulfiied和rejected，改变后就不再发生变化。如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

  • 优点：有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

  • 缺点：首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

  • 使用：

    var promise = new Promise(function(resolve, reject){
        //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
        //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
        setTimeout(function(){
            resolve("成功!"); //代码正常执行！
        }, 250);
    });
     
    promise.then(function(successMessage){
        //successMessage的值是上面调用resolve(...)方法传入的值.
        //successMessage参数不一定非要是字符串类型，这里只是举个例子
        document.write("Yay! " + successMessage);
    }, function(errorMessage){
        //errorMessage的值是reject(...)方法传入的值.
        //errorMessage参数不一定非要是字符串类型，这里只是举个例子
        document.write("No! " + errorMessage);
    });
    
    // function(errorMessage){} 函数也可以写成catch
    promise.then(function(successMessage){
        //successMessage的值是上面调用resolve(...)方法传入的值.
        //successMessage参数不一定非要是字符串类型，这里只是举个例子
        document.write("Yay! " + successMessage);
    }).catch(function(errorMessage){
        //errorMessage的值是reject(...)方法传入的值.
        //errorMessage参数不一定非要是字符串类型，这里只是举个例子
        document.write("No! " + errorMessage);
    });
    
    // Promise.all 和 Promise.race
    // p1,p2,p3是promise实例，这里不一定要写成数组，也可以写成其他具有 iterator 接口的数据格式，如对象。
    // promise.all 所有请求成功才进入resolve，一个失败就reject
    var p = Promise.all([p1,p2,p3]);
    // promise.race 一个请求成功就进入resolve，所有失败才reject
    var p = Promise.race([p1,p2,p3]);
    
    // Promise.resolve和Promise.reject
    // 有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用。
    // 下面代码将 jQuery 生成 deferred 对象，转为一个新的 ES6 的 Promise 对象。
    var jsPromise = Promise.resolve($.ajax('/whatever.json'));

• Promise 解决的痛点是什么？

  • 解决了异步操作回调嵌套的问题（又称为回调地狱）。

    对于异步操作，如果存在一个操作的输出是另外一个操作的输入，就需要回调嵌套，如此一来，代码臃肿，可读性差，难以维护。

  • 回调调用时机不可控。

    当使用setTimeout等异步的方式去做异步操作时，回调时机不可控，有可能早了或者晚了。

  • 回调不调用。

    回调要被调用，Promise 就一定要决议，那么如果 Promise 永远没有决议呢？

    即使这样，Promise 也提供了解决方案，一种称为竞态的机制：

    function timeoutPromise(delay) {  
    	return new Promise((resolve, reject) => {
            setTimeout(() => {
              reject("Timeout!");
            }, delay);
    	});
    }
    
    Promise.race([fun(), timeoutPromise(60 * 1000)]).then(() => {
        // fun()及时完成
      },  (err) => {
        // fun()被拒绝，或者超时
        // 通过err来查看是哪种情况
      }
    );

    通过以上模式，我们就可以保证fun()的调用，永远会有一个输出信号，防止永久挂起。

  • 调用次数过少或过多。

    回调被调用的正确次数应该是 1，调用次数过少就就是未调用，上面已经解释过其解决方案；调用次数过多也很好处理：

    Promise 只能被决议一次，即使你试图多次调用 resolve 或者 reject，Promise 也只会接收第一次决议结果，而忽略后续所有调用。Promise 决议完成后，就会把 then 中注册人的回调加入事件队列等待执行，所以，then 中注册的回调也只会被调用一次。

  • 吞掉可能出现的错误或者异常。

    当调用 Promise 时，如果你直接调用了 reject，那么这个 Promise 就会直接拒绝。其实不只是调用 reject，如果你在代码执行中，某个时间点上出现了一个 JavaScript 错误，比如 TypeError 或者 ReferenceError，那么这个错误也会被捕捉，并且会使这个 Promise 直接拒绝。

    这一点很重要，其有效地防止了一个方法出错时可能引起同步响应，而成功时却是异步响应的差异化结果。

    上面的第一点外的问题又被称为“信任问题”。

• Promise解决的痛点还有其他方法可以解决吗？

  Promise 解决的痛点还有其他方法可以解决，比如setTimeout、事件监听、回调函数、Generator函数，async/await

  • setTimeout：缺点不精确，只是确保在一定时间后加入到任务队列，并不保证立马执行。只有执行引擎栈中的代码执行完毕，主线程才会去读取任务队列

  • 事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生

  • Generator函数

  • async/await

• 老旧浏览器没有Promise全局对象增么办?

  引入es6-promise-polyfill

• 怎么让一个函数无论promise对象成功和失败都能被调用？

  PS: 主流浏览器都支持 Promise.catch()和 Promise.finally()

  可以扩展一个 Promise.finally()方法。

  Promise.prototype.finally = function (callback) {
     var p=this.constructor;
     return this.then(
         //只要是promise对象就可以调用then方法
         value => p.resolve(callback()).then(() => value),
         reason => p.resolve(callback()).then(() => {throw reason})
     );
  }

• Promise进度通知

  class TrackablePromise extends Promise {
    constructor(executor) {
      const notifyHandlers = [];
      super((resolve, reject) => {
        return executor(resolve, reject, (status) => {
          notifyHandlers.map((handler) => handler(status));
        });
      });
      this.notifyHandlers = notifyHandlers;
    }
    notify(notifyHandler) {
      this.notifyHandlers.push(notifyHandler);
      return this;
    }
  }
  
  let p = new TrackablePromise((resolve, reject, notify) => {
    function countdown(x) {
      if (x > 0) {
        notify(`${20 * x}% remaining`);
        setTimeout(() => countdown(x - 1), 1000);
      } else {
        resolve();
      }
    }
    countdown(5);
  });
  
  p.notify((x) => setTimeout(console.log, 0, "progress:", x));
  p.then(() => setTimeout(console.log, 0, "completed"));

• 红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promise实现）

  function red() {
      console.log('red');
  }
  function green() {
      console.log('green');
  }
  function yellow() {
      console.log('yellow');
  }
  
  var light = function (timmer, cb) {
      return new Promise(function (resolve, reject) {
          setTimeout(function () {
              cb();
              resolve();
          }, timmer);
      });
  };
  
  var step = function () {
      Promise.resolve().then(function () {
          return light(3000, red);
      }).then(function () {
          return light(2000, green);
      }).then(function () {
          return light(1000, yellow);
      }).then(function () {
          step();
      });
  }
  
  step();

• 实现 mergePromise 函数，把传进去的数组按顺序先后执行，并且把返回的数据先后放到数组 data 中。

  const timeout = ms => new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve();
      }, ms);
  });
  
  const ajax1 = () => timeout(2000).then(() => {
      console.log('1');
      return 1;
  });
  
  const ajax2 = () => timeout(1000).then(() => {
      console.log('2');
      return 2;
  });
  
  const ajax3 = () => timeout(2000).then(() => {
      console.log('3');
      return 3;
  });
  
  const mergePromise = ajaxArray => {
      // 在这里实现你的代码
  	
  };
  
  mergePromise([ajax1, ajax2, ajax3]).then(data => {
      console.log('done');
      console.log(data); // data 为 [1, 2, 3]
  });
  
  // 要求分别输出
  // 1
  // 2
  // 3
  // done
  // [1, 2, 3]

  代码实现见此：

  const mergePromise = ajaxArray => {
      // 保存数组中的函数执行后的结果
      var data = [];
  
      // Promise.resolve方法调用时不带参数，直接返回一个resolved状态的 Promise 对象。
      var sequence = Promise.resolve();
  
      ajaxArray.forEach(function (item) {
          // 第一次的 then 方法用来执行数组中的每个函数，
          // 第二次的 then 方法接受数组中的函数执行后返回的结果，
          // 并把结果添加到 data 中，然后把 data 返回。
          // 这里对 sequence 的重新赋值，其实是相当于延长了 Promise 链
          sequence = sequence.then(item).then(function (res) {
              data.push(res);
              return data;
          });
      })
  
      // 遍历结束后，返回一个 Promise，也就是 sequence， 他的 [[PromiseValue]] 值就是 data，
      // 而 data（保存数组中的函数执行后的结果） 也会作为参数，传入下次调用的 then 方法中。
      return sequence;
  };

• 手写Promise

  见：https://mp.weixin.qq.com/s/C-U93BmK0U_iw3sqG0g70g

  这里推荐看看 angularjs 的 function qFactory

• 如何判断promise的状态

  const PROMISE_STATE = {
    PENDING: 'pending',
    FULFILLED: 'fulfilled',
    REJECTED: 'rejected'
  }
  
  function decidePromiseState(promise) {
    const t = {name: 'foo'};
    return Promise.race([t, promise])
    .then(v => {
      console.log('resolved:', v)
      return (v === t) ? PROMISE_STATE.PENDING : PROMISE_STATE.FULFILLED
    })
    .catch(() => PROMISE_STATE.REJECTED)
  }
  
  let a = Promise.resolve(1);
  let b = Promise.reject(2);
  let c = new Promise(() => {});
  
  decidePromiseState(a).then(state => console.log(state)); // fulfilled
  decidePromiseState(b).then(state => console.log(state)); // rejected
  decidePromiseState(c).then(state => console.log(state)); // pending

2、var、let、const的区别？

• 使用var声明的变量，其作用域为该语句所在的函数内（局部变量），且存在变量提升现象；

• let和const都是块级作用域，必须先声明，后使用。

• 使用const声明的是常量，简单类型数据不可以修改，复合类型的数据内的数据可以修改（不变的是引用）。

• const声明的时候必须赋值。

3、请用js去除字符串全部空格、头尾空格

// 去除所有空格
function trimAll(str){
   return str.replace(/\s+/g, '');
}

// 去除头尾空格
function trim(str){
    // 方法1：String对象trim方法
    return str.trim()
    // 方法2：正则替换(如果这里延伸要把每一行的首尾空格都删除掉,)
    return str.replace(/^\s+|\s+$/g,'');
}

// 多行字符每一行的首尾空格删除(m：多行匹配 g：全局匹配)
function trimMore(str){
    return str.replace(/^\s+|\s+$/mg,'');
}

4、如何理解闭包？请用js写出一个闭包

参考：深入浅出图解作用域链和闭包

闭包是指有权访问另外一个函数作用域中的局部变量的函数。简而言之，声明在一个函数中的函数，叫做闭包函数。

• 闭包的特点：

  • 让外部访问函数内部变量成为可能

  • 局部变量会常驻在内存中

  • 可以避免使用全局变量，防止全局变量污染

  • 会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

5、http状态代码及其含义

• 1xx: 指示信息-表示请求已接收，继续处理

• 2xx：成功-表示请求已被成功接收

• 3xx：重定向-要完成请求必须进行更进一步的操作

• 4xx：客户端错误-请求有语法错误或请求无法实现

• 5xx：服务器错误-服务器未能实现合法的请求

常见的状态码：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

200 OK：表示请求成功
206 Partial Content：表示客户发送了一个带有Range头的GET请求，服务器完成了它
301 Moved Permanently：表示该URL已经永久重定向；
302 Moved Temporarily：表示该URL需要临时重定向；
304 Not Modified：表示该资源没有修改，客户端可以使用本地缓存的版本；
400 Bad Request：表示客户端发送了一个错误的请求，例如参数无效；
401 Unauthorized：表示客户端因为身份未验证而不允许访问该URL；
403 Forbidden：表示服务器因为权限问题拒绝了客户端的请求；
404 Not Found: 表示客户端请求了一个不存在的资源；
500 Internal Server Error：表示服务器处理时内部出错，例如因为无法连接数据库；
503 Server Unavailable：表示服务器此刻暂时无法处理请求。服务器临时过载或宕机，一段时间可能恢复正常
502 Bad Gateway：作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应
504 Gateway Time-out：作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应

6、undefined和null有什么区别？

详情可以参考：http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

这里直接回答：

JavaScript的最初版本是这样区分的：null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

Number(undefined)
// NaN

5 + undefined
// NaN

但是，上面这样的区分，在实践中很快就被证明不可行。目前，null和undefined基本是同义的，只有一些细微的差别。

null表示”没有对象”，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
	Object.getPrototypeOf(Object.prototype)
	// null

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

扩展： null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

7、请写出Js有哪几种创建对象的方式

• 显式创建

  var obj = {name: 'ion'};
  var obj = new Object({name: 'ion'});

• 构造函数

  var M = function(){this.name = 'ion'}
  var obj = new M();

• Object.create

  var obj1 = {name: 'ion'};
  // 该方式创建的obj2继承了obj1的原型
  var obj2 = Object.create(obj)

8、Set、Map和Array的异同、用法

• array：数组对象 ，是使用单独的变量名来存储一系列的值。

  //创建数组三种方式
  var arr=new Array(); 
  arr[0]="1";       
  arr[1]="2";
  arr[2]="3";
  
  var arr=new Array("1","2","3");
  
  var arr=["1","2","3"];

• Set： ES6 提供了新的数据结构。

  它类似于数组，但是成员的值都是唯一的，没有重复的值。

  Set本身是一个构造函数，用来生成 Set 数据结构。

  Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

  // size属性： 返回Set实例的成员总数。
  // add(value)： 添加某个值，返回 Set 结构本身。
  let set = new Set();
  set.add("a").add("b").add("a");
  set.size // 2
  
  // delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  set.delete("a");
  set.size // 1
  
  // has(value)：返回一个布尔值，表示该值是否为Set的成员。
  set.has("a") // false
  set.has("b") // true
  
  // clear()：清除所有成员，没有返回值。
  set.clear();
  set.size // 0

• Map： ES6 提供了新的数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

  Map 结构提供了“值—值”的对应。

  Map 结构实例的属性和操作方法：

  // size 属性： 返回 Map 结构的成员总数。
  // set(key, value)： set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。返回的是当前的Map对象
  let map = new Map();
  map.set('a', 6)  

9、谈谈Event Loop，宏任务和微任务

首先引入一个相关题：下面代码输出是？

console.log('start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

new Promise((resolve) => {
  console.log('promise')
  resolve()
})
  .then(() => {
    console.log('then1')
  })
  .then(() => {
    console.log('then2')
  })

console.log('end')

// start  promise end then1 then2 setTimeout

• Event Loop

  

  JS引擎常驻于内存中，等待宿主将JS代码或函数传递给它。也就是等待宿主环境分配宏观任务，反复等待 - 执行即为事件循环。

  Event Loop中，每一次循环称为tick，每一次tick的任务如下：

  • 执行栈选择最先进入队列的宏任务（一般都是script），执行其同步代码直至结束；
  • 检查是否存在微任务，有则会执行至微任务队列为空；
  • 如果宿主为浏览器，可能会渲染页面；
  • 开始下一轮tick，执行宏任务中的异步代码（setTimeout等回调）。

  运行在宿主环境中的 JavaScript 引擎针对单线程，提供了一种机制来更高效地处理多个任务，这个机制称为事件循环。具体执行过程分为以下 4 步：

  • 先执行主线程中的任务
  • 当主线程空闲时，再从任务队列中读取任务，继续执行。
  • 即使主线程阻塞了，任务队列还是会继续接受任务
  • 主线程不断重复步骤2

• 宏任务和微任务

  ES6 规范中，microtask 称为 jobs，macrotask 称为 task
  宏任务是由宿主发起的，而微任务由JavaScript自身发起。

  在ES3以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。

  所以，总结一下，两者区别为：

  	宏任务（macrotask）	微任务（microtask）
  谁发起的	宿主（Node、浏览器）	JS引擎
  具体事件	1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js）	1. Promise 2. MutaionObserver 3. Object.observe（已废弃；Proxy 对象替代） 4. process.nextTick（Node.js）
  谁先运行	后运行	先运行
  会触发新一轮Tick吗	会	不会

10、深拷贝，浅拷贝的区别是什么？利用递归手写深拷贝方法

见 《中国联通前端工程师笔试题》 一文

11、apply()、call()、bind()之间的异同

见 《中国联通前端工程师笔试题》 一文

12、数组的常用方法：改变原数组与不改变原数组各有哪些方法

# 向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。
Array.push()

# 删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。
Array.pop()

# 向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。
Array.unshift()

# 删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。
Array.shift()

# 合并两个或多个数组，生成一个新的数组。原数组不变。
Array.concat(arr1,arr2...)

# 将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
Array.join()

# 将数组倒序。原数组改变。
Array.reverse()

# 对数组元素进行排序。按照字符串UniCode码排序，原数组改变。
Array.sort()
# ① 从小到大(a-b)
# ② 从大到小(b-a)

# 截取从start到end之间的数据组成数组返回。（注意，该方法顾前不顾后且可以给负值，start和end可以省略）
Array.slice(start,end)

# 删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2...数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。
Array.splice(index,howmany,arr1,arr2...)

# 原数组的每一项执行函数后，返回一个新的数组。原数组不变。（需要return）
Array.map(function(item,index,array){return item * 2})

# 用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。(仅做遍历，无法给item重新赋值)
Array.forEach(function(item,index,array){})

# 过滤数组中，符合条件的元素并返回一个新的数组。
Array.filter(function(item,index,array){})

# reduce方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
Array.reduce(function(result,item, index, array){})

# 对数组中的每一项进行判断，若都符合则返回true，否则返回false。
Array.every(function(item,index,array){})

# 对数组中的每一项进行判断，若都不符合则返回false，否则返回true。
Array.some(function(item,index,array){})

下面扩展下字符串的常用方法:

2.1. 1. charAt()
str.charAt(n)
＝> 返回字符串的第 n 个字符，如果不在 0~str.length-1之间，则返回一个空字符串。

var str = "javascript";
str.charAt(2); //'v'
str.charAt(12); //''
2.2. 2. indexOf()
indexOf(substr[,start])
＝> 返回 substr 在字符串 str 中首次出现的位置,从 start 位置开始查找，如果不存在，则返回 -1。 start可以是任意整数，默认值为 0。如果 start < 0 则查找整个字符串（如同传进了 0）。如果 start >= str.length，则该方法返回 -1，除非被查找的字符串是一个空字符串，此时返回 str.length.

var str = "javascript";
str.indexOf('s');   // 1
str.indexOf('s',6); // -1
str.indexOf('',11);  // 10
str.indexOf('',8);   // 8
2.3. 3. lastIndexOf()
lastIndexOf(substr[,start])
= > 返回 substr 在字符串 str 中最后出现的位置,从 start 位置 向前开始查找，如果不存在，则返回 -1。

'lastindex'.lastIndexOf('a'); // 1
2.4. 4. substring()
str.substring(start[, end])
= > 返回从 start 到 end（不包括）之间的字符，start、end均为 非负整数。若结束参数(end)省略，则表示从start位置一直截取到最后。

var str = 'abcdefg';
str.substring(1, 4); //"bcd"
str.substring(1);  // "bcdefg"
str.substring(-1); //"abcdefg"   传入负值时会视为0
2.5. 5. slice()
str.slice(start[,end])
= > 返回从 start 到 end （不包括）之间的字符，可传负值

var str = 'this is awesome';
str.slice(4, -1);  //" is awesom"
2.6. 6. substr()
str.slice(start[,end])
= > 返回 str 中从指定位置开始到指定长度的子字符串，start可为负值

var str = "Just give me a reason";
str.substr(5, 10);  // "give me a "
str.substr(-4, 2);  // "as"
2.7. 7. replace()
str.replace(regexp|substr, newSubStr|function)
= > 替换 str 的子字符串

var str = "do you love me";
str.replace('love','hate');  // "do you hate me"
2.8. 8. search()
str.search(regexp)
= > 查找 str 与一个正则表达式是否匹配。如果匹配成功，则返回正则表达式在字符串中首次匹配项的索引；否则，返回 -1。如果参数传入的是一个非正则表达式对象，则会使用 new RegExp(obj) 隐式地将其转换为正则表达式对象

var str = 'I love JavaScript!';
str.search(/java/); // -1
str.search(/Java/); // 7
str.search(/java/i); // 7
str.search('Java'); // 7
2.9. 9. match()
str.match(regexp)
= > 返回一个包含匹配结果的数组，如果没有匹配项，则返回 null。如果参数传入的是一个非正则表达式对象，则会使用 new RegExp(obj) 隐式地将其转换为正则表达式对象

var str = 'Javascript java';
str.match(/Java/); // ["Java"]
str.match(/Java/gi); // ["java", "Java"]
str.match(/ab/g); // null、
2.10. 10. split()
str.split([separator][, limit])
= >返回一个数组，分隔符 separator 可以是一个字符串或正则表达式

var str = "Hello?World!";
str.split(); // ["Hello?World!"]
str.split(''); // ["H", "e", "l", "l", "o", "?", "W", "o", "r", "l", "d", "!"]
str.split('?'); // ["Hello", "World!"]
str.split('',5); // ["H", "e", "l", "l", "o"]
2.11. 11. trim()
str.trim()
= > 去除 str 开头和结尾处的空白字符，返回 str 的一个副本，不影响字符串本身的值

var str = '   abc  ';
str.trim();       // 'abc'
console.log(str); // '   abc  '
2.12. 12. toLowerCase()
str.toLowerCase()
= > 将 str 转换为小写，并返回 str 的一个副本，不影响字符串本身的值

var str = 'JavaScript';
str.toLowerCase(); // 'javascript'
console.log(str);  // 'JavaScript'
2.13. 13. toUpperCase()
str.toUpperCase()
= > 将 str 转换为大写，并返回 str 的一个副本，不影响字符串本身的值

var str = 'JavaScript';
str.toUpperCase(); // 'JAVASCRIPT'
console.log(str);  // 'JavaScript'

# 转自：https://www.cnblogs.com/passkey/p/10508599.html

13、写出下面一段程序的输出结果，并分析出原因

new Promise(resolve => {
    console.log(1);
    setTimeout(() => console.log(2), 0);
    Promise.resolve().then(() => console.log(3));
    resolve();
}).then(() => console.log(4))
console.log(5)

1 5 3 4 undefined 2

undefined 可以不用答出来，但是可以写出undefined的话更能体现其对Event Loop的理解

14、请说出 == 和 === 的区别

• 如果两个值类型相同，进行三个等号(===)的比较；

• 如果两个值类型不同，进行类型转换再比较：

• null == undefined

15、你对网络协议理解程度如何？

16、PC端的优化

可以从 Google 核心 Web 指标（Core Web Vitals）入手优化，https://www.pipipi.net/24241.html/amp

17、跨域的解决

18、对公司和工作有什么想要了解的？

• 工作职责和工作内容：了解工作职责和工作内容，看是否符合自己的职业规划和兴趣（清楚自己的职责有利于更好的协调工作）
• 工作评价和晋升机制：了解公司的绩效评定标准和晋升机制，以便更好的规划自己的职业发展（凡事都需要准备好路线以及清晰的目标）
• 工作时间和福利待遇：了解工作时间、假期安排、福利制度可更好地平衡工作与生活（生活需要工作提供物质基础，工作需要生活增添乐趣和意义）
• 企业文化和战略规划：事先从公司官网了解后再提问

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/51a5d3ae.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！