前端基础随记| 青训营笔记

74 阅读2分钟

ECMAScript6

为什么要学习ES6
  • ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实 现不完善等等
  • 为了后面vue、尤其是react框架做好了准备
  • 目前大部分公司的项目都在使用es6

ES6新特性

  • let和const命令
  • es6的模板字符串
  • 增强的函数
  • 扩展的宇符串、对象、数组功能
  • 解构赋值
  • Symbol
  • Map和Set
  • 迭代器和生成器
  • Promise对象
  • Proxy对象
  • async的用法
  • 类class
  • 模块化实现

强大的babel

  • 被称为下一代的Javascript编译器。可以将es6的代码转换成es5的代码,从而让浏览器获得支持。
  • 这个课程我们只需要知道前端工具babel这个工具的作用,在这里不做过多的赘述

参考文献

  • ES6阮一峰教程:es6.ruanyifeng.com
  • MDN教程:https:/ /developer.mozilla.org/zh-CN/docs /web/JavaScritp

let和const

1.let声明变量没有变量提升

2.let是一个块作用域,在别的地方打印都报错。

3.let不能重复声明,没有覆盖性。

注意:const声明常量一旦被声明无法修改。
const可以声明对象,然后这个对象里面的常量可以通过一定的方法被修改,但不能直接修改对象。
const不会污染全局。
建议:默认情况下使用const,而只在需要修改变量值的情况下使用let。

模版字符串(方便)

模板字符串:使用tab键上面的反引号,插入变量时使用${变量名}。

函数之默认值,剩余参数

es6解决了以上的不方便,具体用的是剩余参数。

剩余参数:由三个点…和一个紧跟着的具名参数指定。 例如:...keys,解决了arguments的问题。

扩展运算符

剩余运算符:把多个独立的合并到一个数组中。
扩展运算符:将一个数组分割,并将各个项作为分离的参数传给函数。
// const maxNum = Math. max (20, 30);
// console. Log (maxNum);

es6 箭头函数 箭头函数this指向和注意事项️

箭头函数没有this指向,箭头函数内部this值只能通过查找作用域链,一旦使用箭头函数当前就不存在作用域。

️1.使用箭头函数,函数内部没有arguments(参数)。
2.箭头函数不能使用new关键字来实例化对象。
3.箭头函数不是一个对象。

解构赋值

解构赋值是对赋值运算符的一种扩展。针对数组和对象进行操作。
优点:代码书写上简单易读。