004 es6

简洁冬冬

于 2024-08-14 02:41:25 发布

阅读量200

点赞数 3

分类专栏： Spring Cloud商城项目文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/m0_46695127/article/details/141175758

版权

Spring Cloud商城项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

https://www.bootcdn.cn/

es6

01 let&const

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /*
    //let 声明的变量在代码块内访问有效，var 声明的变量在全局范围有效
    {
      var a=0;
      let b=1;
    }
    console.log(a);//0
    console.log(b);//ReferenceError: b is not defined
    */


   /*
   // let 声明的变量名只能使用一次；var声明的变量名可以使用多次 
   var a=1;
   var a=2;
   console.log(a);//2

   let b=3;
   let b=4;
   console.log(b);//Uncaught SyntaxError: Identifier 'b' has already been declaredz
   */

   /* 
   // let 不存在变量提升；var会变量提升
   console.log(a);//Uncaught ReferenceError: Cannot access 'a' before initializatio
   let a="apple";

   console.log(b);//undefined
   var b="hello"
   */

   // const 声明的变量 属于常量，一旦声明初始化完毕后，值不能修改
   const a=10;
   a=20; //Uncaught TypeError: Assignment to constant variable.

  </script>
  
</body>
</html>

02 解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

    /*
    //数组解构
    let arr = [1,2,3];
    // let a = arr[0];
    // let b = arr[1];
    // let c = arr[2];

    let [a,b,c] = arr;

    console.log(a,b,c);
    */
    

    //对象解构
    const student = {
      name: "tom",
      age: 18,
      hobby: ['java', 'html', 'js']
    }

    // const name = student.name;
    // const age = student.age;
    // const hobby = student.hobby;
    const {name: studentName, age, hobby} = student;

    console.log(studentName, age, hobby);

    function func() {
      return "调用func函数"
    }

    let info = `我是学生${studentName}，今年${age}岁了，我喜欢${hobby}，${func()}`;
    console.log(info);


  </script>
  
</body>
</html>

03 函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

    /*
    //1. es6中 函数的基本用法，加入了对函数参数进行默认值赋值
    function add(a,b=100){
      return a+b;
    }
    console.log( add(20,30) ); //50
    console.log( add(20) ); //120
    */


    /*
    //2. 可变参数
    function func(...params) {
      console.log(params.length);
    }
    func(22,4,9); //3
    func(177,27,1,34,3) //5
    */

    //3.箭头函数，简化了函数的书写
    // var printObj = function (obj){
    //   console.log(obj);
    // }
    var printObj = obj => console.log(obj);
    printObj("helloworld");

    // var add = function (a,b){
    //   return a+b;
    // }
    var add = (a,b) => a+b;
    console.log(add(10,20));

    // var add2 = function (a,b){
    //     result = a+b;
    //     return result * 10;
    // }

    var add2 = (a,b) =>{
      result = a+b;
      return result * 10;
    }
    console.log(add2(5,8))

    //箭头函数 与 对象解构 混合使用
    const student = {
      name : 'tom',
      age : 18,
      hobby : ['java', 'js', 'html']
    }

    // var printStudent = function (student) {
    //   console.log(`学生的名字${student.name}，喜欢${student.hobby}`)
    // }

    // var printStudent = student => console.log(`学生的名字${student.name}，喜欢${student.hobby}`);


    var printStudent = ({name, hobby}) => console.log(`学生的名字${name}，喜欢${hobby}`);

    //调用方法
    printStudent(student);

    //let {name, age, hobby} = student;




  </script>
  
</body>
</html>

04 对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // const student = {
    //   name : 'tom',
    //   age : 18,
    //   hobby : ['java', 'js', 'html']
    // }

    //对象的声明进行简化
    const name = 'tom';
    const age = 18;
    const student1 = {
      name: name,
      age: age
    }
    const student2 = {
      name,
      age
    }
    console.log(student1);
    console.log(student2);

    let student3 = {
      name : 'tom',
      //以前函数的写法
      eat: function (food) {
        console.log(this.name +"正在吃" + food);
      },
      eat2(food){
        console.log(this.name +"正在吃" + food);
      },
      //在箭头函数中，不支持使用this，需要使用对象.属性
      eat3: food=> console.log(student3.name +"正在吃" + food)
    }
    student3.eat("西瓜");
    student3.eat2("西瓜");
    student3.eat3("西瓜");

  </script>
</body>
</html>

05 promise

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>
  <script>
    //声明一个promise的函数
    function get (url, param) {
      return new Promise((resolve,reject)=>{
        $.ajax({
          url:url,
          data:param,
          success: function (data) {
            resolve(data);
          },
          error: function (err) {
            reject(err);
          }
        })
      });
    }

    //使用promise的函数
    get("mock/imageUrl.json")
        .then((data)=>{
          console.log("图片url查询成功...",data);
          return get(`mock/imageInfo_${data.id}.json`);
        })
        .then((data)=>{
          console.log("查询图片信息成功...");
        })
        .catch((err)=>{
          console.log("出现异常",err);
        });
  </script>
</body>
</html>