初学ES6
01-let和const的定义
<script>
// 传统定义变量和常量的方式 统一使用var
var name = "广东学相伴";
var link = "https://www.kuangstudy.com";
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);
//ES6定义的方式
let name2 = "广东学相伴";
let link2 = "https://www.kuangstudy.com";
//定义常量
const PI2 = Math.PI;
console.log(name2);
console.log(link2);
console.log(PI2);
</script>02-let,const,var的区别
<script>
//let 和 const解决
//1:var的变量穿透的问题
//2:常量修改的问题
for(var i = 0;i<5;i++){
console.log(i);
}
//这里就造成了变量穿透,修改为let解决
console.log(i);
var PI = Math.PI;
PI = 100;//对常量进行了修改,改为const解决
console.log(PI);
//在实际开发中,如果是小程序,uniapp或者一些脚手架中的,可以大胆的去使用let和const
//但是如果是web开发,建议使用var,因为在一些低版本浏览器中还是不支持let和const的
</script>03-模板字符串
<script>
//字符串会牵扯到动态部分
var person = {
name : "飞哥",
address : "广东学相伴",
link : "https://www.kuangstudy.com"
}
let address = "我是"+person.name+",正在"+person.address+"讲课,讲课的内容会上传到官网:"+person.link+"上";
console.log(address);
//ES6的语法模板字符串语法
let address1 = `我是${person.name},正在${person.address}讲课,讲课的内容会上传到官网:${person.link}上`;
console.log(address1);
</script>04-函数默认参数
<script>
//函数默认参数
function sum(a=50,b=50){
return a+b;
}
//不传参数,使用参数的默认值,不设置默认值,默认值就是undefined
var result = sum(100);
console.log("result="+result);
</script>05-箭头函数
<script>
//箭头函数 - 重点(在未来的项目开发中:比如小程序,unipp,一些常见的脚手架大量使用)
var sum = function(a,b){
return a+b;
}
//箭头函数 - 改进1
var sum = (a,b)=>{
return a+b;
}
//箭头函数 - 改进2
var sum = (a,b)=>a+b;
//通过上面的例子你找到了什么规律
//1:去掉function
//2:在括号后面加箭头
//3:如果逻辑代码中只有return,可以只保留return后的内容,其它全部省去
//4:只用一个参数括号可以省略
//var sum = (a,b)=>a+b;
var arr = [1,2,3,4,5,6];
var newArr = arr.map(function(obj){
return obj * 2;
});
//改变
var newArr2 = arr.map(obj => obj * 2);
console.log(newArr);
console.log(newArr2);
</script>06-对象简写
<script>
let info = {
title:"广东学相伴",
link:"https://www.kuangstudy.com",
go:function(){
console.log("我骑着小蓝车来公司上班");
}
};
//ES6简写
//因为对象是key:value存在
//1:如果key和变量的名字一致,可以定义一次即可
//2:如果value是一个函数,可以把`:function`去掉,只剩下()即可
var title = "广东学相伴";
var link = "https://www.kuangstudy.com";
let info2 = {
title,
link,
go(){
console.log("我骑着小蓝车来公司上班");
}
};
console.log(info);
console.log(info2);
</script>
<!-- 对象简写的案例 -->
<form action="">
<p>账号:<input type="text" id="account"></p>
<p>密码:<input type="password" id="password"></p>
<p><input type="button" value="登录" id="loginbtn"></p>
</form>
<script>
//document.getElementById("loginbtn").onclick = function(){}
$("#loginbtn").on("click",function(){
var account = $("#account").val();
var password = $("#password").val();
//这里采用了对象简写
var params = {account,password};
//执行异步请求
$.ajax({
type:"post",
url:"xxx",
data:params,
success(){
}
});
});
</script>07-对象解构
<script>
//对象是key:value存在,获取对象属性和方法的方式有两种
//1:通过 .
//2:通过 []
var title = "广东学相伴";
var link = "https://www.kuangstudy.com";
let info = {
title,
link,
go(){
console.log("我骑着小蓝车来公司上班");
}
};
//通过.的方式
console.log(info.title);
console.log(info.link);
info.go();
//通过[]的方式
console.log(info["title"]);
console.log(info["link"]);
info["go"]();
//ES6对象结构 - 其实就是快速获取属性和方法的一种形式
var {title,link} = info;
//上面的一行代码相当于下面这两行代码
//var title = info.title;
//var link = info.link;
console.log(title,link);
//为什么对象的取值要提供两种方式?
</script>08-对象传播操作符
<script>
//对象传播操作符 ...
var person = {
name : "学相伴",
address : "广东",
link : "https://www.kuangstudy.com",
phone:123456,
go(){
console.log("开始上班了");
}
};
//解构出来
var {name,address,...person2} = person;
console.log(name);
console.log(address);
console.log(person2);
</script>
<!-- 案例 -->
<script>
//java ---后台
//数据格式:var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
//异步请求
$.post("/user/search",function(res){
res = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
var {user,...person3} = res;
});
//以上操作是将对象中的一个属性赋值出去,把对象中剩余的内容赋值给另一个对象
</script>09-数组map
<script>
//要对arr数组每个元素*2
let arr = [1,2,3,4,5,6,7];
//传统的方式
let newarr = [];
for(let i=0;i<arr.length;i++){
newarr.push(arr[i]*2);
}
console.log(newarr);
//map -- 自带的循环,并且会把处理的值回填到对应的位置
let newarr2 = arr.map(ele => ele * 2);
console.log(newarr2);
//map处理对象的数据
let users = [{age:10,name:"小学"},{age:12,name:"小相"},{age:15,name:"小伴"}];
let newusers = users.map(ele => {
ele.age = ele.age + 1;
ele.check = true;
return ele;
});
console.log(newusers);
</script>10-数组reduce
<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
//a=1,b=2 a+b=3
//a=3,b=3 a+b=6
//a=6,b=4 a+b=10
//a=10,b=5 a+b=15
//a=15,b=6 a=b=21
//......
var result = arr.reduce((a,b) => a + b);
console.log("result =",result);
</script>注:ES6 可以在node.js,uniapp,微信小程序等得到广泛支持
