ES8

ES8新特性用法体验

温仪

Mar 31, 2018 • 5 min read •view times

1.字符串填充

本特性是在字符串的的头部和尾部添加新的字符串，且返回具有指定长度的字符串。指定长度是必填字段。

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

来个必刷题体验一下~~

'wen'.padStart(2);             // 'wen'
'wen'.padStart(5);             // '  wen'
'wen'.padStart(6, 'bingguo');  // 'binwen'
'wen'.padStart(14,'bingguo');  // 'bingguobingwen'

'wen'.padEnd(2);              // 'wen'
'wen'.padEnd(5);              // 'wen  '
'wen'.padEnd(6, 'bingguo');   // 'wenbin'
'wen'.padEnd(14, 'bingguo');  // 'wenbingguobing'

刷完题，思考一分钟：
只是在字符串的首尾加其他字符串，这种方式是不是不太灵活？以下两种方式在运用上更加随心所欲，灵活变动。

let a = 'wen';
let b = `${a}bingguo`; //'wenbingguo'
let c = `bingguo${a}`; //'bingguowen'
let d = `bing${a}guo`; //'bingwenguo'

var aa = 'wen';
var bb = 'wen'+'bingguo'; //'wenbingguo'

然后又说到这个字符串填充的经典应用场景了，时间格式化：

'9:00'.padStart(5, '0');         //'09:00'
'19:00'.padStart(5, '0');        //'19:00'
'23'.padStart(10, 'YYYY-MM-DD'); //'YYYY-MM-23'
'23'.padStart(10, '2018-03-DD'); //'2018-03-23'

这种格式化时间上午和下午的24小时制还真的方便很多，不需要作是否填0的判断，直接统一加，方便之处用完体验绝佳~~~

2. Object.values和Object.entries函数

ES8新增的这两个方法是对Object.keys()的补充，可以将对象转换成数组，此方法有时在处理后端所给结构的处理非常便捷。

Object.values场景实践

场景一：简单的转数组方法

const obj = { a:{x: 'name'}, b:{y: 1}}; 
Object.values(obj); //[{x: "name"},{y: 1}]

这个场景只能取到一级目录下面的值，多级目录时，对二级及以上的嵌套层，都是按照原来的方式输出，直接来一段：

let obj2 = {
"code":10000,
"data":{
    "list":[{"code":1,"value":"wo"},{"code":2,"value":"he"}],
    "total":100,
    "item":{"price":100,"activity":1}
     }
};
Object.values(obj2);
//数组长度为2，[10000,{"list":[{"code":1,"value":"wo"},{"code":2,"value":"he"}],"total":100,"item":{"price":100,"activity":1}}]

这么看着，这个提取数组就会有点不伦不类了，不过总会有具体的应用场景更好会契合他的特点的，萝卜总会找到坑！！！

场景二：按照key值大小，从小到大在数组中排列

const objNumberical = { 10: '我是第一个', 1: '我是第二个', 3: '我是第三个' };
Object.values(objNumberical);//["我是第二个", "我是第三个", "我是第一个"]

场景三：字符串转数组

Object.values('wenyi'); //["温", "仪"]
Object.values('温仪');   //["w", "e", "n", "y", "i"]

当处理数据类型为string类型，Object.values承担的功能和'wenyi'.split('')转数组方法功能相同。

Object.entries场景实践

此函数最后提取的结果是对象结构转化的数组结构，原对象的键值对都还在，变为[key,value]的形式。

const obj = { a:{x: 'name'}, b:{y: 1}};
Object.entries(obj); //[["a",{"x":"name"}],["b",{"y":1}]]

目前的我，想不出来应该在怎样的场景下去实践，粗粗略过。。。

3.Object.getOwnPropertyDescriptors函数

es8中Object新成员getOwnPropertyDescriptors，注意与ES5的getOwnPropertyDescriptor区分开。新成员是返回指定对象的自身属性，是在对象内定义的，不是继承来的。

const obj = { 
  get name() { return 'wenyi'; },
  set total(c) { return c}
};
Object.getOwnPropertyDescriptor(obj,'name');
// get 描述对象没有入参
//{
//  configurable:true,
//  enumerable:true,
//  get: function name(){}, //the getter function
//  set: undefined
//}

Object.getOwnPropertyDescriptor(obj,'total');
//{
//  configurable:true,
//  enumerable:true,
//  get: undefined,
//  set: function total(c){}, //the setter function
//}

描述符的数据，对装饰器比较重要。装饰器是用来修改类的行为的一个函数。稍后解释！！
getOwnPropertyDescriptors主要是为了解决Object.assign()拷贝get属性和set属性的缺陷问题。来一条示例留个印象！！
Object.assign()缺陷举例：

const obj = { 
  get name() { return 'wenyi'; },
  set total(c) { return c}
};
const copyObj = {};
Object.assign(copyObj, obj); 
Object.getOwnPropertyDescriptor(copyObj, 'total');
//{
//  configurable:true,
//  enumerable:true,
//  value: undefined,//此时obj对象是有对total属性set赋值方法，并没有被拷贝过去
//  writable: true
//}

此时，getOwnPropertyDescriptors结合Object.defineProperties就达到完美正确拷贝！！

const obj = { 
  get name() { return 'wenyi'; },
  set total(c) { return c}
};
const copyObj = {};
Object.defineProperties(copyObj, Object.getOwnPropertyDescriptors(obj)); //更改Object.assign（）方法
Object.getOwnPropertyDescriptor(copyObj, 'total');
//{
//  configurable:true,
//  enumerable:true,
//  get: undefined,
//  set: function total(c){}, //the setter function
//}

4.装饰器函数(Decorator)

装饰器修改类行为，在编译是发生，所以装饰器是在编译阶段运行代码。简单判断：看写法，判断装饰器！！！
想要编译有装饰器的代码，需要安装babel-plugin-transform-decorators-legacy插件，同时配置.babelrc才行。

//decorator是随意取的名称
@decorator
class wenyi {}

//或者
class wenyi {}
wenyi = decorator(wenyi) || wenyi;

简单示例一:此示例写法是eslint严格模式下的格式

//实例添加属性，需要通过目标类的prototype操作，class类是可以直接操作属性的
function testDecorator (...list) {
 return function (target) {
   Object.assign(target.prototype, ...list)
 }
}

const wenyi = {
 handleYuanFang () { console.log('我是添加进来的') }
}

@testDecorator(wenyi)
class AnotherClass {}
let result = new AnotherClass()
result.handleYuanFang()    //'我是添加进来的'

装饰器也可以添加某个功能点，写的方法类似，只是无需在目标类基础上操作，此处不多展开，另行学习之~

5.参数列表尾部逗号

ES8对SyntaxError报错的容错处理：允许函数调用或定义时，参数列表最后一个后面还有逗号而不报语法错误。

function valuePrint(var1, var2, var3,) {
  console.log(var3)
};
valuePrint(1,2,38,);   //38

实践了一下，发现在一般的ES5网页中也并没有发生有逗号报错现象，不知是否是浏览器做了操作处理，如有知道怎么重现报错的步骤和环境，请帮助补充，感激不尽~相互学习，共同进步，共勉！