ES6基础语法

ES6基础语法

2021 年 07 月 21 日

933 次浏览

3390字数

1.let的作用范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let变量作用范围</title>
</head>
<body>
    <script>
        // es6如何定义变量，定义变量特点
        // js定义：var a = 1;
        // es6写法定义变量，使用关键字 let (let a = 10;)
        // let定义变量有作用范围
        // 1.创键一个代码块定义变量
        {
            var a = 10;
            let b = 20;
        }
        // 2.在代码块外面输出
        console.log(a);
        console.log(b); // Uncaught ReferenceError: b is not defined
    </script>
</body>
</html>

2.let定义变量特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let定义变量特点</title>
</head>
<body>
    <script>
        var a = 1;
        var a = 2;

        let m = 10;
        let m = 20;

        console.log(a);
        console.log(m); // Uncaught SyntaxError: Identifier 'm' has already been declared
    </script>
</body>
</html>

3.const声明常量（只读变量）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const声明常量</title>
</head>
<body>
    <script>
        // 定义常量
        // 1.声明之后不允许改变
        const PI = "3.141592";
        PI = 3; // Uncaught TypeError: Assignment to constant variable.
        // 2.一旦声明必须初始化，否则报错
        const AA; // Uncaught TypeError: Assignment to constant variable.
    </script>
</body>
</html>

4.数组解构

<script>
    // 传统写法
    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);
</script>

5.对象解构

<script>
    // 定义对象
    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);
  
</script>

6.模板字符串

<script>
    // 1.使用 ` 符号实现换行
    let str1 = `hello,
    es6 demo up!`
    console.log(str1);

    // 2.在 ` 符号里面使用表达式获取变量值
    let name = "Mike";
    let age = 20;
    let str2 = `hello,${name},age is ${age+1}`;
    console.log(str2);// hello,Mike,age is 21

    // 3.在 ` 符号里调用方法
    function f1(){
        return "hello f1";
    }
    let str3 = `demo,${f1()}`
    console.log(str3);// demo,hello f1
</script>

7.声明对象简写

<script>
    const age = 12;
    const name = "lucy";

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

    // es6
    const p2 = {name,age}
    console.log(p2); // {name: "lucy", age: 12}

</script>

8.定义方法简写方式

<script>
    // 传统方式定义的方法
    const person1 = {
        sayHi:function(){
            console.log("Hi");
        }
    }
    person1.sayHi();

    // es6写法
    const person2 = {
        sayHi(){
            console.log("Hi");
        }
    }
    person2.sayHi();

</script>

9.对象扩展运算符

<script>
    // 1.对象拷贝
    let person1 = {"name":"Lucy","age":20};
    let person2 = {...person1};
    console.log(person2); // {name: "Lucy", age: 20}

    // 2.合并对象
    let name = {name:"mary"};
    let age = {age:20};
    let p2 = {...name,...age};
    console.log(p2); // {name: "mary", age: 20}
</script>

10.箭头函数

<script>
  
    // 1.传统方式创建方法
    var f1 = function(m) {
        return m
    }
    console.log(f1(2)); // 2
    // 2.es6使用箭头函数进行改造（箭头前面的函数代表参数，后面的表示返回值）
    var f2 = m => m;
    console.log(f2(8)); // 8

    // 3.复杂一点的方法
    // 原始写法
    var f3 = function(a,b){
        return a + b;
    }
    console.log(f3(1,2)); // 3
    // 箭头函数改造
    var f4 = (a,b) => a+b;
    console.log(f4(4,5)); // 9

</script>

ES6基础语法