# 前端 JS 基础面试技巧

前端 JS 基础面试技巧 – JS 基础知识下

JS 三座大山：原型原型链 、作用域闭包 、异步和单线程 。

知识点：

3-1 异步和单线程

3-2 日期和 math

• 日期
• Math
• 数组 API
• 对象 API

# 3-1 异步和单线程

异步和单线程

题目

知识点

解答

# 题目

• 同步和异步的区别是什么？分别举一个同步和异步的例子
• 一个关于 setTimeout 的笔试题
• 前端使用异步的场景有哪些

# 知识点

• 什么是异步（对比同步）
• 前端使用异步的场景
• 异步个单线程

# 什么是异步

异步（Asynchronous）

一般而言，操作分为发出调用和得到结果两步。发出调用后一直等待，直到拿到结果（这段时间不能做任何事）为 同步 ；发出调用后不等待，继续执行下一个任务，就是 异步任务 。

参考

console.log(100);
setTimeout(function () {
  console.log(200);
}, 1000);
console.log(300);
/*
    100
    300
    200
*/

# 何时需要异步？

• 在可能发生等待的情况

• 等待过程中不能像 alert 一样阻塞程序运行

• 因此，所有的 “等待情况” 都需要异步

# 前端使用异步的场景

• 定时任务：setTimeout，setInterval

• 网络请求：ajax 请求，动态 <img> 加载

• 事件绑定

# 单线程

Javascript 是单线程的 参考

JS 的单线程是指一个浏览器进程中只有一个 JS 的执行线程，同一时刻内只会有一段代码在执行

在某个特定的时刻只有特定的代码能够被执行，并 阻塞 其它的代码。

console.log(100);
setTimeout(function () {
  console.log(200);
});
console.log(300);

上面代码执行过程：

# 重点总结

• 异步和同步的区别
• 异步和单线程的关系
• 异步在前端的引用场景

# 解答

• 同步和异步的区别是什么？分别举一个同步和异步的例子

  • 同步 是 阻塞模式 ，异步 是 非阻塞模式 。

    同步 就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会 一直等待下去 ，知道收到返回信息才继续执行下去；

    异步 是指进程 不需要一直等下去 ，而是 继续执行下面的操作，不管其他进程的状态。当有消息返回式系统会通知进程进行处理，这样可以提高执行的效率。

  • alert 是 同步， setTimeout 是 异步

• 一个关于 setTimeout 的笔试题

console.log(1);
setTimeout(function () {
  console.log(2);
}, 0);
console.log(3);

setTimeout(function () {
  console.log(4);
}, 1000);
console.log(5);
/* 
	1
    3
    5
    2
    4
*/

• 前端使用异步的场景有哪些
  • 定时任务：setTimeout，setInterval
  • 网络请求：ajax 请求，动态 <img> 加载
  • 事件绑定

# 3-2 日期和 math

题目

知识点

解答

# 题目

• 获取 2017 -06 -10 格式的日期
• 获取 随机数，要求是长度一致 的字符串格式
• 写一个 能遍历对象 和数组 的通用 forEach 函数

# 知识点

• 日期
• Math
• 数组 API
• 对象 API

# 日期

日期对象用于处理日期和时间。

JavaScript Date 对象 API

# Math

Math 是一个内置对象， 它具有数学常数和函数的属性和方法。不是一个函数对象。

Math Api

描述：与其它全局对象不同的是， Math 不是一个构造器. Math 的所有属性和方法都是静态的。你用到的常数 pi 可以用 Math.PI 表示，用 x 作参数 Math.sin (x) 调用 sin 函数. JavaScript 中的常数，是以全精度的实数定义的.

Math.random () 在前端的作用：随时改变，清除缓存。

# 数组 API

参考

详情可以参考我的博客：JavaScript 数组那些事

面试官最常问的几个 ：

• forEach 遍历所有元素
• every 判断所有元素是否都符合条件
• some 判断是否有至少一个元素符合条件
• sort 排序
• map 对元素重新组装，生成新数组
• filter 过滤符合条件的元素

# 对象 API

Object.prototype API

Object.prototype 表示对象的原型对象
Object.prototype 属性的属性特征

参考

# 解答

• 获取 2019-07-17 格式的日期

function formatDate(dt) {
  if (!dt) {
    dt = new Date();
  }
  var dt = new Date();
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var data = dt.getDate();
  if (month < 10) {
    month = "0" + month;
  }
  if (data < 10) {
    data = "0" + data;
  }
  return year + "-" + month + "-" + data;
}

var dt = new Date();
console.log(formatDate(dt));

//  2019-07-17

• 获取 随机数，要求是长度一致 的字符串格式

var random = Math.random();
random = random + "0000000000";
random = random.slice(0, 10);
console.log(random);

• 写一个 能遍历对象 和数组 的通用 forEach 函数

// 写一个 能遍历对象 和数组 的通用 forEach 函数
function forEach(obj, fn) {
  if (obj instanceof Array) {
    obj.forEach(function (item, index) {
      fn(item, index);
    });
  } else {
    for (let key in obj) {
      fn(key, obj[key]);
    }
  }
}

// 使用  forEach 函数
var arr = [1, 2, 3];
var obj = { x: 100, y: 200 };

forEach(arr, function (index, item) {
  console.log(index + "---" + item);
});

forEach(obj, function (key, value) {
  console.log(key, value);
});

/*
	2---1
    3---2
    x 100
    y 200
*/