ES6

Posted 2021-01-14 zhaosijia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6相关的知识，希望对你有一定的参考价值。

1、变量提升　

　　-- var 定义普通变量，有变量提升
　　-- let 块级作用域 {} 无变量提升
　　-- const 常量不可修改

2、模板字符串

　　-- 反引号``
　　-- 变量 ${}
　　首先，获取模板中的document，然后利用其innerhtml方法将``中标签中字符串拼接到
　　模板中，同时利用${}还可将将变量嵌入字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hahahha</h1>
<div id="test">

</div>
<script>
    let el = document.getElementById(‘test‘);//获取dom
    console.log(el);
    var n2 = ‘四家‘;
    const n3 = ‘思佳‘;
    let name1 = ‘sijia‘;
    el.innerHTML =`
    <ul>
        <li>小强</li>
        <li>mame2</li>
        <li>小红</li>
        <li>${name1}</li>
        <li>${n2}</li>
        <li>${n3}</li>
    </ul>
    `
    //利用innerHTML方法将``中标签中字符串拼接到模板test中
    //同时利用${}还可将将变量嵌入字符串


</script>
</body>
</html>

模板字符串实例

3、箭头函数

　　箭头函数是js中函数的简便写法，类似于Python中的匿名函数，lambda

　　--不用function 关键字来创建函数

　　--不用return关键字返回

　　--继承当前上下文的this关键字

　　例如：

//箭头函数
x => x + 1

//正常普通函数
function test(x) {
    return x = x + 1
    }

//上面两个函数等价

箭头函数

4、this

　　普通函数的this取决于最近的调用者

　　箭头函数的this取决于函数上下文

5、类

　　-- class定义类
　　-- extends 继承
　　-- constructor 构造方法
　　-- 子类想要有this 在构造方法里执行super()

以上是关于ES6的主要内容，如果未能解决你的问题，请参考以下文章

ES6 模块串联

ES6解构赋值

ES7-Es8 js代码片段

JavaScript ES6 的let和const

VScode插件推荐

没有名称的Javascript ES6导入[重复]