解构赋值
es5中我们的做法如下:
var people={
name:"zs",
age:20
}
var name=people.name;
var age=people.age;
console.log(name,age)
这里的结果就为:"zs",20
在es6中我们就可以像下面这样写:
var people={
name:"zs",
age:20
}
var {name,age}=people
console.log(name,age)
结果和上面一样:"zs",20。
如果想重新命名,则:
var {name: name1,age:age1}=people
console.log(name1,age1)
结果也是一样的:"zs",20
而数组中则可以:
var ar=[11,22,33,55]
var [a,b,c]=ar;
console.log(a,b,c)
结果为:11,22,33
注意:对象解构时,键名必须相同,想要重新命名的话需要向上面那样操作,而数组解构时,是根据对位来实现的。
默认参数(Default) + 不定参数(Rest) + 扩展展开运算符(Spread)
默认参数
在es6中给入默认参数可以直接在形参后面跟上等式,比如:
function fn(name="zs",age=20){
console.log("我叫"+name+"今年"+age+"岁")
}
当我们调用fn这个函数时,如果不传参,则会打印出:我叫zs今年20岁
当我们给入参数时,则会根据我们给入的参数打印,比如:fn("ls",18)
就会打印出:我叫ls今年18岁
不定参数
顾名思义就是不定数量的参数,比如:
function nums(x,...y){
console.log(y)
}
nums(1,2,3,4,5)
结果为:[2,3,4,5]
展开运算符
用于赋值时直接展开所有元素,比如:
var obj={
name:"zs",
age:18,
sex:"man"
}
var obj1={...obj,height:"183cm"}
这里的obj2就为:
{name:"zs",age:18,sex:"man",height:"183cm"}
数组也一样。
注意:给入不定参数时,必须放到最后一个参数,而展开运算符随便放到哪个位置。
增强的对象字面量
给对象属性赋值时,无需写成键值对,例如:
es5中:
var name="zs";
var age=18;
var obj={ name:name,age:age}
es6中:
var name="zs";
var age=18;
var obj={name,age}
箭头函数与this语法
语法:(参数体)=>{函数体}
s箭头函数中的箭头函数主要分为三部分
=>前的部分 【参数部分】
=>
=>后的部分 【函数体部分】
1.=>前的部分是函数的参数部分,主要有以下几种情况:
参数为空(写一个空括号即可)
()=>
只有一个参数a(只写a或者在a外加一个括号)
(a)=> 或者 a=>
有多个参数a,b,c,d(必须写在括号里)
( a,b,c,d)=>
含有默认值的参数(直接给参数赋值就可以了,同以前一样)
(a=1,b=2,c=3,d=4)=>
含有不定参数(直接写就行,同以前一样)
(a,b,…c)=>
另外,箭头函数参数也支持解构赋值。
2.=>后的部分
=>后的部分也就是函数体主,要有以下几种情况:
1. 函数体只有一条语句
写法: =>语句;
当函数体只有一条语句时,可以不加花括号,直接将这条语句写在箭头后面即可.
然后如果这条语句是一个return value这种的话,请去掉return,直接写那个值value即可。在箭头函数执行时,会自动将其作为返回值返回。
当然,如果这个值是一个对象,请在他的外面加上一个括号如({value})因为如果不加的话,{会被认为是函数体的开始,而不会被认为是一个对象的开始。
2.有多条语句(要加上花括号,写法和以前一样)
=>{
语句1;
语句2;
语句3;
}
箭头函数中的this
箭头函数会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值。
类(classes)
ES6的类只是一个语法糖,通过class关键字让语法更接近传统的面向对象模式,本质上还是基于原型的。使用单一便捷的声明格式,使得类使用起来更方便,也更具互操作性。类支持基于原型的继承,调用父类的构造函数,生成实例,静态方法和构造函数。例如:
ES5中:
function People(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex
}
People.prototype.show=function(){
console.log("我是"+this.name+",今年"+this.age+"岁,"+"性别:"+this.sex)
}
var preson=new People("zs",20,"男")
调用: preson.show()
我是zs,今年20岁,性别:男
ES6中:
class Peoples{
constructor(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex
}
show(){
console.log("我是"+this.name+",今年"+this.age+"岁,"+"性别:"+this.sex)
}
}
var presons=new Peoples("zs",20,"男")
调用: presons.show()
我是zs,今年20岁,性别:男
Map + Set
Set
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值;
Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。(可达到数组去重的目的)
var myset=new Set([11,22,22,33,44,44])
调用myset就为:
{11,22,33,44}
它会自动去除重复的值
Set自身还有一些方法:add(),delete(),has(),clear(),forEach()
接上段代码:
myset.add(88);
再次调用myset就会为:{11,22,33,44,88};
myset.delete(44); --->返回布尔值,true代表删除成功,false代表删除失败
再次调用myset就会为:{11,22,33,88};
myset.has(22);
has代表判断当前这个是否含有22,如果有返回true,没有返回false
myset.clear();
clear代表清空当前
如果想要循环得到需要使用for of 方法
for(let i of myset){
console.log(i)
}
i就代表每个元素
myset.forEach(function(i,ele,arr){
console.log(i,ele,arr)
})
i,ele--->都代表元素本身
arr---->代表myset本身
注意:对于添加引用数据类型时,会判断地址是否相等,当添加NaN时,它会认为NaN都是同一个,只会添加一次。
将Set转为数组的方法:
方式一:
var myset=new Set([111,222]);
var arr=[...myset]
方式二:
var myset=new Set([111,222]);
var arrs=Array.from(myset);
myset:{111,222}
这里的arr和arrs都为[111, 222]
Map
Map类型(字典类型)是一种更完善的Hash结构实现。也就是我们常说的“键值对”的数据结构,它类似于对象为键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map比Object更适合表示键值对,或者说更加专业。例如:
var mymap=new Map()
mymap.set("name","zs")
这时调用我们的mymap就为:
{"name"=>"zs"}
Map的方法:size、set、get、has、delete、clear
size ---->相当于我们length,但是Map类型没有length属性,是用size代替;
set ---->相当于添加,第一个参数为键名,第二个参数为值;
get ---->获去某一个,参数为键名;
其他的has,delete,clear都跟上面的Set一样;
但是它的forEach方法与数组的forEach方法一样
Promises
Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise
所谓Promise ,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,它可以获取异步操作的消息。 并返回一个含有此消息的promise对象
Promise对象提供统一的接口,使得控制异步操作更加容易。
var p=new Promise(function(suc,fail){
//发起异步操作,ajax请求
if(*异步操作成功*){
suc(value);//在异步操作成功时调用,返回异步操作结果
}else{
fail(err);//在异步操作失败时调用,返回异步操作结果
}
})
var p1=p.then(function(data){
console.info(data);
//发起第二次请求
//返回请求结果
})
其中的参数suc代表成功执行时要做的操作;fail代表失败时要做的操作
.then()方法:
then方法可以接受两个回调函数作为参数。
第一个回调函数是Promise 对象的状态变为suc时调用,
第二个回调函数是Promise 对象的状态变为fail时调用。
其中,第二个函数是可选的,不一定要提供。
这两个函数都接受Promise 对象传出的值作为参数。
关于catch方法
正常情况then方法会接受两个参数,分别表示成功的处理函数和失败的处理函数。
但是很多时候我们可能含有多个then方法,这时如果要每个then里面都写上失败处理函数就太麻烦了,这时我们就可以使用catch方法。
我们在最末尾加上catch方法,那么它就可以捕获前面任何地方产生的错误,如下:
//得到一个新的Promise
var p = new Promise((suc, fail) => {
//与后端连接并传入参数
$.get("http://127.0.0.1:8081/one",{username:"admin",password:"123"},data => {
if (data.username == "admin") {
suc(data)
} else {
fail(data)
}
})
}).then(data => console.log(data))
.then(data => console.log(data))
.catch(data => console.log("失败", data))
注意:
一旦在catch前的某个then方法中写了第二个参数用于捕获错误,那么当前错误就会到此停止,后面就是正确的流程了。
如果在后面的流程中没产生其他错误,那么catch方法也不会再执行,如果出错了,那么catch仍然会继续执行。
Promise对象的两个特点
- 对象的状态不受外界影响。
Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise 对象的状态改变,只有两种可能:从进行中变为已成功和从进行中变为已失败。只要这两种情况发生,状态就不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。
Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于进行中状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
使用Promise连续发起多次请求
如果要使用promise发起多次请求,那么从第二次开始我们就要把每次的ajax方法放入一个promise对象中,最后将promise对象返回,这样外部才会获取到本次请求的结果。
fecth
fetch定义
fetch就是除了XMLHttpRequest以外从前端获取后端数据的方法
fetch的使用方法
语法:fetch(url,init).then(function(response) { } )
其中url是指后端接口的路径,init是一个对象,里面包含一堆参数,比如:method--->向后端请求时的方法是get还是post;
body:------>post才具有的属性,传入的参数,比如:
fetch("http://127.0.0.1:8085/three", {
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"},//post才具有的请求头
body: JSON.stringify({ username:"zs", password: "123" }),
})