web前端ES6教程，涵盖ES6-ES11

最新推荐文章于 2024-04-17 14:43:50 发布

SeriesM

最新推荐文章于 2024-04-17 14:43:50 发布

阅读量820

点赞数

分类专栏：前端文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_44003391/article/details/121745512

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

ES6-ES11

文章目录

ES6-ES11
前言
一、ES是什么？
二、为什么要学习新特性？
三、前置知识？
四、知识学习
总结

前言

在学习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);//string

step2:内容中可以直接出现换行符：

 //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是静态的永远指向window

step3：不能作为构造实例化对象
在这里插入图片描述
step4：不能使用arguments变量

step5：简写

1、省略小括号，当形参有且只有一个时候
2、省略花括号，当代码体只有一条语句的时候，若这条语句有return 也要省略，会自动返回

step6：箭头函数的实践和书写
案例一，定时器
在这里插入图片描述
改进方法一：

改进方法二：

过滤偶数：

改进：

总结

下一篇的学习见链接：xxxx