ECMAScript 6入门

举报
thinker 发表于 2019/01/16 08:12:53 2019/01/16
8.2k+ 0 0
【摘要】 ECMAScript 6入门let和const命令let命令let命令用来声明变量，用法类似var，但是let声明 变量是作用域的，只在let命令所有在的代码块内有效。1234{ let a=1;}console.log(a); //a is not defined.for循环的计数器，就是let最典型的应用场景。1234for (let i=0; i<arr.length;i++){...

ECMAScript 6入门

let和const命令

let命令

let命令用来声明变量，用法类似var，但是let声明 变量是作用域的，只在let命令所有在的代码块内有效。

1
2
3
4

{
    let a=1;
}
console.log(a); //a is not defined.

for循环的计数器，就是let最典型的应用场景。

1
2
3
4

for (let i=0; i<arr.length;i++){
    console.log(i); //正常打印i的值
}
console.log(i); //i is not defined.

let不存在变量提升

1
2
3
4

function do_something(){
    console.log(foo);   //ReferenceError
    let foo=2;
}

因为在声明之前使用变量foo，所以出错，这种用法比较象强类型的语言，象java一样，使用一个变量前必须声明它。

ES6有明确规定，如果区块存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前使用这些变量就会报错。

块级作用域

1
2
3
4
5
6
7
8

function fun1(){
    let n=5;
    
    if (true){
        let n=10;
    }
    console.log(n);//   会输出5.
}

上面的代码如果使用var声明输出的结果就是10.

const命令

const命令是用来声明常量。一旦声明常量就不能更改。const的作用域与let的作用相同，都是在声明所在有代码块内有效。

import export 命令


这两个命令解决了JS模块化的问题，一个模块就是一个独立的文件，该文件内部的所有变量外部是无法读取的，如果想使用模块内部的某个变量、方法，就必须使用export命令,引用此模块使用import命令引入变量、方法。

1
2
3

//test.js
export var name = 'zhang';
export var year = 2018;

另外一种写法

1
2
3
4

//test.js
var name = 'zhang';
var year = 2018;
export {name, year};

同样也可以输出方法

1
2
3
4
5
6

// fun.js
function fun1() {
    // do somethin....
};

export {fun1 as doSome};

import 命令加载刚才输出的模块

1
2
3
4
5
6
7
8

// app.js
import {name, year} from './test.js';
import {doSome} from '/.fun.js';

function setName(e) {
    doSome();
    return name + ',' + year;
}

export default 命令为模块指定默认的输出，输出可以是变量、方法、。但一个模块中只能有一个export default命令。

1
2
3
4
5

// export-default.js

export default function (){
    console.log('export default function....');
}

另一种写法

1
2
3
4
5
6

//另一种写法
function fun1() {
    console.log('export default function....');
}

export default fun1;

在加载这个模块时使用import 指定一个名字。

1
2
3

//app.js
import myFun from './export-default.js';
myFun();

引用一个类模块。

1
2
3
4
5

// myclass.js
export default class {
    
}
// 注意是没有类名

1
2
3
4
5
6

// 另一种写法
class MyClass {
    
}

export default MyClass;

1
2
3
4

// app.js
import MyClass from './myclass.js';

let myClass = new MyClass();

注意，使用export default 输出的变量、方法或者类，在引入的时候import 后面是不能有{}的。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
ECMAScript
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论（0）

抱歉，系统识别当前为高风险访问，暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称，即可参与社区互动！

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    确认 取消

    目录

    加入云驻计划，成为创作者

    • 华为云周边好礼
    • 免费体验产品
    • 特殊身份标识
    • 线下官方门票
    • 内部专家零距离
    • 与10000+优质创作者共同成长
    立即加入