2020面经-JS部分(二）类型，this,promise,apply,深拷贝

1、列举三种强制类型转换和两种隐式类型转换

JavaScript是一门弱类型语言，在JavaScript中声明变量不需指定类型， 对变量赋值也没有类型检查，同时JavaScript允许隐式类型转换。

强制类型转换
通过String()，toString()，Number()，parseInt()，parseFloat()，Boolean()等函数强制转换

Boolean(0) // => false - Boolean 
Boolean(new object()) // => true - Boolean 
Number(undefined) // => NaN - Number
Number(null) // => 0  - Number
String(null) // => “null” - String
5.toString() // => ‘5’ - String
parseInt('5') // => 5 - Number

隐式类型转换
1、数学运算符+、-、*、/、%

  let a = '5';
  let b = 'a';
  let c = 5;
  console.log(a%5); // => 0 - Number
  console.log(a/5); // => 1 - Number
  console.log(a*5); // => 25 - Number
  console.log(a-5); // => 0 - Number
  console.log(a+'5'); // => '55' - String
  console.log(b/5); // => NaN - Number
  console.log(c+5); // => 10 - Number
  console.log(c+true); // => 6 - Number

需要注意的是+号在进行隐式转换的时候，如果在任何一边有字符串的话，会当做拼接字符串来处理，而如果是布尔值的话：true == 1;false == 0;
2、布尔操作符==
在使用布尔操作符==的时候，会对等号两边的数据进行类型转换对比
undefined等于null
字符串和数字比较时，字符串转数字
数字为布尔比较时，布尔转数字
字符串和布尔比较时，两者转数字
3、判断语句if、while
在使用判断语句的时候，括号内的表达式会被转换布尔值

  var obj = {}; 
  if(obj){ 
      while(obj); 
  } 

调用浏览器环境的方法，如：alert 会将数据转换为String

---

2、this的指向问题和作用域

var let

var声明的是全局变量，存在变量提升，let声明的变量只在它所在的代码块有效。
下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
     
  a[i] = function () {
     
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
     
  a[i] = function () {
     
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
     
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
不存在变量提升
var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。
暂时性死区
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
     
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
     
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

typeof undeclared_variable // "undefined"

上面代码中，undeclared_variable是一个不存在的变量名，结果返回“undefined”。所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。

现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。
不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。
块级作用域
ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。
另外，还有一个需要注意的地方。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

// IIFE 写法
(function () {
     
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
     
  let tmp = ...;
  ...
}

const

const的作用域与let命令相同：只在声明所在的块级作用域内有效。
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
本质
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
`foo.prop = 123;

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

普通函数和箭头函数的this

函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的，ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行环境内设置this的值）。
一、在全局环境中

在全局执行环境中（在任何函数体外部），this都是指向全局对象。在浏览器中，window对象即是全局对象：
二、在函数环境中

在函数内容，this指向取决于函数调用的方式：

因为下面的代码不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象。

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window
//在Node中：

f1() === global;   

然而，在严格模式下，this将保持他进入执行环境时的值，所以下面的this将会默认为undefined。

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

所以，在严格模式下，如果 this 没有被执行环境（execution context）定义，那它将保持为 undefined。

在第二个例子中，this的确应该是undefined，因为f2是被直接调用的，而不是作为对象的属性或方法调用的（如 window.f2()）。有一些浏览器最初在支持严格模式时没有正确实现这个功能，于是它们错误地返回了window对象。
如果要想把 this 的值从一个环境传到另一个，就要用 call 或者apply 方法。
call

// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {
     a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
     
  return this.a;  // this的值取决于函数的调用方式
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'

当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象。

function add(c, d) {
     
  return this.a + this.b + c + d;
}

var o = {
     a: 1, b: 3};

// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一个参数也是作为‘this’使用的对象
// 第二个参数是一个数组，数组里的元素用作函数调用中的参数
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

使用 call 和 apply 函数的时候要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。因此，如果传递的值是一个原始值比如 7 或 ‘foo’，那么就会使用相关构造函数将它转换为对象，所以原始值 7 会被转换为对象，像 new Number(7) 这样，而字符串 ‘foo’ 转化成 new String(‘foo’) 这样，例如：

tips:
每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的类型。

function bar() {
     
  console.log(Object.prototype.toString.call(this));
}

//原始值 7 被隐式转换为对象
bar.call(7); // [object Number]
bar.call('foo'); // [object String]

bind方法
ECMAScript 5 引入了 Function.prototype.bind()。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
     
  return this.a;
}

var g = f.bind({
     a:"azerty"});
console.log(g()); // azerty

var h = g.bind({
     a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {
     a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

二者的区别在哪里呢

箭头函数

在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中，它将被设置为全局对象：

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

注意：如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（thisArg）应该设置为null。

// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

无论如何，foo 的 this 被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的this被设置为封闭的词法环境的。

// 创建一个含有bar方法的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数创建的，
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
     
  bar: function() {
     
    var x = (() => this);
    return x;
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true

在上面的例子中，一个赋值给了 obj.bar的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因此，在 A 调用时，函数B的this被永久设置为obj.bar（函数A）的this。当返回的函数（函数B）被调用时，它this始终是最初设置的。在上面的代码示例中，函数B的this被设置为函数A的this，即obj，所以即使被调用的方式通常将其设置为 undefined 或全局对象（或者如前面示例中的其他全局执行环境中的方法），它的 this 也仍然是 obj 。
作为对象的方法
当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。

下面的例子中，当 o.f()被调用时，函数内的this将绑定到o对象。

var o = {
     
  prop: 37,
  f: function() {
     
    return this.prop;
  }
};

console.log(o.f()); // 37

请注意，这样的行为，根本不受函数定义方式或位置的影响。在前面的例子中，我们在定义对象o的同时，将函数内联定义为成员 f 。但是，我们也可以先定义函数，然后再将其附属到o.f。这样做会导致相同的行为：

var o = {
     prop: 37};

function independent() {
     
  return this.prop;
}

o.f = independent;

console.log(o.f()); // 37

这表明函数是从o的f成员调用的才是重点。

同样，this 的绑定只受最靠近的成员引用的影响。在下面的这个例子中，我们把一个方法g当作对象o.b的函数调用。在这次执行期间，函数中的this将指向o.b。事实证明，这与他是对象 o 的成员没有多大关系，最靠近的引用才是最重要的。

o.b = {
     g: independent, prop: 42};
console.log(o.b.g()); // 42

原型链中的 this
对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，就像该方法在对象上一样。

var o = {
     
  f: function() {
      
    return this.a + this.b; 
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

在这个例子中，对象p没有属于它自己的f属性，它的f属性继承自它的原型。虽然在对 f 的查找过程中，最终是在 o 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，所以函数中的 this 指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是 JavaScript 的原型继承中的一个有趣的特性。

getter 与 setter 中的 this
再次，相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

function sum() {
     
  return this.a + this.b + this.c;
}

var o = {
     
  a: 1,
  b: 2,
  c: 3,
  get average() {
     
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, 'sum', {
     
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6

作为构造函数
当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

虽然构造器返回的默认值是this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回this对象）。

/*
 * 构造函数这样工作:
 *
 * function MyConstructor(){
 *   // 函数实体写在这里
 *   // 根据需要在this上创建属性，然后赋值给它们，比如：
 *   this.fum = "nom";
 *   // 等等...
 *
 *   // 如果函数具有返回对象的return语句，
 *   // 则该对象将是 new 表达式的结果。 
 *   // 否则，表达式的结果是当前绑定到 this 的对象。
 *   //（即通常看到的常见情况）。
 * }
 */

function C(){
     
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
     
  this.a = 37;
  return {
     a:38};
}

o = new C2();
console.log(o.a); // logs 38

在刚刚的例子中（C2），因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被丢弃了。（这基本上使得语句 “this.a = 37;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。

作为一个DOM事件处理函数
当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。

// 被调用时，将关联的元素变成蓝色

function bluify(e){
     
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象时为 true
  console.log(this === e.target);        
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
     
  elements[i].addEventListener('click', bluify, false);
}
作为一个内联事件处理函数
当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>
上面的 alert 会显示button。注意只有外层代码中的this是这样设置的：

<button onclick="alert((function(){return this})());">
  Show inner this
</button>

在这种情况下，没有设置内部函数的this，所以它指向 global/window 对象（即非严格模式下调用的函数未设置this时指向的默认对象）。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

---

3、Promise

在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。
一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。

Promise 对象是由关键字 new 及其构造函数来创建的。
首先，
介绍一下如何创建一个 Promise；

const promise = new Promise((resolve, reject) => {
     
    // do something here ...
    if (success) {
     
        resolve(value); // fulfilled
    } else {
     
        reject(error); // rejected
    }
});

由上述代码我们可知：

该构造函数接收两个函数作为参数，分别是resolve和reject。
当异步操作执行成功后，会将异步操作结果作为参数传入resolve函数并执行，此时 Promise对象状态从pending变为fulfilled；

失败则会将异步操作的错误作为参数传入reject函数并执行，此时 Promise对象状态从pending变为rejected；
接下来，
我们通过then方法，分别指定resolved状态和rejected状态的回调函数。

  promise.then(function(value) {
     
      // success
  }, function(error) {
     
      // failure
  });

then方法可以接收两个回调函数作为参数，第一个回调函数就是fulfilled状态时调用；第二个回调函数就是rejected时调用。这边的第二个参数是可选的，不一定要提供。

async,await

await后面接一个会return new promise的函数并执行它
await只能放在async函数里
使用async和await获取成功的结果

function 摇色子(){
     
    return new Promise((resolve, reject)=>{
     
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
     
            resolve(sino)
        },3000)
    })
}
async function test(){
     
    let n =await 摇色子()
    console.log(n)
}
test()

上面这段代码async中使await 摇色子()先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说test函数需要三秒钟才执行完成，所以test函数是异步的，因此前面必须写async

获取失败的结果

function 摇色子(猜测){
     
    return new Promise((resolve, reject)=>{
     
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
     
            if(猜测 === '大'){
     
                resolve(sino)
            }else{
     
                reject(sino)
            }
        }else{
     
            if(猜测 === '大'){
     
                reject(sino)
            }else{
     
                resolve(sino)
            }
        }
        setTimeout(()=>{
     
            resolve(sino)
        },300)
    })
}
async function test(){
     
    try{
     
        //把await及获取它的值的操作放在try里
        let n =await 摇色子('大')
        console.log('赢了' + n)
    }catch(error){
     
      //失败的操作放在catch里
        console.log('输了' + error)
    }
}
test()

把await和成功后的操作放到try里，失败的放在catch

为什么要用await
为了使我们的异步代码，更像同步的代码

有多个promise，怎么拿到所有的promise都结束后的结果
比如有两个色子，我想得到这两个色子的点数

使用promise all

function 摇色子(猜测){
     
    return new Promise((resolve, reject)=>{
     
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
     
            if(猜测 === '大'){
     
                resolve(sino)
            }else{
     
                console.log('error')
                reject(sino)
            }
        }else{
     
            if(猜测 === '大'){
     
                console.log('error')
                reject(sino)
            }else{
     
                resolve(sino)
            }
        }
        setTimeout(()=>{
     
            resolve(sino)
        },300)
    })
}
Promise.all([摇色子('大'),摇色子('大')]).then((x)=>{
     console.log(x)},(y)=>{
     console.log(y)})

promise.all里面跟一个数组，数组的每一项是一个返回promise的函数调用，then的第一个参数是所有的promise都成功后调用，拿到所有promise的结果是一个数组；第二个参数拿到的是第一个失败的值
第一个参数表示成功时的回调函数，第二个是失败状态的回调函数

---

轮播图怎么考虑实现的

https://www.jianshu.com/p/366e374e108d

---

用apply实现一个bind函数b

https://www.imooc.com/article/288214

function baz (fn,obj) {
     

return function(){
     

return fn.apply(obj,arguments);

}

}

function foo(){
     

console.log(this.a);

}

var a = 3;

var obj = {
     

a:5

}

 

var bar = baz(foo,obj);

var b = bar();

console.log(b);

之前this指向window，输出结果为3，用了bind后，输出结果为5

---

js里的垃圾回收机制

垃圾回收机制

---

深拷贝浅拷贝的实现和区别

深拷贝和浅拷贝都是针对于引用类型(Object)而言，对于基本数据类型而言，赋值直接就是深拷贝。

浅拷贝
浅拷贝有两种定义，一种是直接赋值引用，另一种是只拷贝对象的第一层属性，更深层次的引用还是相同的；对于这两种，哪一种是正确的答案，这里不做多的解释，看个人理解，像我平时更倾向于第二种。

对于浅拷贝而言，就是只拷贝对象的引用，而不深层次的拷贝对象的值，多个对象指向堆内存中的同一对象，任何一个修改都会使得所有对象的值修改，因为它们公用一条数据

function copy(target) {
     
    let result = {
     };
    for(let key in target) {
     
        result[key] = target[key];
    }
    return result;
}
let obj1 = {
     
    a: 'a',
    b: {
     
        a: 'a',
        b: 'b'
    }
};
let obj2 = copy(obj1);
console.log(obj2 === obj1); // false
        console.log(obj2.a === obj1.a); //true
        console.log(obj2.b === obj1.b); // true
        console.log(obj2);

        obj2.a = 'x'
        console.log(obj1.a);//a
        console.log(obj2.a);//x

        obj2.b.b = 'x'
        console.log(obj1.b.b);//x
        console.log(obj2.b.b);//x
        console.log('所以上面是第一种浅拷贝');
//这时候尝试改变obj.a的值可以独立修改互不影响，如果修改obj.b里的值，修改一个另一个也会改变，因为对于引用类型拷贝的是对象的引用

ES6实现

let obj1 = {
     
    a: 'a',
    b: {
     
        a: 'a',
        b: 'b'
    }
};
// 第一种方式
let obj2 = Object.assign({
     }, obj1);
// 第二种方式
let obj3 = {
     ...obj1};
console.log(obj2 === obj1); // false
console.log(obj3 === obj1); // false
console.log(obj2.b === obj1.b); // true
console.log(obj3.b === obj1.b); // true 说明指向的是一个地址

obj3.a = 'x'
console.log(obj1.a); //a普通数据独立作用
console.log(obj3.a); //x

obj3.b.a = 'x'
console.log(obj1.b.a);//x
console.log(obj3.b.a);//x修改一个变化两个，仍然是浅拷贝

深拷贝
我们在实际的项目中，肯定不能让每个对象的值都指向同一个堆内存，这样的话不便于我们做操作，所以自然而然的诞生了深拷贝
深拷贝作用在引用类型上！例如：Object，Array
深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突

不论是修改哪一部分的值，都不会对原有对象造成影响。拷贝的永远是值，而不是引用。

在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用(指向堆内存的指针？），而真正的数据存储在堆内存中
深拷贝

深拷贝的实现
首先看一下乞丐版的深拷贝吧！JSON.stringify()以及JSON.parse()

 var obj1 = {
     
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题，修改obj2的数据，并不会对obj1造成任何影响
但是为什么说它是乞丐版的呢？
那是因为 使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的

接着来看第二种方式 Object.assign(target, source)

 var obj1 = {
     
    a: 1,
    b: 2,
    c: 3
}
var obj2 = Object.assign({
     }, obj1);
obj2.b = 5;
console.log(obj1.b); // 2
console.log(obj2.b); // 5
第二种方式实现的看起来也没有任何的问题，但是这是一层对象，如果是有多层嵌套呢

 var obj1 = {
     
    a: 1,
    b: 2,
    c: ['a','b','c']
}
var obj2 = Object.assign({
     }, obj1);
obj2.c[1] = 5;
console.log(obj1.c); // ["a", 5, "c"]
console.log(obj2.c); // ["a", 5, "c"]

可以看到对于一层对象来说是没有任何问题的，但是如果对象的属性对应的是其它的引用类型的话，还是只拷贝了引用，修改的话还是会有问题

递归拷贝

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
     
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
     
    // 如果是一个数组的话
        if (Array.isArray(target)) {
     
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
     
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
     
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
     
            result = target;
        }else {
     
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {
     };
            for (let i in target) {
     
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
     
        result = target;
    }
     // 返回最终结果
    return result;
}

可以看一下效果

    let obj1 = {
     
        a: {
     
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
     
            console.log(this.a)
        },
        c: [
            {
     
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
        console.log(obj2);

---

实现数组去重，new Set的数组去重和自己实现的哪个性能会更好

数组去重的几种方法

数组的常用操作方法，splice slice的区别

slice返回一个子数组

es6里面有什么类和方法

es6新增常用方法

对于字符串：

对于数字：

对于对象：

数组：

every
判断函数,序列中每一个都满足判断条件就返回真值.

some
判断函数,序列中只要一个都满足判断条件就返回真值.

reduce
化简函数, 从左到右依次处理序列中的元素,并返回结果