资讯专栏INFORMATION COLUMN

Javascript ES6学习

gclove / 3247人阅读

摘要:以下简称是语言的下一代标准。因为当前版本的是在年发布的,所以又称。命令用于规定模块的对外接口,命令用于输入其他模块提供的功能。需要特别注意的是,命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

最常用的ES6特性 var,let,const区别

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

let, const

这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。
首先来看下面这个例子:

var name = "zach"

while (true) {
    var name = "obama"
    console.log(name)  //obama
    break
}

console.log(name)  //obama

使用var两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

let name = "zach"

while (true) {
    let name = "obama"
    console.log(name)  //obama
    break
}

console.log(name)  //zach

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

ES6学习笔记--let和const命令

class, extends, super export、import

export 命令
模块功能主要由两个命令构成:exportimport。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

// profile.js
export var firstName = "Michael";
export var lastName = "Jackson";
export var year = 1958;

上面代码是profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用export命令对外部输出了三个变量。

export的写法,除了像上面这样,还有另外一种。

// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

上面代码在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在var语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

export命令除了输出变量,还可以输出函数或类(class)。

export function multiply(x, y) {
  return x * y;
};

上面代码对外输出一个函数multiply。

通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代码使用as关键字,重命名了函数v1和v2的对外接口。重命名后,v2可以用不同的名字输出两次。

需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

// 报错
export 1;

// 报错
var m = 1;
export m;

上面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量m,还是直接输出1。1只是一个值,不是接口。正确的写法是下面这样。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

上面三种写法都是正确的,规定了对外的接口m。其他脚本可以通过这个接口,取到值1。它们的实质是,在接口名与模块内部变量之间,建立了一一对应的关系

同样的,function和class的输出,也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

另外,export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export var foo = "bar";
setTimeout(() => foo = "baz", 500);

上面代码输出变量foo,值为bar,500毫秒之后变成baz。

这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新,详见下文《ES6模块加载的实质》一节。

最后,export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,下一节的import命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了ES6模块的设计初衷。

function foo() {
  export default "bar" // SyntaxError
}
foo()

上面代码中,export语句放在函数之中,结果报错。

import 命令

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

// main.js
import {firstName, lastName, year} from "./profile";

function setName(element) {
  element.textContent = firstName + " " + lastName;
}

上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

import { lastName as surname } from "./profile";

import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js路径可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。

import {myMethod} from "util";

上面代码中,util是模块文件名,由于不带有路径,必须通过配置,告诉引擎怎么取到这个模块。

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。

foo();

import { foo } from "my_module";

上面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。

由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

// 报错
import { "f" + "oo" } from "my_module";

// 报错
let module = "my_module";
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from "module1";
} else {
  import { foo } from "module2";
}

上面三种写法都会报错,因为它们用到了表达式、变量和if结构。在静态分析阶段,这些语法都是没法得到值的。

最后,import语句会执行所加载的模块,因此可以有下面的写法。

import "lodash";

上面代码仅仅执行lodash模块,但是不输入任何值。

如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。

import "lodash";
import "lodash";

上面代码加载了两次lodash,但是只会执行一次。

import { foo } from "my_module";
import { bar } from "my_module";

// 等同于
import { foo, bar } from "my_module";

上面代码中,虽然foo和bar在两个语句中加载,但是它们对应的是同一个my_module实例。也就是说,import语句是 Singleton 模式。

学习ES6,这里介绍两个比较好的学习资料:
阮一峰老师写的入门书 ECMAScript 6 入门
Zachary_Wang简书分享的内容:30分钟掌握ES6/ES2015核心内容
前端基础进阶(九):详解面向对象、构造函数、原型与原型链

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81895.html

相关文章

  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • 前端小知识--TypeSript和JavaScript到底是什么关系?

    摘要:想学好前端,真的要主动,然后对所有的英文文档耐心一点。在年月日,国际组织发布了的第六版,该版本正式名称为,但通常被称为或者。自此,每年发布一次新标准。但保留了用于依赖注入的构造函数参数类型。必须在构造函数中声明属性,而不是在类的代码体中。 从 TypeScript 到 ES6 到 ES5 在我初学前端的很长一段时间,不愿意碰git,不愿意碰框架,总是嫌麻烦,连ES6也没有怎么去弄明白...

    sixleaves 评论0 收藏0
  • [译] 在你学习 React 之前必备的 JavaScript 基础

    摘要:前言在理想的状态下,你可以在深入了解之前了解和开发的所有知识。继承另一个类的类,通常称为类或类,而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后,最好学习。 原文地址:JavaScript Basics Before You Learn React 原文作者: Nathan Sebhastian 写在前面 为了不浪费大家的宝贵时间,在开...

    RayKr 评论0 收藏0
  • [译] 在你学习 React 之前必备的 JavaScript 基础

    摘要:前言在理想的状态下,你可以在深入了解之前了解和开发的所有知识。继承另一个类的类,通常称为类或类,而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后,最好学习。 原文地址:JavaScript Basics Before You Learn React 原文作者: Nathan Sebhastian 写在前面 为了不浪费大家的宝贵时间,在开...

    Chaz 评论0 收藏0
  • 带你入门 JavaScript ES6 (二)

    摘要:上一篇学习下一代语法一,我们学习了关于块作用域变量或常量声明和语法新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。这便是扩展运算符的用途之一。 本文同步 带你入门 JavaScript ES6 (二),转载请注明出处。 上一篇学习下一代 JavaScript 语法: ES6 (一),我们学习了关于块作用域变量或常量声明 let 和 const 语法、...

    chanthuang 评论0 收藏0
  • ES6标准——学习及应用 1

    摘要:所以后面说的标准就是在这制定的。一是商标,是公司的商标,根据授权协议,只有公司可以合法地使用这个名字,且本身也已经被公司注册为商标。并且中使用定义变量,也推荐非常量和函数及类级别的变量使用定义。系统学习推荐入门阮一峰 一、历史问题 ESMAScript 的名称 1、JavaScript的制定者公司是Netscape,该公司为了让JavaScript能够成为一个中标准化的语言, 就将Ja...

    Elle 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<