[学习记录]Java程序猿应该掌握的ES6语法

Java菜勾

已于 2022-09-14 22:29:58 修改

阅读量1k

点赞数 1

文章标签： es6 javascript 前端

于 2022-09-14 22:17:42 首次发布

本文链接：https://blog.csdn.net/weixin_54345825/article/details/126861223

版权

文章目录

前言

本文记录了Java程序猿应该掌握的前端ES6常用基本语法~~！

一、ES6是什么？

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

简言之：ES6其实就是JavaScript的一套规范。

二、基本语法

1.声明变量的两种方式(var、let)

代码如下（示例）：

<script>
    // es6规范，如何定义变量。（定义常量使用const == final，在声明变量时必须初始化值）
    // 两种方式：var（函数作用域）和let（块作用域）

    /**
     *  区别一：
     *      var声明的变量，是全局变量。
     *      let声明的变量，是局部变量。
    */
    {
        var a = 1;
        let b = 1;
    }
    console.log(a); // 1
    //console.log(b); // 报错：Uncaught ReferenceError: b is not defined

    /**
     *  区别二：
     *      使用var声明的变量，该变量可以在声明之前使用，值为undefined。
     *      使用let声明的变量，该变量不可以在声明之前使用。
    */
    if (true) {
        console.log(x); // 1
        console.log(y); // 报错：Uncaught ReferenceError: Cannot access 'y' before initialization
        var x = 1;
        let y = 1;
        console.log(x); // 不输出
        console.log(y); // 不输出
    }

    /**
     *  区别三：
     *      使用var声明的变量，可以重复声明。
     *      使用let声明的变量，只可以声明一次。
    */
    if(true){
        var m = 1;
        let n = 1;

        var m = 100;
        //let n = 100; // 编译报错：Cannot redeclare block-scoped variable 'n'.
    }
</script>

2.数组解构

代码如下（示例）：

<script>
    // 数组解构
    // 给定一个数组
    let arr = [2, 5, 8];

    // 需求：获取数组中的每个元素。
    // 传统方式
    let a = arr[0], b = arr[1], c = arr[2];
    console.log(a, b, c);

    // ES6方式。将数组中的元素与自定义的变量名一一对应赋值
    let [x, y, z] = arr;
    console.log(x, y, z);
</script>

3.对象解构

代码如下（示例）：

<script>
    // 给定一个对象 user
    let user = { "name": "tom", age: 20 };

    // 需求：获取对象中的各个字段值。
    // 传统方式
    let name1 = user.name;
    let age1 = user.age;

    // ES6方式（前提是对象中的key必须和接收的变量名一致）
    let { name, age } = user;
    
    console.log(name1 === name,age1 === age);

</script>

4.模板字符串

代码如下（示例）：

<script>
    // 使用`着重号标志字符串 -> `模板字符串`

    // 特点：
    // 一、提供换行输出功能。""是做不到的
    let str1 = `hello,
world`;
    console.log(str1);

    // 二、提供表达式写法（类似与Java中的EL表达式）
    let name = "Jerry";
    let age = 20;
    let str2 = `您好 ${name},我今年${age + 1}岁`;
    console.log(str2);

    // 三、表达式写法中可以调用方法
    function t(){
        return "a teacher";
    }
    let str3 = `I am ${t()}`;
    console.log(str3);
</script>

5.声明对象简写

代码如下（示例）：

<script>
    const name = "Tom";
    const age = 22;

    // 需求：创建一个对象，将上面的name、age变量放入对象中
    // 传统写法
    let person1 = { name: name, age: age };
    console.log("传统写法创建对象：", person1);

    // ES6写法
    let person2 = { name, age }
    console.log("ES6写创建对象：", person2);
</script>

6.声明方法简写

代码如下（示例）：

<script>
    // 声明方法简写

    // 传统方式创建方法
    const t1 = {
        a:function(){
           return "hello"; 
        }
    }
    console.log(t1.a()); // 方法调用

    // ES6方式创建方法（简写）
    const t2 = {
        a(){
           return "hi"; 
        }
    }
    console.log(t2.a()); // 方法调用
</script>

7.对象拓展运算符

代码如下（示例）：

<script>
    // ...：对象拓展运算符

    // 特点：
    // 一、对象复制（深拷贝）
    let p1 = { "name": "Bin", age: 21 };
    let p2 = p1;
    let p3 = { ...p1 };
    console.log(p1 === p2); // p2是浅拷贝，拷贝的只是p1的地址。实际上p1、p2指向的是同一个对象。
    console.log(p1 === p3); // p3是深拷贝，相当于新开辟了一块内存空间用来存放p1的数据。此时p1、p3指向不同的内存地址

    // 二、对象合并
    let nameObj = { "name": "zhangsan" };
    let ageObj = { age: 22 };
    let person = { ...nameObj, ...ageObj };
    console.log(person);

    // 三、
</script>

8.箭头函数

代码如下（示例）：

<script>
    // 箭头函数的使用
    // 传统方式创建函数
    let f1 = function a(x) {
        return x;
    }


    // 详细使用（四种情况）
    // 箭头函数（无参无返回值）
    let func1 = () => {
        let a = 1;
        console.log("无参无返回值：", a);
    };
    func1(); // 调用func1()函数

    // 箭头函数（无参有返回值）
    let func2 = () => {
        let a = 1;
        return a + 2;
    };
    console.log("无参有返回值：", func2()); // 调用func2()函数

    // 箭头函数（有参无返回值）
    let func3 = (a, b) => {
        console.log("有参无返回值：", a + b);
    };
    func3(2, 8); // 调用func3()函数

    // 箭头函数（有参有返回值）
    let func4 = (a, b) => {
        return a + b;
    };
    // func4可以简写成 let func4 = (a,b) => a + b;
    console.log("有参有返回值：", func4(5, 8)); // 调用func4()函数

</script>