ES6(ECMAScript6.0)

一、let的使用

1.注意事项和使用细节

let声明的变量有严格局部作用域
let只能声明一次，var可以声明多次
let不存在变量的提升，var存在变量提升

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>let使用细节和注意事项</title>
</head>
<script type="text/javascript">
  //let是有作用域的
  {
      // 传统方式
      var name = "韩顺平";
      // es6
      let str = "hao are you do ?";
      console.log("str = ", str)
  }
  console.log("name = " + name);
  // 报错--->str is not defined
  // console.log("str = " ,str);

  // ==========================================
  //let不能多次声明
  // 报错--->Identifier 'name' has already been declared
  let name2 = "李华";
  // 可以这样
  name2 = "修理";
  console.log("=====================")
  console.log("name = ", name2);
  //传统方式可以多次声明
  var ter = "123";
  var ter = "test";
  console.log("ter = ", ter);

  //===========================================
  //let不存在变量提升
  // 报错--->Cannot access 'age' before initialization
  console.log("age= ", age);
  let age = 100;
  //传统方式可以
  console.log("x= " , x);
  var x = 11;

</script>
<body>

</body>
</html>

二、const声明常量/只读变量

1. const的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const的使用</title>
</head>
    <script type="text/javascript">
        //报错---> Missing initializer in const declaration
        const PI = 3.14;
        //改变它的值
        // 报错--->Assignment to constant variable.
        // PI = 3.1465928;
        //可以理解为java中的常量关键字final，被const修饰的属性值是不可以被修改的
    </script>
<body>

</body>
</html>

2.注意事项和使用细节

常量在定义时，需要赋值，否则会报错

常量赋值后不能修改，否则会报错

可以理解成java中的final关键字一样

三、数组解构

1.基本介绍

解构赋值是对(赋值)运算的扩展

是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

主要有两种形式：数组解构和对象解构

2.注意事项和使用细节

一定要有“[]”，如果没有会解构失败，相当于把数组赋值给最后一个变量

它会自动匹配对对应的变量

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构</title>
</head>
<script type="text/javascript">
    //数组解构
    //传统方式
    var arr = ["123", 2];
    console.log("arr[0] ==>", arr[0])
    console.log("arr[1] ==>", arr[1])
    console.log("=========================================")
    //es6数组解构
    let [a, b] = arr;
    console.log("a==>", a)
    console.log("b==>", b)
    //第二种
    let [num1,num2,num3] = [100,200,300];
    console.log("num1===>",num1);
    console.log("num2===>",num2);
    console.log("num3===>",num3);
</script>
<body>

</body>
</html>

四、对象解构

1.细节说明

对象解构时，let{name,age} 中的name 和 age 名称需要和对象属性名保持一致，如果不一致取不出来，如果全部不一致则会报错

也可以解构对象部分属性，比如let {age} 这样就是只取出age属性值

还有其它的形式，比如方法上使用对象解构

它会自动匹与对象属性名相同的变量

使用{}包裹，不然它就相当于赋值给最后一个变量，不可以使用[]

{name,age} 前后顺序无所谓，没有固定要求

在方法中使用对象解构{}中的形参名要和对象中的属性名一样

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象解构</title>
</head>
<script type="text/javascript">
    //传统
    var monster = {name:"牛魔王",age:1000}
    // 打印
    console.log("name ==> ",monster.name," age==>",monster.age)
    //es6
    // 使用[]会报错 错误--->monster is not iterable
    let {name,age}= monster;
    //打印
    console.log("======================================")
    console.log("let.name==>",name," let.age==>" ,age)
    //在方法中使用对象解构
    function f1({name,age}) {
        console.log("name=> " ,name ," age=>" ,age);
    }
    f1(monster);


</script>
<body>

</body>
</html>

五、模板字符串

1.基本介绍

模板字符串使用反引号”`“将字符串包裹

可作为普通字符串

可用来定义多行字符串，即可以将换行字符串原生输出，也就是字符串中有换行也会输出

字符串可以插入变量和表达式，使用${}

字符串中可以调用函数

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板字符串的使用</title>
</head>
<script type="text/javascript">
    let str1= `for(int i = 0 ; i < 10 ; i++){
        System.out.println(i)
    }`;
    console.log("str1========>",str1)

    // 可以嵌入表达式或者变量
    let name = "韩顺平"
    let eduName = `教育机构名称${name}`;
    console.log("eduName==> " , eduName)


    let num = `1+2 = ${1+2}`;
    console.log("========================")
    console.log("num=>" , num)

    let num1 = 1 ;
    let num2 = 10 ;
    let num3 = `${num1} + ${num2} = ${num1+num2}`

    console.log("num3===> ",num3)

    //字符串可以调用函数
    function sayHi(name) {
        return "你好呀！" + name ;
    }

    let sayName = `sayHi返回的是${sayHi(name)}`;

    console.log("sayName=>",sayName)

</script>
<body>

</body>
</html>

六、ES6对象

1.对象声明简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明对象简写</title>
</head>
<script type="text/javascript">
    const name ="孙悟空";
    const age = 1000;
    //传统方式
    let monster = {name:name,age:age}
    console.log("monster==>",monster)
    //es6方式
    /*
    * 解读
    * 1.{name,age}其中的name和age表示对象的属性name和age
    * 2.属性name的值是从变量或者常量中获取的，所以属性中的属性名要和外部的变量和常量名保持一致
    *   不然获取不到，会报错
    *
    * */
    let monster2 = {name,age}
    console.log("==============================")
    console.log("monster2--->",monster2)
</script>
<body>

</body>
</html>

2.对象方法简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法简写</title>
</head>
    <script type="text/javascript">
        //传统方式
        let monster = {
            name:"牛魔王",
            age:100,
            sayHi:function () {
                console.log("name==> ",this.name," age==> " ,this.age)
            }
        }
        monster.sayHi();
        //es6方式
        console.log("========================")
        let monster2 = {
            name: "红孩儿",
            age:100,
            sayHi(){
                console.log("name==> ",this.name," age==> " ,this.age)
            },
            f1(){
                console.log("hahahaahah")
            }
        }

        monster2.sayHi()
        monster2.f1();

    </script>
<body>

</body>
</html>

3.对象运算符扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象拓展符</title>
</head>
<script type="text/javascript">
    //传统
    let monster = {name:"猪八戒",age: 2000}
    let monster2 = monster;

    monster2.name = "沙僧";

    console.log("monster==>",monster)
    console.log("monster2==>",monster2)
    //es6（深拷贝）
    /*
    * 1. 深拷贝过来的数据和原先的对象是不同放入吗，
    *   它们是两个独立的空间，修改其中的一个属性值是不不会影响另一个对象中的属性值的
    * 2.一定要有{}这个包裹，而且一定要有...才是深拷贝
    * */
    let monster3 = {...monster}
    console.log("===========================")
    monster3.name="白骨精";
    console.log("monster3==>",monster3)
    //合并对象
    /*
    * 1.两个对象都需要使用...而且要用,隔开否则会报错
    * 2.合并时仍然使用的深拷贝
    * */
    let cat = {price:300,height:20};

    let cat_monster = {...monster,...cat}

    console.log("cat_monster--->",cat_monster)
</script>
<body>

</body>
</html>

七、箭头函数

1.基本介绍

箭头函数提供更加简洁的函数书写方式

基本语法是:(参数列表)=>{函数体}

箭头函数没有参数或有多个参数，要用()括起来，箭头函数只有一个参数，可以省略()

箭头函数函数体有多行语句，用{}包裹起来，表示代码块

函数体只有一行语句，并且需要返回结果时，可以省略{}，结果会自动返回

箭头函数多用于匿名函数的定义

2.箭头函数实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用</title>
</head>
<script type="text/javascript">
    //传统函数
    let fun = function (){
      console.log("hahahaa")
    }
    fun()
    //es6箭头函数
    let te = (name)=>{
      console.log("es6箭头函数",name)
    }
    te("666")

    //箭头函数的简化
    let num = n => n*2 ;

    console.log("num==>", num(100))

    let num2 = 30;
    // 这里不能使用解构
    console.log("num==>", num({num2}))

    //也可以传给一个变量
    function f22(dat) {

      console.log("dat==>" ,dat(200))
    }
    f22(n=>n+2)


</script>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数2</title>
</head>
<script type="text/javascript">
    //传统方式
    let f1 = function (n,m) {
        let sum = 0 ;
        for (let i = n; i <= m; i++) {
            sum+= i;
        }

        return sum;
    }
    console.log("f1=>",f1(1,10))
    console.log("=================")
    //es6箭头函数
    let f2 =(n,m) => {
        let sum = 0 ;
        for (let i = n; i <= m; i++) {
            sum+= i;
        }

        return sum;
    }
    console.log("f2=>",f2(1,10))


</script>
<body>

</body>
</html>

3.箭头函数加对象解构代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数+对象解构</title>
</head>
<script type="text/javascript">
    const monster = {
        name: "白骨精",
        age: 100,
        skill: ['魅惑', '欺骗']
    }
    //要求在方法形参中取出对象中的属性
    //     传统方式
    function skill(skill) {
        console.log("skill=>", skill)
    }

    skill(monster.skill)
    console.log("======================================")
    //     ES6方式
    /*
    * 1.skill2传入的实参必须是一个对象，而且对象中的属性名要和形参的名称一样
    * 2.注意{}一定要有，形参没有先后顺序
    * */
    let skill2 = ({skill, name, age}) => {
        console.log("skill2=>", skill, "  name=>", name, " age=> ", age)
    }

    skill2(monster)
</script>
<body>

</body>
</html>

4.注意事项和细节

箭头函数+对象解构，注意参数是({属性名})

({属性名})由{}包括，属性需要和对象属性名一致，使用到了对象解构

Menu

Share

ES6

ES6(ECMAScript6.0)

一、let的使用

1.注意事项和使用细节

二、const声明常量/只读变量

1. const的使用

2.注意事项和使用细节

三、数组解构

1.基本介绍

2.注意事项和使用细节

3.代码

四、对象解构

1.细节说明

2.代码

五、模板字符串

1.基本介绍

2.代码

六、ES6对象

1.对象声明简写

2.对象方法简写

3.对象运算符扩展

七、箭头函数

1.基本介绍

2.箭头函数实例代码

3.箭头函数加对象解构代码

4.注意事项和细节

Comment

服务器渲染技术-jsp

JDBC笔记

前端技术笔记-Axios

Spring中BeanPostProcessor与BeanFactoryPostProcessor的区别

io流

Spring5

ES6

项目部署跨域问题解决

Vue Cill 【脚手架】

Linux网络配置