关于ES6呢，它是ECMA的为JavaScript制定的第6个版本的标准，标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。
但是采用1234的版本号来标注规范总有点不太合适。所以从 ECMAScript 6 开始，就开始采用年号来做版本,而ECMAscript 2015 是在2015年6月份发布的ES6的第一个版本。依次类推ECMAscript 2016 是ES6的第二个版本、 ECMAscript 2017 是ES6的第三个版本。
这ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等。
下面就让我们来看看这个是何方神圣
1.var 关键字声明变量
EMCA6新增两个关键字
let const 也可以声明变量
var关键字和let和const关键字声明变量到底有什么区别？
1、let和const不允许重复声明变量。
2、let和const声明的变量不会进行声明提升。（通过let声明变量，之前的区域，叫做暂时性死区）
3、let和const声明的变量会被所有的代码块限制作用域（作用域更小），只要遇到大括号就形成作用域。
let关键字和const的区别
1、let声明的变量的值可以被改变 const声明的变量的值不可以被改变（const一般情况声明常量）
2、let声明的时候可以不赋值，const声明的时候必须赋值
<script>
let num;
alert(num); //undefined
const num2 = 20;;
alert(num2);
/*
const IP = "127.0.0.1";
IP = 10;
alert(IP);
// let num1 = 10;
// alert(num1);
// num1 = 20;
// alert(num1);
const num2 = 10;
alert(num2);
num2 = 20;
alert(num2);
*/
//1、let和const不允许重复声明变量。
// var num = 10;
// var num = 20;
// alert(num);
// let num1 = 10;
// let num1 = 20;
// alert(num1);
// const num2 = 10;
// const num2 = 20;
// alert(num2);
/*
if(1){
var num = 10;
// let num2 = 20;
const num2 = 20;
alert(num2);
}
alert(num);
alert(num2);
*/
</script>
2.预解析声明提升
var num;
声明提升：变量的声明都必须，所有程序之前面去执行。
alert(num);
num = 10;
alert(num);
*/
// alert(num);
// let num = 10;
// alert(num);
alert(num);
const num = 10;
alert(num);
3.作用域
通过var声明的变量以当前所在函数为作用域，
如果我们在某一个函数内部声明变量和作用域，只能在当前函数内部使用。
function show(a){
var b = 20;
alert(a + ", " + b);
}
show(10);
alert(a + ", " + b);
*/
// if(1){
// var num = 20;
// }
// alert(num);
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
// for(var i = 0; i < aBtns.length; i++){
// aBtns[i].onclick = function(){
// alert(i);
// }
// }
for(let i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(i);
}
}
/*
{ i = 0;
aBtns[i].onclick = function(){
alert(i);
}
}
{ i = 1
aBtns[i].onclick = function(){
alert(i);
}
}
{ i = 2
aBtns[i].onclick = function(){
alert(i);
}
}*/
// alert("循环结束：" + i); //i is not defined
}
// if(1){
// const num = 10;
// }
// alert(num);
// var num = 10;
// alert(window.num);
// alert(num);
/*
let 和 const 永远不会有全局变量。
*/
let num = 10;
alert(num);
alert(window.num);
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
4.箭头函数
<script>
//函数声明式写法
function add(x, y){
return x + y;
}
//函数表达式写法
var add = function(x, y){
return x + y;
}
/*
箭头函数 适当省略return和function关键字
【注】箭头函数从执行效率上来说，和普通的声明函数写法没有任何区别。
个人建议：按照个人习惯。
*/
var add = (x, y) => x + y;
alert(add(30, 40));
// alert(add(10, 20));
</script>
其二有一点要注意
重点：箭头函数只能简写函数表达式，不能简写声明式函数。
function fn(){} //不能简写
var fun = function(){ //可以简写
}
// var fun = () => {};
javascript
var obj = {
fn: function(){ //可以简写
}
}
//======================================================
var obj = {
add: function(a, b){
return a + b;
}
}
alert(obj.add(10, 20));
var obj = {
add: (a, b) => a + b
}
alert(obj.add(30, 40));
箭头函数的特殊性
1、箭头函数中没有this，箭头函数里面的this指向上一层函数中的this。
2、箭头函数中没有arguments这个对象
var person = {
username: "钢铁侠",
// showName: function(){
// alert("我的名字叫" + person.username);
// alert("我的名字叫" + this.username);
// }
showName: () => {
// alert("我的名字叫" + person.username);
// alert("我的名字叫" + this.username); //我的名字叫undefined
alert(this);
}
}
person.showName(); //object Window
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
var person = {
username: "钢铁侠",
// showName: function(){
// alert("我的名字叫" + person.username);
// alert("我的名字叫" + this.username);
// }
showName: () => {
// alert("我的名字叫" + person.username);
// alert("我的名字叫" + this.username); //我的名字叫undefined
alert(this);
}
}
person.showName();
}
}
var show = function(){
console.log(arguments);
console.log(arguments[1]);
}
*/
var show = () => { //arguments is not defined
console.log(arguments);
console.log(arguments[1]);
}
show(10, 20, 30);
</script>
</head>
<body>
<button id = 'btn1'>按钮</button>
</body>
5. 关于结构
var x = 10, y = 20, z = 30;
alert(x + ", " + y + ", " + z);
var [x, y, z] = [10, 20, 30];
alert(x + ", " + y + ", " + z);
var [x, [a, b], y] = [10, [20, ], 40];
alert(b + ", " + y);
var {name, age, sex} = {
age: 18,
name: "钢铁侠",
sex: "男"
}
alert(name);
alert(age);
alert(sex);
解构的好处：
1、交换两个数位置的时候
[num1, num2] = [num2, num1];
2、函数传参的时候没有必要考虑函数的顺序
3、解构的形式里面，也可以给参数设置默认值
4、函数可以同时返回多个结果
var num1 = 10;
var num2 = 20;
alert("num1:" + num1 + ", num2:" + num2);
[num1, num2] = [num2, num1];
alert("num1:" + num1 + ", num2:" + num2);
alert("num1:" + num1 + ", num2:" + num2);
var tmp = num1;
num1 = num2;
num2 = tmp;
alert("num1:" + num1 + ", num2:" + num2);
/*
function showSelf(name, age, sex){
alert("我的名字叫" + name + "，今年" + age + "岁，性别是" + sex);
}
showSelf("绿巨人", "男", 40);
*/
/*
function showSelf({name, age = 40, sex = "男"}){
alert("我的名字叫" + name + "，今年" + age + "岁，性别是" + sex);
}
showSelf({
sex: "女",
age: 30,
name: "黑寡妇"
})
*/
function show(){
//经历很多代码
return ["结果1", "结果2", "结果3"];
}
let [x, y, z] = show();
alert(x);
alert(z);
6.关于模板字符串
普通字符串：所有带单引号或者双引号就叫做字符串。
‘hello’ “world”;
1、普通的字符串，一般情况下，只能放在一行处理
2、进行字符串拼接，通过+号进行拼接
ECMA6新的字符串 --- 模板字符串
<1>必须用反引号``括起来，可以随机换行
<2>占位符的语法，进行字符串拼接 ${表达式}
function showSelf({name, age = 40, sex = "男"}){
alert(`我的名字叫${name}, 我的年龄是${age}, 我的性别是${sex}`);
}
showSelf({
name: "贝吉塔",
age: 33,
sex: "男"
})
作用域千万不能当做语法去记忆。
作用域是结果，原因是因为代码运行的时候有垃圾回收机制。
举个栗子来说说this的改变指针方向
<script>
function show(){
alert(this);
}
// show(); //[object Window]
// window.show();
/*
强制改变this的指向
call
格式：函数名.call()
参数：第一个参数传入，this的指向
函数原有的参数全部往后顺移一位
// show.call("call");
function show(x, y){
alert(x + ", " + y);
alert(this);
}
// show(10, 20);
show.call("call", 30, 40);
*/
/*
apply
格式：函数名.apply()
参数：第一个参数传入this的指向
第二个参数是一个数组，数组里面存放着，我们所有需要传入的参数
*/
/*
function show(x, y){
alert(x + ", " + y);
alert(this);
}
show.apply("apply", [50, 60]);
*/
/*
bind
格式：函数.bind()
参数：参数是this的指向
返回值：已经改变原来this指向的原函数
【注】this已经被预设改掉了。
蔡徐坤有一个苹果，放在了自己的兜里，苹果留了一个纸条，我专享
function show(x, y){
alert(x + ", " + y);
alert(this);
}
*/
// show(10, 20);
// var res = show.bind("bind");
// alert(res);
// res(10, 20);
// show.bind("bind")(40, 50);
/*
【注】仅是我个人习惯。
oBtn
aBtns
*/
function show(){
alert(this);
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
aBtns[0].onclick = show;
aBtns[1].onclick = function(){
show.call("call");
};
aBtns[2].onclick = function(){
show.apply("apply");
};
aBtns[3].onclick = show.bind("bind");
}
</script>
</head>
<body>
<button>按钮</button>
<button>call按钮</button>
<button>apply按钮</button>
<button>bind按钮</button>
</body>
说到这里，还要注意最后一点
ECMA6/ECMA2015
【注】EMCA6更新的内容，比咋们前面所学习的所有语法加起来还要多。
【注】知识点是，实用优先。（如果遇到比较生僻的语法，大家以后要自行查阅文档）
【注】http://es6.ruanyifeng.com/
【注】只有2015后出的浏览器版本，才有可能兼容ECMA6语法。
http 网络传输协议
https 证书认证协议
U盾 => 打开游览器 => 提醒你下载证书 => 登陆网银。
好啦，今天梦颜除了总结了一些ECMA6 的相关知识点外，还有一个重要的事情，在文本下方附上视频学习链接一个，有兴趣的铁汁们，可以点击学习哦https://space.bilibili.com/14995899
梦颜期待大家的加入~~
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
