ECMAScript6-8 常用特性

本文将总结一ECMAScript 6-8 的常用特性，并使用一些案例来展示特性的使用场景，学以致用

let

在ES6之前使用var关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题，且使用var声明的变量会被提升到最前进行解析，使用function声明的函数次之

var camper = 'James';
var camper = 'David';
console.log(camper);
// 打印出 'David'

function a () {
  console.log('function a')
}
var a = 10
var a = 20
console.log(a) 
// 输出 20

与var不同的是，当使用ES6新增的let来声明变量时，没有变量提升，且同一名字的变量只能被声明一次，

let camper = 'James';
let camper = 'David';
//输出错误 Uncaught SyntaxError: Identifier 'camper' has already been declared

function a () {
  console.log('function a')
}
let a = 10
//输出错误 Uncaught SyntaxError: Identifier 'a' has already been declared

let 声明的变量在{} （花括号）中参数局部作用域，作业是不会污染其他作用域，不会影响作用域链

if(true){
    let i  = 1
}
console.log(i)
// 输出错误 Uncaught ReferenceError: i is not defined

Const

const 为英文 constant的简写，其意为常量

使用const声明的常量拥有以下规则：

常量一定要赋初值
与let一样产生块级作用域
常量名称一般为全大写字母
常量值不能修改，对象或者数组类型可修改内部数据，这意味着使用const声明的引用常量在堆内存中的地址不能发生变化

解构赋值

数组解构

在 ES6 里面，解构数组可以如同解构对象一样简单。与数组解构不同，数组的扩展运算会将数组里的所有内容分解成一个由逗号分隔的列表。所以，你不能选择哪个元素来给变量赋值，而对数组进行解构却可以让我们做到这一点：


const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2
//变量a以及b分别被数组的第一、第二个元素赋值。

//我们甚至能在数组解构中使用逗号分隔符，来获取任意一个想要的值：

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

// 不通过第三个变量交换二者的值
let a = 8, b = 6;
[a,b] = [b,a]

console.log(a); // 应该等于 6
console.log(b); // 应该等于 8

对象解构

const obj = {
    name:'ls',
    age:20,
    getName:function(){
        return this.name;
    }
}
const {name,age,getName} = obj

用于函数传参，这里也使用了ES6的新特性，参数默认值

function connent({host="",username="初始值",password,port}){
    console.log(host,username,password,port)
}
connect({
    host:'',
    username:'',
    password:'',
    port:''
})

在某些情况下，你可以在函数的参数里直接解构对象，这样的操作去除了多余的代码，使代码更加整洁

const profileUpdate = (profileData) => {
    const { name, age, nationality, location } = profileData;

}
//上面的操作解构了传给函数的对象。这样的操作也可以直接在参数里完成

const profileUpdate = ({ name, age, nationality, location }) => {
    /* 对这些参数执行某些操作 */
}

这样做还有个额外的好处：函数不需要再去操作整个对象，而仅仅是操作复制到函数作用域内部的参数。

const a = {
     start: { x: 5, y: 6},
     end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6

在上面的例子里，a.start将值赋给了变量start，start同样也是个对象。

//使用解构赋值来得到forecast.tomorrow的max，并将其赋值给maxOfTomorrow。
const LOCAL_FORECAST = {
  today: { min: 72, max: 83 },
  tomorrow: { min: 73.3, max: 84.6 }
};

function getMaxOfTmrw(forecast) {
  "use strict";
  // 在这行以下修改代码
  const {tomorrow:{max:maxOfTomorrow}} = forecast; // 改变这一行
  // 在这行以上修改代码
  return maxOfTomorrow;
}

console.log(getMaxOfTmrw(LOCAL_FORECAST)); // 应该为 84.6

简化对象写法

如果在对象内赋值中发现属性名和属性值变量名称相同，则直接使用属性名即可

let a = 'apple'
let b = 'banana'
const obj = {
    apple,
    banana,
    getFruit(){
        //...
    }
}

箭头函数

const arrowFunc = () => {
    // 执行的代码
}
const arrowFunc2 = () => (/*返回的内容*/)

箭头函数内部的this始终指向在声明时的作用域中的this，且this不可被call()`` bind()`` apply() 更改，通常应用于计时器(因为计时器中的this指向的是windows) 以及定义类中的函数
内部没有arguments伪数组，意味着不能使用arguments.callee()方法进行自调用
当内部代码只有return语句时候，return可省略，使用()包裹返回的内容，但执行的代码使用{} 包裹

rest参数

ES6 在函数中引入 rest参数，用于获取函数实参，代替arguments

1
2
3

function plus(...args){
    args.forEach() //arg作为一个数组，将传入的参数收入到数组中
}

Class

ES6 提供了一个新的创建对象的语法，使用关键字class。

值得注意的是，class只是一个语法糖，它并不像 Java、Python 这一类的语言一样，严格履行了面向对象的开发规范。

ES6 之前由原型链来进行对象的继承于重用，在构造函数的显式原型上添加公共方法，使用new 来实例化对象，

var SpaceShuttle = function(targetPlanet){
 this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');

class的语法只是简单地替换了构造函数的写法：

class SpaceShuttle {
 constructor(targetPlanet){
  this.targetPlanet = targetPlanet;
 }
}
const zeus = new SpaceShuttle('Jupiter');

注意class关键字声明了一个新的函数，并在其中添加了一个会在使用new关键字创建新对象时调用的构造函数。

继承

在ES5 中，我们常常用到组合继承来实现父子间的继承，即使用原型链继承的方式继承父类的方法，使用借用构造函数的方式继承父级的属性，最后再将子类原型的构造器指向自身

function Phone(brand,price){
    this.brand = brand;
    this.price = price;
}
function SmartPhone(brand,price,os,color){
    Phone.call(this,brand,price);
    this.os = os;
    this.color = color;
}
//设置子类的构造函数原型
SmartPhone.prototype = new Phone;
const iPhone = new SmartPhone('Apple',1000,'iOS','white')

以上继承方法存在一个问题，即创建一个对象需要调用2次父类构造函数，第一次为子类构造函数中借用构造属性时，第二次为子类使用原型继承父类构造函数的方法时

使用寄生组合式继承可以解决这个问题，这也是ES6的class继承实现原理，与上方的构造的区别就是：

组合式继承先使用借用函数构造了子类实例的属性，然后再通过改变子类的原型执行父类实例的方式继承父类的方法，调用2次父类构造函数
寄生组合继承，先使用函数将子类的原型指向了父类的实例，而父类的实例是通过将父类的原型交给一个新函数的原型构造出的，没有调用父类构造器来构造，此后，在new子类构造函数的时候，才调用父类构造函数来构造子类属性，过程中只调用一次父类构造函数

function createObject(prototype){
    new Fun () {}
    Fun.prototype = prototype
    return new Fun()
}
function inheritPrototype(subType, superType){
    const prototype = createObject(superType.protyotype)
    prototype.constructor = subType
    subType.prototype = prototype
}
inheritPrototype(SmartPhone,Phone)
new SmartPhone()

ES6中的使用类继承，super()方法只能在constructor函数中使用

class Phone{
    constructor(brand,price){
        this.brand = brand;
        this.price = price
    }
    call(){
       //打电话函数 
    }
}
class SmartPhone extends Phone{
    constructor(brand,price,os,color){
        super(brand,price)
        this.os = os;
        this.color = color;
    }
    Photo(){
        //子类拍照函数
    }
}
const iPhone = new SmartPhone('Apple',1000,'iOS','white');

ES6 子类对父类方法重写：直接在子类中添加与父类的同名函数即可

ES6 类实例的get和set

get和set方法时默认缺省的，如果声明了get/set 变量名(){}函数，则在读取或修改某个变量时时，都会调用一次该变量的get或set,在get中可以操控返回值，在set中可以操控修改的值

class Phone{
    constructor(brand){
        this.brand = brand;
    }
    get brand(){
        console.log("读取品牌信息")
    }
    set brand(val){
        console.log("设置品牌信息")
	}
}
let iPhone = new Phone()
iPhone.brand = 'Apple';

ES6 对象方法扩展
- 判断两个数值是否相等：Object.is(a,b)
- 合并对象：Object.assign(dstObj,srcObj)，源对象会将属性合并到目标对象中，且覆盖目标对象相同的属性值
- 设置对象的隐式原型：Object.setPrototypeOf(dstObj,srcObj),将源对象设置为目标对象的隐式原型__proto__

静态方法

在class声明的类中，使用static声明的方法将不能被class所创建的实例所调用，只能通过class本身进行调用

class Father{
  static staticMethod(){
    //...
  }
}
Father.staticMethod()

静态属性

ES6之前，在构造函数上添加属性，其属性属于函数对象，并不属于构造函数本身，由此构造函数构造的对象不能得到构造函数对象的属性
1
2
3
4
5
6
7
function Phone(){

}
Phone.name = 'xxx';
Phone.call = function()=>{/*...*/};
let iPhone = new Phone();
console.log(iPhone.name) //无法输出

在ES6的类中，添加静态方法只需要将前缀改为ststic即可

class Phone{
    static name = 'xxx';
	static call(){
        //...
    }
}
console.log(Phone.name) //只能通过此形式访问静态属性

继承：

扩展运算符…

将伪数组转换成数组

1 2	const divs = document.querySelectorAll("div"); const divsArray = [...divs];

ES6的模块引入方式

在过去，我们会使用require()函数来从外部文件或模块中引入函数或者代码。这时候会遇到一个问题：有些文件或者模块会特别大，但你却往往只需要引入其中的一些核心代码。

ES6 给我们提供了import这个便利的工具。通过它，我们能够从外部的文件或者模块中选择我们需要的部分进行引入，从而节约载入的时间和内存空间。

ES6 同样提供的 export / export default 关键字来暴露一个模块的方法或者变量，具体使用方式请查阅MDN文档

ES6 模块化

在js文件中使用export / export default暴露函数

在html文件中使用：使用模块的函数

<script type="module">
   import * as module1 from "./xxx.js" //可使用as 进行重命名
   import {xxx} from "./xxx.js" //解构赋值
   import {default as module3} from "./xxx.js" //将默认暴露的模块在使用时重命名
   import module4 from "./xxx.js" //直接使用，只能针对默认暴露的模块
</script>

暴露模块的三种方式：
1. export xxx
2. export {a,b,c,...}
3. export default {} ，访问时多一层default
使用入口js文件
- 创建一个app.js 文件，并在html中引入这个作为模块的js文件
- 在app.js 文件中引入其他的模块，并使用
兼容性：使用babel将 ES6 转换为 ES5 语法
- 需要使用npm安装babel-cli babel-present-env browserify(webpack)
- 运行npx babel 源js文件/文件夹目的js文件/文件夹
- 使用入口文件将一些列模块文件进行打包：npx browserify 源入口js文件 -o 目标入口js文件

Symbol 基本数据类型

ES6引入的第六个基本数据类型，标识独一无二的值，类似于字符串
symbol 的值是唯一的，用来解决命名冲突问题
symbol不能与其他数据进行任何运算，只能进行相等判断
symbol定义的对象属性不能使用for ... in ... 来遍历，但是可以使用reflect.ownKeys() 来获取key
使用场景：
- 为对象添加独一无二的值/函数,避免冲突

1
2
3

let a = Symbol("aaa")
let b = Symbol("aaa")
console.log(a === b) // false

迭代器

Iterator是一种接口，为不同数据结构提供同一的访问机制，任何数据结构只要部署Iterator接口皆可以完成遍历操作

每个可迭代的数据类型的实例的隐式原型中都包含一个Symbol(Symbol.iterator)

const FRUIT = ['apple','banana','orange'];
let iterator = FRUIT[Symbol.iterator]();
console.log(iterator.next()) // {value:'apple',done:false}
console.log(iterator.next())// {value:'banana',done:false}
console.log(iterator.next())// {value:'orange',done:false}
console.log(iterator.next())// {value:undefined',done:true}

自定义遍历对象：

自定义一个对象中的迭代器，迭代指定部分的数据：

let obj2 = {
    type:'fruit',
    name:['apple',
          'banana',
          'orange'
         ],
    [Symbol.iterator](){
        let i = 0;
        return {
            next:() => {
                if(i < this.name.length){
                    return {value:this.name[i++],done:false}
                }else{
                    return {value:undefined,done:true}
                }
            }
        }
    }
}
for (let name of obj2 ){
	console.log(name)
}

生成器函数

生成器函数是ES6提供的异步编程解决方案之一，语法行为与普通函数完全不同，生成器函数默认返回一个迭代对象，可使用使用迭代器的next()方法来手动执行函数内部每一行代码

function * gen(){
    console.log("apple");
    yield '0';
    console.log("banana");
    yield '1';
    console.log("orange");
    yield '2';
}
let genIterator = gen();
genIterator.next(); //apple
genIterator.next(); //banana
genIterator.next(gen()); //orange

迭代器对象的netx()方法的传参可缺省，默认值为调用的函数

yield

yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。
yield实际返回一个迭代器对象例如 {value:" ",done: false }
yield 只能配合生成器函数使用
yield并不能直接生产值，而是产生一个等待输出的函数
某个函数包含了yield，意味着这个函数已经是一个Generator
除IE外，其他所有浏览器均可兼容（包括win10 的Edge）
如果yield在其他表达式中，需要用()单独括起来
next()可无限调用，但既定循环完成之后总是返回undeinded

function  * count() {
    for (var i = 0; true ; i++) {
        var reset = yield i;  //到此处直接返回一个迭代对象
        if (reset) { i = -1;} //这一行语句不会被执行
    }
}
var arr = count();
console.log(arr.next())
console.log(arr.next())
console.log(arr.next())
console.log(arr.next())
console.log(arr.next())

yield参数

function  * test(x) {
    var y = 2 * (yield (x+1));
    var z = yield (y / 3);
    console.log(x,y,z)
    return (x+y+z);
}
var a = test(5);
console.log(a.next());   // 6
console.log(a.next(12)); // 8
console.log(a.next(13)); // 42 = 24 + 5 + 13

当next()传入参数时，只有上一个yield整体等于传入参数，当前迭代的yield仍然返回之后的表达式的值

异步编程示例1：解决回调地狱

// 回调地狱
setTimeout(()=>{
    setTimeout(()=>{
    	setTimeout(()=>{
    		//更多嵌套..
		},3000)
	},2000)
},1000);

// 使用生成器函数的做法：

function one (){
    setTimeout(()=>{
    	console.log(111);
        iterator.next();
    },1000)
}
function two (){
	setTimeout(()=>{
    	console.log(222);
        iterator.next();
    },2000)
}
function three (){
	setTimeout(()=>{
    	console.log(333);
        iterator.next();
    },3000)
}
function * gen (){
    one ();
    two ();
    three ();
}
let iterator = gen();
iterator.next(); //从one开始自动遍历

异步编程示例2：模拟业务处理逻辑

//模拟购物传递信息流程：获取用户数据 → 获取订单数据 → 获取商品数据
function getUserInfo(userId){
    setTimeout(()=>{
    	let userInfo = "通过传入的id获取到用户信息"
        iterator.next(userInfo);
    },1000)
}
function getOrderInfo(userInfo){
    setTimeout(()=>{
    	let orderInfo = "通过传入的id获取到用户信息"
        iterator.next(orderInfo);
    },1000)
}
function getGoodsInfo(orderInfo){
    setTimeout(()=>{
    	let goodsInfo = "通过传入的orderInfo获取到商品信息"
        iterator.next(goodsInfo);
    },1000)
}

function * gen(userId){
    let userInfo = yield getUserInfo(userId);
    let orderInfo = yield getOrderInfo(userInfo);
    let goodsInfo = yield getGoodsInfo(orderInfo);
    console.log(goodsInfo);
}
let iterator = gen(11);
iterator.next();

Promise

ES6 引入的异步编程结局方案，Promise是一个构造函数，用来封装异步操作，且可获取成功与失败的结果，

Promise接收一个函数作为参数，其中函数的参数分为resolve和reject 两个函数来分别处理成功与失败两种状态，函数内部进行一系列异步操作，在最后调用resolve(data) 和 reject(data)分别赋予Promise实例成功与失败两种状态:

调用resolve(data)，返回一个状态为成功(fulfilled)的Promise对象，可以使用then()进行进一步处理
调用reject(data)，返回一个失败(rejected)的Promise对象，如果没有使用then()进行进一步失败处理，浏览器就会抛出异常，值为data，

在执行以上操作后可以调用:

then()方法
- then()方法接收两个函数：function(value){...} function(reason){...}
  - 当p在初始化时的异步操作调用了reslove()之后，执行then()方法中的第一个回调函数function(value){...} 代码，value为reslove()的参数
  - 当p在初始化时的异步操作调用了reject()之后，执行then()方法中的第二个回调函数function(reason){...}代码，reason为 reject()的参数
- promise.then()方法在调用后，返回一个Promise对象。
- 当在promise.then()的成功/失败的回调中使用return返回一个非Promise对象的值时，promise.then()仍然返回一个状态为成功(fulfilled)的Promise对象，其中带有promise状态以及返回的值，其中Object类型会被转换成 Object字符串
- 当在promise.then()中使用return返回了一个Promise对象时，此时promise.then()返回的promise对象的成功与否由返回的promise对象状态决定
- 当在promise.then()中使用 throw new Error() 或者thow "error"抛出错误，则promise.then()返回的Promise对象为失败状态，且promise失败值为 thow抛出值

案例1：使用Promise处理文件异步读取

const fs = require('fs')
const promise = new Promise((resolve,reject) =>{
    fs.readFile('./test.txt',(err,data)=>{
        if(err){
            reject(err)
        }else{
            resolve(data)
        }
    })
})
promise.then(value => {
    console.log(value.toString());
},reason =>{
    console.log(reason)
})

案例2：使用Promise 发送AJAX请求：

const promise = new Promise((resolve,reject) => {
	const xhr = new XmlHttpRequest();
    xhr.open("get","");
    xhr.send();
    xhr.onreadstatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                console.log(xhr.response);
                resolove(xhr.response);
            }
            else{
                console.log(xhr.status)
                reject(xhr.status)
            }
        }
    }
})
promise.then(value => {
    console.log(value.toString());
},reason => {
    console.log(reason)
})

state往往就是一个实体固有的状态。
status则偏向于运行时状态。

Promise.then()方法的链式调用：

在链式调用的then()方法中，在回调函数中的返回值会作为下一个then()方法中回调的value或reason值，只要在then()的所有回调中使用 return返回了非Promise对象则状态均为成功reslove

在then()所有回调函数内使用throw抛出字符串、错误对象 new Error()，则返回的Promise对象状态均为失败 reject

 promise.then(value => {}, reason => {})
   .then(value => {}, reason => {})
 	   .then(value => {}, reason => {})
//...

Promise.then()模拟场景：

  const p = new Promise(function(reslove, reject) {
      setTimeout(() => {
          let userId = 2;
          if (userId) {
              console.log("请求到了userId");
              reslove(userId)
          } else {
              console.log("没有请求到userId");
              reject();
          }
  
      }, 1000)
  })
  const a = p.then(value => {
      return new Promise(function(reslove, reject) {
          setTimeout(() => {
              console.log("请求到了用户信息");
              reslove(value + "用户信息")
          }, 1000)
      })
  }, reason => {
      throw '没有请求到用户的用户信息'
  })
  .then(value => {
      return new Promise(function(reslove, reject) {
          setTimeout(() => {
              console.log("请求到了订单信息");
              reslove("订单信息")
          }, 1000)
      })
  }, reason => {
      throw '没有请求到的订单信息'
  })
  console.log(p);
console.log(a);

catch()方法：catch()的功能与then()第二个回调函数类似，在Promise对象的状态为失败时调用，一般用于获取

Set

集合内部的值不会重复，
添加和删除的方法分别为add() delete()
使用has()方法检测目标是否存在于集合中，返回t/f
使用clear()方法清除集合所有元素
集合元素个数量使用size()方法得到

应用案例：

数组去重：

1 2	let arr = [11,22,33,44,11,22,33] let result = [...new Set(arr)]

求两数组交集

let arr = [1,2,3,4,5,6];
let arr2 = [3,4,5];
let arrSet = new Set(arr2);
let result = [...new Set(arr)].filter(item => arrSet.has(item))

求两数组的并集

let arr = [1, 2, 3, 4, 5, 6];
let arr2 = [3, 4, 5, 6, 7, 8];
let arrSet = new Set(arr);
[...new Set(arr2)].forEach(item => {
    if (!arrSet.has(item)) {
        arrSet.add(item)
    }
})
console.log(arrSet);
//或者
let union = [...new Set([...arr, ...arr2])];

Map

ES6 引入的新数据结构，类似于对象，结构为键值对集合，但是key的类型不一定是字符串，可以是任何类型的值，map同样实现了迭代器接口，可以使用[...]，和for of

Map元素个数量使用size()方法得到
new Map()可以接收一个键值对形式的数组：一般以一个key和一个value组成的基本数组，返回一个Map对象
使用set(key,value) 增加一个元素，并返回更新后的map实例
使用delete(key) 删除一个键值对，并返回布尔值，找到key并删除value返回true，没有找到key返回false
使用get(key)返回key的value值
使用has()检测map是否包含某个元素，返回布尔值
使用clear() 清空map ,返回undefined

ES6 数值方法扩展

使用Number.EPSILON 来解决js计算精度问题：

1
2
3

function equal(a,b){
    return Math.abs(a-b) < Number.EPSILON ? true:false
}

检测数值是否为NaN：Number.isNaN()，返回t/f
将小数部分抹去：Number.trunc(floatNumber)，返回值

ES7 新特性

Array.prototype.includes(value)方法，判断value是否存在于数组中，返回布尔值
使用** 进行幂运算：2 ** 2 等同于 Math.pow(2,2)

ES8 新特性

async 函数
- async 函数为将await 之后的表达式以及await以下的所有语句都放入异步任务的同步函数
- 使用async 为前缀声明的函数的返回值为Promise对象
- 返回的Primise对象的状态由async 函数执行的返回值决定，与promise.then()回调函数的return原理相同：如果成功，返回成功promise，并将值放入value中；返回失败promise，则将失败值放入value中
await 表达式
- await 必须写在async函数内部
- await 等待右侧promise产生之后，返回值的过程属于异步微任务，await必须等待到右侧的promise的成功与失败的状态后，线程才会继续执行下面的代码
- await 右侧表达式一般为Promise 对象
- await 右侧的Promise对象如果状态为成功，则返回其成功的值PromiseValue
await 右侧的Promise对象如果状态为失败，浏览器就会抛出异常，无返回值，需要使用try catch捕获 ，catch的参数e为Promise对象失败的值PromiseValue

将 async 函数与 await函数相结合使用，将**await 等待 promise 之后并返回值** 这过程，放入异步微任务，而在await 之后的代码语句，需要等待await 产生结果后，才能继续执行，且是在在微任务中执行，换句话说，遇到await时就把await之后的代码放入异步微任务，然后再继续向下执行，

案例1：读取文件，使用async函数接收文件信息

function fileReader(){
    return new Promise((resolve,reject)=>{
        fs.readFile('文件路径',(err,data)=>{
            if(err) => reject(err);
            resolve(data);
        })
    })
}
async function dataReceiver(){
    let fileData = await fileReader();
    return fileData;
}

案例2：使用async 与 await 发送AJAX请求并处理消息，这也是axios的实现原理之一

function AjaxRequest(requestUrl){
    return new Promise((resolve,reject)=>{
        let xhr = new XmlHttpRequest();
        xhr.open('get',requestUrl);
        xhr.send();
        xhr.onreadystatechange = function (){
            if(xhr.readyState === 4){
            	if(xhr.status >= 200 && xhr.status < 300){
                	reslove(xhr.response)
                }else{
                    reject(xhr.status)
                }
            }
        }
    })
}
async function getMessage(requestUrl){
    let requestData;
    try{
    	requestData = await AjaxRequest(requestUrl); 
        console.log(requestData) //此时await为同步代码，会产生阻塞，当await获得到promise值后才能执行到这一步
        return requestData;
    }
    catch(e) {
	    console.log(e);
        return e;	
    }
}

案例3：在React组件生命周期中使用async函数和await 处理请求

1
2
3

async function componentDidMount(){
    let data = await axios.get('url');
}

ES8 对象扩展

Object.keys(object) 获取对象所有的键，返回一个数组
Object.values(object) 获取对象所有的键值，返回一个数组
Object.values(object) 获取对象的所有键值，以对象的形式生成一个数组，可以通过数组创建map对象
获得对象属性的描述对象 Object.getOwnPropertyDescriptions(object)，返回一个对象，描述object内部所有属性的选项设置(可读、可写、可枚举等)

ES5 补充：Object.defineProperty()，对对象属性进行监听，注意不能在get/set中直接调用被修改的属性值，否则造成死循环

Object.defineProperty(obj,propertyName,{
    //为此当前对象属性设置函数，例如set、get
    //钩子分别在获取、设置属性值时调用
    get(){}
    set(){}
})