|
目录
1.引言
2.变量的使用
? ? ? ? 常规变量使用
? ? ? ? const变量使用
3.解构赋值
4.箭头函数
? ? ? ? 箭头函数的使用
? ? ? ? 箭头函数的应用
5.箭头函数的this指向
1.引言
（1）es6的概念：
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。
?(2)? 为什么使用es6
每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码?
2.变量的使用
? ? ? ? 常规变量使用
<!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>
// let num=10;
// let str="中文";
// let arr=[1,2,3,4];
// let str1="",str2="";
// {}快级作用域
// if(){
// }
// console.log(num);
// let str="abc";
// //let 适用于块级作用域
// if(true){
// let str="123";
// console.log("if:"+str);
// }
// console.log("全局："+str);
//1.块级作用域
// for(let i=1;i<10;i++){
// console.log(i);
// }
//2.let不存在变量提升
//var 存在变量提升
// console.log(i);报错
// let i=1;
// console.log(i);
//用let声明的变量需要先声明后使用
//3.暂时性死区
// var i=1;
// if(true){
// i=2;
// // console.log(i);
// let i=3;
// }
//4.不允许重复说明
// let i=1;
// let i=2; 重复了报错
// 5.let案例
//var arr=[];
// for(var i=0;i<3;i++){
// for(let i=0;i<3;i++){
// arr[i]=function(){
// console.log(i);
// }
// }
// i=3;
//let 分解三个步骤
// arr[0]=function(){
// let i=0;
// console.log(i);
// }
// arr[1]=function(){
// let i=1;
// console.log(i);
// }
// arr[2]=function(){
// let i=0;
// console.log(2);
// }
// arr[0]();
// arr[1]();
// arr[2]();
// let i=2;
// if(true){
// console.log(i);
// 不能 let
// }
//6.用let、const声明的变量不具备顶级属性
let a=1;
console.log(window.a);
</script>
</body>
</html>
总结：?
let 关键字用来声明块级变量。
-- 特点就是在{}声明具有块级作用域，var变量无此特点。
-- 防止循环变量编程全局变量。
-- let 关键词无变量提升。
-- let 关键词有暂时性死区的特点。{先声明后使用}
?
? ?const变量使用
<!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>
//1.const 声明的变量为常量
//2.常量一旦声明必须赋值
// const PI;
const PI=3.14;
const Person={
realname:"张三",age:12
}
Person=123;//报错
// Person.realname="李四"; 不报错
console.log(Person);
</script>
</body>
</html>
总结：
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
- 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
- 使用let，const的声明的变量不属性顶层对象，返回undefined。
?
3.解构赋值
ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。
<!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>
//1.数组的解构赋值
// let arr=[1,2,3];
// let a1=arr[0];
// let [a,b,c]=arr;
// console.log(a,b,c);
//2.二维数组
// let [a,[b,c],d]=[1,[2,3],4];
// console.log(a,b,c,d);
//3.省略变量
// let [a,,c]=[1,2,3];
// console.log(a,c);
//4.合并数组的值
//let [a,...b]=[1,'a','b','c'];//...三点运算符
//console.log(b);//数组
//console.log(...b);//a,b,c
//5.默认值，如果是undefind的话默认值才生效
//let [a,b='2']=[1,undefined];
//console.log(b);
//==============对象结构===============
//对象结构
// let Person={realname:"张三",age:13,sex:"男"};
// let {realname:myrealname,age,sex,height=173}=Person;//重命名
// console.log(myrealname,age,sex,height);
//=============解构应用================
//1.交换两个变量的值
// let a=1;
// let b=2;
// [b,a]=[a,b];
// console.log(a,b);
//2."解构函数"
// function func(){
// return [1,2,3,4];
// }
// let [a,b,c,d]=func();
// console.log(a,b,c,d);
</script>
</body>
</html>
数组解构：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
对象解构：（1）对象的解构与数组有一个重要的不同。数组的元素是按顺序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则解构失败就是undefined。
? ? ? ? ? ? ? ? ?（2)对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
?
4.箭头函数
? ? ? ? 箭头函数的使用
语法：() =>{} // ():函数 =>:必须的语法，指向代码块 {}:代码块
<!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>
// function sum(a,b){
// return a+b;
// }
// sum(1,2);
// 1.箭头函数的写法
// const sum=(a,b)=>{
// return a+b;
// }
// let res=sum(1,2);
// console.log(res);
//2.箭头函数简写
// 代码块只有一句话省略{}和return
// const sum=(a,b)=> a+b;
// let res=sum(1,2);
// console.log(res);
//3.只有一个参数小括号可以省略
// const sum= a => a+3;
// let res=sum(1);
// console.log(res);
</script>
</body>
</html>
? ? ? ? 箭头函数的应用
? 练习：单击按钮1s后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。
<!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>
<button id="btn">未点击</button>
<script>
let btn=document.querySelector('#btn');
let flag=false;
btn.addEventListener("click",function(){
flag=!flag;
if(flag){
setTimeout(()=>{
// console.log(this);
this.innerHTML="已点击";
},1000)
}else{
this.innerHTML="未点击";
}
})
</script>
</body>
</html>
5.箭头函数的this指向
<!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>
//1.全局作用下的this
//1.1普通函数的this 与调用者有关系
// function global(){
// console.log(this);
// }
// global();
//1.2 箭头函数的this 箭头函数this this静态 根据上下文的this
// const global=()=>{
// console.log(this);
// }
// global();
//2.对象方法里的this
// const Person={
// realname:"张三",age:19,
// say:function(){
// console.log(this);
// }
// }
// Person.say();//person实例
//2.对象方法里的this
// const Person={
// realname:"张三",age:19,
// say:()=>{
// console.log(this);
// }
// }
// Person.say();//windows
// 三、构造函数的this 构造函数的this就是当前实例
//箭头函数的this是静态的，不可改变的
function Person(realname,age){
this.realname=realname;
this.age=age;
this.say=()=>{
// this.say=function(){
console.log(this);//这个this不会改变，实例是谁就是谁
}
this.say1=function(){
console.log(this);
}
}
const P1=new Person("张三",19);
const P2=new Person("李四",20);
// P1.say.bind(P2);//绑定没输出
P1.say.call(P2);
P1.say1.call(P2);
//普通函数：调用者有关
//this指向函数在声明时所在作用域下的this的值
</script>
</body>
</html>
总结：
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。
?
|