ECMAScript 6入门

举报
thinker 发表于 2019/01/16 08:12:53 2019/01/16
【摘要】 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）

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

全部回复

上滑加载中

设置昵称

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

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

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

确认 取消

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

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