JavaScript--ES6语法

最新推荐文章于 2024-05-21 12:21:22 发布

孤影&碧空

最新推荐文章于 2024-05-21 12:21:22 发布

阅读量381

点赞数 2

文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/m0_50315078/article/details/126322226

版权

ES6又称ECMAScript2015

1.定义变量

ES6以前我们使用var关键字定义变量
ES5新增了两个定义变量的关键字
- let =>定义变量
- const =>定义常量（特殊的变量）

let/const与var的区别

var 会进行预解析
- let/const不会进行预解析
var 可以声明两个重名的变量
- let/const不能定义重名变量
var没有块级作用域
- let/const有块级作用域

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    // 1. 预解析
    // console.log(num)
    // var num = 100
    // console.log(num)

    // 定义之前使用 let 声明的变量会报错
    // console.log(num2)
    // let num2 = 200
    // console.log(num2)

    // 定义之前使用 const 声明的变量会报错
    // console.log(num3)
    // const num3 = 300
    // console.log(num3)


    // 2. 重复变量名
    // var n1 = 100
    // var n1 = 200
    // console.log(n1)

    // let n2 = 100
    // let n2 = 200

    // const n3 = 100
    // const n3 = 200

    // 3. 块级作用域
    // 任何一个可以执行代码段的 {} 都会限制该变量的使用范围
    // if (true) {
    //   var num = 100
    //   console.log(num)
    // }
    // console.log(num)

    // if (true) {
    //   // 因为这个 num 使用 let 关键字定义的
    //   // 所以只能在这个 if 的 {} 内使用
    //   let num = 100
    //   console.log(num)
    // }
    // console.log(num)

    // if (true) {
    //   // 因为这个 num 使用 const 关键字定义的
    //   // 所以只能在这个 if 的 {} 内使用
    //   const num = 100
    //   console.log(num)
    // }
    // console.log(num)


    // 4. 定义时不赋值
    // let num
    // console.log(num)
    // num = 100
    // console.log(num)

    // 使用 const 的时候, 声明时必须赋值
    // const num
    // console.log(num)
    // num = 100
    // console.log(num)


    // 5. 修改
    // let num = 100
    // console.log(num)
    // num = 200
    // console.log(num)

    const num = 100
    console.log(num)
    // 你试图修改 num 的值, 但是因为是 const 定义的, 不能修改
    num = 200
    console.log(num)
  </script>
</body>

2.箭头函数

箭头函数，是在ES6的语法中对函数表达式的简写
对于声明式函数不能使用
在某些规则上又和以前的一些函数有些不一样

什么是函数表达式

函数表达式，又叫做匿名函数
也就是我们不需要单独定义啊函数，直接使用的位置

xxx.onclick = function(){}
var obj = {fn:function(){}}
xxx.forEach(function(){})
setTimeout(function(){})
var fn = function(){}
...

箭头函数：

xxx.onclick = ()=>{}
var obj = {fn:()=>{}}
xxx.forEach(()=>{})
setTimeout(()=>{})
var fn = ()=>{}
...

箭头函数的特性

   // var fn1 = function () { console.log('我是 fn1 函数') }
    // fn1()

    // var fn2 = () => { console.log('我是 fn2 函数') }
    // fn2()

    /*
      箭头函数的特殊之处

      1. 箭头函数某些时候可以省略 ()
        => 当你的形参只有一个的时候, 可以不写 ()

      2. 箭头函数某些时候可以省略 {}
        => 当你的代码只有一句话的时候, 可以不写 {}
        => 并且会自动把这一句话的结果当做函数的返回值

      3. 箭头函数内没有 arguments

      4. 箭头函数内没有 this
        => 箭头函数内的 this 就是外部作用域的 this
    */

    // 1.
    // var fn1 = () => { console.log('我没有形参') }
    // fn1()

    // var fn2 = a => { console.log('我一个形参 : ', a) }
    // fn2(100)

    // var fn3 = (a, b) => { console.log('我两个形参: ', a, b) }
    // fn3(100, 200)


    // 2.
    // var fn1 = (a, b) => a + b
    // console.log(fn1(10, 20))

    // 3.
    // var fn1 = () => {
    //   console.log(arguments)
    // }
    // fn1(100, 200, 300)

    // var fn2 = function () {
    //   console.log(arguments)
    // }
    // fn2(100, 200, 300)

    // 4.
    var obj = {
      fn: function () { console.log(this) },
      fn2: () => { console.log(this) }
    }

    obj.fn() // this 因为 fn 函数被 obj 调用, 所以 this 是 obj
    obj.fn2() // 因为是箭头函数, 内部没有 this, 就是外部作用域的 this

3.函数参数默认值

函数在定义的时候，可以给形参设置一个默认值
当没有传递实参的时候，就使用默认值
当传递了实参，就使用传递的实参
普通函数可以使用，箭头函数也可以使用

    function fn(a = 100, b = 200) {
      // 表示声明了两个形参
      // 其中 a 设置默认值为 100
      // 其中 b 设置默认值为 200
      console.log('a : ', a)
      console.log('b : ', b)
      console.log('---------------------')
    }

    // 两个实参都没有传递, 都会使用默认值
    fn()

    // 给 a 进行了赋值, a 就使用 10
    // b 继续使用默认值 200
    fn(10)

    // 给 a 进行了赋值, a 就使用 10
    // 给 b 进行了赋值, b 就使用 20
    fn(10, 20)

4.解构赋值

快速从对象或者数组中获取成员
解构赋值分成两种
- 数组的结构
- 对象的结构

    /*
      ES6 解构赋值
    */

    // 1. 解构数组
    // var arr = [ 'hello', 'world' ]

    // // 开始解构
    // // 注意: 解构数组使用 []
    // // a 获取的内容就是 arr[0]
    // // b 获取的内容就是 arr[1]
    // var [ a, b ] = arr

    // console.log(a)
    // console.log(b)


    // 2. 解构对象
    var obj = { name: 'Jack', age: 18 }

    // 开始解构
    // 注意: 解构对象使用 {}
    // 表示定义一个叫做 name 的变量, 获取的是 obj 内一个叫做 name 的成员的值
    // var { name, age, a } = obj
    // console.log(name)
    // console.log(age)
    // console.log(a)

    // var a = obj.age
    // console.log(a)

    // 相当于定义变量 a 从 obj 内获取一个叫做 a 的成员的值
    // var { a } = obj
    // console.log(a)
    // 可以起一个别名
    // 相当于顶一个 a 变量, 从 obj 内获取一个叫做 age 的值
    var { age: a } = obj // => var a = obj.age
    console.log(a)

5.模板字符串

  模板字符串
    + 其实, 就是 ES6 内新增的定义字符串的方式
    + 以前:
      => var str = '内容'
      => var str = "内容"
    + 现在:
      => var str = `内容`

  区别:
    1. 可以换行书写
    2. 可以直接在字符串内解析变量
      => 当你需要解析变量的时候, 直接书写 ${ 变量 }


    // 1.
    // var s1 = 'hello world'
    // var s2 = "hello world"
    // var s3 = `

    // hello
    // world


    // `
    // console.log(s1)
    // console.log(s2)
    // console.log(s3)


    // 2.
    var age = 18
    var s1 = `我叫前端小灰狼, 今年 ${age} 岁`
    console.log(s1)

    var s2 = '我叫前端小灰狼, 今年 ${age} 岁'
    console.log(s2)

    var s3 = "我叫前端小灰狼, 今年 ${age} 岁"
    console.log(s3)

6.展开运算符

  <script>
    /*
      ES6 的展开运算符
        + ...
        + 作用: 展开数组的[] 或者展开对象的 {}
    */

    // console.log(100, 200, 300, 400)
    // var arr = [ 100, 200, 300, 400 ]
    // console.log(arr)
    // console.log(...arr)

    // 作用1: 合并数组
    // var arr1 = [ 10, 20 ]
    // var arr2 = [ 30, 40 ]
    // var arr3 = [ 50, 60, 70 ]
    // var arr4 = [ 80, 90 ]
    // var arr5 = [ ...arr1, ...arr2, ...arr3, ...arr4 ]
    // console.log(arr5)

    // 作用2: 给函数传递参数
    // var arr1 = [ 10, 20, 17, 7, 31, 22, 12 ]
    // // var max = Math.max(10, 20, 17, 7, 31, 22, 12)
    // // var max = Math.max(arr1)
    // var max = Math.max(...arr1)
    // console.log(max)


    // 展开对象
    var obj = { name: 'Jack', age: 18 }
    console.log(obj)

    // 作用1: 用来复制对象
    // 注意: 展开书写的顺序问题, 在有相同成员的时候
    var obj2 = {
      gender: '男',
      ...obj,
      name: 'Rose',
    }
    console.log(obj2)

7.类语法

     ES6 的类语法
        + 语法:
          class 类名 {
            // 原先 ES5 内的构造函数体
            constructor () {}

            // 直接书写原型上的方法即可

            // 书写静态属性和方法, 需要加上一个 static 关键字即可
          }
        + 注意: 必须和 new 关键字连用
          => 不和 new 关键字连用, 会直接报错


    // function Person(name, age) {
    //   this.name = name
    //   this.age = age
    // }

    // // 原型添加一个方法
    // // 2. 原型上的方法, 目的是为了给 实例使用
    // Person.prototype.sayHi = function () { console.log('hello world') }

    // // 书写静态属性和方法
    // Person.a = 100
    // Person.go = function () { console.log('跑起来') }

    // var p1 = new Person('jack', 18)
    // console.log(p1)
    // p1.sayHi()

    // // 1. 构造函数本质还是一个函数, 可以不和 new 关键字连用
    // var p2 = Person('Rose', 20)
    // console.log(p2)

    // console.log(Person.a)
    // Person.go()


    // 类的书写
    class Person {
      constructor (name, age) {
        // 这里按照 ES5 的构造函数体书写
        this.name = name
        this.age = age
      }

      // 直接书写原型上的方法即可
      sayHi () { console.log('你好 世界') }

      // 静态属性
      static a = 100

      // 静态方法
      static go () { console.log('running') }
    }

    var p1 = new Person('张三', 18)
    console.log(p1)
    p1.sayHi()

    // 使用静态属性和静态方法
    Person.go()
    console.log(Person.a)