ECMAScript 6-回顾篇(五)

es6
学习地址：https://babeljs.io/docs/en/learn

es6以及开始在业务中大量使用，会简化我们很多的繁杂代码、增加可读性

默认参数

function test(a = 'world') {
  console.log(`print:hello,${a}`);
}
test();
// print:hello,world

箭头函数

• 更简短的函数并且不绑定this。

箭头函数与普通函数不同之处有：

1. 箭头函数没有 this，它会从自己的作用域链的上一层继承 this（因此无法使用 apply / call / bind 进行绑定 this 值）；
2. 不绑定 arguments，当在箭头函数中调用 aruguments 时同样会向作用域链中查询结果；
3. 不绑定 super 和 new.target；
4. 没有 prototype 属性，即指向 undefined；
5. 无法使用 new 实例化对象，因为普通构造函数通过 new 实例化对象时 this 指向实例对象，而箭头函数没有 this 值，同时 箭头函数也没有 prototype。 ``javascript function test(a = 'world') { console.log(print:hello,${a}`); }

const test = (a = ‘world’) => { console.log(print:hello,${a}); };

<a name="e50ua"></a>
### 新增类，基于原型函数的继承
- [新增Class的使用和理解](https://www.yuque.com/webkubor/blog/bxbc4w)
<a name="rUB8R"></a>
### 加入let块作用域、const静态声明
`const` 用于声明常量，`let` 用于声明变量，他们都是块级作用域<br />cosnt 和let的区别：<br />1、const 用于声明常量，其值一旦被设定不能再被修改，否则会报错。<br />2、值得一提的是：const 声明不允许修改绑定，但允许修改值。这意味着当用 const 声明对象时，其键值对中的value值可被改变的
```javascript
const a = 1;
let b = 1;

模板字符串

let a = 'hello';
let b = 'hello';
console.log('print:' + a + b);
let c = `print:${a}${b}`
// 注意这个不是引号，键盘 esc 下面那个按键

解构赋值

const obj = { key: 'umi', author: 'sorrycc' };
console.log(obj.key);
const { key } = obj;
// 等价于 `const key = obj.key;`
const obj2 = { key };
// 等价于 `const obj2 = { key: key };`;
// 数组也有类似的用法
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo);
// 1

includes

const condition = [1,2,3,4];
if( condition.includes(type) ){
   //...
}

扁平化数组

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。
补充
flat方法不支持IE浏览器。

空值合并运算

if((value??'') !== ''){
  //...
}

模块导入导出

// 从 antd 中导入按钮组件
import { Button } from 'antd';
// 导出一个方法，这样就能在其他文件使用 `import` 导入使用了
const test = (a = 'world') => {
  console.log(`print:hello,${a}`);
};
export default test;

展开扩展符

数组组装

const arr = ['umi'];
const texts = [...arr, 'dva'];
// texts => ['umi', 'dva']

取出赋值

const arr = ['umi', 'dva', 'antd'];
const [umi, ...other] = arr;
// 前面已经提过析构赋值，所以第一项会赋值给 `umi`，剩下的会被组合成一个 `other` 数组
console.log(umi);
// umi
console.log(other);
// (2)['dva', 'antd']

组合新对象

用于组合新的对象，key 相同时，靠后展开的值会覆盖靠前的值：

const obj = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj, ...obj2 };
// obj3 => { a: 1, b: 3, c: 4 }