ECMAScript 6

最新推荐文章于 2023-07-10 20:17:45 发布

Mr_zhangyj

最新推荐文章于 2023-07-10 20:17:45 发布

阅读量91

点赞数

分类专栏：前端学习笔记文章标签： ecmascript 前端 javascript

本文链接：https://blog.csdn.net/Mr_zhangyj/article/details/127127707

版权

前端学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、基本语法

1.1、let 声明变量

<script>
    // var 声明的变量没有局部作用域
    // let 声明的变量有局部作用域

    // 创建代码块，定义变量
    {
        var a = 10;
        let b = 20;
    }

    // 在代码块外输出
    console.log("var -- " + a); // var -- 10
    console.log("let -- " + b); // Uncaught ReferenceError: b is not defined

    // var 可以声明多次
    // let 只能声明一次
    var c = 10;
    var c = 20;
    let d = 3;
    // let d = 4;

</script>

1.2、const 声明常量（只读变量）

<script>
    // 定义常量
    const PI = "3.1435";
    // const常量一旦定义，就不能改变
    // PI = 3; // Uncaught TypeError: Assignment to constant variable.
    console.log("PI = " + PI);  

    // 定义常量必须初始化
    // const AA;   // Uncaught SyntaxError: Missing initializer in const declaration
    // console.log("AA = " + AA);

</script>

1.3、解构赋值

解构赋值是对赋值运算符的扩展。

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

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

<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);


    // 对象解构
    let user = {name:"zhang", age:18};
    // 传统解构从对象里面获取值
    let name1 = user.name;
    let age1 = user.age;
    console.log("user1 = " + name1 + " + " + age1);
    // ES6解构
    let {name, age} = user;
    console.log("user2 = " + name1 + " + " + age1);

</script>

1.4、模板字符串

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

<script>
    // 1.使用着重符 ` 实现换行
    let str1 = `hello,
ES6`;
/*
hello,
ES6
*/
    console.log("str1 = " + str1);

    // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    let name = "zhang";
    let age = 20;
    let str2 = `hello!${name},you are ${age + 1}!`;
    console.log(str2);

    // 3、字符串中调用函数
    function f1(){
        return "this is f1.";
    }
    let str3 = `hello, ${f1()}`;
    console.log(str3);

</script>

1.5、声明对象简写

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

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

    // ES6定义对象
    const p2 = {name, age};
    console.log(p2);

</script>

1.6、定义方法简写

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

    // ES6简写
    const person2 = {
        sayHi(){
            console.log("Hi")
        }
    }
    person2.sayHi()  // "Hi"

</script>

1.7、对象拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

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

    // 合并对象
    let name = {name:"Mary"};
    let age = {age:18};
    let p2 = {...name, ...age};
    console.log(p2);

</script>