ECMAScript6简单入门

最新推荐文章于 2024-04-26 22:37:04 发布

Ther233

最新推荐文章于 2024-04-26 22:37:04 发布

阅读量248

点赞数

分类专栏：杂物储存处文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Ther233/article/details/124805456

版权

杂物储存处专栏收录该内容

24 篇文章 1 订阅

订阅专栏

ECMAScript 6 简单入门

概念

ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现

let声明变量

1.let声明变量作用域的问题:
            报错：b is not defined
            原因：ECMAScript 6中用let声明的变量是有作用域的，但是js中的var是没有作用域的限制的
            
2.let重复声明变量的问题:
            报错：Identifier 'b' has already been declared (at 1.let声明变量.html:30:13)
            原因：ECMAScript 6中的let变量是不允许重复声明的 但是不同的作用域内是可以进行重复声明

<!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.let声明变量作用域的问题:
            报错：b is not defined
            原因：ECMAScript 6中用let声明的变量是有作用域的，但是js中的var是没有作用域的限制的
        */
        {
            var a = 200;
            let b = 250;
        }
        // console.log(a);
        // console.log(b);

        /*
        2.let重复声明变量的问题:
            报错：Identifier 'b' has already been declared (at 1.let声明变量.html:30:13)
            原因：ECMAScript 6中的let变量是不允许重复声明的 但是不同的作用域内是可以进行重复声明
        */
        var a = 1;
        var a = 2;
        // console.log(a);

        let b = 1;
        let b = 2;
        // console.log(b);    
    </script>

</body>

</html>

const声明常量

1.const声明常量重复赋值的问题:
            报错：Assignment to constant variable. at 2.const常量声明.html:19:11
            原因：不能给常量重复赋值
            
2.const声明常量初始化的问题:
            报错：Missing initializer in const declaration
            原因：在声明常量的时候缺少了初始化步骤

<!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声明常量重复赋值的问题:
            报错：Assignment to constant variable. at 2.const常量声明.html:19:11
            原因：不能给常量重复赋值
        */
        // const a = 5.20576;
        // a = 5.21576;
        // console.log(a);
        

        /*
        2.const声明常量初始化的问题:
            报错：Missing initializer in const declaration
            原因：在声明常量的时候缺少了初始化步骤
        */
        const b;
        b = 5.21576;
        console.log(b);
         
    </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>
        /*
        模板字符串：
            模板字符串相当于加强版的字符串，
            用飘号 `，除了作为普通字符串，
            还可以用来定义多行字符串，还可以在字符串中加入变量和表达式

        模板字符串中有变量的话用${变量}即可
        */
       let a = "Hello ";
       let b = "ECMAScript 6";
       console.log(`${a}~${b}!`);

       let headInformation = `<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>`;
       console.log(headInformation);
        
    </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>
        /*
        声明对象简写：
            当属性名称和值的名称一致时候，可以简写，只写一个
        */
       let colaName = "百事可乐";
       let colaId = "20220516";
       //传统写法
       let cola = {
           colaId: colaId,
           colaName: colaName
       }
       console.log(cola);


       //ECMAScript 6写法
       let cola2 = {
           colaId,
           colaName
       }
       console.log(cola2);
          
    </script>

</body>

</html>

定义方法简写

定义方法简写：
            可以省略function

<!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>
        /*
        定义方法简写：
            可以省略function
        */

       /*
        函数和方法的区别：
            函数是独立的
            方法是存在与对象中的
        */

       //定义函数
       function f1(){

       }

       //定义方法写法一
       var f2 = function(){

       }

       //定义方法写法二
       let cola = {
            colaId: '20220516',
            colaName: '百事可乐',
            //完整写法
            saleCola: function(){
                console.log("卖可乐咯");
            },
            //省略写法
            buyCola(){
                console.log("买可乐咯");
            }
       }
       cola.saleCola();
       cola.buyCola();
         
    </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>
    <!-- 要导入jquery，否则会报错：$ is not defined -->
    <script src="jquery.min.js"></script>
    <script>
        /*
        箭头函数：
            可对函数书写方式进行简化
            参数 => 函数体
            箭头函数多用于匿名函数的定义
        */

       //单个参数 传统写法
       let f1 = function (data) {
           console.log("函数内："+ data);
           return data; 
       }
       console.log(f1(1));

       //单个参数 E6写法
       let f2 = (data)=>{
           return data; 
       }
       console.log(f2(2));

       //单个参数 简写 不常用
       let f3 = data=>{
           return data;
       }
       console.log(f3(3));

       let f4 = data=> data;
       console.log(f4(4));


       console.log("-----------------------------");
       
       

       //多个参数 传统写法
       let f5 = function (a,b) {
           console.log("函数内："+ (a+b));
           return a+b; 
       }
       console.log(f5(0,5));

       //多个参数 E6写法
       let f6 = (a,b)=>{
           return a+b; 
       }
       console.log(f6(0,6));

       //多个参数 简写 不常用
       let f7 = (a,b)=> a+b; 
       
       console.log(f7(0,7));

       console.log("-----------------------------");

       /*
       使用箭头函数发起异步请求
            其中：$.ajax() 方法用于执行 AJAX（异步 HTTP）请求
       */
      $.ajax({
          url: "data.json",
          type: "get",
          success: resp=>{
              console.log(resp);        
          }
      })

      //省略写法
      $.get("data.json",resp=>{
          console.log(resp);   
      })
         

    </script>

</body>

</html>

Ther233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript6简单入门

ECMAScript 6 简单入门概念ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现let声明变量1.let声明变量作用域的问题: 报错：b is not defined 原因：ECMAScript 6中用let声明的变量是有作用域的，但是js中的var是没有作用域的限制的 2.let重复
复制链接

扫一扫