JavaScript（ES6）入门

原创已于 2025-10-21 14:41:10 修改 · 1.3k 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #es6 #前端 #js

于 2024-05-28 15:57:19 首次发布

前端&设计专栏收录该内容

8 篇文章

订阅专栏

01-ES6

1.1 介绍

ECMAScript 6（简称 ES6）是于2015年6月正式发布的 JavaScript 语言的标准，正式名为 ECMAScript 2015（ES2015）。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

另外，一些情况下 ES6 也泛指 ES2015 及之后的新增特性，虽然之后的版本应当称为 ES7、ES8 等。

1.2 新增功能

1）let

ES6 新增了 let 命令，用来声明变量。它的用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效。

2）const

const 声明一个只读的常量。一旦声明，常量的值就不能改变，且声明时必须立即初始化，不能留到以后赋值。const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。

3）匿名函数简写

function(){} 匿名函数简写，语法()=>{} 。

4）模板字符串

声明一些 html 标签的字符串更简便，语法：` ` 。

5）对象定义

属性名和变量名一致的对象仅使用变量即可无需定义属性名。

6）模块

ES6 引入了模块系统，可以导出和导入模块。

1.3 实战

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ECMA6</title>

</head>

<body>

    <div id="app">



        



    </div>

</body>

</html>

<script src="js/axios.min.js"></script>

<script src="js/vue.js"></script>

<script>



    //es6 1. 变量声明

    //                let : 用来声明局部变量   好处: 作用范围严谨从代码声明出开始到代码块结束  一般在声明基本变量使用推荐使用 let

    //                const : 用来声明 js 中常量   好处: 一旦被赋值不能被修改   推荐使用这两个关键字声明变量声明 js 中对象时推荐使用 const 数组

//注意：为什么新增了两个变量，因为使用 var 声明变量存在作用范围混淆问题



    //es6 2. 在使用匿名函数时作为参数时候 function(){}   推荐使用 es6 中箭头函数  (参数,参数)=>{函数体}

    //axios.get("url").then(function(res){}).catch(function(err){});



    // axios.get("url").then((res)=>{

    //

    // }).catch((err)=>{});



    //注意:

    // [1]当箭头函数没有参数时或者参数大于1个必须加入()

    //      [2]当箭头函数只有一个参数时 () 可以省略不写

    //      [3]当函数体中只有一行代码时函数体 {} 可以省略不写

    //      [4]箭头函数和匿名函数最大区别  箭头函数没有自己 this   匿名函数存在自己的 this



    //es6 3. 模板字符串   使用语法 :  ` `

    // let html = "<button onclick=\"test('+id+')\">点我</button>" +

    //           "<button onclick=\"test('+id+')\">点我</button>";



    // let html1 = `<div>

    //                <h1>我是小黑</h1>

    //                <button onclick="test()">点我</button>

    //            </div>`;



    //es6 4. 对象定义  便利 : 在定义对象时如果对象属性名和变量名一致,写一个即可

    //let id = 21;

    //let name = "小王";

    //let age = 23;



    //es5.x版本

    //const emp = {id:id,name:name,age:age};



    //es6.x版本

    //const emp1 = {id,name,age}



//es6 5. 模块导出和导入

    // 导出

    // math.js

    export const add = (a, b) => a + b;

    export const subtract = (a, b) => a - b;



    // 导入

    // main.js

    import { add, subtract } from './math.js';

    console.log(add(2, 3)); // 5

    console.log(subtract(5, 3)); // 2

</script>