JavaScript中ES6对象的增强使用、解构、多态

1.ES6对象的增强

1.1 字面量的增强

ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）。

字面量的增强主要包括下面几部分：

1. 属性的简写：Property Shorthand

   • 例如下面代码, 我们已经有两个变量, 想要将这两个变量定义到obj对象上

     var name = "kaisa";
     var age = 18;
     
     // 一般情况写我们会这样写
     var obj = {
       name: name,
       age: age
     };
     

   • 属性的增强写法可以简化语法, 前提key和value的标识符一样的情况下可以使用, 如下代码

     var name = "kaisa";
     var age = 18;
     
     // 属性的增强写法
     var obj = {
       name,
       age
     };
     

2. 方法的简写: MethodShorthand

   • 一般情况下, 我们定义对象的方法, 都是如下方式定义的

     var obj = {
       running: function () {},
       eating: function () {},
     };
     

   • 属性的增强写法, 可以简化成如下代码

     var obj = {
       running() {},
       eating() {},
     };
     

3. 计算属性名：Computed Property Names

   • 例如下面代码, 我们想要使用变量key的值, 作为obj对象的属性名, 我们可以使用计算属性名

     var key = "address";
     
     var obj = {
       [key]: "成都市",
     };
     
     console.log(obj.address); // 成都市
     

1.2 解构

ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。

• 解构赋值是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。

我们可以划分为：数组的解构和对象的解构。

1. 数组的解构

   • 基本解构过程

     var names = ["aaa", "bbb", "ccc", "ddd"];
     
     // 需求: 将前三个数组元素分别用一个变量保存
     // 没有解构的做法
     // var nume1 = names[0];
     // var nume2 = names[1];
     // var nume3 = names[2];
     
     // 解构的做法
     var [nume1, nume2, nume3] = names;
     console.log(nume1, nume2, nume3); // aaa bbb ccc
     

   • 顺序解构: 数组有严格的顺序问题

     var names = ["aaa", "bbb", "ccc", "ddd"];
     
     // 只解构第一个和第三个数组元素, 不要第二个数组元素也需要逗号分隔, 留出空位
     var [nume1, , nume3] = names;
     console.log(nume1, nume3); // aaa ccc
     

   • 解构出数组：…语法

     var names = ["aaa", "bbb", "ccc", "ddd"];
     
     // 解构出数组, 将第一个和第二个元素放到两个不同的变量中, 将剩余数组元素放到新数组newArray中
     var [name1, name2, ...newArray] = names;
     console.log(name1, name2, newArray); // aaa bbb ['ccc', 'ddd']
     

   • 默认值

     var names = ["aaa", "bbb", undefined, "ccc", "ddd"];
     
     // 当我们发现第三个值是undefined时,我们也可以利用解构给一个默认值
     // 如果本身有值, 则无法赋值
     var [name1, name2 = "abc", name3 = "default"] = names;
     console.log(name1, name2, name3); // aaa bbb default
     

2. 对象的解构

   • 基本解构过程

     var obj = { name: "kaisa", age: 18, height: 1.88, address: "成都市" };
     // 需求: 将对象的前三个属性值用一个变量保存
     // 没有解构的做法
     // var name = obj.name;
     // var age = obj.age;
     // var height = obj.height;
     
     // 解构的做法
     var { name, age, height } = obj;
     console.log(name, age, height); // kaisa 18 1.88
     

   • 任意顺序

     var obj = { name: "kaisa", age: 18, height: 1.88, address: "成都市" };
     
     // 对象的解构是根据key来的, 没有顺序问题
     var { name, height, age } = obj;
     console.log(name, age, height); // kaisa 18 1.88
     

   • 重命名

     var obj = { name: "kaisa", age: 18, height: 1.88, address: "成都市" };
     
     // 对象的解构可以对变量进行重命名
     var { name: aName, height: aHeight, age: aAge } = obj;
     console.log(aName, aAge, aHeight); // kaisa 18 1.88
     

   • 默认值

     var obj = { name: "kaisa", age: 18, height: 1.88};
     
     // 解构的过程中, 可以添加key并对他设置默认值
     var {
       name: aName,
       height: aHeight,
       age: aAge,
       adderss: aAddress = "成都市",
     } = obj;
     
     console.log(aName, aAge, aHeight, aAddress); // kaisa 18 1.88 成都市
     

   • 解构出对象: …语法

     var obj = { name: "kaisa", age: 18, height: 1.88, address: "成都市" };
     
     // 对象的解构可以对变量进行重命名
     var { name, height, ...newObj} = obj;
     console.log(name, height, newObj); // kaisa 18 1.88
     

1.3 解构的应用

解构目前在开发中使用是非常多的：

• 比如在开发中拿到一个变量时，自动对其进行解构使用;

• p比如对函数的参数进行解构；

• 我们来看一个解构的简单但是十分常见的应用

// 定义一个函数, 用于获取位置信息
function getPosition({ x, y }) {
  console.log(x, y);
}

// 巧妙利用解构 相当于做了{ x, y } = { x: 10, y: 20 }这个操作
getPosition({ x: 10, y: 20 });
getPosition({ x: 30, y: 40 });

2.JavaScript中的多态

面向对象的三大特性：封装、继承、多态。

• 前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。

JavaScript有多态吗？

• 维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型。
• 非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

那么从上面的定义来看，JavaScript是一定存在多态的。

严格意义的面向对象语言(例如java), 多态的是存在如下条件的:

1. 必须有继承(实现接口)

2. 必须有父类引用指向子类对象

在JavaScript中, 类似于下面代码就属于多态的表现:

• 所以js到处都是多态

function sum(a1, a2) {
  return a1 + a2
}

sum(20, 30)
sum("abc", "cba")

var foo = 123
foo = "Hello World"
console.log(foo.split())
foo = {
  running: function() {}
}
foo.running()
foo = []
console.log(foo.length)
是多态

```js
function sum(a1, a2) {
  return a1 + a2
}

sum(20, 30)
sum("abc", "cba")

var foo = 123
foo = "Hello World"
console.log(foo.split())
foo = {
  running: function() {}
}
foo.running()
foo = []
console.log(foo.length)