ECMAScript新特性

从本文你能了解到那些知识

  • JavaScript和ECMAScript的关系
  • let , const与块级作用域
  • 解构
  • 字符串的扩展
  • 数值的扩展
  • 函数的扩展
  • 数组的扩展
  • 对象的扩展
  • Proxy
  • Reflect
  • Promise
  • class类
  • Set,Map
  • Symbol
  • for...of..
  • Iterable接口
  • Generator
JavaScript和ECMAScript的关系 ES也是一门脚本语言,通常看作JavaScript的标准化规范,实际上JavaScript是ECMAScript的扩展语言
ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)
JS在浏览器环境下,JS = WEB + ES
JS在Node环境下 JS = Node + ES
版本迭代
  • 解决原有语法上的一些问题和不足
  • 对原有语法进行增强
  • 全新的对象,方法和功能
  • 全新的数据类型,数据结构
ECMAScript新特性
文章图片

let与块级作用域 文章入口
解构 文章入口
字符串扩展 ES2015为字符串添加了Iterator。所以字符串可以for...of..遍历
模板字符串
  • 传统字符串不支持换行 \n
    const str = `hello es2015this is made in China` console.log(str); //会输出空行const name = "tom" const msg = `hello ${name}` //插值表达式 console.log(msg);

  • 标签模板
    //模板字符串前可以添加标签,是个方法 ["hello world"] const tag = console.log`hello world`

    const n = "mcgee" const bol = true function myTagFnc(arr,n,bol){ //参数为静态内容,插值,插值... console.log(arr,n,bol); //['hey,','is a','.'] 静态内容的分割//标签的作用,对值进行加工 const sex = bol?"man":"woman"// return 123 return arr[0]+n+arr[1]+sex+arr[2] } const result = myTagFnc`hey,${n} is a ${bol}.`console.log(result); //123 || hey,mcgee is a true||hey,mcgee is a man

  • 标签的作用
对插值进行加工。文本的多语言化,翻译成中英文。检查模板字符串内的不安全字符
字符串新增常用方法
  • includes() 表示是否找到了参数字符串
  • startsWith() 表示参数字符串是否在原字符串的头部
  • endsWith() 表示参数字符串是否在原字符串的尾部
  • repeat() 返回一个新字符串,表示将原字符串重复n次
  • padStart(str.length,"用来补全的值"),padEnd() 字符串补全长度 (ES2017)
const msg = 'Mcgee is a man' console.log(msg.startsWith("Mcgee")) //true console.log(msg.endsWith("n")); //true console.log(msg.includes("is")); //true

'na'.repeat(0) // "" 'na'.repeat(2.9) // "nana" 'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError //如果repeat的参数是字符串,则会先转换成数字。 'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"

数值的扩展
  • Number.parseInt()
  • Number.parseFloat()
  • Number.isInteger() 用来判断一个数值是否为整数
  • 2 ** 3 //8 (ES2016)
  • BigInt数据类型 (表示整数)
Number.isInteger(25) // true Number.isInteger(25.0) // true Number.isInteger(25.1) // false Number.isInteger() // false Number.isInteger(null) // false Number.isInteger('15') // false Number.isInteger(true) // false

函数的扩展 文章入口
数组的扩展 文章入口
对象的扩展 文章入口
Proxy,Reflect 文章入口
Class类 文章入口
Set,Map数据结构 文章入口
Symbol类型 文章入口
Iterator,Generator 【ECMAScript新特性】文章入口

    推荐阅读