1、变量声明const和let
es6之前,变量声明使用var关键字;无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升
es6中通常使用const和let来声明变量,let表示变量、const表示常量。let和const都是块级作用域。
【块级作用域:在一个函数内部,在一个代码块内部;说白了{}大括号内的代码块即为const和let的作用域】
let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。(如下代码)
- function aa() {
- if(bool) {
- let test = 'hello man'
- } else {
- //test 在此处访问不到
- console.log(test)
- }
- }
const定义的是常量,也就是说,一旦常量被定义赋值,就不能再改变。
- const name = 'lux'
- name = 'joe' //再次赋值会报错
eg:依次输出0到9
- // ES5告诉我们可以利用闭包解决这个问题
- var funcs = []
- for (var i = 0; i < 10; i++) {
- func.push((function(value) {
- return function() {
- console.log(value)
- }
- }(i)))
- }
- // es6
- for (let i = 0; i < 10; i++) {
- func.push(function() {
- console.log(i)
- })
- }
2、模板字符串
第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
- //es5
- var name = 'lux'
- console.log('hello' + name)
- //es6
- const name = 'lux'
- console.log(`hello ${name}`) //hello lux
第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
- // es5
- var msg = "Hi \
- man!
- "
- // es6
- const template = `<div>
- <span>hello world</span>
- </div>`
es6提供的字符串方法
- // 1.includes:判断是否包含然后直接返回布尔值
- let str = 'hahay'
- console.log(str.includes('y')) // true
- // 2.repeat: 获取字符串重复n次
- let s = 'he'
- console.log(s.repeat(3)) // 'hehehe'
- //如果你带入小数, Math.floor(num) 来处理
3、函数
函数默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。
- function action(num = 200) {
- console.log(num)
- }
- action() //200
- action(300) //300
箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的 this 关键字
- //例如:
- [1,2,3].map( x => x + 1 )
- //等同于:
- [1,2,3].map((function(x){
- return x + 1
- }).bind(this))
注意:当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{};
- var people = name => 'hello' + name
- //参数name就没有括号
- var people = (name, age) => {
- const fullName = 'h' + name
- return fullName
- }
- //如果缺少()或者{}就会报错
4、扩展的对象功能
对象初始化简写
es5:
- function people(name, age) {
- return {
- name: name,
- age: age
- };
- }
es6:键值对重名可以这样简写
- function people(name, age) {
- return {
- name,
- age
- };
- }
为对象添加方法
- //es5为对象添加方法
- const people = {
- name: 'lux',
- getName: function() {
- console.log(this.name)
- }
- }
- //es6为对象添加方法
- const people = {
- name: 'lux',
- getName () {
- console.log(this.name)
- }
- }
es6中提供了object.assign()方法来实现浅复制,object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象,第一参数即为目标对象,在实际开发中,我们为了不改变源对象,一般会把目标对象传为{}
- const obj = Object.assign({}, objA, objB)
5、更方便的数据访问——解构
ES5我们提取对象中的信息形式如下:
- const people = {
- name: 'lux',
- age: 20
- }
- const name = people.name
- const age = people.age
- console.log(name + ' --- ' + age)
es6中我们可以这样提取:
- //对象
- const people = {
- name: 'lux',
- age: 20
- }
- const { name, age } = people
- console.log(`${name} --- ${age}`)
- //数组
- const color = ['red', 'blue']
- const [first, second] = color
- console.log(first) //'red'
- console.log(second) //'blue'