整理尚硅谷项目中前端 ES6的常用语法

最新推荐文章于 2024-06-13 02:48:16 发布

Tokey_W

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量236

点赞数

分类专栏：尚医通项目文章标签：前端 es6 javascript

本文链接：https://blog.csdn.net/weixin_52574640/article/details/128300471

版权

尚医通项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

5、ECMAScript 6

5.1 let 和 var

let设置是有局部范围，var没有局部范围

<!DOCTYPE html>
<html lang="en">

<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>
        // var 声明的变量没有局部作用域
        // let 声明的变量  有局部作用域
    <script>
        {
            var a = 1;
            let b = 2;
        }
        console.log(a);  // 1
        console.log(b);  // b is not defined
    </script>

</body>

</html>

let只能设置一次，var可以设置多次


<!DOCTYPE html>
<html lang="en">

<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>
        // var 可以声明多次
        // let 只能声明一次
        var m = 1;
        var m = 2;
        let n = 10;
        let n = 20; //'n' has already been declared
        console.log(m);
        console.log(n);
    </script>

</body>

</html>

5.2 const声明常量（只读常量）

<!DOCTYPE html>
<html lang="en">

<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、声明之后不允许改变    
    const PI = "3.1415926"
    PI = 3     // TypeError: Assignment to constant variable.

    // 2、一但声明必须初始化，否则会报错
    const MY_AGE  // Missing initializer in const declaration

    </script>

</body>

</html>

5.3 解构赋值

<!DOCTYPE html>
<html lang="en">

<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>
        //数组的解构赋值
        let a = 1,
            b = 2,
            c = 3;
        console.log(a, b, c);
        //ES6
        let [x, y, z] = [1, 2, 3];
        console.log(x, y, z);

        //2.对象的解构赋值
        let user = {name: 'HELEN', age: 18};
        //传统方式
        let name1 = user.name;
        let age1 = user.age;
        console.log(name1,age1);

        //ES6
        let {name, age} = user;  //注意：解构的变量必须是user中的属性
        console.log(name, age)
    </script>

</body>

</html>

5.4 模板字符串

模板字符串相当于加强版的字符串，用反引号``，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式

<!DOCTYPE html>
<html lang="en">

<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>
        //字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
        let  name  =  "lucy"
        let  age  =  20
        // `这个是tab键上面的那个按钮
        let  info  =  `My name is ${name} ,I am ${age+1}`
        console.log(info)
    </script>

</body>

</html>

5.5 定义对象

<!DOCTYPE html>
<html lang="en">

<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>
        //传统方式定义对象
        const name = "lucy";
        const age = 20;
        const user1 = {
            name: name,
            age: age
        };
        console.log(user1);

        //ES6方式定义  name和定义的name一样可以省略
        const user2 = {
            name,
            age
        };
        console.log(user2);
    </script>

</body>

</html>

5.6 对象拓展运算符

... 用于取出参数对象所有可遍历属性然后拷贝到当前对象

5.7 箭头函数

箭头函数提供了一种更加简介的函数书写方式，基本语法是

参数 => 函数头

<!DOCTYPE html>
<html lang="en">

<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>
      //对象复制
        let person1 = {name: "Amy", age: 15}
        let someone1 = { ...person1}
        console.log(someone1)

        //对象合并
        let age = {age: 15}
        let name = {name: "Amy"}
        let person2 = {...age, ...name}
        console.log(person2)
    </script>

</body>

</html>

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

<!DOCTYPE html>
<html lang="en">
<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>
       //传统方式定义函数
        var f1 = function(a) {
            return a;
        }
        console.log(f1(3));

        //es6使用箭头函数定义
        //参数 => 函数体
        var f2 = a => a;
        console.log(f2(4));


        //传统方式定义函数
        var f3 = function(m,n) {
            return m+n;
        }
        console.log(f2(3));

        //es6使用箭头函数定义
        //参数 => 函数体
        var f4 = (m,n) => m+n;
        console.log(f4(4,5));
    </script>
</body>
</html>