这些新特性你确定不用？

随着ES6的横空出世，许多新特性的产生也让我们写代码方便了不少，以前好几行代码实现的功能现在可能一行就可以了，不过呢，效率虽然是提升了，但是升级的速度也是有点快啊，现在已经到ES12了吧，很多人表示“学不动了”，然后就是对这些新特性只是了解了一下，并没有实际使用。接下来我就带大家体验一下新特性的便捷，相信看完你就迫不及待了。

 1、拼接字符串

以前

const name = '张三';
const score = 59;
const result = '';
if(score > 60){
  result = `${name}的考试成绩及格`;  // 或者 name + '的考试成绩及格'
}else{
  result = `${name}的考试成绩不及格`; 
}

现在（模板字符串）

const name = '张三';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

 2、对象取值

以前

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
const f = obj.a + obj.d;
const g = obj.c + obj.e;

现在（解构赋值）

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

3、对象或数组的合并

以前

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

const obj1 = {
  a:1,
}
const obj1 = {
  b:1,
}
const obj = Object.assgin({}, obj1, obj2);//{a:1,b:1}

现在（扩展运算符）

const c = [...new Set([...a,...b])];//[1,2,3,5,6]
const obj = {...obj1,...obj2};//{a:1,b:1}

4、获取对象属性值

以前

const name = obj && obj.name;

现在（可选链操作符）

const name = obj?.name;

5、判断输入框非空

以前

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

现在（空值合并运算符）

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

 6、if条件判断

以前

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

现在（includes）

const condition = [1,2,3,4];

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

7、数组过滤

以前

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

现在（find，主要是性能优化，因为find只要找到符合条件的项，就不会继续遍历数组）

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

 8、类

以前

function Tree(size, leaves) {
  this.size = size || 10;
  this.leaves = leaves || {spring: 'green', summer: 'green', fall: 'orange', winter: null};
  this.leafColor;
}

Tree.prototype.changeSeason = function(season) {
  this.leafColor = this.leaves[season];
  if (season === 'spring') {
    this.size += 1;
  }
}

function Maple (syrupQty, size, leaves) {
  Tree.call(this, size, leaves);
  this.syrupQty = syrupQty || 15;
}

Maple.prototype = Object.create(Tree.prototype);
Maple.prototype.constructor = Maple;

Maple.prototype.changeSeason = function(season) {
  Tree.prototype.changeSeason.call(this, season);
  if (season === 'spring') {
    this.syrupQty += 1;
  }
}

Maple.prototype.gatherSyrup = function() {
  this.syrupQty -= 3;
}

现在（super和extend）

class Tree {
  constructor(size = '10', leaves = {spring: 'green', summer: 'green', fall: 'orange', winter: null}) {
    this.size = size;
    this.leaves = leaves;
    this.leafColor = null;
  }

  changeSeason(season) {
    this.leafColor = this.leaves[season];
    if (season === 'spring') {
      this.size += 1;
    }
  }
}

class Maple extends Tree {
  constructor(syrupQty = 15, size, leaves) {
    super(size, leaves); //super用作函数
    this.syrupQty = syrupQty;
  }

  changeSeason(season) {
    super.changeSeason(season);//super用作对象
    if (season === 'spring') {
      this.syrupQty += 1;
    }
  }

  gatherSyrup() {
    this.syrupQty -= 3;
  }
}

9、字符串替换

以前

const str = '2-4-6-8-10';
const newStr = str.replace(/\-/g, '+');
console.log(newStr); //2+4+6+8+10

现在（replaceAll）

const str = '2-4-6-8-10';
const newStr = str.replaceAll('-', '+');
console.log(newStr); //2+4+6+8+10

写得匆忙，不免有些遗漏，欢迎各位及时补充，感谢阅读！