JavaScript（ES6）入门

news2024/9/23 21:27:47

ES6

1、介绍

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

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

2、新增功能

2.1、let

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

2.2、const

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

2.3、匿名函数简写

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

2.4、模板字符串

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

2.5、对象定义

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

2.6、模块

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

实战：

<!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.变量声明  var  原因: 使用var声明变量存在作用范围混淆问题

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

                  声明基本变量使用推荐使用let

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

                     变量声明js中对象时推荐使用const 数组

    //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 οnclick=\"test('+id+')\">点我</button>" +

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



    let html1 = `<div>

      <h1>我是小黑</h1>

      <button οnclick="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>