ES5或ES6常用的一些新特性

不念不忘少年蓝@ 2022-03-27 01:28 267阅读 0赞

ECMAscript5或ECMAscript6的常用新特性：

### let 相较于 var ，let是块级别的： ###

for (var i = 0 ; i<3 ; i++){
          console.log(i);
        }
        // 在外部打印var
        console.log("外部的："+i);
    
        for (let j = 0 ; j<3 ; j++){
          console.log(j);
        }
        // 在外部打印let  这里在外部不能打印 j 因为j由let修饰，let 是属于块级
        // console.log("外部的："+j);

### const常量： ###

const c = 123;
        // 常量定义后，不可以改变
        // c = 4;

### 解构表达式之数组解析，对象解析： ###

/*解构表达式，数组解析*/
        let arr = [1,2,3];
        const [a1,a2,a3] = arr;
        console.log(a1,a2,a3);
    
    
        /*解构表达式，对象解析*/
        let person ={
          name : "test1",
          age : 18
        };
        let {name,age} = person;
        console.log(name,age);

### 箭头函数： ###

/* 格式
         var 函数名 = (参数列表) => {函数内容}等价于一下代码
         var 函数名 = function(参数列表){
            函数内容
        }
         如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}
      */
    
    let student = {
          name : "stu",
          study:function (book) {
            console.log(this.name+"正在看"+book);
          },
          study2:(book) => {console.log(student.name+"正在看"+book)}, // 这里用this.name不能拿到值
          // 简写
          study3(book){
            console.log(student.name+"正在看"+book)
          }
        };
        student.study("三国演义");
        student.study2("红楼梦");
        student.study3("西游记");
    
        var f = (par) => {console.log("函数1"+par)};
        f("测试");
        var f2 = function(par) {
          console.log("函数2"+par)
        };
        f2("测试");

### 解构表达式加箭头函数： ###

/*解构表达式，对象解析*/
        let person ={
          name : "test1",
          age : 18
        };
        let {name,age} = person;
        console.log(name,age);
    
    
        /*解构表达式+箭头表达式*/
      var f3 = ({name}) => {console.log(name)}
      f3(person);

### Promise是异步编程的一种解决方案： ###

//  Promise是异步编程的一种解决方案,成功则调用resolve，失败则调用reject
        const promise = new Promise(function (resolve,reject) {
            // setTimeout 定时调度函数
            setTimeout(function () {
              const num = Math.random();
              if(num > 0.5){
                resolve("成功："+num);
              } else {
                reject("失败："+num);
              }
            },300)
        });
    
        promise.then(function (message) {
          console.log(message);
        }).catch(function (message) {
          console.log(message);
        });
    
    
    
        // 箭头函数写法，写Promise
        const promise2 = new Promise((resolve,reject) => {
          // setTimeout 定时调度函数
          setTimeout(() => {
            const num = Math.random();
            if(num > 0.5){
              resolve("成功："+num);
            } else {
              reject("失败："+num);
            }
          },300)
        });
    
        promise2.then((message) => {
          console.log(message);
        }).catch((message) => {
          console.log(message);
        })