相信用了这么多年的ES5、很多码民估计已经发现了很多让人头疼的问题、比如块级作用域、以及让人菊花一紧的 this属性等等....... ES6的横空出世、是很多码民的一大福利，深的咱不谈、直接来看几个项目中很常见、且非常方便的几个特性、学会了基本可以解决很多问题。

取值

比如

conso data  = {
a:1,
 b:2,
 c:3
}

一般取值是这样的：

const a = data.a   const b = data.b  const c = data.c

这多捞哇，难道不知道ES6的解构吗？一行就能解决的问题、搞个好几行

ES6解构

const {a,b,c}  = data

还可以为变量名和对象属性名不同的属性创建别名、比如：

const {a:a1} = data
console.log(a1)  //1

这里还是有需要注意的地方、比如说这个对象的属性在没有值的、又没有默认值的时候容易为null 或者undefined、这种情况下就会报错了、这是时候我们给它一个默认值就好了

const {a,b,c,d,e} = data || {};

数组合并

数组合并、一般都是push、或者concat、这种方式的合并都是没有去重的、es6的扩展运算符不仅可以合并、还可以快速的去重

数组
const a ={1,2,3,4}
const b = {5,6,7,8}
const c = [...new Set（[...a,...b]）]  //12345678

对象
const obj1 = {a:1}
const obj2 = {b:1}
const objc = {...obj1,...obj2}  //{a:1,b:1}

if中的条件判断

多个条件的情况、有可能出现这样

if(type ==1||type==2||type==3){
.........
}

如果判断的条件多的话、代码就会很长甚至换行、可读性非常的差

ES6

const type = [1,2,3,4]

if(type.includes(type)){
  ....
}

可选链式操作符

一般的写法

const name = obj && obj.name;

ES6的写法

const name = obj?.name;

非空验证

一般的写法

if(value !== null && value !== undefined && value !== ''){
    //...
}

ES6中新出的空值合并运算符

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

箭头函数

一般的写法（注意普通的写法this的指向和箭头函数的this）

function example(){
  //....
}

ES6的写法（箭头函数里的 this 指向定义位置的 this）

const fn = () => {
  console.log('菜鸟小陈');
}

判断字符串是否以某字符串开头或结尾，返回布尔值

let str = 'boobming';
str.startsWith('boob');
// true
str.endsWith('ming');
// true