ES6语法篇(其一)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/es6-grammar-part-one/
一、let命令
基本用法:ES6新增了let命令,用来声明变量。用法与var类似,但是let命令只在代码块内有效
example: { let a=10;
var b=1;
}
a // ReferenceError:a is not defined
b:// 1
1.1 let不存在变量的提升:let不会像var那样发生'变量提升'的现象,变量一定要在声明后使用,否则会报错(我理解的就是var 值所以不会报错,是因为初始值就是undefined)
1.2 let不允许在相同的作用域内重复声明同一个变量
二、const命令
const也是用来声明变量,但是声明的是常量。一旦声明,常量值就不可以改变。用法跟其他语言(java,c,c++)一样
三、跨模块常量
const命令声明的常量只在当前的代码块有效,如果我们想设置跨模块常量,那就需要采用下面的写法了
// first.js
export const a=1;
export const b=3;
export const c=4;
//second.js
import * as first from './first'
console.log(first.a); // 1
console.log(first.b); // 3
//third.js
import {a,b}from './first'
console.log(first.a); // 1
console.log(first.b); // 3
四、Module
4.1export命令:
模块功能主要有两个命令构成:export和import。export用于规定模块的对外接口,import命令用于
输入其他模块提供的功能
一个模块就是一个独立的文件。文件内部的东西,外面是无法获取的。如果你想你想读取模块的某个变量,就需要export出来改变量
example: //example.js
export var firstname='Jane';
export var lastname='zhou'
另一种export的写法
var firstname='jane';
var lastname='zhou'
export {firstname.lastname}; 建议用第二种写法,一目了然。
export命令除了输出变量外,还可以输出函数或者类(Class)
export function multiply (x,y){
return x*y;
}
注意:export 命令可以出现在模块的任何的位置,只要处于模块的顶层就可以。如果处于块级作用
域,就会报错(import)命令也是如此。因为处于代码块之中就没法做静态优化了,这样违背了ES6
设计的初衷。
4.2 import命令:
使用export命令定义对外的接口,其他js文件可以通过import命令来加载这个模块。
//main.js
import {firstname,lastname} from example.js
ES6语法篇(其一)的更多相关文章
- ES6语法知识
let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...
- 一些基础的ES6 语法
<script> window.onload = function () { //---------------------------let----------------------- ...
- gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn
感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...
- es6语法重构react代码
1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊布局非常不方便,比如, ...
- 把JavaScript代码改成ES6语法不完全指南
目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...
- 让intellij idea 14 支持ES6语法
用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...
- .vue文件在webstorm中es6语法报错解决方法
1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...
随机推荐
- Android Studio安装apk失败
可能的情况 手机上已经安装了应用或者应用卸载不彻底 解决办法: adb uninstall yourpackagename 如果uninstall失败,可以考虑 clean一下Android Stud ...
- 程序打jar包
打包的时候,平常选择第二个选项 jar包中的内容为: 一般运行没有问题. 在部分情况,使用quartz时,在eclipse中不报错,使用第二种方式打包,运行会报错. 选择第一种打包方式,就不会报错了( ...
- Ex3_15 判断图是否是一个强连通分量 判断点是否在汇点强连通分量中_十一次作业
(a) 可以用图中的每一个顶点表示街道中的每个十字路口,由于街道都是单行的,所以图是有向图,若从一个十字路口都有一条合法的路线到另一个十字路口,则图是一个强连通图.即要验证的是图是否是一个强连通图. ...
- AndroidStudio中builde.gradle文件详解
Android Studio是采用Gradle来构建项目的,一个Android项目中包含两个build.gradle文件,如下图: (1)最外层目录下build.gradle文件 最外层目录下 ...
- 来自工程师的8项Web性能提升建议
在互联网盛行的今天,越来越多的在线用户希望得到安全可靠并且快速的访问体验.针对Web网页过于膨胀以及第三脚本蚕食流量等问题,Radware向网站运营人员提出以下改进建议,帮助他们为用户提供最快最优质的 ...
- 转:前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要 ...
- [转]CentOS7 下安装svn
1. 安装 centos(我这里使用的是CentOS7)下yum命令即可方便的完成安装 $ sudo yum install subversion 测试安装是否成功: $ svnserve --ver ...
- bzoj1036点权模板题
/* HYSBZ1036 树上有1-n个结点,每个节点都有一个权值w 操作 CHANGE u t:把结点u的权值改为t QMAX u v:询问从点u到v的路径上的节点的最大权值 QSUM u v:询问 ...
- 字符串反转,例如"abc"反转"cba"
package stringyiwen; /* * 字符串反转,例如"abc"反转"cba" */public class StringTestChar { p ...
- JS高级 - 面向对象4(json方式面向对象)
把方法包在一个Json里 var p1 = { name: "唐三", sex: "男", dreamdu: { URL: "www.dreamdu. ...