学习视频:
https://www.bilibili.com/video/BV1BU4y147pS?p=8&spm_id_from=pageDriver
ES6概述
ES(ECMAScript):是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称Europen Computer Manufacturers Association)通过ECMA-262标准化的脚本程序计算语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或Jscript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
发展历程:
web1.0时代:
最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。
web2.0时代:
1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996年,微软发布了JScript,其实是JavaScript的逆向工程实现。
1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript 标准规范。JavaScript和JScript都是ECMAScript 的标准实现者,随后各大浏览器厂商纷纷实现了ECMAScript 标准。
所以,ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript则是规范的具体实现。
ECMAScript的快速发展
而后,ECMAScript就进入了快速发展期。
1998年6月,ECMAScript 2.0 发布。
1999年12月,ECMAScript 3.0 发布。这时,ECMAScript 规范本身也相对比较完善和稳定了,但是接下来的事情,就比较悲剧了。
2007年10月。。。。ECMAScript 4.0 草案发布。
这次的新规范,历时颇久,规范的新内容也有了很多争议。在制定ES4的时候,是分成了两个工作组同时工作的。
一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。
ECMAScript 4 的很多主张比较激进,改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议,决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1,而ES4的内容,则延续到了后来的ECMAScript5和6版本中
2009年12月,ECMAScript 5 发布。
2011年6月,ECMAScript 5.1 发布。
2015年6月,ECMAScript 6,也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是ECMAScript6。
2016年 6月,小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布, 这个版本可以看作是 ES6.1版, 因为两者的差异非常小(只新增了数组实例的 includes 方法 和指数运算符),基本上可以认为是同 一个标准 。
2017 年 6 月发布了ES2017 标准。
因此, ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版本以后的 JavaScript 的下一代 标准,涵盖了 ES2015、ES2016、 ES2017 等,而 ES2015 则是正式名称,特指当年发布的正式 版本的语言标准 。
摘抄:https://blog.csdn.net/Leon_Jinhai_Sun/article/details/103437324
小结:ECMAScript是前端js的语法规范,可以应用在各种js环境中。如浏览器后者node.js环境
它有很多版本:ES/2/3/5/6,很多新特性,可以在js环境中使用这些新特性
ES6的语法:let和const命令
变量和常量是严格区分的
核心代码
新建ES6文件夹,通过右键vscode打开
新建HTML文件:01-let和const的定义.html
每次新建HTML文件里面都空空的,可以自定义模板。
搜索html.json,
输入以下内容,保存
"h5 template": {
"prefix": "html", // 对应的是使用这个模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"</head>\n",
"<body>",
"</body>\n",
"</html>"
],
"description": "HT-H5" // 模板的描述
}
然后在HTML页面输入html
就能得到对应的模板了
01-let和const的定义.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//传统定义变量和常量的方式,统一使用var
var name = "changan";
var link = "https://blog.csdn.net/weixin_44538225";
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);
//ES6定义方式
let nameEs6="guli";
let linkEs6 = "https://blog.csdn.net/weixin_44538225";
//定义常量
const PIEs6 = Math.PI;
console.log(nameEs6);
console.log(linkEs6);
console.log(PIEs6);
</script>
</body>
</html>
右键打开
查看结果
新建02-let和const跟var的区别.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//let 和 const解决
//1 var的变量穿透的问题---能执行,但是在java中编译都不能通过
// for(var i=0;i<7;i++){
// console.log(i);
// }
for(let i=0;i<7;i++){
console.log(i);
}
console.log(i);
//2 常量修改的问题
//var定义能修改π
// var PT=Math.PI;
// PI = 314;
// console.log(PI);
//换成const就不能修改
var PT=Math.PI;
PI = 314;
console.log(PI);
//实际开发中,如果是小程序、uniapp或者一些脚手架中,可以大胆的使用let和const
//但是如果是web开发,建议使用var,因为一些低版本浏览器不支持let和const
</script>
</body>
</html>
用var定义语句的执行结果
换成let语句的执行结果
其他的结果就不展示了
ES6的语法:模板字符串
之前使用的是" 或者 “” 把字符串套起来。现在用反引号(``)
新建03-ES6模板字符串.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//以前拼接语法。字符串会牵涉到动态部分 采用 "" 双引号
var content = {
name:"北京故宫",
aboutContent:"外朝的中心为太和殿、中和殿、保和殿,统称三大殿,是国家举行大典礼的地方",
link:"https://baike.baidu.com/item/北京故宫/345415"
};
let synopsis = content.name +"内的建筑分为外朝和内廷两部分。"+content.aboutContent+"。来自百度百科:"+content.link;
console.log(synopsis);
//ES6模板字符串语法 采用 `` 引号
//这个也支持换行
let introduction = `${content.name}内的建筑分为外朝和内廷两部分。${content.aboutContent}。来自百度百科:${content.link}`;
console.log(introduction);
</script>
</body>
</html>
运行结果一样:
ES6的语法:函数默认参数与箭头函数
函数默认参数:在方法的后面加上一个默认值即可。
新建04-函数默认参数与箭头函数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-函数默认参数与箭头函数</title>
</head>
<body>
<script>
//默认参数 给参数列表设定初始值
function add(a=10,b=20){
console.log(a,b);
}
// 执行方法,会用默认值填充,打印出来10,20
add();
//覆盖默认值打印,结果1,2
add(1,2);
//如果参数a,b不设置初始值的话,name下面打印的结果是NAN,也就是null
function sum(a,b){
return a+b;
}
var result = sum(10);
console.log("result ="+result);
//如果上面的参数a,b设置了初始值,打印结果就会相加
function consequence(a=10,b=20){
return a+b;
}
var conse = consequence(10);
// var conse = consequence(10,20);
console.log("conse ="+conse);
//重点!!!!!
//箭头函数,在未来开发中如小程序,unipp,一些常见的脚手架会大量使用
var changan = function(g,h){
return g+h;
}
//改进1
var changan=(g,h)=>{
return g+h;
}
//改进2
var changan=(g,h)=>g+h;
/** 规律
* 1:去掉function
* 2:在括号后面加箭头
* 3:如果逻辑代码仅有return,可以直接省去(但是有逻辑在里面,就不能够省去)
* 4:如果参数只有一个,可以把括号也省去(如果有多个参数就不能省去)
**/
var arr = [1,5,9,3,5,7];
var array = arr.map(function(object){
return object * 2;
});
//改变
var array = arr.map(object=>object*2);
console.log(array);
var minute = (a,s,d)=>a-s-d;
//还原
var minute = function(a,s,d){
return a-s-d;
}
</script>
</body>
</html>
运行结果
ES6的语法:对象初始化简写
指的是:如果一个对象中的key和value的名字一样的情况下可以定义成一个。
新建05-对象初始化简写.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-对象初始化简写</title>
</head>
<body>
<script>
//
let inform = {
title:"长安",
link:"https://blog.csdn.net/weixin_44538225",
go:function() {
console.log("长安,是西安的古称,是历史上第一座被称为“京”的都城")
}
};
//ES6简写
// 对象是以key:value存在
//1 key和变量名字相同,可以只定义一次即可
//2 如果value是一个函数,可以把`:function`全部去掉,只剩()即可
var title = "长安";
var link = "https://blog.csdn.net/weixin_44538225";
let information = {
title,//title: title,
link,
go:function() {
console.log("长安,是西安的古称,是历史上第一座被称为“京”的都城")
}
};
console.log(information);
console.log(information.title);
console.log(information.link);
information.go();
</script>
<!-- 案例 -->
<form action="">
<p>账号:<input type="text" id="account"></p>
<p>密码:<input type="text" id="password"></p>
<p><input type="button" value="登录" id="login"></p>
</form>
<script>
$("#login").on("click",function() {
var account = $("#account").val();
var password = $("#password").val();
//简写 account:account,password:password
var params={account,password}
//异步请求
$.ajax({
type:"post",
url:"",
data:params,
success(){
}
})
})
</script>
</body>
</html>
运行结果
ES6的语法:对象结构
ES6提供一些获取快捷键,获取对象属性和行为方式。
新建06-对象结构.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-对象结构</title>
</head>
<body>
<script>
// 对象是以key:value存在,两种获取对象属性和方法
//1 点
//2 中括号
var title = "长安";
var link = "https://blog.csdn.net/weixin_44538225";
let information = {
title,
link,
go:function() {
console.log("长安,是西安的古称,是历史上第一座被称为“京”的都城")
}
};
//通过.方式获取
console.log(information);
console.log(information.title);
console.log(information.link);
information.go();
//通过[]方式获取
console.log(information["title"]);
console.log(information["title"]);
information["go"]();
//ES6对象结构-快速获取属性和方法的方式的一种方式
var {title,link,go}=information;
console.log(title,link);
go();
//还原
// var title = information.title;
// var link = information.link;
/*
总结: 点和中括号方式的区别
1.点方法后面跟的必须是一个指定的属性名称,中括号里面可以是变量
2.中括号里面的属性可以是数字,点方法后面的属性名不能是数字
3.动态为对象添加属性是,只能用中括号
*/
</script>
</body>
</html>
ES6的语法:传播操作符(…)
把一个对象的属性传播到另外一个对象中
新建07-传播操作符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07-传播操作符</title>
</head>
<body>
<script>
//对象传播符 ...
var changan = {
name:"张家界",
address:"湖南省",
link:"https://blog.csdn.net/weixin_44538225",
phone:0744-123456789,
go(){
console.log("张家界被誉为“中国山水画的原本”、“缩小的仙境,放大的盆景”。");
}
};
//解构
//****因为name和address已经被解构出来了,
//剩下的link,phone,go()就会给到zhangjiajie这个对象****
var {name,address,...zhangjiajie} = changan;
console.log(name);
console.log(address);
console.log(zhangjiajie);
//****举例
//java - 后台
//数据格式:var userPage = {pages:5,users:[{},{}.......],pageNum:1,pageSize:30,total:30}
//异步请求
//$.post("user/search",funxtion(res){
//res = {pages:5,users:[{},{}.......],pageNum:1,pageSize:30,total:30};
var userPage = {pages:5,users:[{},{}],pageNum:1,pageSize:30,total:30};
var {users,...userPage2} = userPage;
//})
</script>
</body>
</html>
运行结果:
ES6的语法:数据map和reduce方法使用
map()
方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
reduce()
reduce(function(),初始值(可选));
接收弍函数(必须)和一个初始值(可选),该函数接收两个参数;
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数
新建08-数据map和reduce.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-数据map和reduce</title>
</head>
<body>
<script>
/*******map********/
// 对数组array每个元素*2
let array = [2,8,4,7,5,6];
//以前的方式
let naw = [];
for(let i=0;i<array.length;i++){
naw.push(array[i]*2);
}
console.log(naw);
//ES6中 map-->有个自带的循环,并且会把处理的值回填到对应的位置
// let nawEs6 = array.map(function(e){
// return e * 2;
// })
let nawEs6 = array.map(e=>e*2);
console.log(nawEs6);
//map 处理对象中的数据
let users = [{name:"故里",age:18},{name:"小蛮腰",age:19},{name:"梧桐",age:20}];
let newUsers = users.map(e=>{
e.age = e.age+1;
e.check = true;
return e;
});
console.log(newUsers);
/*******reduce********/
let arr = [7,8,9,5,1,7,3,7,1,2,5];
//先取n=7,n=8出来 相加 ,然后替换掉7,8再进行相加
//n=15,m=9......一起类推
let r = arr.reduce(function(n,m){
return n+m;
})
console.log("r ="+r);
</script>
</body>
</html>
运行结果
当然,前面一系列的JavaScript的代码全部写在js文件里面也是可以运行的,比如将01的代码全部写进01.js中
也就是说ES6的语法可以全部运行在NodeJs中。