ES6和this关键字

ES6

  • 变量定义:

let

const

使用方式跟var是一样的。

跟var的区别:

  1. 没有预解析
  2. 不能重复定义
  3. 会自带块级作用域 - 定义在全局的变量不在window中,有大括号的时候会限制在大括号中
  4. const定义就必须赋值
  5. const的值不允许修改
  • 模板字符串:

使用反引号定义字符串。

跟单引号双引号字符串相比的好处:

  1. 分多行定义一个字符串,在控制台多行显示
  2. 在模板字符串中可以直接解析变量,省略拼接
  • 箭头函数:

语法:

() => {} // 简化匿名函数

特点:

  1. 当只有一个形参的时候,可以省略小括号
  2. 当大括号中只有一行代码的时候,可以省略大括号,这行代码中如果有return,就必须省略return
  • 形参可以直接赋值

    带有默认值的形参,这个形参就必须放在所有形参的最后。这个形参在调用函数的时候可以传递实参,也可以不传递。

  • 解构赋值

    快速的批量的将对象或数组中的数据赋值给变量。

    对象:

    var {属性名, 属性名} = 对象
    var {属性名: 变量, 属性名: 变量} = 对象
    var {属性名: {属性名: 变量}} = 对象

    数组:

    var [变量, 变量] = 数组
    var [变量, [变量, 变量]] = 数组

    数组解构可以实现一行代码交换两个变量的值:

    var [a, b] = [b, a]
  • 对象的简写形式

    当对象的属性名和值所使用的变量同名,就可以简写。

    var name = '张三'
    var age = 12
    var obj = {
        name: name,
        age: age
    }
    // 简写成
    var obj = {
        name,
        age
    }

    方法的简写:

    var obj = {
        eat: function() {}
    }
    // 简写为:
    var obj = {
        eat() {}
    }
  • map数据

    是一个属性可以是任意类型的对象。

    var obj = {name: '张三'}
    var map = new Map([[obj, '对象'], ['age': 12]])
  • set数据

    是一个对象属性组成的集合。没有重复元素的数组。

    利用set进行数组去重:

    var arr = [1,1,2,2,2,2]
    var brr = [...new Set(arr)]
  • for of

    是es6提供的一种遍历数据值的语法。可以遍历字符串、数组、map、set

  • ...运算符

    可以将多个元素合并为一个数组。当 ...数组作为形参的时候,会将多个实参合并为一个数组

    可以将对象或数组展开成多个键值对或多个值。

    var obj = {
        name: '张三',
        age: 12
    }
    var pbj = {
        ...obj,
        sex: '男'
    }

    ...数组作为实参的时候,将数组展开成多个数据对应多个形参。

    var arr = [1,5,9,3,4,7,6,2,8]
    Math.max(...arr)

this关键字

this是js中的一个关键字,在不同的作用域中表示的数据是不一样的。

全局 - window

普通函数 - window

自调用函数 - window

定时器 - window

事件函数 - 事件源标签

对象方法 - 对象

构造函数 - new出来的对象

箭头函数 - 上级作用域中的this

当函数定义好后,不能确定this的含义,关键取决于这个函数最终的调用方式。

改变this的含义:

call:调用函数并改变this

函数.call(新的this, 原函数需要的实参1, 原函数需要的实参2, ...)

apply:调用函数并改变this

函数.apply(新的this, [原函数需要的实参1, 原函数需要的实参2, ...])

bind:复制一个函数得到新的函数并改变this

函数.bind(新的this) // 返回新的函数

你可能感兴趣的:(前端javascript)