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