在ES6中,一般不再使用var定义变量,而是使用let(定义变量)/const(定义不会去改变的变量)
Let可以看做更完美的var,let拥有块级作用域(比如if/for),而var没有块级作用域
用const定义的变量其指向的是其地址,所以我们不能直接重新赋值,但是如果是像对象这样的属性,我们可以修改属性内部的值
例如
const books={id:1,name:”简爱”}
我们不能直接对books重新赋值,却可以通过
Books.id = 2
这种方法修改内部的值。
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(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
<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>
<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>
<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中,可以使用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);