ES6新特性

最新推荐文章于 2024-07-06 00:11:00 发布

呆桃啵啵猪

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量139

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45701868/article/details/124822196

版权

vue 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

1 、let与const、块级作用域

在ES6之前JS是没有块级作用域的，const与let填补了这方便的空白，分别使用let、const声明变量和常量，const与let都是块级作用域。
使用var定义的变量为函数级作用域：

使用let与const定义的变量为块级作用域：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块级作用域</title>
        <script>
            //大括号包裹的部分为代码块
            {
                //es5
                var i = 0;
                var i = 1;
                console.log(i);

                //es6
                //let 定义变量
                let j = 0;
                //报错, j已经被定义
                // let j = 1;
                j = 1;
                console.log(j);

                //const定义常量
                const k = 0;
                //报错, 不能修改常量值
                // k=1;
                console.log(k);
            }
            console.log("代码块外部打印i=" + i);

            //报错了, j 没有定义, 说明了let作用域是块作用域[代码块]
            // console.log("代码块外部打印j=" + j);

            //报错了, k 没有定义, 说明了const作用域是块作用域[代码块]
            // console.log("代码块外部打印k=" + k);

            //定义一次且不会再改就用const, 能用const则不用let, const有优化
        </script>
    </head>
    <body>

    </body>
</html>

2 、函数参数默认值

ES6支持在定义函数的时候为其设置默认值：传值覆盖，空值默认

格式：function 函数名称(参数名称1=值1，参数名称2=值2, ......){}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>函数默认值</title>
        <script>
            //es5
            function method(name, age) {
                name = name || "张三";
                age = age || 12;
                console.log(name + "," + age);
            }

            method();//张三,12
            method("jack");//jack,12
            method("lucy", 23);//lucy,23

            console.log("================");

            //es6
            function method1(name = "lisa", age = 25) {
                console.log(name + "," + age)
            }

            method1();//lisa,25
            method1("jim");//jim,25
            method1("xiao", 26);//xiao,26
        </script>
    </head>
    <body>

    </body>
</html>

3、箭头函数

箭头函数=>不只是关键字function的简写，类似于部分强类型语言中的lambda表达式
箭头函数用 => 符号来定义。
箭头函数相当于匿名函数，所以采用函数表达式的写法。
基本结构

匿名函数：function(参数){}

箭头函数：(参数)=>{}
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）。

箭头函数例子:某些情况进一步简写

（1）当要执行的代码块只有一条return语句时，可省略大括号和return关键字：

（2）当传入的参数只有一个时，可以省略小括号：

（3）当不需要参数时，使用空的圆括号：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>箭头函数</title>
        <script>
            let sum0 = function (x, y) { return x + y; }
            console.log("sum0: x + y = " + sum0(10, 20));

            //箭头函数
            let sum1 = (x, y) => { return x + y; }
            console.log("sum1: x + y = " + sum1(10, 20));

            //简化箭头函数, 代码题只有一句代码, 可以省略大括号
            let sum2 = (x, y) => x + y;
            console.log("sum2: x + y = " + sum2(10, 20));

            let sum3 = x => x + x;
            console.log("sum3: x + x = " + sum3(10));

            //sum3简化， 只有一个参数的话，小括号可以省略
            let sum4 = x => x + x;
            console.log("sum4: x + x = " + sum4(10));

            //如果没有参数，呢么直接使用括号
            let sum5 = () => 50 + 50;
            console.log("sum5 = " + sum5());
        </script>
    </head>
    <body>

    </body>
</html>

4 、对象属性缩写

在ES6中允许我们在设置一个对象的属性(函数)的时候不指定属性名(函数名)。

当对象属性（函数）名称和外部变量（函数）名称，同名的情况下，可以省略属性名的重复书写以及冒号。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性的缩写</title>
        <script>
            const name = "jack";
            const age = 18;
            const city = "天津";
            console.log("=========es5=========");
            //es5定义一个对象
            const student = {
                //定义属性名称为name, 属性值为定义的name变量
                name: name,
                age: age,
                city: city,
                //定义匿名函数赋值给show
                show: function () {
                    console.log("student的show函数");
                }
            };
            //调用
            console.dir(student);
            student.show();

            console.log("=========es6=========");
            const student1 = {
                name,
                age,
                city,
                show() {
                    console.log("student1的show函数");
                }
            }
            //调用
            console.dir(student1);
            student1.show();
        </script>
    </head>
    <body>

    </body>
</html>

5 、模板字符串

ES6支持模板字符串，使得字符串的拼接更加的简洁、直观。

不使用模板字符串：

在ES5中字符串拼接通过【+】实现

let first = "张";
let last = "四";
let name = 'Your name is ' + first + ' ' + last + '.'

使用模板字符串：

ES6中使用反引号【``】来拼接字符串，使用【${}】来包含变量
```
let first = "张";
let last = "四";
let name = `Your name is ${first} ${last}.`;
```

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字符串拼接</title>
        <script>
            let firstName = "张";
            let lastName = "三";

            //es5
            let fullName1 = "您的名称是: " + firstName + " " + lastName;
            console.log(fullName1);

            //es6  ${} 站位  {}内部写入变量名称
            let fullName2 = `您的名称是: ${firstName} ${lastName}`;
            console.log(fullName2);
        </script>
    </head>
    <body>

    </body>
</html>

6 、模块化(Module)

导出(export) ES6允许在一个模块中使用export来导出多个变量或函数。
- 导出变量
  
  ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个或多个变量。
- 导出函数
导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。
在js文件中通过import引入另外的js文件，提示Uncaught SyntaxError: Unexpected string，或者Uncaught SyntaxError: Unexpected identifier错误，原因是import属于es6的语法，但是浏览器不支持es6语法，所以需要转换。后期的Vue中会接解决这个问题。

呆桃啵啵猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6新特性

目录1 、let与const、块级作用域2 、函数参数默认值3、箭头函数4 、对象属性缩写5 、模板字符串6 、模块化(Module)1 、let与const、块级作用域在ES6之前JS是没有块级作用域的，const与let填补了这方便的空白，分别使用let、const声明变量和常量，const与let都是块级作用域。使用var定义的变量为函数级作用域：使用let与const定义的变量为块级作用域： <!DOCTYPE html&
复制链接

扫一扫