ECMAScript 2023新特性快速解读

前言

ECMAScript 2023的新特性已经出现了有一段时间了, 现在来看看都有什么新特性

Object.groupBy

这个api主要的应用场景是根据数组中对象的字段进行分类, 假设有如下一组数据, 我们想根据score字段进行分类, 60以下为低级low, 60～89为中级medium, 90分及以上为高级high

const list = [
  { name: '张三', type: 'pupil' ,score: 40 },
  { name: '李四', type: 'junior',score: 60 },
  { name: '王五', type: 'senior',score: 73 },
  { name: '赵六', type: 'junior',score: 85 },
  { name: '鬼脚七', type: 'pupil' ,score: 94 },
]

要是以前的话, 代码是这样的

const groupByResult = list.reduce(
        (acc, cur) => {
          if (cur.score >= 90) {
            return { ...acc, high: [...acc.high, cur] }
          } else if (cur.score >= 60) {
            return { ...acc, medium: [...acc.medium, cur] }
          } else {
            return { ...acc, low: [...acc.low, cur] }
          }
        },
        { low: [], medium: [], high: [] }
)


// execute
{  
    "low":[  
        {  
          "name":"张三",  
          "type": "pupil",
          "score":40  
        }  
    ],  
    "medium":[  
        {  
          "name":"李四", 
          "type":"junior",
          "score":60  
        },  
        {  
          "name":"王五", 
          "type":"senior",
          "score":73  
        },  
        {  
          "name":"赵六", 
          "type":"junior",
          "score":85  
        }  
    ],  
    "high":[  
        {  
          "name":"鬼脚七",  
          "type": "pupil",
          "score":94  
        }  
    ]  
}

而groupBy可以这么写

function callback({ score }) {
  if(score >= 90) {
    return 'high'
  } else if (score >= 60){
    return 'medium'
  } else {
    return 'low'
  }
}

const result = Object.groupBy(list, callback);

感觉差不多, 但假如说是以type字段分类, Object.groupBy只需要这么写就可以了

const result = Object.groupBy(list, ({ type }) => type);

toSpliced()/toSorted()/toReversed()

显而易见, 这三个都是增强对应Array对象上原有的splice/sort/reverse方法, 这三个方法都是在原有数组对象上进行修改数据, 并不会返回处理完新的数据(splice会返回包含删除元素的数组, 可读性不强), 这样编程中很容易出问题, 比如有个数组, 我想在这个基础上衍生出一个从排序小到大的数组，一个数据反转的数组

let arr = [9, 1, 6, 4, 5, 3, 7]

// error
const sort1 = arr.sort((a, b) => a - b)  // [1, 3, 4, 5, 6, 7, 9]
const reverse1 = arr.reverse()           // [9, 7, 6, 5, 4, 3, 1]

// right
const sort1 = JSON.parse(JSON.stringify(arr)).sort((a, b) => a - b) 
const reverse1 = JSON.parse(JSON.stringify(arr)).reverse()

错误的代码就是修改了原对象的数据，所以操作过一次后会影响后续的所有操作, 所以只能在额外生成新的数组对象进行操作, 新的这三个Array对象方法就是为了解决这问题,

const splicedNumbers = arr.toSpliced(1, 1);  // [9, 6, 4, 5, 3, 7]
const sortedNumbers = arr.toSorted();        // [1, 3, 4, 5, 6, 7, 9]
const reversedNumbers = arr.toReversed();    // [7, 3, 5, 4, 6, 1, 9]

所有结果不互相影响且返回处理后的新的数组对象

findLast() and findLastIndex()

看到这两个是不是一下子想起了Array.find()和Array.findIndex()，其实看字面意思就知道了, Array.findLast()就是匹配符合条件的最后一项, Array.findLastIndex()则就是 返回符合条件的最后一条数据的索引值，没找到就-1