随着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
写得匆忙，不免有些遗漏，欢迎各位及时补充，感谢阅读！
