1,变量
Var 的缺陷
1-1,可以重复声明,但是在C语言里面不可以;
1-2,无法限制修改,即无法设置常量。在C语言里面是可以定义常量的,这个常量放在data区域,不能修改,但是var定义一个常量,是可以更改的;
1-3,没有块级作用域。在C语言里面{}就是块,在块里面定义的变量即使与块外面的定义的变量一致,那么也不会相互影响。
ES6里面的定义变量关键字let和const
使用let无法重复声明,使用const也无法重复声明,且不可修改。存在块级作用域。
只要写在{}里面,在{}外面调用的就报错。
2,函数-箭头函数
()当只有一个参数的时候可以省去
只有一个return时,可以省去{return}
3,函数的参数
3-1,参数扩展和展开
收集参数,举个栗子
function show(a,b,…args){}
show(1,2,3,4,5);
那么args=3,4,5
数组展开传参,举个栗子
function show(a,b,c){}
Show需要传三个参数,但是参数写在了一个数组中
let arr = [1,2,3];
//此时可以用show(…arr);相当于show(1,2,3);
展开数组的效果就跟直接把数组的内容取出来传参。
总之…能够将分离的参数打包,也可以将打包好的参数解开成单个的参数,对于数组来说,说白了可以直接将方括号[]去掉。
3-2,默认参数
在函数里面的默认参数可以这样写:
show(a,b=2,c=10){
console.log(a,b,c)//1,2,10
}
4,解构赋值
4-1,左右两边解构必须一样
举个栗子
let [a,b,c] = [1,2,3]
let {a,b,c} = {a:1,b:2,c:3}
4-2,右边必须是个合法的东西,{1,2}就会报错
4-3,声明和赋值不能分开,必须放在一起
举个栗子
let [a,b];
[a,b] = [1,2]
这样写的话就会报错
5,数组
5-1,map映射,一对一,返回数组
举个栗子
let arr=[1,2,3]
let result = arr.map(item=>item*2)
let result = arr.map(item=>item>=1?’d大于1:’’小于1);
5-2,reduce汇总 - 返回一个数而不是数组,如可以计算总数和 平均数
举个栗子
let score = [100,101,102]
score.reduce((tmp, item, index)=>{
return tmp+item
} )
可以看到返回的是总数
5-3,filter过滤器,返回的是数组
举个栗子
let arr=[1,2,3,4,5,6]
let result = arr.filter(item=>item%3==0);
返回被3整除的数字
5-4,forEach 循环迭代
6,字符串
6-1,多了两个新方法
startWith和endWith
6-2,字符串模板
let a= 12
let str = `a${a}bc`//a12bc
7,面向对象
7-1,class关键字,构造器和类分来了
7-2,class里面直接加方法
7-3,继承,通过super来继承
之前的类的写法:
function User( ){
this.name = name;
this.age = age;
}
User.prototype.showName = function(){
console.log(this.name)
}
User.prototype.showAge = function(){
console.log(this.age)
}
var user1 = new User(‘张三’,21);
ES6对类的写法:
class User{
constructor(name, age){
this.name = name;
this.age = age
}
showName(){
console.log(this.name);
}
showAge(){
console.log(this.age);
}
}
之前类的继承:
function VipUser(name, age, gender){
User.call(this,name,age);
this.gender = gender;
}
VipUser.prototype = new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showGender = function(){
console.log(this.gender)
}
ES6的继承
class VipUser extends User{
constructor(name,age,gender){
super(name, age);//继承超类(继承父类)
this.gender=gender
}
showGender(){
console.log(this.gender)
}
}
8,面向对象的应用
React - 强依赖于ES6面向对象
8-1,组件化,一个组件就是一个class
8-2,jsx语法
9,json
JSON.stringify变成字符串
JSON.parse()变成JSON
需要注意的是在转换成JSON过程中,字符串的标准写法
1,必须是双引号
2,所有名字都需要加双引号
否则不能转换成功
简写方法:
可以直接写变量,只要json对象的key值和value名字一致就可以
如let a =12; let b=12;
但是此时需要传一个json对象,后端要求的对象属性名也是a,b,那么可以这样写:
let json = {a,b,c:32}
如果里面有函数,那么可以省去:function
举个栗子
let json = {
a:1,
show(){
alert(this.a)
}
}
10,promise函数
ES6自带promise,需要的时候通过new来创建。
注意promise.all 和promise.race的使用和区别
但是也有缺点,比如好几个请求互相之间有逻辑关系,那么此时的promise就不适用了,写法和jQuery的ajax一样都是在嵌套。此时就需要用到generator函数。
11,generator-生成器
是一个特殊的函数,普通函数一路执行到底,generator函数中间可以停止,使用关键字yield
适用场景:当我们发起请求1后的结果作为请求2的参数再发起请求,请求2的结果要作为请求3的参数。使用generator就可以优雅的写成同步式的代码,避免多层嵌套。但是这个生成器使用的时候要借助外部库runner。ES7里面将这个函数改成了async await。使用时不再利用第三方库或者封装generator了。可以优雅的将异步的代码写成同步方式。
举个栗子
function getCode(){
return axios.get('json/code.json');
}
function getlist(params){
return axios.get('json/person.json',{params})
}
getlist的Parmas参数要用到getcode请求的结果,常规做法如下:
function getFinal(){
console.log("我是getFinal函数")
getCode().then(function(res){
if(res.data.code == 0){
console.log(res.data.code);
var params = {
code:res.data.code
}
getlist(params).then(function(res){
if(res.data.code == 0){
console.log(res.data.list);
}
})
}
})
}
getFinal();
但是使用async和await可以这样写:
async function getResult(){
let code = await getCode();
console.log(code.data.code);
if(code.data.code == 0){
var params = {
code:code.data.code
}
let list = await getlist(params);
console.log(list.data.list);
}
}
getResult();
12,set函数
Set是为了构建某一类型对象,所以也叫构造函数。 - 对象的实例化。
set本身的方法:
- size()-对象的长度;
- clear()-清空所有项;
- delete(var)-清空某项值,不是下标;
- add(var)-添加不重复的值;
- has(var)-是否包含某项值。
注意:可以链式调用
应用:
数组去重,举个栗子
let a = [2,1,2,1,3,5,6,5]
let b = new Set(a);
console.log(b)//[2,1,3,5,6]
但是这是一个set对象,不是数组,所以需要进行转换
let c = [...b]