ES6详解

ES6-let变量声明

---

let细节

1. let 声明的变量在代码块中则作用域在代码块中
   var声明的变量在代码块中作用域没有限制
2. var 可以声明多次
   let只能声明一次
3. let 不存在变量提升
   var 存在变量提升

变量提升就是指某个变量在前面没有定义但是后面定义了在前面用这个变量时不会报错只是认为没有值

<script type="text/javascript">
    console.log('x=', x)
    var x = 'tom'
</script>

而使用let时

<script type="text/javascript">
    console.log('x=', x)
    let x = 'tom'
</script>

ES6-const常量

---

• 常量在定义时需要赋值
• 常量赋值后不能修改

不赋值或者后面修改都会报错

ES6-数组解构

---

• 解构赋值是对赋值运算符的扩展
• 是一种针对数组或者对象进行模式匹配然后对其中的变量进行赋值
• 主要有两种形式数组解构和对象解构

<script type="text/javascript">
    let arr = [1, 2, 3]
    //如果要看某个变量的类型
    console.log('arr=>', arr)
    console.log('============================')
    //数组解构[取出元素]
    //1.传统
    let x = arr[0], y = arr[1], z = arr[2]
    console.log(x, y, z)
    console.log('============================')
    //2.ES6风格
    let [a, b, c] = arr
    console.log(a, b, c)
    console.log('============================')
    let [num1, num2, num3] = [100, 200, 300]
    console.log(num1, num2, num3)
</script>

ES6-对象结构

---

<script>
    let user = { name: '张三', age: 20 }
    //传统方式取出属性-解构
    console.log(user.name, ' ', user.age)
    console.log('============================')

    //ES6对象解构
    // 1.把 monster对象的属性赋值给{name, age}
    // 2.{name, age}的取名 name 和 age 要和 user 对象的属性名保持一致
    // 3.使用{}不要使用[]
    // 4.{name, age} 顺序没有要求
    let { name, age } = user
    console.log('name=', name, 'age=', age)
    console.log('============================')

    //还有其他的形式比如方法上使用对象解构
    function f1({ name, age }) {
        console.log('f1-name=', name, 'f1-age=', age)
    }

    f1(user)
</script>

ES6-模板字符串

• 模板字符串使用反引号 ` 将字符串包裹
• 可用作普通字符串
• 可用来定义多行字符串即可换行字符串原生输出
• 字符串插入变量和表达式使用${}
• 字符串中调用函数

<script>
    let str1 = `for(int i = 0; i< 10; i++){
        System.out.println("i=" + i);
    }`
    console.log('str1=', str1)
    console.log('============================')

    let name = 'zhangsan'
    //当解析 ${} 就找最近的name遍历进行替换
    let str2 = `名字=${name}`
    console.log(str2)
    console.log('============================')

    function sayHi(name) {
        return 'hi' + ' ' + name;
    }

    let name1 = 'lisi'
    let str3 = `${sayHi(name1)}`
    console.log(str3)
</script>

ES6-对象声明简写

<script>
    const age = 20
    const name = 'zhangsan'

    //传统
    let user = { name: name, age: age }

    //ES6
    // 1. {name, age} 表示对象的属性名是name, age
    // 2. 属性name的值是从变量/常量 name 来的
    let user1 = { name, age }
    console.log("user=>", user1)
</script>

ES6-对象方法简写

<script>
    //传统
    let user = {
        name: 'zhangsan',
        age: 20,
        sayHi: function () {
            console.log('name=', this.name, 'age=', this.age)
        }
    }
    user.sayHi();

    console.log('============================')

    //ES6
    let user1 = {
        name: 'zhangsan',
        age: 20,
        sayHi() {
            console.log('name=', this.name, 'age=', this.age)
        }
    }
    user1.sayHi()
</script>

ES6-对象运算符扩展

<script>
    let cat = {
        name: '小花猫',
        age: 2
    }

    //拷贝对象深拷贝
    let cat1 = { ...cat }
    cat1.name = '大花猫'

    console.log('cat=>', cat)
    console.log('cat1=>', cat1)

    //合并对象[深拷贝合并后的对象指向新的空间]
    let user = {
        name: 'lisi',
        age: 20
    }

    let student = {
        gender: '男',
        address: '北京市'
    }
    let user_student = { ...user, ...student }
    console.log("user_studnet=>", user_student)
</script>

ES6-箭头函数

1. 箭头函数提供更加简洁的函数书写方式
2. 基本语法是(参数列表) => {函数体}
3. 箭头函数没有参数或有多个参数要用()括起来箭头函数只有一个参数可以省略()
4. 箭头函数函数体有多行语句用{}包裹表示代码块
5. 函数体只有一行语句并且需要返回结果时可以省略{}结果会自动返回
6. 箭头函数多用于匿名函数的定义

<script>
    //传统
    var f1 = function (n) {
        return n * 2
    }
    console.log('传统=' + f1(2))

    //ES6
    let f2 = (n) => {
        return n * 2
    }
    console.log('ES6=' + f2(3))

    let f3 = n => n * 2
    console.log('ES6=' + f3(4))

</script>