详解ECMAScript2019/ES10新属性

每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读。

Array.prototype.flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN

简单来说flat这个函数就是按照一定的深度depth将一个深层次嵌套的数组拍扁, 例子:

const nestedArr = [1, 2, [3, 4, [5, 6, [7, [8], 9]]], 10]
console.log(nestedArr.flat())
// [1, 2, 3, 4, [5, 6, [7, [8], 9]], 10]
console.log(nestedArr.flat(2))
// [1, 2, 3, 4, 5, 6, [7, [8], 9], 10]
console.log(nestedArr.flat(3))
// [1, 2, 3, 4, 5, 6, 7, [8], 9, 10]
console.log(nestedArr.flat(4))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(nestedArr.flat(Infinity))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

由上面的例子可以看出flat会按照指定的深度depth将一个数组扁平化,如果需要将数组完全拍扁变成一维数组,则指定depth为无限大,即是Infinity,相反如果不指定深度,其默认值是1。

Array.prototype.flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient. -- MDN

简单来说flatMap等于一个数组先调用完map函数再调用flat函数将其扁平化,扁平化的深度固定为1,先通过一个简单的例子感受一下:

const myArr = [1, 2, 3]
myArr
 .map(n => [n * n]) // [[1], [4], [9]]
 .flat() // [1, 4, 9]

// 用flatMap可以一步到位
myArr.flatMap(n => [n * n]) // [1, 4, 9]

从上面的例子来看flatMap如果只是将flat和map做了一个简单的组合好像可有可无,其实不然,flatMap有个强大的功能是可以在map的时候添加和删除元素,这个无论是map还是filter都没有这个功能。

要想删除某一个元素只需要在mapper函数里面返回一个空的数组[], 而增加元素只需在mapper函数里面返回一个长度大于1的数组,具体可以看下面的例子:

// 假如我们想要删除掉原数组里面所有的负数,同时将单数转换为一个复数和1
const a = [5, 4, -3, 20, 17, -33, -4, 18]
//    |\ \ x  |  | \  x  x  |
//    [4,1, 4,  20, 16,1,     18]
a.flatMap(n =>
 (n < 0) ? []: // 删除负数
 (n % 2 == 0) ? [n] : // 保留复数
         [n - 1, 1] // 单数变为一个复数和1
)
// [4, 1, 4, 20, 20, 16, 1, 18]

Object.fromEntries()

The Object.fromEntries() method transforms a list of key-value pairs into an object. --MDN

fromEntries方法将一个iterable对象返回的一系列键值对(key-value pairs)转换为一个object。先看一个简单的例子理解一下:

// key-value pairs数组
const entriesArr = [['k1', 1], ['k2', 2]]
console.log(Object.fromEntries(entriesArr)
// {k1: 1, k2: 2}

const entriesMap = new Map([
 ['k1', 1],
 ['k2', 2]
]) // {"k1" => 1, "k2" => 2}
console.log(Object.fromEntries(entriesMap))
// {k1: 1, k2: 2}

再来看一个自定义的iterable对象例子深入理解一下:

const iteratorObj = {
 [Symbol.iterator]: function () {
  const entries = [['k1', 1], ['k2', 2]]
  let cursor = 0

  return {
   next() {
    const done = entries.length === cursor

    return {
     value: done ? undefined : entries[cursor++],
     done
    }
   }
  }
 }
}
Object.fromEntries(iteratorObj) // {k1: 1, k2: 2}

这个方法有一个用途就是对object的key进行filter,举个例子:

const studentMap = {
 student1: {grade: 80},
 student2: {grade: 50},
 student3: {grade: 100}
}
const goodStudentMap = Object.fromEntries(
 Object
  .entries(studentMap)
  .filter(([_, meta]) => meta.grade >= 60)
)
console.log(goodStudentMap)
// {student1: {grade: 80}, student3: {grade: 100}}

String.prototype.trimStart

这个方法很简单,就是返回一个将原字符串开头的空格字符去掉的新的字符串,例子:

const greeting = '  Hello world! '
console.log(greeting.trimStart())
// 'Hello world! '

这个方法还有一个别名函数,叫做trimLeft,它们具有一样的功能。

String.prototype.trimEnd

这个方法和trimStart类似,只不过是将原字符串结尾的空格字符去掉,例子:

const greeting = ' Hello world! '
console.log(greeting.trimEnd())
// ' Hello world!'

这个方法也有一个别名函数,叫做trimRight, 它们也具有一样的功能。

Symbol.prototype.description

The read-only description property is a string returning the optional description of Symbol objects. -- MDN

ECMAScript2019给Symbol对象添加了一个可选的description属性,这个属性是个只读属性,看看例子:

console.log(Symbol('desc').description)
// desc
console.log(Symbol.for('desc').description)
// desc

// 一些内置的Symbol也有这个属性
console.log(Symbol.iterator.description)
// Symbol.iterator

// 如果初始化时没有带description,这个属性会返回一个undefined,因为这样才说这个属性是可选的
console.log(Symbol().description)
// undefined

// 这个属性是只读的,不能被设置
Symbol.iterator.description = 'mess it'
console.log(Symbol.iterator.description)
// Symbol.iterator

这个新的属性只要是为了方便开发者调试,不能通过比较两个Symbol对象的description来确定这两个Symbol是不是同一个Symbol:

var s1 = Symbol("desc")
var s2 = Symbol("desc")
console.log(s1.description === s2.description)
// true
console.log(s1 === s2)
// false

try catch optional binding

ECMAScript2019之后,你写try...catch时如果没必要时可以不用声明error:

// ECMAScript2019之前,你一定要在catch里面声明error,否则会报错
try {
 ...
} catch (error) {

}
// 可是有时候,你确实用不到这个error对象,于是你会写这样的代码
try {
 ...
} catch (_) {
 ...
}

// ECMAScript2019后,你可以直接这样写了
try {
 ...
} catch {
 ...
}

虽然这个新属性可以让你省略掉error,可是我觉得开发者应该避免使用这个属性,因为在我看来所有的错误都应该被处理,至少应该被console.error出来,否则可能会有一些潜在的bug,举个例子:

let testJSONObj
try {
 testJSONObj = JSON.prase(testStr)
} catch {
 testJSONObj = {}
}
console.log(testJSONObj)

以上代码中无论testStr是不是一个合法的JSON字符串,testJSONObj永远都是一个空对象,因为JSON.parse函数名写错了,而你又忽略了错误处理,所以你永远不会知道这个typo。

稳定的排序 Array.prototype.sort

ECMAScript2019后Array.sort一定是个稳定的排序。什么是稳定排序?所谓的稳定排序就是:假如没排序之前有两个相同数值的元素a[i]和a[j],而且i在j前面,即i < j,经过排序后元素a[i]依然排在a[j]元素的前面,也就是说稳定的排序不会改变原来数组里面相同数值的元素的先后关系。看个例子:

var users = [
 {name: 'Sean', rating: 14},
 {name: 'Ken', rating: 14},
 {name: 'Jeremy', rating: 13}
]
users.sort((a, b) => a.rating - b.rating)
// 非稳定的排序结果可能是
// [
//  {name: 'Jeremy', rating: 13},
//  {name: 'Ken', rating: 14},
//  {name: 'Sean', rating: 14}
// ]
// 虽然Sean和Ken具有同样的rating,可是非稳定的排序不能保证他们两个的顺序在排序后保持不变

// ECMAScript2019后,Array.sort将是一个稳定的排序,也就是说它可以保证Sean和Ken两个人的顺序在排序后不变
// [
//  {name: 'Jeremy', rating: 13},
//  {name: 'Sean', rating: 14},
//  {name: 'Ken', rating: 14}
// ]

改进Function.prototype.toString()

ECMAScript2019之前,调用function的toString方法会将方法体里面的空格字符省略掉,例如:

function hello() {
 console.log('hello word')
}

console.log(hello.toString())
//'function hello() {\nconsole.log('hello word')\n}'

ECMAScript2019之后,要求一定要返回函数源代码(保留空格字符)或者一个标准的占位符例如native code,所以ECMAScript2019之后,以上的输出会变为:

console.log(hello.toString())
//"function hello() {
// console.log('hello word')
//}"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 浅谈目前可以使用ES10的5个新特性

    ECMAScript 2015,也称为ES6,是一个花了6年时间完成的主要版本.从那时起,负责ECMAScript标准开发的技术委员会39 (TC39)每年都会发布该标准的新版本.这个年度发布周期简化了这个过程,并使新特性快速可用,JavaScript社区对此表示欢迎. 今年,ECMAScript 2019(简称ES2019)将会发布. 新功能包括Object.fromEntries(),trimStart(),trimEnd(),flat(),flatMap(),symbol对象的descri

  • 20多个小事例带你重温ES10新特性(小结)

    ES10 虽然没有像 ES6 那么多新特性,但 ES10 仍然有一些有用的特性.文本通过简单示例来介绍了 ES10 新出来的特性.通过这种方式,咱们就可以快速理解,而不需要看太多的官方解释. ES10 新特性主要如下: 数组方法:flat和flatMap Object.fromEntries 字符串方法:trimStart 和 trimEnd Symbol 的 description 属性 try { } catch {} // catch 的参数可以省略了 JSON ⊂ ECMAScript

  • 迅速了解一下ES10中Object.fromEntries的用法使用

    Object.fromEntries 方法就是 entries 的逆操作,作用是将一个键值对数组转化为一个对象 同样的该方法也已经成为 ES10 中 stage4 提案: Object.entries 在介绍 fromEntries 之前,回顾一下 entries 的用法.这个方法返回的是对象自身的.可枚举的属性组成的数组: const obj = { a: '1', b: 2 } Object.entries(obj) 也可以通过 new Map 构造函数将对象转为 Map: new Map(

  • ES10 特性的完整指南小结

    本篇文章主要介绍了ES10 特性的完整指南,分享给大家,具体如下: ES10 还只是一个草案.但是除了 Object.fromEntries 之外,Chrome 的大多数功能都已经实现了,为什么不早点开始探索呢?当所有浏览器都开始支持它时,你将走在前面,这只是时间问题. 在新的语言特性方面,ES10 不如 ES6 重要,但它确实添加了一些有趣的特性(其中一些功能目前还无法在浏览器中工作: 2019/02/21) 在 ES6 中,箭头函数无疑是最受欢迎的新特性,在 ES10 中会是什么呢? Big

  • ES10的13个新特性示例(小结)

    介绍 ES10是与2019年相对应的ECMAScript版本.这个版本中的新功能没有ES6(2015)中的那么多.但是,也不乏一些有用的功能. 本文在简单的代码示例中介绍了ES10提供的功能.这样,您无需复杂的解释即可快速了解新功能. 当然,需要具备JavaScript的基础知识才能完全理解所介绍的新功能. ES2019中的JavaScript新功能包括: Array#{flat,flatMap} Object.fromEntries String#{trimStart,trimEnd} Sym

  • 详解ECMAScript2019/ES10新属性

    每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读. Array.prototype.flat() The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN 简单来说flat

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • 详解Hibernate cascade级联属性的CascadeType的用法

    详解Hibernate cascade级联属性的CascadeType的用法 cascade(级联) 级联在编写触发器时经常用到,触发器的作用是当 主控表信息改变时,用来保证其关联表中数据同步更新.若对触发器来修改或删除关联表相记录,必须要删除对应的关联表信息,否则,会存有脏数据.所以,适当的做法是,删除主表的同时,关联表的信息也要同时删除,在hibernate中,只需设置cascade属性值即可. cascade表示级联操作,在hibernate配置注解@OneToOne,@OneToMany

  • C#动态对象(dynamic)详解(实现方法和属性的动态)

    C#的动态对象的属性实现比较简单,如果要实现动态语言那种动态方法就比较困难,因为对于dynamic对象,扩展方法,匿名方法都是不能用直接的,这里还是利用对象和委托来模拟这种动态方法的实现,看起来有点javascript的对象味道: 1) 定义一个委托,参数个数可变,参数都是object类型:这里的委托多有个dynamic参数,代表调用这个委托的动态对象本身. public delegate object MyDelegate(dynamic Sender, params object[] PMs

  • 详解Vue之计算属性

    模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护 什么是计算属性 在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读,比如 <div> {{text.split(',').reverse().join(',')}} </div>. 这里表达式包含三个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性,上例可以用计算属性进行改写: <div id="Calculat

  • 详解MySQL8的新特性ROLE

    [MySQL的ROLE解决了什么问题] 假设你是一个职业素养良好的DBA比较同时又比较注重权限管理的话:可能遇到过这样的问题,数据库中有多个开发人员的账号:有一天要建 一个新的schema,如果你希望之前所有的账号都能操作这个schema下的表的话,在mysql-8.0之前你要对第一个账号都单独的赋一次权. mysql-8.0.x所权限抽象了出来用ROLE来表示,当你为ROLE增加新的权限的时候,与这个ROLE关联的所有用户的权限也就一并变化了:针对 上面提到的场景在mysql-8.0.x下只要

  • 详解Vite的新体验

    什么是Vite?(是前端新玩具) Vite是一个web开发构建工具,它通过本机 ES 模块导入在开发过程中更新代码,达到快速更新的目的. 特点 超快的冷服务器启动 即时的模块更新 真正的按需编译 更小的打包体积 开始使用 Vue用户注意:Vite当前仅适用于Vue3.x.这也意味着您不能使用尚未与Vue 3兼容的库. 安装 npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令,就意味着你的vue3

  • 详解Vue进阶构造属性

    1.Directive 自定义指令 在 Vue 框架下的代码中,很少用到原生 DOM 操作,那是因为在 Vue 中将原生 DOM 操作都封装成了指令,例如我们前面见到的 <div v-text="xxx"></div> 指令,其实其内部操作就是: div.innerText = xxx; //当然这里的 div 是获取得来的 DOM 元素 Vue 将原生 DOM 操作封装成指令,那个元素想使用该指令,直接在 HTML 模板中的元素标签中当作属性使用就行,简介方便

  • 详解ES9的新特性之异步遍历Async iteration

    异步遍历 在讲解异步遍历之前,我们先回想一下ES6中的同步遍历. 根据ES6的定义,iteration主要由三部分组成: Iterable 先看下Iterable的定义: interface Iterable { [Symbol.iterator]() : Iterator; } Iterable表示这个对象里面有可遍历的数据,并且需要实现一个可以生成Iterator的工厂方法. Iterator interface Iterator { next() : IteratorResult; } 可

  • iOS中详解Block作为property属性实现页面之间传值

    我们可以把Block当做Objective-C的匿名函数.Block允许开发者在两个对象之间将任意的语句当做数据进行传递,往往这要比引用定义在别处的函数直观.另外,block的实现具有封闭性(closure),而又能够很容易获取上下文的相关状态信息.定义Block变量,就相当于定义了一个函数.但是区别也很明显,因为函数肯定是在-viewDidLoad方法外面定义,而Block变量定义在了viewDidLoad方法内部.当然,我们也可以把Block定义在-viewDidLoad方法外部,例如上面的

随机推荐