七、ES6

从这一章节开始，我们来看一下关于ES6的重点内容。

1、let 关键字

1.1 基本用法

ES6 中新增了 let 命令，用于变量的声明，基本的用法和 var 类似。例如：

<script>
  // 使用var使用声明变量 var userName = "bxg"; console.log("userName=",
  userName); // 使用let声明变量 let userAge = 18; console.log("userAge=",
  userAge);
</script>

通过以上的代码，我们发现 var 和 let 的基本使用是类似的，但是两者还是有本质的区别，最大的区别就是：

使用 let 所声明的变量只在 let 命令所在的代码块中有效。

1.2 let 与 var 区别

下面我们通过一个 for 循环的案例来演示一下 let 和 var 的区别,如下所示：

<script>
        for (var i = 1; i <= 10; i++) {
            console.log("i=", i)
        }
        console.log("last=", i)
    </script>

通过以上的代码，我们知道在循环体中 i 的值输出的是 1--10，最后 i 的值为 11.

但是如果将 var 换成 let 会出现什么问题呢？代码如下：

for (let i = 1; i <= 10; i++) {
  console.log("i=", i);
}
console.log("last=", i);

在循环体中输出的 i 的值还是 1--10,但是循环体外部打印 i 的值时出现了错误，错误如下：

出错的原因是：通过 let 声明的变量只在其对应的代码块中起作用，所谓的代码块我们可以理解成就是循环中的这一对大括号。

当然在这里我们通过这个提示信息，可以发现在 ES6 中默认是启动了严格模式的，严格模式的特征就是：变量未声明不能使用，否则报的错误就是变量未定义。

那么在 ES5 中怎样开启严格模式呢？我们可以在代码的最开始加上：“use strict”

刚才我们说到，let 声明的变量只在代码块中起作用，其实就是说明了通过 let 声明的变量仅在块级作用域内有效

1.3 块级作用域

1.3.2 为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这样就会带来一些问题，

第一：内层变量可能会覆盖外层变量

代码如下：

var temp = new Date();
function show() {
  console.log("temp=", temp);
  if (false) {
    var temp = "hello world";
  }
}
show();

执行上面的代码，输出的结果为 temp=undefined ，原因就是变量由于提升导致内层的 temp 变量覆盖了外层的 temp 变量

第二：用来计数的循环变量成为了全局变量

关于这一点，在前面的循环案例中，已经能够看到。在这里，可以再看一下

<script>
        for (var i = 1; i <= 10; i++) {
            console.log("i=", i)
        }
        console.log("last=", i)
    </script>

在上面的代码中，变量 i 的作用只是用来控制循环，但是循环结束后，它并没有消失，而是成了全局的变量，这不是我们希望的，我们希望在循环结束后，该变量就要消失。

以上两点就是，在没有块级作用域的时候，带来的问题。

下面使用 let 来改造前面的案例。

let temp = new Date();
function show() {
  console.log("temp=", temp);
  if (false) {
    let temp = "hello world";
  }
}
show();

通过上面的代码，可以知道 let 不像 var 那样会发生“变量提升”的现象。

第二个问题前面已经讲解过。

1.3.3 ES6 块级作用域

let 实际上为 JavaScript 新增了块级作用域，下面再看几个案例，通过这几个案例，巩固一下关于“块级作用域”这个知识点的理解，同时进一步体会块级作用域带来的好处

  <script>
        function test() {
            let num = 5;
            if (true) {
                let num = 10;
            }
            console.log(num)
        }
        test()
    </script>

上面的函数中有两个代码块，都声明了变量 num,但是输出的结果是 5.这表示外层的代码不受内层代码块的影响。如果使用 var 定义变量 num,最后的输出的值就是 10.

说一下，下面程序的输出结果是多少？

if (true) {
  let b = 20;
  console.log(b);
  if (true) {
    let c = 30;
  }
  console.log(c);
}

输出的结果是：b 的值是 20，在输出 c 的时候，出现了错误。

导致的原因，两个 if 就是两个块级作用域，c 这个变量在第二个 if 中，也就是第二个块级作用域中，所以在外部块级作用域中无法获取到变量 c.

块级作用域的出现，带来了一个好处以前获得广泛使用的立即执行匿名函数不再需要了。

下面首先定义了一个立即执行匿名函数：

(function text() {
  var temp = "hello world";
  console.log("temp=", temp);
})();

匿名函数的好处：通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的空间，该空间内的变量和方法，不会破坏污染全局的空间。

但是以上的写法是比较麻烦的，有了“块级作用域”后就编的比较简单了，代码如下：

{
  let temp = "hello world";
  console.log("temp=", temp);
}

通过以上的写法，也是创建了一个“私有”的空间，也就是创建了一个封闭的作用域。同样在该封闭的作用域中的变量和方法，不会破坏污染全局的空间。

但是以上写法比立即执行匿名函数简单很多。

现在问你一个问题，以下代码是否可以：

let temp = "你好";
{
  let temp = "hello world";
}

答案是可以的，因为这里有两个“块级作用域”，一个是外层，一个是内层，互不影响。

但是，现在修改成如下的写法：

let temp = "你好";
{
  console.log("temp=", temp);
  let temp = "hello world";
}

出错了，也是变量未定义的错误，造成错误的原因还是前面所讲解的 let 不存在“变量提升”。

块级作用域还带来了另外一个好处，我们通过以下的案例来体会一下：

该案例希望不同时间打印变量 i 的值。

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log("i=", i);
  }, 1000);
}

那么上面程序的执行结果是多少？

对了，输出的都是 i=3

造成的原因就是 i 为全局的。

那么可以怎样解决呢？相信这一点对你来说很简单，在前面 ES5 课程中也讲过。

for (var i = 0; i < 3; i++) {
  (function (i) {
    setTimeout(function () {
      console.log("i=", i);
    }, 1000);
  })(i);
}

通过以上的代码其实就是通过自定义一个函数，生成了函数的作用域,i 变量就不是全局的了。

这种使用方式很麻烦，有了 let 命令后，就变的非常的简单了。

代码如下：

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log("i=", i);
  }, 1000);
}

1.4 let 命令注意事项

1.4.1 不存在变量提升

let 不像 var 那样会发生“变量提升”现象。所以，变量一定要在声明后使用，否则会出错。

关于这一点，前面的课程也多次强调。

console.log(num);
let num = 2;

1.4.2 暂时性死区

什么是暂时性死区呢？

先来看一个案例：

var num = 123;
if (true) {
  num = 666;
  let num;
}

上面的代码中存在全局的变量 num,但是在块级作用域内使用了 let 又声明了一个局部的变量 num,导致后面的 num 绑定到这个块级作用域，所以在 let 声明变量前，对 num 进行赋值操作会出错。

所以说，只要在块级作用域中存在 let 命令，它所声明的变量就被“绑定”在这个区域中，不会再受外部的影响。

关于这一点，ES6 明确规定，如果在区域中存在 let 命令，那么在这个区域中通过 let 命令所声明的变量从一开始就生成了一个封闭的作用域，只要在声明变量前使用，就会出错。

所以说，所谓的“暂时性死区”指的就是，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。

1.4.3 不允许重复声明

let 不允许在相同的作用域内重复声明一个变量，

如果使用 var 声明变量是没有这个限制的。

如下面代码所示：

function test() {
  var num = 12;
  var num = 20;
  console.log(num);
}
test();

以上代码没有问题，但是如果将 var 换成 let,就会出错。如下代码所示：

function test() {
  let num = 12;
  let num = 20;
  console.log(num); //报错
}
test();

当然，以下的写法也是错误的。

function test() {
  var num = 12;
  let num = 20;
  console.log(num); //报错
}
test();

同时，还需要注意，不能在函数内部声明的变量与参数同名，如下所示：

function test(num) {
  let num = 20;
  console.log(num);
}
test(30);

4、扩展运算符与`rest`运算符

4.2 扩展运算符应用场景

4.2.1 代替数组中的 apply 方法

现在求数组中的最大值。

求最大值，我们想到的第一种方法就是：

通过循环的方式来完成，如下面的代码：

let arr = [12, 23, 11, 56];
let max = arr[0];
for (let index = 0; index < arr.length; index++) {
  if (arr[index] > max) {
    max = arr[index];
  }
}
console.log("max=", max);

这种方式非常麻烦，所以可以使用 Math 对象中的 max 方法来完成.

先来看一下 Math.max 的基本用法

console.log(Math.max(1, 5, 12, 67));

如果是用 Math.max 来计算数组中的最大值。（ES5 的写法）

let arr = [12, 23, 11, 56];
console.log(Math.max.apply(null, arr));

虽然可以使用Math.max.apply来实现，但是感觉还是很麻烦，

这里就可以使用扩展运算符

let arr = [12, 23, 11, 56];
console.log(Math.max(...arr));

在上面的代码中（不管 ES5 还是 ES6），由于 JavaScript 不提供求数组中最大值的函数，所以只能将数组转换成一个参数的列表，然后再进行相应的求值。

4.2.2 用于函数调用

在函数调用的时候，需要进行参数的传递，在某些情况下，通过扩展运算符，更有利于参数的传递。

function test(num1, num2) {
  return num1 + num2;
}
let array = [23, 56];
console.log(test(...array));

通过扩展运算符，将 array 这个数组中的值取出来，然后 23 赋值给了 num1,56 赋值给了 num2.

下面，再看一个使用扩展运算符处理函数参数的案例。

把一组数据添加到数组中。

function test(array, ...items) {
  array.push(...items);
  console.log(array);
}
let array = [23, 56];
test(array, 90, 78, 98);

test 这个函数的作用是：把 90,78,98 这三个数添加到 array 这个数组中，

在这里要注意的是：90,78,98 这三个数据给了 items 这个参数，这里我们用到了后面所讲解的 rest 参数，所以 items 这个参数实际上是一个数组，然后在 test 这个函数体内，又通过扩展运算符将 items 这个数组中的数据取出来给了 array 这个数组。

4.3 `rest`运算符

4.3.1 rest 参数基本使用

在ES6中引入了 rest 参数，形式为"...变量名"，用于获取函数中的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组。

function add(s, num1, num2) {
  return s + (num1 + num2);
}
console.log(add("+", 2, 3));

在上面定义的函数中，传递了三个参数，第一个参数：是一个‘+’号，后面两个参数，表示进行加法运算的数据。

但是，问题是如果参与运算的数据比较多，那么定义的参数也就比较多，这样比较麻烦。这时可以使用 rest 参数形式。

如下所示：

function add(...values) {
  console.log(values);
}
add(2, 3);

通过以上的代码输出发现，values 这个参数是一个数组，所传递的数据都存储到这个数组中，下面可以将数据从这个数组中取出来，进行运算。

function add(...values) {
  // console.log(values);
  let sum = 0;
  for (let index = 0; index < values.length; index++) {
    sum += values[index];
  }
  return sum;
}
console.log(add(2, 3));

上面的循环方式，使用的是传统的模式，也可以使用 forEach的形式来进行循环，如下所示：

function add(...values) {
  let sum = 0;
  values.forEach(function (item) {
    sum += item;
  });
  return sum;
}
console.log(add(2, 3));

下面我们再来看一个rest运算符的基本使用

解构会将相同数据结构对应的值赋给对应的变量，但是当我们想将其中的一部分值统一赋值给一个变量的时候，可以使用rest运算符。

如下代码：

<script>
  let arr = [1, 2, 3, 4, 5, 6]; let [arr1, ...arr2] = arr; //进行解构处理
  console.log(arr1); // 1 console.log(arr2); // [2,3,4,5,6]
</script>

在上面的代码中，arr经过解构后，变量arr1的值为 1，而通过rest运算符会将后面所有的值都统一赋值给arr2变量，得到的arr2为一个数组。

4.3.2 rest 参数的好处

在以前的案例中，我们都是使用arguments.

那么这种用法比arguments 有什么样的好处呢？

对数据进行排序，使用的是 arguments。

function sortFunc() {
  return Array.prototype.slice.call(arguments).sort();
}

console.log(sortFunc(23, 12, 67));

下面使用 rest 的方式

function sortFunc(...values) {
  return values.sort();
}
console.log(sortFunc(23, 12, 67));

因为 values 这个参数本身就是数组，所以可以直接使用 sort 函数，进行数据的排序操作。

通过以上的对比，发现使用 rest 这种参数的写法更简洁。

4.3.3 rest 参数注意问题

在使用 rest 这种参数的时候，一定要注意： rest 参数之后不能再有其他的参数，也就是说 rest 参数只能是最后一个参数，否则会报错。

如下代码所示：

        function test(a, ...b, c) {
            console.log(a);
            console.log(b);
            console.log(c);
        }
        test(1, 23, 2, 5);

以上代码会出错，要求 rest 参数只能是最后一个参数。

通过前面对扩展运算符和rest运算符的讲解，我们知道两者是互为逆运算，扩展运算符是将数组分隔成独立的序列，而rest运算符是将独立的序列合并成一个数组。

既然两者都是通过 3 个点(...)来表示，那么如何判断这 3 个点属于哪一种运算符呢？我们可以遵循如下的规则：

第一：当 3 个点(...)出现在函数的形参上或者出现在赋值号的左侧，则表示的就是rest运算符

第二：当 3 个点(...)出现在函数的实参上或者出现在赋值号的右侧，则表示它为扩展运算符。

5、什么是箭头函数

5.1 箭头函数基本使用

在 ES6 中允许使用 “箭头”（=>）来定义函数。

先使用传统的方式定义一个函数。

示例代码如下：

// 使用传统方式定义函数
let f = function (x, y) {
  return x + y;
};
console.log(f(3, 6));

通过上面的代码，可以发现传统方式来定义函数的时候，比较麻烦。

箭头函数的使用

let f = (x, y) => {
  return x + y;
};
console.log(f(9, 8));

在调用 f 这个函数的时候，将 9 和 8 传递给了 x,y 这两个参数，然后进行加法运算。

如果参数只有一个，可以省略小括号。

let f = (num) => {
  return num / 2;
};
console.log(f(6));

如果没有参数，只需要写一对小括号就可以。

let f = () => {
  return 9 / 3;
};
console.log(f());

上面我们写的代码中，发现函数体中只有一条语句，那么这时是可以省略大括号的。

let f = (x, y) => x + y;
console.log(f(3, 6));

把上面的代码转换成 ES5 的写法，发现和我们前面写的代码是一样的。

var f = function f(x, y) {
  return x + y;
};

console.log(f(3, 6));

5.2 箭头函数注意事项

5.2.1 直接返回对象

如果希望箭头函数直接返回一个对象，应该怎样写呢？

你可能认为很简单，可以采用如下的写法

        let f = (id, name) => {
            id: id,
            userName: name
        };
        console.log(f(1, 'zs'));

但是上面的写法是错误的，因为这时大括号被解释为代码块，解决的办法是：在对象外面加上小括号,

所以，正确的写法如下：

let f = (id, name) => ({
  id: id,
  userName: name,
});
console.log(f(1, "zs"));

通过打印，发现输出的是一个对象。

当然也可以采用如下的写法

let f = (id, name) => {
  return {
    id: id,
    userName: name,
  };
};
console.log(f(1, "zs"));

5.2.2 箭头函数中 this 的问题

下面定义一个对象，来理解 this 的应用。

看一下，如下代码：

let person = {
  userName: "ls",
  getUserName() {
    console.log(this.userName);
  },
};
person.getUserName();

以上代码执行的结果为：'ls',并且在该程序中this 为当前的 person 对象。

现在，将上面的代码修改一下，要求延迟 1 秒钟以后，再输出用户名的名称。

let person = {
  userName: "ls",
  getUserName() {
    setTimeout(function () {
      console.log(this.userName);
    }, 1000);
  },
};
person.getUserName();

上面的输出结果为：undefined，因为在 setTimeout 中 this 指的是 window,而不是 person 对象。

为了解决上面的问题，可以将代码进行如下的修改：

let person = {
  userName: "ls",
  getUserName() {
    let that = this;
    setTimeout(function () {
      console.log(that.userName);
    }, 1000);
  },
};
person.getUserName();

在进入 setTimeout 这个方法之前，提前将 this 赋值给 that 变量，然后在 setTimeout 中使用 that,那么这时 that 指的就是 person 对象。

上面的解决方法比较麻烦，可以修改成箭头函数的形式，代码如下所示：

let person = {
  userName: "wangwu",
  getUserName() {
    setTimeout(() => {
      console.log(this.userName);
    }, 1000);
  },
};
person.getUserName();

通过上面的代码，可以发现在箭头函数中直接使用 this 是没有问题的。

你可以这样理解：在箭头函数中是没有 this 的，如果在箭头函数中使用了 this,那么实际上使用的是外层代码块的 this. 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

或者通俗的理解：找出定义箭头函数的上下文（即包含箭头函数最近的函数或者是对象），那么上下文所处的父上下文即为 this.

那么在我们这个案例中，setTimeout函数中使用了箭头函数，箭头函数中用了this,而这时this指的是外层代码块也就是person ,所以箭头函数中使用的 this 指的就是person(包含箭头函数最近的函数是setTimeout,那么包含setTimeout这个函数的最近的函数或者是对象是谁呢？对了，是getUserName这个函数，而getUserName这个函数是属于哪个对象呢？是person,所以this为person)

下面，再看一个案例：（可以将下面的代码转换成 ES5 的代码）

let person = {
  userName: "zhangsan",
  getUserName: () => {
    console.log(this.userName);
  },
};
person.getUserName();

输出结果为:undefined

因为这时包含getUserName这个箭头函数最近的对象是 person(这里也就是说getUserName这个箭头函数的上下文为person),那么person对象所处的父上下文(也就是包含 person 这个对象最近的对象)，是谁呢？对了，就是window。

下面再看一个案例：

let person = {
  userName: "zhangsan",
  getUserName() {
    return () => {
      console.log(this.userName);
    };
  },
};
person.getUserName()();

根据上面总结的规律是，这段代码输出的结果是：'zhangsan'.

在这里还需要注意一个问题就是：

由于箭头函数没有自己的 this,所以不能使用 call()、apply()、bind()这些方法来改变 this 的指向。

let adder = {
  base: 1,

  add: function (a) {
    let f = (v) => v + this.base;
    let b = {
      base: 3,
    };

    return f.call(b, a);
  },
};
console.log(adder.add(1));

上面代码执行的结果为:2

也就是说，箭头函数不能使用call( )来改变 this 的指向，本意是想让 this 指向 b 这个对象，但是实际上 this 还是 adder 这个对象。

5.3.3 箭头函数不适合的场景

第一：不能作为构造函数，不能使用new操作符

构造函数是通过new操作符生成对象实例的，生成实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this，因此不能使用箭头函数作为构造函数。

如下代码：

function Person(name) {
  this.name = name;
}
var p = new Person("zhangsan"); //正常

以上是我们前面经常使用的一种方式，没有问题

下面看一下使用箭头函数作为构造函数的情况

let Person = (name) => {
  this.userName = name;
};
let p = new Person("lisi");

当执行上面的程序的时候，会出现错误

第二：没有prototype属性

因为在箭头函数中没有this,也就不存在自己的作用域，因此箭头函数是没有prototype属性的。

let Person = (name) => {
  this.userName = name;
};
console.log(Person.prototype); // undefined

第三：不适合将原型函数定义成箭头函数

在给构造函数添加原型函数时，如果使用箭头函数，其中的this会指向全局作用域window,而不会指向构造函数。

因此并不会访问到构造函数本身，也就无法访问到实例属性，失去了原型函数的意义。

function Person(name) {
  this.userName = name;
}
Person.prototype.sayHello = () => {
  console.log(this); // window
  console.log(this.userName); // undefined
};
let p = new Person("zhangsan");
p.sayHello();

6、对象的扩展

1、属性与方法的简洁表示方式

以前创建对象的方式：

let userName = "zhangsan";
let userAge = 18;
let person = {
  userName: userName,
  userAge: userAge,
};
console.log(person);

通过上面的代码，可以发现对象中的属性名和变量名是一样的，像这种情况，在 ES6 中是可以简化如下形式：

let userName = "zhangsan";
let userAge = 18;
let person = {
  userName,
  userAge,
};
console.log(person);

通过以上代码可以发现：在 ES6 中，如果对象的属性名和变量名是一样的，那么两者可以合二为一。

当然，除了属性可以简写，方法也可以简写，以前定义方法的形式如下：

let userName = "zhangsan";
let userAge = 18;
let person = {
  userName,
  userAge,
  sayHello: function () {
    console.log("你好");
  },
};
person.sayHello();

在 ES6 中可以简化成如下的形式:

let userName = "zhangsan";
let userAge = 18;
let person = {
  userName,
  userAge,
  sayHello() {
    console.log("Hello");
  },
};
person.sayHello();

所以在以后的编程中，会经常看到或者是用到这种ES6的表示形式。

2、Object.assign( )方法

2.1 基本使用

现在，有一个需求，将一个对象的属性拷贝给另外一个对象，应该怎样处理？

你可能会说，很简单，可以通过循环的方式来来实现。

如下代码所示：

let obj1 = {
  name: "zhangsan",
};
let obj2 = {
  age: 20,
};
let obj3 = {};
for (let key in obj1) {
  obj3[key] = obj1[key];
}
for (let key in obj2) {
  obj3[key] = obj2[key];
}
console.log("obj3=", obj3);

虽然通过循环的方式，可以实现对象属性的拷贝，但是很麻烦。下面讲解一个简单的方法：Object.assign( )方法.

Object.assign( )方法用来源对象的所有可枚举的属性复制到目标对象。该方法至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。只要有一个参数不是对象，就会抛出异常。

示例代码如下：

let target = {
  a: 1,
  b: 2,
};
let source = {
  c: 3,
  d: 4,
};

Object.assign(target, source);
console.log(target);

最终的结果：将 source 对象中的属性拷贝到 target 对象上。

在上面的定义中，可以看出参数不仅两个，可以有多个，但是要注意的是第一个参数一定是目标对象，下面再看一个多个参数的案例：

let target = {
  a: 1,
  b: 2,
};
let source = {
  c: 3,
  d: 4,
};
let source1 = {
  e: 5,
  f: 6,
};

Object.assign(target, source, source1);
console.log(target);

通过上面的代码，将 source 和source1这两个对象的属性都拷贝给了 target 对象。

2.2 深浅拷贝问题

通过Object.assign( )方法，实现的拷贝只拷贝了属性的值，属于浅拷贝。

如下代码所示：

let obj1 = {
  name: "张三",
  address: {
    city: "北京",
  },
};
let obj2 = {};
Object.assign(obj2, obj1);
obj2.address.city = "上海";
console.log("obj1=", obj1);
console.log("obj2=", obj2);

上面的代码中对obj2这个对象的 city 属性的值进行了修改，发现对应的obj1对象中的 city 属性的值也发生了改变。

但是，在某些情况下，我们不希望这样，我们希望修改一个对象的属性值时，不会影响到另外一个对象的属性值。

那么对应的要实现相应的深拷贝。

关于深拷贝，实现方式比较多，下面简单的说一种方式：(这里只是简单的模拟)

function clone(source) {
  let newObj = {};
  for (let key in source) {
    // 由于address属性为对象，所以执行递归。
    if (typeof source[key] === "object") {
      newObj[key] = clone(source[key]);
    } else {
      // 如果是name属性直接赋值
      newObj[key] = source[key];
    }
  }
  return newObj;
}
let obj1 = {
  name: "张三",
  address: {
    city: "北京",
  },
};
let obj2 = clone(obj1);
obj2.address.city = "上海";
console.log("obj1=", obj1);
console.log("obj2=", obj2);

2.3 注意事项

1、如果目标对象与源对象有同名属性，那么后面的属性会覆盖前面的属性。

let target = {
  a: 1,
  b: 2,
};
let source = {
  b: 3,
  d: 4,
};

Object.assign(target, source);
console.log(target);

上面的代码，将 source 对象中的属性拷贝给了 target 对象，但是 source 对象中有 b 这个属性，而且 target 对象上也有 b 属性，那么最终的结果是:source 对象中的 b 属性覆盖掉 target 对象中的 b 属性。

2、不可枚举的属性不会被复制。

let obj = {};
Object.defineProperty(obj, "b", {
  enumerable: false,
  value: "world",
});
let obj1 = {
  a: "hello",
};
Object.assign(obj1, obj);
console.log("obj1=", obj1);

在上面的代码中，通过Object.defineProperty()方法为 obj 对象添加了一个属性 b,这个属性的值为 'world',并且指定了 enumerable 这个属性的值为 false.也就是不可以被枚举。也就是该属性不可以通过 for in 来进行遍历。

最终，通过Object.assign这个方法进行拷贝，发现obj1对象中没有 obj 对象的 b 这个属性。

7、Symbol

7.1、Symbol 简介

在具体讲解 Symbol 之前，先来看一个问题。

ES5的对象属性名都是字符串，这样容易造成属性名的冲突。

代码如下所示：

let obj = {
  num: 10,
  "num 1": 20,
};
console.log(obj.num);
console.log(obj["num 1"]);

通过以上的代码，可以发现在对象中定义的属性的名称本身就是字符串，而且发现“num 1”中间是有空格的，所以在访问该属性的时候，通过[ ]的形式来进行访问。

那么为什么说容易造成属性名的冲突呢？

举例说明：你用了一个别人提供的对象，但是又想为这个对象添加新的方法或者是属性，新方法或者是新属性的名称有可能与现有对象中的属性名称或者是方法的名称产生冲突。如果有一种机制，能够保证每个属性的名字都是唯一的，那么就能够从根本上防止属性名称的冲突问题。这也就是 ES6 引入 Symbol 的原因。

Symbol 是一种数据类型，是 JavaScript 语言的第 7 种数据类型，前 6 种分别是:undefined,null,布尔值，字符串，数值和对象。

Symbol 类型的值是通过 Symbol 函数生成的。它的值是独一无二的，也就是唯一的，可以保证对象中属性名称的唯一。

可以通过如下的代码测试类型

let s = Symbol();
console.log(typeof s);

对应的输出类型为"symbol"

下面创建 Symbol 类型的变量，然后进行打印输出。

let s = Symbol();
let s1 = Symbol();
console.log(s);
console.log(s1);

发现输出的结果都是：Symbol( )。

输出的结果都是 Symbol( ),那么无法区分，哪个 Symbol( )是 s 变量的，哪个是 s1 变量的。

为了解决这个问题，Symbol( )函数可以接受一个字符串作为参数，这个参数表示对 Symbol 的描述，主要是为了在控制台进行输出打印的时候，能够区分开，Symbol 最终是属于哪个变量的。

let s = Symbol("s");
let s1 = Symbol("s1");
console.log(s);
console.log(s1);

输出的结果为：Symbol(s)和 Symbol(s1)

注意：Symbol 函数的参数只表示对当前 Symbol 值（结果）的描述，因此相同参数的 Symbol 函数的返回值是不相等的。代码如下：

let s = Symbol("s");
let s1 = Symbol("s");
console.log(s === s1);

以上结果为：false.

7.2、Symbol 应用场景

7.2.1 作为属性名的 Symbol

在前面的课程中，讲解过由于 Symbol 的值是唯一的，并且能够保证对象中不会出现同名的属性。下面，先来讲解一下，怎样使用 Symbol 作为属性名，然后再看一下怎样保证对象中不会出现同名属性。

第一种添加属性的方式：

let mySymbol = Symbol();
let obj = {};
// 第一种添加属性的方式
obj[mySymbol] = "hello";
console.log(obj[mySymbol]);

第二种添加属性的方式：

let mySymbol = Symbol();
let obj = {
  [mySymbol]: "world", // 注意mySymbol必须加上方括号，否则为字符串而不是Symbol类型。
};
console.log(obj[mySymbol]);

第三种添加属性的方式

let mySymbol = Symbol();
let obj = {};
Object.defineProperty(obj, mySymbol, {
  value: "你好",
});
console.log(obj[mySymbol]);

7.2.2 防止属性名称冲突

在前面，已经讲解了怎样使用 Symbol 作为属性名了，下面看一下怎样通过 Symbol 来防止属性名的冲突。

下面先定义一个对象，然后动态的向对象中添加一个 id 属性。

let obj = {
  name: "zs",
  age: 18,
};
function test1(obj) {
  obj.id = 42;
}
function test2(obj) {
  obj.id = 369;
}
test1(obj);
test2(obj);
console.log(obj);

在上面的代码中，有两个函数分别是 test1 和 test2 向 obj 这个对象中动态添加 id 属性，在这里可以把这两个函数想象成两个不同的模块，或者是两个不同开发人员来实现的功能。

但是问题是，由于 test2( )这个函数后执行，所以会将 test1( )这个函数创建的 id 属性的值覆盖掉。那么这是我们不希望看到的，为了解决这个问题，可以使用 Symbol 作为属性名来解决。

let obj = {
  name: "zs",
  age: 18,
};
let mySymbol = Symbol("lib1");

function test1(obj) {
  obj[mySymbol] = 42;
}
let mySymbol2 = Symbol("lib2");

function test2(obj) {
  obj[mySymbol2] = 369;
}
test1(obj);
test2(obj);
console.log(obj);

通过上面的代码可以发现，通过 Symbol 解决了属性名称冲突的问题。

8、Proxy

1.Proxy 简介

Proxy 可以理解成在对象前添加了一个“拦截”层，外界在对该对象进行访问时，必须先通过这个拦截层。因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的意思是代理的意思，也就是说由 Proxy 来“代理”某些操作。所以又称之为“代理器”。

Proxy 的使用

let proxy = new Proxy(target, handler);

target:表示所要拦截的目标对象(原来要访问的对象)

handler:也是一个对象，表示拦截的行为和规则。

要想使用 Proxy 来完成对象的拦截，除了创建对象以外，还需要指定对应的拦截的方法。

下面使用一下get()这个拦截方法，来体会一下 Proxy 拦截器的使用。

get( )方法用于拦截某个属性的读取操作。

下面先看如下的代码

let student = {
  userName: "张三",
};
console.log(student.userName);
console.log(student.userAge);

这段代码非常的简单，定义了一个 student 对象，在该对象中添加了一个 userName,下面可以直接通过对象名加上点的方式来获取对应的属性的值。但是，问题是，在 student 这个对象中，只是定义了 userName 这个属性，并没有定义 userAge,但是当通过 student.userAge 这个方式来获取的时候，发现得到的结果是 undefined.

那么，在这里我们希望如果访问对象中不存在的属性的时候，应该给出相应的错误提示，要想实现这个需求，就要用到 Proxy 中的get()方法，也就是在访问某个对象的属性之前，先拦截一下，看一下所访问的对象是否有对应的属性，如果有，继续访问，如果没有给用户一个错误的提示。

let student = {
  userName: "张三",
};
let proxy = new Proxy(student, {
  get: function (target, property) {
    if (property in target) {
      return target[property];
    } else {
      // （引用错误） 对象代表当一个不存在的变量被引用时发生的错误。
      throw new ReferenceError("访问的属性" + property + "不存在");
    }
  },
});
console.log(proxy.userName);
console.log(proxy.userAge);

get() 有两个参数，`第一个参数表示的是目标对象，第二个参数表示的是要访问的属性。

通过上面的代码，可以体会出所谓的 "拦截"的含义了，也就是在访问某个属性的值之前，先判断一下该对象是否有对应的属性，如果有就返回属性的值，没有就给出相应的错误提示。

注意：要使 Proxy 起作用，必须针对 Proxy 对象进行操作，不是针对目标对象进行操作(上面的是 student 对象)。

1.2 set( )方法

set() 方法用于拦截某个属性的赋值操作。

假如，Student 对象有一个 age 属性，表示学生的年龄，在这里我们要求对年龄进行限制，如果大于 60 岁，给出错误提示，这样在这里可以使用 Proxy 对象保证 age 属性的取值是符合要求的。

let student = {
  name: "zs",
  age: 20,
};

let proxy = new Proxy(student, {
  set: function (obj, prop, value) {
    console.log("obj=", obj);
    console.log("prop=", prop);
    console.log("value=", value);
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("年龄不是整数！");
      }
      if (value > 60) {
        throw new RangeError("年龄太大了");
      }
    }
  },
});
proxy.age = "80";
console.log(proxy.age);

set()方法

第一个参数：表示拦截的对象。

第二个参数：表示操作的属性名称。

第三个参数：表示属性的值。

1.3 apply( )方法

apply() 方法拦截函数的调用，函数调用包括直接调用，call 函数调用和 apply 函数调用，三种调用操作方式。

下面先看一下apply()函数的语法

let handler = {
  apply(target, ctx, args) {},
};

apply( )函数可以有三个参数,

第一个参数：表示目标对象,也就是要拦截的函数

第二个参数：表示目标对象的上下文对象(this)

第三个参数：表示目标对象的参数数组。

let target = function (msg) {
  return "你好" + msg;
};
let handler = {
  apply: function (target, ctx, args) {
    console.log("target=", target);
    console.log("ctx=", ctx === obj);
    console.log("args=", args);
    return "hello";
  },
};
let proxy = new Proxy(target, handler);
let obj = {
  proxy,
};
console.log(obj.proxy("张三"));

在执行 target 这个方法之前，会被 Proxy 所拦截。

1.4 has( ) 方法

has() 可以隐藏某些属性，不被 in 操作符发现。

let user = {
  _name: "zhangsan",
  age: 20,
};
let handler = {
  has(target, key) {
    console.log("target=", target);
    console.log("key=", key);
  },
};
let proxy = new Proxy(user, handler);
"_name" in proxy; // 自动调用 has 方法

通过上面的代码，可以发现：has 方法有两个参数，第一个参数：表示目的对象，第二个参数：表示操作的属性。

下面的例子，把user 对象中 _name 属性隐藏起来，也就是无法通过in 运算符发现该属性。

let user = {
  _name: "zhangsan",
  age: 20,
};
let handler = {
  has(target, key) {
    // console.log('target=', target);
    // console.log('key=', key);
    if (key[0] === "_") {
      return false;
    }
    return key in target;
  },
};
let proxy = new Proxy(user, handler);
console.log("_name" in proxy);

上面的代码中，如果对象中的属性名第一个字符是下画线，那么 has 方法会返回 false,从而不会被 in 运算符发现，但是如果将 console.log('_name' in proxy); 换成 console.log('age' in proxy); 返回为 true.

2、应用场景

2.1 数据校验

在前面的课程中，已经讲解过基本的数据校验，下面看一个比较完整的数据校验的案例。

// 创建一个对象
class Person {
  constructor() {
    this.name = "";
    this.age = 19;
    return validator(this, personValidators);
  }
}
// 定义校验规则
const personValidators = {
  name(val) {
    return typeof val === "string";
  },
  age(val) {
    return typeof val === "number" && val > 18;
  },
};
// 完成校验
function validator(target, validator) {
  return new Proxy(target, {
    _validator: validator,
    set(target, key, value) {
      if (target.hasOwnProperty(key)) {
        let v = this._validator[key]; //根据key获取具体的校验规则
        if (v(value)) {
          return Reflect.set(target, key, value);
        } else {
          throw Error(`不能给${key}属性设置${value}`);
        }
      } else {
        throw Error(`${key} 不存在`);
      }
    },
  });
}
// 注意这里返回的是Proxy对象
let person = new Person();
person.name = "zhangsan";
person.age = 19;
// person.name = 90;
// person.age = 15;
console.log(person);

通过上面的案例，将对象的创建，数据验证的规则，以及具体的验证方式都进行了分离，整体结构更加的清晰，代码更加的容易维护。

2.2 简单模拟双向数据绑定

大家都知道在Vue`中，是有双向绑定功能的，下面通过 Proxy 来模拟一下。

let input = document.getElementById("txtInput");
let p = document.getElementById("txtP");
let obj = {
  text: "",
};
let newObj = new Proxy(obj, {
  set: function (target, key, value) {
    if (target.hasOwnProperty(key)) {
      input.value = value;
      p.innerHTML = value;
    }
    return Reflect.set(target, key, value);
  },
});

input.addEventListener("keyup", function (e) {
  newObj.text = e.target.value;
});

在文本框中输入值以后，对应的会在 p 标签中进行展示，通过在浏览器的控制台中，如果给 newObj 中的 text 属性赋值，对应的文本框和 P 标签内容也会发生变化。

2.3 实现真正的私有属性

 <script>
      const userInfo = {
        _id: 123,
        getAllUsers: function () {
          console.log("获取所有用户的信息");
        },
        getUserById: function (userId) {
          console.log("根据用户的编号，查询指定的信息" + userId);
        },
        saveUser: function (user) {
          console.log("保存用户信息");
        },
      };
      const proxy = new Proxy(userInfo, {
        get: function (target, prop) {
          if (prop[0] === "_") {
            return undefined;
          }
          return target[prop];
        },
        set: function (target, prop, value) {
          if (prop[0] !== "_") {
            target[prop] = value;
          }
        },
        has: function (target, prop) {
          if (prop[0] === "_") {
            return false;
          }
          return prop in target;
        },
      });
      console.log(proxy._id); //undefined
      proxy.getAllUsers(); // 获取所有用户的信息
      proxy.getUserById(123); // 根据用户的编号，查询指定的信息123
      console.log("_id" in proxy); //false
      console.log("saveUser" in proxy); // true
    </script>

9、Set 结构

Set 结构与数组类似，但是成员的值都是唯一的，没有重复值。

1.1 常用的操作方法

关于常用的操作方法，这里会讲解如下 4 个。

add(value) : 添加某个值，返回 Set 结构本身。

delete(value): 删除某个值，返回一个布尔值，表示删除是否成功

has(value) : 返回一个布尔值，表示参数是否为 Set 的成员.

clear(): 清除所有成员，没有返回值

1.1.1 add( )方法

下面先看一下 add( )方法的使用

let s = new Set();
s.add(1);
s.add(2);
s.add(3);
console.log(s);
console.log(s.size);

在上面的代码中，用到了 size 属性，这个属性返回的是 Set 结构中的成员总数。

Set 结构中的成员是不允许出现重复值的，下面测试一下。

let s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(3);
console.log(s);
console.log(s.size);

在上面的代码中，又添加了一个数字 3，但是在输出的时候，发现 3 这个数值只出现了一次，并且总数的个数也没有发生变化，所以 Set 是不允许出现重复的。

1.1.2 has( )方法

let s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(3);
console.log(s);
console.log(s.size);
console.log(s.has(3));
console.log(s.has(5));

1.1.3 delete( )方法

let s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(3);
console.log(s);
console.log(s.size);
console.log(s.delete(3)); //删除成功返回true.
console.log(s.has(3));
console.log(s.has(5));

1.1.4 clear()方法

let s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(3);
console.log(s);
console.log(s.size);
console.log(s.delete(3));
console.log(s.has(3));
console.log(s.has(5));
s.clear(); // 清除所有项
console.log(s);

Set 结构是一个类似数组的结构，那么怎样转换成一个真正的数据呢?

可以通过前面学习的 Arrray.from 方法。

let s = new Set();
s.add(1);
s.add(2);
s.add(3);
let array = Array.from(s);
console.log(array);

在使用数组编程的时候，经常会用到一个功能，就是清除数组中的重复的数据，那么在这里可以借助于 Set 结构来完成。

// 清除数组中的重复数据.
// Set函数可以接受一个数组或者是类似数组的对象，作为参数。
let array = [1, 2, 3, 3, 5, 6];
let s = new Set(array);
console.log(Array.from(s));