ES6/7/8新特性、CSS3新特性、HTML5新特性

前端小小酥
368 阅读1分钟

ES6 新特性

es6.ruanyifeng.com/

  1. let 和 const 声明变量
  2. 变量的解构赋值
  3. 模板字符串 ``
  4. 简化对象写法
  5. 箭头函数 ()=>{}
  6. 函数默认值
  7. rest参数 function(...args){}
  8. 扩展运算符 ...
  9. String新增方法 includes(), startsWith(), endsWith(), repeat()
  10. Number新增方法 Number.isFinite(), Number.isNaN(), Number.parseInt(), Number.parseFloat(),Number.isInteger() Number.isSafeInteger()
  11. Math新增方法 Math.trunc(), Math.sign() Math.sqrt() Math.cbrt() Math.hypot()
  12. 对象新增方法 Object.is()，Object.assign()，Object.setPrototypeOf()，Object.getPrototypeOf()
  13. 数组新增方法 Array.from() Array.of() find() findIndex() fill() copyWidthin()
  14. Symbol 独一无二的值
  15. Set 和 Map 数据结构
  16. Proxy
  17. Promise 对象
  18. Iterator 和 for...of 循环
  19. Generator
  20. class
  21. module: import和export

ES7 新特性

  1. 数组includes
  2. 指数操作符 ** 实现幂运算
  3. Math.pow()

ES8 新特性

  1. async和await
  2. 对象新增方法 Object.values()，Object.entries()，Object.getOwnPropertyDescriptors()
  3. 字符串新增方法 padStart(), padEnd()
  4. 尾逗号 Trailing commas

CSS3新特性

  1. 新增选择器

属性选择器

  • E[att^=value]
  • E[att$=value]
  • E[att*=value]

伪类选择器

  • :root
  • :not
  • :only-child
  • :first-child和：last-child
  • :nth-child(n)和：nth-last-child(n)
  • :nth-of-type(n) 和:nth-last-of-type(n)
  • :target
  • :empty
  1. 边框 border-radius border-shadow border-image
  2. 文字字体: text-overflow word-wrap @font-face text-shadow font-stretch
  3. object-fit object-position
  4. 多列布局 columns
  5. 媒体查询 @media
  6. 弹性布局 flex
  7. 背景 background-image background-origin background-clip
  8. 渐变 linear-gradient() radial-gradient()
  9. 过渡transition
  10. 变换transform: rotate旋转 translate平移 scale缩放
  11. 动画animation

HTML5新特性

  1. 画布 canvas、svg
  2. 拖拽释放(Drag and drop) API
  3. audio、video音频和视频
  4. 本地存储localStorage、会话存储sessionStorage
  5. 语义化标签，比如header头部、main主体、article章节、aside侧边栏、figure图形广告、footer底部、nav导航、section段落
  6. 表单控件，color、date、time、datatime、week、month、email、url、search、number、tel、range
  7. 新的技术 webworker, websocket, 地理(Geolocation) API
avatar
文章
阅读
粉丝