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

  • 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);

你可能感兴趣的:(study,note)