ES6 快速入门

什么是ES6?

  ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。

  ECMAScript和JavaScript到底是什么关系?简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。

let:

ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。

{
let x = 10;
var y = 20;
} x // ReferenceError: x is not defined
y // 20

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

console.log(x)  // undefined,var声明变量之前可以使用该变量
var x = 10;

而let不会这样,let声明的变量不能在声明之前使用。

console.log(x)  // ReferenceError: x is not defined,let声明变量之前不可以使用该变量
let x = 10;
注意:
let不允许在相同的作用域内重复声明同一个变量。 
比如:
function foo(){
let x = 10;
var x = 20;
} // 报错

再比如:

function foo(){
let y = 10;
let y = 20;
} // 报错
ES5中只有全局作用域和函数作用域,并没有块级作用域。
请看下面的示例: 
var name = 'Q1mi'

function foo(){
console.log(name)
if (false){
var name = 'Bob'
}
}
foo() // undefined
出现上述现象的原因就是在函数内部,由于变量提升导致内存的name变量覆盖了外层的name变量。
类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。 
for (var i=0;i<5;i++){
console.log('哈哈');
}
console.log(i); // 5

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = 'Q1mi'

function foo(){
console.log(name)
if (false){
let name = 'Bob'
}
}
foo() // Q1mi

此时,在foo函数内容,外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

const

const用来声明常量。const声明变量必须立即初始化,并且其值不能再改变。
const声明常量的作用域与let相同,只在声明所在的块级作用域内有效。 
 
例如:
const PI = 3.14;

全局对象的属性:

ES6规定:var命令和function命令声明的全局变量依旧是全局对象的属性;let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

查看下面的示例代码:

var x = 10;
let y = 20;
window.x // 10
window.y // undefined

变量的解构赋值

ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为解构赋值。

var [x, y, z] = [10, 20, 30]
x // 10
y // 20
z // 30

对象的解构赋值:

var {x, y} = {x: 10, y: 20}
x // 10
y // 20

箭头函数

箭头函数有个特点:

  1. 如果参数只有一个,可以省略小括号
  2. 如果不写return,可以不写大括号
  3. 没有arguments变量
  4. 不改变this指向
其中箭头函数中this指向被固定化,不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。
 
可以查看下面两段代码输出的区别:
var person = {
name: 'Q1mi',
age:18,
func:function(){
console.log(this);
}
}
person.func() // person对象

var person = {
name: 'Q1mi',
age:18,
func:()=>{
console.log(this);
}
}
person.func() // window对象

vue2.0使用ES6语法的更多相关文章

  1. Vue2.0项目实战语法

    一.安装配置依赖 1) vue init webpack-simple 项目名称 2) cnpm install 3 )  npm run dev 4 )  cnpm install vuex vue ...

  2. vue2.0 移动端,下拉刷新,上拉加载更多 插件

    本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...

  3. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  5. Vue2.0中v-for迭代语法变化(key、index)【转】

    转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...

  6. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  8. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...

  9. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

随机推荐

  1. Py修行路 python基础 (二十二)异常处理

    异常处理 一.错误和异常 程序中难免出现错误,而错误分为两种:语言异常和逻辑异常 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) for i in range ...

  2. Wireshark捕获非加密的数据包

    启动监听模式 root@sch01ar:~# airmon-ng start wlan0 启动Wireshark工具 root@sch01ar:~# wireshark 选择接口,这里选择wlan0m ...

  3. 3.Periodic Tasks

     celery beat是一个调度器,它可以周期内指定某个worker来执行某个任务.如果我们想周期执行某个任务需要增加beat_schedule配置信息.   broker_url='redis:/ ...

  4. Python基础学习四 列表、元组、字典、集合

    列表list,用中括号“[ ]”表示 1.任意对象的有序集合 列表是一组任意类型的值,按照一定顺序组合而成的 2.通过偏移读取 组成列表的值叫做元素(Elements).每一个元素被标识一个索引,第一 ...

  5. web优化

    一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...

  6. C# ShowDialog时窗体贱传值得方法

    用C#开发应用的时候,通常需要多个窗体!有时候为了打开窗体的时候禁止操作父窗体,我们一般采用模态对话框的方法,也算就是用ShowDialog()方法. 假设有两个窗体A和B,A作为主窗体使用ShowD ...

  7. 设置MongoDB课程环境

    Setting Up Your Course Environment This course is designed to be very hands on. Virtually all of the ...

  8. NUMA微架构

    NUMA微架构 written by qingran September 8th, 2011 no comment 现在开始补日志,逐步的扫清以前写了一半的和"欠账未还的".半年之 ...

  9. linux下安装sz/rz命令

    参考 https://blog.csdn.net/kobejayandy/article/details/13291655

  10. 常用eclipse插件

     http://dist.springsource.com/release/TOOLS/update/e4.4/ http://propedit.sourceforge.jp/eclipse/upda ...