ES6中的一些常用知识点

一、ES6中的let和comst

• 在ES6中，一般不再使用var定义变量，而是使用let（定义变量）/const（定义不会去改变的变量）

• Let可以看做更完美的var，let拥有块级作用域（比如if/for），而var没有块级作用域

• 用const定义的变量其指向的是其地址，所以我们不能直接重新赋值，但是如果是像对象这样的属性，我们可以修改属性内部的值

例如

const books={id:1,name:”简爱”}

我们不能直接对books重新赋值，却可以通过

Books.id = 2

这种方法修改内部的值。

二、ES6的字面量增强写法

• 函数的增强写法：

ES5：books:function(){,}

ES6: books(){,}

• 属性的增强写法：

Const apple=red

Const banana=yellow

ES5:const obj={apple:apple,banana:banana}

ES6:const obj={apple,banana}会将属性名当做key，值当做value

输出结果都为apple=red，banana=yellow

三、for()循环的更多写法

• for(let I;i<this.books.length;i++)

• for(let I in this.books){} //这样用in获取的i为books[]的下标值 console.log(“i”)为0.1.2.3…

• for(let item of this.books){} //这样用of获取的为books[]的每一项的值

四、定义字符串的新方式

在ES6中，可以用``定义字符串，tap键上面那个点

ES5中是用’’ “” 单引号双引号定义，但坏处是换行麻烦

而在ES6中用``定义 可以直接换行

五、箭头函数

定义函数的方式

1.通过 function(){} 定义

2.通过对象字面量中定义

Const aaa ={

Bbb:function(){};

Bbb(){}

}

3.通过箭头函数定义

Const aaa = () => {}

3.1 当有两个参数的时候

Const aaa = (num1,num2) => { return num1+num2 }

3.2 当只有一个参数的时候，小括号可以被省略

Const aaa = num => { return num+num}

当有多行代码时：

Const add = () =>{

Console.log(‘1123’)

Console.log(“123124”)

}

而当只要一行代码时，可以把括号省掉

Const bbb = ()=> console.log(‘1234124’)

或者

Const aaa = (num1,num2) => num1+num2

4.箭头函数的this指向问题

箭头函数自身没有this，它会去一层一层去寻找外层作用域的this，直到找到this

六、Promise

• promise的使用

<script>
    //什么时候用Promise? 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装

    
    // 1.Promise是一个类，所以使用时要用new

    // 2.promise里需要传入一个参数，这个参数是一个函数

    // 3.作为参数的这个函数中，也有两个参数，这两个参数也是函数，分别是resolve,reject，分别代表成功时和失败时调用

    // 4.接着在里面写异步请求代码，这里用setTimeout代替

    // 这就是链式编程

 

    new Promise((resolve,reject)=>{

      //这里执行异步请求代码
      setTimeout(() => {

        // 当请求成功执行的时候，我们会调用resolve函数,这时候会转到.then()函数中，在then中进行数据处理的函数，而

        // .then中也有一个参数，这个参数也是一个函数

        resolve('hello world')   //模拟获取到的数据

          
        // 如果请求失败，则会调用reject函数,此时会转到.catch()中,和.then一样，也有一个为函数的参数

        reject('err message')    //模拟错误信息
      }, 1000)

    }).then((data)=>{
 
      //这里执行请求成功之后的数据处理代码

      console.log(data);

    }).catch((err)=>{

      //这里执行请求失败之后的错误信息代码

      console.log(err);
    })
  </script>
 

• Promise的链式调用的三种写法：

<script>
  //第一种写法  直接在then中new一个新的promise，进行新一层代码

  // new Promise((resolve,reject)=>{

  //   setTimeout(() => {

  //     resolve('aaa')

  //   }, 1000);

  // }).then((res)=>{

  //   console.log(res,'第一层执行的代码');

​    

  //   return new Promise(resolve=>{   //不用reject时可以省略

  //     resolve(res+'111')

  //   })

  // }).then((res)=>{

  //   console.log(res,'第二层执行的代码');

​    

  //   return new Promise(resolve=>{

  //     resolve(res+'222')

  //   })

  // }).then((res)=>{

  //   console.log(res,'第三层执行的代码');

  // })

 

  //第二种写法  将new省略，直接写promise.resolve()方法进行数据操作

  // new Promise((resolve,reject)=>{

  //   setTimeout(() => {

  //     resolve('aaa')

  //   }, 1000);

  // }).then((res)=>{

  //   console.log(res,'第一层执行的代码');

    

  //   return Promise.resolve(res+'111')

  // }).then((res)=>{

  //   console.log(res,'第二层执行的代码');

    

  //   return Promise.resolve(res+'222')

  // }).then((res)=>{

  //   console.log(res,'第三层执行的代码');

  // })

 

  //第三种写法  连promise.resolve()都不要了，直接return进行的操作

  new Promise((resolve,reject)=>{

    setTimeout(() => {

      resolve('aaa')

    }, 1000);

  }).then((res)=>{

    console.log(res,'第一层执行的代码');  

    return res+'111'

  }).then((res)=>{

    console.log(res,'第二层执行的代码');

    

    return res+'222'

  }).then((res)=>{

    console.log(res,'第三层执行的代码');

  })

</script>

• Promise的all方法

<script>
    //当我们需要两个请求都成功时才能执行某些流程时，我们可以使用promise.all()方法，all()里需要传入一个数组的参数，

//数组中便是我们的多个异步请求，只有当这些异步请求都成功时，才会调用.then方法执行数据的操作 

 

Promise.all([  //注意：这里的参数是个数组

   new Promise((resolve,reject)=>{

     setTimeout(() => {

       resolve({name:'codezlj',age:19,height:1.88})

     }, 2000);

   }),

   new Promise((resolve,reject)=>{

     setTimeout(() => {

       resolve({name:'codewhy',age:18,height:1.88})

     }, 1000);

   })

]).then(results=>{   //这里获得的结果results是个数组

  console.log(results);

})
</script>

七、解构赋值

Var obj={

       Name:”YoRHa”,

       Age:18,

       Height:1.88

}

如果想把对象中的属性取出来

常规写法：

Const name = obj.name

Const age = obj.age

Const height = obj. height

Es6对象的解构赋值

Const {name,age,height} = obj

解析对象的构造，进行赋值，这样只需要一行代码，里面的顺序是随意的

八、ES6中使用类

在es6中，可以使用class创建一个类

class person{}

如果要在里面添加一个对象，需要使用constructor(){}构造器构造一个对象

class person{

  constructor(name,age){

    this.name = name,

    this.age = age

  }

}

接着就可以通过new一个实例来使用这个类了

const p = new person("xiaoming",14)

console.log(p.name,p.age);