ES6-ES11
文章目录
- ES6-ES11
- 前言
- 一、ES是什么？
- 二、为什么要学习新特性？
- 三、前置知识？
- 四、知识学习
- 1.let基础学习
- 2.const
- 3.解构赋值
- 4.模板字符串
- 5.let箭头函数
- 总结
前言
在学习React前需要对其进行基础学习，在此写博客进行记录
提示：以下是本篇文章正文内容，下面案例可供参考
一、ES是什么？
ES全称EcmaScript,是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性
二、为什么要学习新特性？
1、语言简洁，功能丰富
2、框架开发应用
3、前端开发职位要求
三、前置知识？
1、JavaScript基础语法
2、AJAX与NodeJS
四、知识学习
1.let基础学习
step1:基础申明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//变量的声明
let a;
let b,c,d;
let e=100;
let f='232',g='iloveyou',h=[];
alert(g);
</script>
<body>
</body>
</html>step2:let声明不能重复，var可以重复声明：
step3:let拥有块级作用域（if,else,while），全局作用域，函数和eval等，var的话定义的都是全局的
step4:不存在变量提升
alert(a);
let a='asda';//不允许
alert(b);
var b='asd';//允许，相当于在最开始定义了一个let b;alert(b);let b='asd';的操作(这就是变量提升）step5:会沿着块链方式寻找let变量
let school='nihao';
{
let school ='山千骨';
{
function fun(){
console.log(school);//控制台显示山千骨
}
}
}
fun();step6：案例学习（在这里解决了我之前困惑的地方）
下面就是相当于调用函数的时候会去找距离最近的let其实也就类似下面的等价
2.const
step1:基础申明：
//声明常量
const SCHOOL="NH";step2:一定要赋初始值：
const SCHOOL="NH";//允许
const SCHO;//错误step3:常量的值不能修改（一般我们用大写变量）：
const SCHOOL="NH";
SCHOOL="BJ";//报错step4:块级作用域和let差不多
{const SCHOOL="NH";}
console.log(SCHOOL);//报错step5:对于数组和对象的元素修改，不算做对常量的修改，不会报错
const TIME=['dfsdf','dfsdf','dfsd'];
TIME.push("sdas");
//因为TIME指向的地址并没有被改变3.解构赋值
ES6允许安装一定模式从数组和对象中取出值，对变量进行赋值这就被称为解构赋值
//1、数组 数组用[]
const TIME=['1','2','3'];
let [a,b,c]=TIME;
console.log(a);
console.log(b);
console.log(c);
//2、对象，对象要用花括号
const student={
name:"李四",
age:24,
gender:"男",
action:function () {
alert("爱美女");
}
}
//对象的let里面的变量名必须和类内定义的变量名一样
let {gender,age,name,action}=student;
console.log(name);
console.log(age);
console.log(gender);
action();4.模板字符串
ES6引入新的声明字符串的方式(tab键上面的按钮)
step1:基础申明：
//1、声明
let str=`你哈`;
console.log(str);
console.log(typeof str);//stringstep2:内容中可以直接出现换行符：
//1、声明
let str=`你哈`;
console.log(str);
console.log(typeof str);//string结果：
step3:内容中可以出现变量替换
let name="lisa";
let sad=`${name}是最美的女孩子`
console.log(sad);//lisa是最美的女孩子5.let箭头函数
step1:声明
//函数的声名和调用
// var name=function () {
// alert("lisi");
// }//报错
//下面才是正确的定义规范
let name=function () {
alert("lisi");
}
name()
let add=(a,b)=> {
return a+b;
}
var sum=add(2,6);
alert(sum);step2：let定义的函数this是静态的，指向的是声明该函数时所在的空间的this
//普通定义的函数
function getName() {
console.log(this.name);//window
}
//箭头函数
let getName2=()=>{
console.log(this.name);//window
}
window.name="window";
//直接调用
getName();
getName2();
const school={
name:"lmx"
}
//call 方法调用
getName.call(school);//lmx
getName2(school);//window，因为箭头函数的this是静态的永远指向windowstep3：不能作为构造实例化对象
step4：不能使用arguments变量
step5：简写
1、省略小括号，当形参有且只有一个时候
2、省略花括号，当代码体只有一条语句的时候，若这条语句有return 也要省略，会自动返回step6：箭头函数的实践和书写
案例一，定时器
改进方法一：
改进方法二：
过滤偶数：
改进：
总结
下一篇的学习见链接：xxxx
