ES6专栏(第一部分)

小钻风头领
293 阅读5分钟

本人已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

大家好，我是掘金新用户小钻风头领，今天是我正式更文的第三天；

一、ES6概述

1.1、ES6是什么

​ ES6，是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，已经在2015年的6月正式发布。

​ 它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序，成为企业级开发语言。

1.2、ES6为什么要学习

​ 现在使用主流的前端框架中，如ReactJS、Vue.js、Angularjs等，都会使用到ES6的新特性，ES6也就成为了必修课，所以在学习这些前端框架之前，是非常有必要去学习ES6的内容。

1.3、什么是ECMAScript？

​ web1.0时代：

​ 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

​ web2.0时代：

  • 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
  • 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
  • 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了

ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者，随后各大浏览器厂商纷纷实现了

ECMAScript 标准。

​ 所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。

1.4、ECMAScript的快速发展

​ 而后，ECMAScript就进入了快速发展期。

  • 1998年6月，ECMAScript 2.0 发布。

  • 1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。

    一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。

    一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

    ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会

议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中

  • 2009年12月，ECMAScript 5 发布。

  • 2011年6月，ECMAScript 5.1 发布。

  • 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。

  • 2016年 6月，小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布， 这个版本可以看作是 ES6.1版，因为两者的差异非常小(只新增了数组实例的 includes 方法 和指数运算符)，基本上可以认为是同 一个标准 。

  • 2017 年 6 月发布了ES2017 标准。

    因此， ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的 JavaScript 的下一代 标准，涵盖了 ES2015、ES2016、 ES2017 等，而 ES2015 则是正式名称，特指当年发布的正式版本的标准语言。

1.5、ECMAScript和JavaScript的关系

  • ==ECMA 是一个组织，由这个组织定义了一套标准，JavaScript 是实现。就等同于，JDBC是一套标准，MySQL驱动、Oracle驱动是具体的实现。由于ECMA的标准目前来说，也就只有JavaScript去实现了，所以可以通俗的理解为，ECMAScript就是JavaScript。==
  • ECMAScript 简称 ECMA 或 ES

二、变量/常量

2.1、var定义变量

​ 之前，我们写js定义变量的时候，只有一个关键字：var。但是通过var定义的变量会有一个问题：就是通过该关键字定义的变量有时候会莫名的变成==全局变量== , 也就是说var定义的变量没有==块级别的作用域==，因为var的作用域是函数 。

2.1.1、案例1

  • 源码test001.html

    <script type="text/javascript">
    if("Hello" == "Hello"){
        var x = 12;
    }
    alert(x);
</script>

  • 运行结果

    12

    可以看到在一对花括号{}定义一个变量，在外部依然可以访问到。

2.1.2、案例2

  • 源码 test001.html

    <script type="text/javascript">
    for (var i = 1; i <= 6 ; i++) {
        console.info(i);
    }
    console.info("跳出循环后，i的值 = " + i);
</script>

  • 运行结果

    1
2
3
4
5
6
跳出循环后，i的值 = 7

  • 结果分析

    ​ 可以看出，在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问题。

2.2、let定义变量

​ let 所声明的变量，只在 let 命令所在的代码块内有效。

2.2.1、案例1

  • 源码 test001.html

      <script type="text/javascript">
   for (let i = 1; i <= 6 ; i++) {
       console.info(i);
   }
   console.info("跳出循环后，i的值 = " + i);
  </script>

  • 运行结果

    1
2
3
4
5
6
Uncaught ReferenceError: i is not defined

  • 结果分析

    ​ 这样，就把变量的i的作用域控制在了循环内部。

2.3、const定义常量

​ 在之前ES5中，是没有办法定义常量的，但是到了ES6中，有了对常量的定义，即使用const关键字。

2.3.1、案例1

  • 源码 test001.html

    <script type="text/javascript">

    // 定义字符串x
    const x = "HelloWorld";
    console.info(x);

    // 再对x重新赋值
    x = 23;
    console.info(x);

</script>

  • 运行结果

    HelloWorld
Uncaught TypeError: Assignment to constant variable. // 不能对常量重新赋值

  • 分析

    ​ 可以看到，变量x的值是不能修改的。和Java语言中的final关键字类似。

三、字符串扩展

3.1、新的API扩展

3.1.1、新增方法

  • includes() ：返回布尔值，表示是否找到了参数字符串。
  • startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
  • endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。
  • repeat()：返回一个字符串，根据给定的数值对字符串重复指定的次数。

3.1.2、案例

<script type="text/javascript">

    let str = "HelloWorld";

    let b1 = str.includes("Hello");
    console.info("HelloWorld是否包含Hello字符串: " + b1);		// true

    let b2 = str.startsWith("Hello");
    console.info("HelloWorld是否以Hello字符串开头: " + b2);	   // true

    let b3 = str.endsWith("World");
    console.info("HelloWorld是否以World字符串结尾: " + b3);	   // true

	let value = "Hello".repeat(3);
  	console.info(value);									//  HelloHelloHello

</script>

3.2、字符串模板

3.2.1、之前写法

​ 在之前如果要定义很长的字符串，是这样的：

<script type="text/javascript">
    let str = "Hello" +
        "World" +
        "Spring";
</script>
// 虽然开发工具可以自动的帮助我们实现使用“+”号进行拼接，但是看起来总是那么的不舒服。

3.2.2、模板语法

​ 解决这个问题，可以使用ES6提供的字符串模板来去实现，语法：使用【`】作为字符串的模板语法。

3.2.3、案例1：随意折行

<script type="text/javascript">
    let str = `Hello
        World
        Spring
    `;

    console.info(str);
</script>
/**
	在两个`之间的部分都会被作为字符串的值，可以任意换行
*/

3.2.4、案例2：字符串拼接

<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let name = 'HelloWorld';
    let age = 23;
    let address = "河南";

    let str = `姓名是:${name}年龄是:${age}家庭住址是:${address}`

    console.info(str);

</script>

3.2.5、案例3、调用函数

<script type="text/javascript">

    let fn = function () {
        return "HelloWorld";
    }

    let content = `你好, ${fn()}`;

    console.info(content);

</script>
avatar
文章
阅读
粉丝