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

版本迭代

• 解决原有语法上的一些问题和不足
• 对原有语法进行增强
• 全新的对象，方法和功能
• 全新的数据类型，数据结构

let与块级作用域

文章入口

解构

文章入口

字符串扩展

ES2015为字符串添加了Iterator。所以字符串可以for...of..遍历
模板字符串

• 传统字符串不支持换行 \n

  const str = `hello es2015
  
  this 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

文章入口