Es6详解
一、 概述
- ECMAScript 是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言，在万维网上应用广泛，往往被称为JavaScript，可以理解为是JavaScript的一个标准。
- 快速发展：es2.0到es6.0
- 1997年诞生ES1，专门为JavaScript的脚本语言标准。ES6目前最主流，满足开发需求，再高版本很多浏览器不兼容。
- 每年更新
- ECMAScript是个标准，JavaScript是这个标准最流行普遍的实现，其他实现包括：SpiderMonkey，V8 和 ActionScript
二、Es6的语法
1. let和const命令
<script>
//传统定义变量和常量的方式 统一使用var
//ES6定义的方式:
//定义变量
let name1 = "xqh";
//定义常量
const PI2 = Math.PI;
console.log(name1)
console.log(PI2);
</script>
- let/const/var 的区别
- let 和const解决：
- var会导致变量穿透的问题
- var会导致常量修改的问题
<script>
for(var i= 0;i<5;i++){
console.log(i);
}
console.log(i); //结果是遍历出 0 1 2 3 4 5，造成变量穿透 Live reload enabled.
//改成let，解决变量穿透的问题 0 1 2 3 4
const PI = Math.PI;
PI=100;
console.log(PI); //用var的话会打印出100，违背了常量不可变。改成const，则不可变
//在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中，可以大胆的去使用let和const
//但是如果是web开发中，建议大家还是使用var，因为在一些低版本的浏览器还是不支持let和const
</script>
2.模板字符串
<script>
//字符串会牵涉到动态部分
var person={
name:"xqh",
address:"jiangxi",
link:"http://www.baidu.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>
3. 函数默认参数与箭头函数
- 函数默认参数
<script>
//函数默认参数
function sum(a=200,b=100){//默认参数
return a+b;
}
var result = sum(200);//只有一个先传递给a，b有默认参数的话就用默认参数
console.log(result);//300
</script>
- 箭头函数
<script>
//箭头函数-重点（在未来的项目开发中：比如小程序，uniapp，一些脚手架中大量使用）
var sum = function(a,b){
return a+b;
};
//改进 去掉function，在括号后面加箭头，如果逻辑代码仅有return可以直接省去,如果只有一个参数则括号也可以省去
var sum = (a,b)=>a+b;
var result = sum(2,3);
console.log(result);
//例子
var arr = [1,2,3,4,5,6];
var newarr = arr.map(function(obj){
return obj*2;
});
console.log(newarr)
//简化
var newarr1 = arr.map(obj=> obj*2);
</script>
4. 对象优化
- 对象简写
<script>
let info={
title:"江西农业大学",
link:"www.baidu.com",
go:function(){
console.log("我骑着小蓝车去上课");
}
};
//es6简写
//因为对象是key:value存在
//1：如果key和变量的名字一致，可以只定义一次即可
//2：如果value是一个函数，可以把`:function`去掉，只剩下（）即可
var title="江西农业大学";
var link = "www.baidu.com";
let info2 = {
title,
link,
go(){
console.log("我骑着小蓝车上课");
}
};
console.log(info2);
console.log(info2.link);
console.log(info2.title);
console.log(info2.go);
</script>
- 对象的内置函数
<script>
let person={
name:"jack",
age:21,
language:['java','js','css']
}
console.log(object.keys(person));//输出key ："name","age","language"
console.log(object.values(person)) //输出值
console.log(object.entries(person)) //key和value都输出，以数组的方式
//对象合并
const target={a:1};
const source1={b:2};
const source2={c:3};
//参数说明： 第一个参数是需要合并的对象 ，其他参数会合并到第一个参数上面，如果有重复的属性，会以后面的进行覆盖
object.assign(target,source1,source2); // 把source1和source2合并到target里
console.log(target) //{a:1,b:2,c:3}
</script>
- 声明对象书写方式
<script>
let person={
name:"徐庶",
//ES6之前
eat:function(food){
console.log(this.name+"吃了："+food)
}
//ES6新特性
//箭头函数
eat2:(food)=>console.log(person.name+"吃了："+food),
//省略function
eat3(food){
console.log(this.name+"吃了："+food)
}
}
person.eat("海鲜");
person.eat2("海鲜");
person.eat3("海鲜")
</script>
5.解构
- 对象解构—es6提供一些快捷获取对象属性和行为方式
<script>
//对象是以key:value存在，获取对象属性和方法的方式有两种
//1.通过. 2通过[]
var title="江西农业大学";
var link = "www.baidu.com";
let info2 = {
title,
link,
go(){
console.log("我骑着小蓝车上课");
}
};
//通过.的方式
console.log(info2);
console.log(info2.link);
console.log(info2.title);
info2.go;
//通过[]的方式
console.log(info2["title"]);
console.log(info2["link"]);
info2["go"]();
//es6对象结构--其实就是快速获取属性和方法的一种形式
var {title,link} = info2;
//还原出来就是 var title = info2.title var link = info2.link
</script>
- 数组解构
<script>
// Es6：数组的解构表达式
let arr=[1,2,3];
let[a,b,c]=arr; //把arr数组的值对应赋值给a,b,c
console.info(a,b,c) //就可以打印出a,b,c的值 1,2,3
</script>
6.对象传播操作符
- 对象传播操作符
<script>
//对象传播操作符
var person={
name:"学相伴",
address:"广东",
link:"www.kuangshen.com",
phone:123456,
go(){
console.log("开始上班了");
}
};
//解构出来
var {name,address,...person2}=person;//name/address被解构了。剩下的都会在person2中，这就是传播操作符
console.log(person2);//打印出来person2对象中只有link、phone、go（），因为name、address已经被解构出来了
console.log(name);
console.log(address);
</script>
- 简单应用案例
<script>
//java---后台
//数据格式 ：var userPage={pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100};
//异步请求 $.post("/user/search",function(res){
//res={pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100};
var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100};
var {users,...userPage2}=userPage;//这样就可以把pages,pageNo,pageSize,totle全部取出来，而users单独取出来
</script>
7.数组map和reduce方法使用
- 数组map
<script>
//要对arr数组每个元素*2
var 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可以很方便实现.map:自带的循环，并且会把处理的值回填对应的位置
var newarr2 = arr.map(function(ele){
return ele*2
})
//简化：var newarr2 = arr.map(ele=>ele*2);
console.log(newarr2);
//map处理对象的数据
var users=[{age:10,name:"小学"},{age:12,name:"小胡"},{age:15,name:"小胖"}];
//现在要进行每个人的年龄递增
var newusers=users.map(ele=>{
ele.age = ele.age+1;
return ele;
});
console.log(newusers);
</script>
- reduce()使用
<script>
//reduce快速将数组中元素求和
var arr=[1,2,3,4,5,6,7,8,9,10];
var result=arr.reduce(function(a,b){
return a+b;
});
//简化 var resule=arr.reduce((a,b)=>a+b);
console.log(result);
</script>
8、promise异步编排
异步非堵塞，不是一步一步进行运行。
<script>
//ES6新特性 promise 异步编排
new Promise((resolve,reject)=>{
//
}).then(result=>{
//
}).catch(err=>{
alert("服务器异常")
})
//成功后会触发then后的函数
//出现异常会触发catch后的函数
</script>
9、模块化
- 什么是模块化
- 模块化就是把代码进行拆分，方便重复利用，类似java中的导包：要使用一个包，必须先导包。而JS中没有包概念，换来的是模块
- 在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的
- 模块主要由两个命令构成：
'export’命令用户规定模块的对外接口，如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）
- export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象
import 导入模块
- 想要导入模块，先要导出模块
三、小结
- es6语法可以适用于nodejs中，不会报错
- 用终端输出
版权声明：本文为m0_56116754原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。