前端ES6简单总结

首先是es6当中新增了

let变量

let有以下2个特点：
1.作用域严格
2.不允许重名和重复赋值

        {
            let a ="123" ;
            var b ="456" ;
        }
        console.log(a);
        console.log(b);

这样的话运行时会报a没赋值的错误

            let a ="123" ;
            var b ="456" ;
            var b ="789" ;
            

这样运行之后b是789，a是123

            let a ="123" ;
            let a ="456" ;
            var b ="789" ;

这就会报错，a不可以重复声明
还有一种变量const，他是不允许修改的，是只读变量

const a=1;

**

下面是数组和对象类解构

**，比如我设置一个数组arr和对象，并把其中数组的所有数分配给a,b,c，对象的所有数分配给name ,age ,family 以前是这样分配

let arr=[1,2,3];
let a=arr[0];
let b=arr[1];
let c=arr[2];

const person{
	name = "张三";
	age = 18;
	family = ["妈妈","爸爸","妹妹"];
}
const name = person.name;
const age = person.age ;
const family = person.family ;

现在可以用下面这种写法更加方便快捷

let arr=[1,2,3];
let [a,b,c]=arr;

const person{
	name = "张三";
	age = 18;
	family = ["妈妈","爸爸","妹妹"];
}
const {name,age,family} = person

下面是字符串拓展

let str = "hello.vue"
str.startsWith("hello"); //是否以hello开头
str.endsWith("vue");  //是否以vue结尾
str.includes("e");  //是否包含e
str.startsWith("vue");  //是否包含vue

多行字符串

let str = `
<div>
	<span>hello</span>
</div>
 `;

引用变量或者方法

function fun(){
    return "这是一个方法";
}
let abc="张三"
let age = "10";
console.log("我是"${abc},"我的年龄是"${age+10},"方法返回值为"${fun()})

方法优化

当方法没传参数时设置默认值

fun(a,b=1){
	return a+b;
}

当b没有传参数时b为1。
不定参数

function test(...values){
	console.log(values.length)
}
test(1,2);  //2
test(1,2,3,4);  //4

上面test方法显示随便传几个值，然后控制台输出输入参数的个数。
箭头函数
以前创建一个方法给对象

var print = function(obj){
	console.log(obj);
}

箭头函数创建

var print = obj => console.log(obj);//单个参数 方法内代码只有一行
var sum = (a,b) => a+b;//多个参数 方法内代码只有一行
var sum2 =(a,b) =>{  //多个参数 方法内代码多行
	var c=a+b;
	console.log(a+c);
}

对象优化

const person{
	name = "张三";
	age = 18;
	family = ["妈妈","爸爸","妹妹"];
}
Object.keys(person);//["name","age","family"]
Object.values(person);//["张三",18,["妈妈","爸爸","妹妹"]]
Object.entries(person);//{["name","张三"],["age",18],["family",["妈妈","爸爸","妹妹"]]}

const target={a:1};
const source1={b:2};
const source2={c:3};

Object.assign(target,source1,source2);//{a:1,b:2,c:3}

声明对象优化

//传统
const age=18
const name = "zhangsan"
const person = {name : name ,age : age}
//新版
const age=18
const name = "zhangsan"
const person = {name ,age}//同名的话可以直接使用变量名作为属性名

箭头函数不能用this

let person={
	name: "jack";
	eat: function(food){
		console.log(this.name+"在吃"+food);
	}
	eat2= food=> console.log(this.name+"在吃"+food);//这里会报错显示无法获取name
	eat3= food=> console.log(person.name+"在吃"+food);//修改这样可以获取
	eat4(food){
		console.log(this.name+"在吃"+food);//也可以直接这么写
	}
}
person.eat("苹果");
person.eat2("苹果");
person.eat3("苹果");
person.eat4("苹果");

对象拓展运算符

let person{
	name:"lisi"
	age:15
}
let copyperson={...person}//这样会把person当中的所有键值对赋值给copyperson，而如果copyperson中之前有值而且key相同,则会被person当中的值覆盖

let arr=["1","-13","567"];//这是一个字符串的数字数组
arr= arr.map(item=>item*2);//这样可以直接将字符串数组当中的数字的值乘2
console.log(arr);//输出arr["2","-26","1134"]

let result=arr.reduce((a,b)=>{
	console.log("上一次处理后："+a);
	console.log("正在处理："+b);
	return a+b;
});
console.log(result);

promise异步操作
我们先创建一个mock文件夹,在文件夹下面创建3个json文件
user.json,user_corse.json,corse_score,json
user.json

{
	"id": 1,
	"name": "zhangsan",
	"password": "123456"
}

user_corse.json

{
	"id": 10,
	"corsename": "yuwen"
}

corse_score

{
	"id": 100,
	"score": 90
}

我们先写一个get方法

function get(url,data){
	return new promise(resolve,reject)=>{
		$ajax({
			url: url,
			data: data,
			success:function(data){
				resolve(data);
			},
			error:function(err){
				reject(data);
			},
		})
	}
}
get("/mock/user.json")
.then((data)=>{
	console.log("用户查询成功");
	return get(`/mock/user_corse_${data.id}.json`);
})
.then((data)=>{
	console.log("课程查询成功");
	return get(`/mock/corse_score${data.id}.json`);
})
.then((data)=>{
	console.log("课程成绩查询成功"+data);
})
.catch((err)=>{
	console.log(err);
});