ES6

最新推荐文章于 2024-06-03 09:20:03 发布

烟雨平生ing

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量72

点赞数

分类专栏：大前端系列文章标签： javascript node.js html

本文链接：https://blog.csdn.net/qq_44058265/article/details/120621936

版权

大前端系列专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

ES6 -- ECMAScript6

ES6 – ECMAScript6

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。
[类型]– 布尔型、数字、字符串、对象等。
[原型和继承]
内建对象和函数的
[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。

ES6的语法：let(变量)和const(常量)命令

传统定义变量和常量的方式统一使用var
ES6 : 定义变量let 定义常量const
ES6 解决了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>
         //变量
         let name = "zhangsan";
         let age = 100;
         let flag = false;   
         //常量
         const PI = Math.PI;     

         // 常量修改会报错
         PI = 1245;
         console.log(PI)

         //var会造成变量穿透,输出了不该输出的值5
         for(let i=0;i<5;i++){
             console.log(i); //0 1 2 3 4 5
         };
         
    </script>
</body>
</html>

ES6的语法：模板字符串

传统拼接字符串使用 + 和 ‘’ 或者 “” 来把字符串套起来
ES6将表达式嵌入字符串中进行拼接。用${}来界定。

    <script>
        var username = "张三";
        var age = 30;
        // 1: 原始的做法就是去拼接字符串
        var str = "我名字叫 " + username+",年龄是: "+age;
        console.log(str);  
        // 2:用模板字符串来拯救 注意：这里是 `（飘键） (tab键盘的上面那个键)
        // jdk1.9 
        var str2 = `我名字叫 ${username},年龄是: ${age}`;
        console.log(str2);
    </script>

ES6的语法：函数默认参数与箭头函数

函数默认参数

在方法的参数后面加上一个默认值即可

    <script>
        // 默认参数 给参数列表设定初始值
        function add(a =100,b=100) {
            console.log(a,b);    
        }
        // 执行方法，会用默认值填充，打印出来100,200
        add();
        // 覆盖默认值打印  结果是1，2      
        add(1,2);
    </script>

箭头函数

箭头函数简化函数的定义，可以让我们不用使用function关键字
箭头函数最直观的三个特点。

不需要function关键字来创建函数
省略return关键字
继承当前上下文的 this 关键字

       // 1:声明式的定义
        function add (){
        };
        // 2:表达式的定义
        var add2 = function(){
        }   
        // 3:箭头函数的定义
        var sum = (a = 100,b = 300)=>{
            console.log(a+b);
        };

ES6的语法：对象初始化简写

如果一个对象中的key和value的名字一样的情况下可以定义成一个。

 function person(name, age) {
        //return {name:name,age:age};
        // 对象简写
        return { name, age };
    };
    // 调用和执行
    var json = person("小花花美美", 20);
    console.log(json.name, json.age);

ES6的语法：对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

 <script>
        // 对象解构 --- es6提供一些获取快捷获取对象属性和行为方式
        var person = {
            name:'zhangsan',
            age:32,
            language:"cn",
            // 函数也有处理
            say(){
                console.log(this.name+"年龄是：" + this.age);
            } 
        };
        // ===========================传统的做法========================
        var name = person.name;
        var age = person.age;
        person.say();
        // ===========================对象解构做法========================
        //es6的做法 前提：默认情况name,age必须是jsonkey.
        var {name,age,say} = person;
        console.log(name,age);
        say();
        // 可以用冒号取小名
        var {name,age,language:lan} = person;
        console.log(name,age,lan);
    </script>

ES6的语法：传播操作符【…】

把一个对象的属性传播到另外一个对象中

        // 1： 定义一个对象
        var person1 = {
            name: '小飞飞',
            age: 16,
        };
        // 2： 对象解构
        var {name,age} = person1;
        // =========================== ... 对象融合=====================
        var person2 = {
            ...person1,
            gender:1,
            tel:13478900
        };
        console.log(person2);
        // =========================== ... 对象取值=====================
        // ... 对象取值
        var person3 = {
            name:"李四",
            gender:1,
            tel:"11111",
            address:'广州'
        };
        // ...person4 把剩下没取走给我。
        var {name,gender,...person4} = person3;
        console.log(name)
        console.log(age)
        console.log(person4)

烟雨平生ing

关注

0
点赞
踩
0

收藏

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

文章目录ES6 -- ECMAScript6ES6的语法：let(变量)和const(常量)命令ES6 – ECMAScript6编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。[类型]– 布尔型、数字、字符串、对象等。[原型和继承]内建对象和函数的[标准库] – [JSON]、[M
复制链接

扫一扫