ES6入门

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

ES6基本使用（语法和js差不多，这里制只做区别）

• let变量和var变量的区别

  • 作用域
    • js定义变量为var，var定义的变量，代码块里外都能用
    • es6定义变量为let，let定义的变量，只能在当前代码块里面使用
  • 特点
    • var可多次定义同一变量
    • let只能定义一次变量，不能在定义同一个变量

• const常量

  • const定义变量时，需要赋值，复制之后就是一个常量，不能再改变了

• 数据类型解构

  • 数组解构

    //传统写法
    let a=1,b=2,c=3
    console.log(a, b, c)
    
    //es6写法
    let [x,y,z] = [10,20,30]
    console.log(x, y, z)
    

  • 对象解构

    //定义对象
    let user = {"name":"lucy","age":20}
    
    //传统从对象里面获取值
    let name1 = user.name
    let age1 = user.age
    console.log(name1+"=="+age1)
    
    //es6获取对象值，定义的变量必须和对象的键一致
    let {name,age} = user
    console.log(name+"**"+age)
    

• 模板字符串

  • 自动换行

    let str1 = `hello,
      es6 demo up!`
    

  • 其里面可使用表达式获取变量值

    let name = "Mike"
    let age = 20
    
    let str2 = `hello,${name},age is ${age+1}`
    

  • 调用方法

    function f1() {
      return "hello f1"
    }
    
    let str3 = `demo, ${f1()}`
    

• 对象简写

  • 只有键值对的变量名称一致，es6才可以简写

    const age = 12
    const name = "lucy"
    
    //传统方式定义对象
    const p1 = {name:name,age:age}
    // console.log(p1)
    
    //es6定义变量
    const p2 = {name,age}
    console.log(p2)
    

• 方法简写

  • 省略:function

    //传统方式定义的方法
    const person1 = {
        sayHi:function(){
            console.log("Hi")
        }
    }
    
    //调用
    person1.sayHi()
    
    //es6
    const person2 = {
        sayHi(){
            console.log("Hi")
        }
    }
    

• 对象拓展运算符

  • 对象复制

    let person1 = {"name":"lucy","age":20}
    let person2 = {...person1}
    

  • 对象合并

    let name = {name:'mary'}
    let age = {age:30}
    let p2 = {...name,...age}
    

• 箭头函数

  //1.传统方式创建方法
  //参数 => 函数体
  var f1 = function(m) {
    return m
  }
  //使用箭头函数改造
  var f2 = m => m
  //2.复杂一点方法
  var f3 = function(a, b) {
    return a+b
  }
  //使用箭头函数
  var f4 = (a,b) => a+b