ES6 初识

ES6 是 ECMAScript 6.0 的简写,即 JavaScript 语言的下一代标准,已经在 2015年6月正式发布了,它的目标是让JS能够方便的开发企业级大型应用程序,因此,ES6的一些规范正在逐渐向Java、C# 等后端语言标准靠近。在 ES6 规范中,比较重大的变化有以下几个方面:

  • 新增 let、const 命令 来声明变量,和var 相比,let 声明的变量不存在变量提升问题,但没有改变JS弱类型的特点,依然可以接受任意类型变量的声明;const 声明的变量不允许在后续逻辑中改变,提高了JS语法的严谨性。
  • 新增解构赋值、rest 语法、箭头函数等,这些都是为了让代码看起来更简洁,而包装的语法糖。
  • 新增模块化机制,这是 JavaScript 走向规范比较重要的一步,让前端更方便的实现工程化。
  • 新增类和继承的概念,配合模块化,JavaScript 也可以实现高复用、高扩展的系统架构。
  • 新增模板字符串功能,高效简洁,结束拼接字符串的时代。
  • 新增 Promise 机制,解决异步回调多层嵌套的问题。

ES6 介绍

let和const

let

ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。
{
let x = 10;
var y = 20;
} x // ReferenceError: x is not defined
y //

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); //

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

var name = 'Q1mi'

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

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

最后再做个练习巩固下:

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

const

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

全局对象的属性:

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

查看下面的示例代码:

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

变量的解构赋值

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

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

对象的解构赋值:

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

字符串

include、startsWith、endsWith

在此之前,JavaScript中只有indexOf方法可用来确定一个字符串是否包含在另一个字符串中。

ES6中又提供了3种新方法:

includes():返回布尔值,表示是否找到了参数字符串。

stratsWith():返回布尔值,表示参数字符串是否在源字符串的开始位置。

endsWith():返回布尔值,表示参数字符串是否在源字符串的结尾位置。

示例:

var s = "Hello world!";

s.includes("o")  // true
s.startsWith("Hello") // true
s.endsWith("!") // true

这三个方法都支持第2个参数,表示开始匹配的位置。

示例:

s.includes("o", 8)  // false
s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true

模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。在模板字符串中嵌入变量,需要将变量名写入${}中。

var name = 'Q1mi', age = 18;
`My name is ${name}, I’m ${age} years old.`

函数

箭头函数

箭头函数有个特点:

  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对象

对象

属性简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。
function (x, y){
return {x, y}
}

上面的写法等同于:

function(x, y){
return {x: x, y: y}
}

对象的方法也可以使用简洁表示法:

var o = {
method(){
return “Hello!”;
}
}

等同于:

var o = {
method: function(){
return “Hello!”;
}
}

Object.assign()

Object.assign方法用来将源对象(source)的所有可枚举属性复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,第二个参数是源对象。

参数必须都是对象,否则抛出TypeError错误。

Object.assjgn只复制自身属性,不可枚举属性(enumerable为false)和继承的属性不会被复制。

简单示例:

var x = {name: "Q1mi", age: 18};
var y = x;
var z = Object.assign({}, x);
x.age = 20; x.age // y.age // z.age //

注意:

Object.assign方法的其他用处,可查看文末链接。

面向对象

ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。
function Point(x, y){
this.x = x;
this.y = y;
} // 给父级绑定方法
Point.prototype.toSting = function(){
return '(' + this.x + ',' + this.y + ')';
} var p = new Point(10, 20);
console.log(p.x)
p.toSting(); // 继承
function ColorPoint(x, y, color){
Point.call(this, x, y);
this.color = color;
}
// 继承父类的方法
ColorPoint.prototype = Object.create(Point.prototype);
// 修复 constructor
ColorPoint.prototype.constructor = Point;
// 扩展方法
ColorPoint.prototype.showColor = function(){
console.log('My color is ' + this.color);
} var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
console.log(cp.toSting());
cp.showColor()

ES6 使用Class构造对象的方式:

class Point{
constructor(x, y){
this.x = x;
this.y = y;
} // 不要加逗号
toSting(){
return `(${this.x}, ${this.y})`;
}
} var p = new Point(10, 20);
console.log(p.x)
p.toSting(); class ColorPoint extends Point{
constructor(x, y, color){
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
} // 不要加逗号
showColor(){
console.log('My color is ' + this.color);
}
} var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
cp.toSting();
cp.showColor()

Promise

Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

使用Promise的优势是有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

用法示例:

const promiseObj = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

promiseObj.then(function(value) {
// success
}, function(error) {
// failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

我们还可以将上面的代码写成下面这种方式:

promiseObj
.then(function(value) {
// success
})
.catch(function(error) {
// failure
});

其实Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。


注:

本文中的些许示例来自阮一峰的《ECMAScript 6 标准入门》

附:

想了解更多有关ES6标准内容,推荐阅读:阮一峰的ECMAScript 6 入门

多读书、多写码。世界很大,我们很小。

 

ES6 快速入门的更多相关文章

  1. ES6快速入门(二)数据结构

    ES6快速入门 一.解构 1. 对象解构 let person = { name: 'Tang', age: 28 }; //必须同名,必须初始化 let {name, age} = person; ...

  2. ES6快速入门(一)函数与作用域

    ES6快速入门 一.块级绑定 1.var声明与变量提升 使用var声明的变量,不论在何处都会被视为(声明)在函数级作用域顶部的位置发生. function getValue(condition) { ...

  3. python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)

    BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...

  4. es6 快速入门 系列

    es6 快速入门(未完结,持续更新中...) 前言 为什么要学习es6 es6对于所有javaScript开发者来说,非常重要 未来,es6将构成javaScript应用程序的基础 es6中很多特性, ...

  5. es6 快速入门 —— 函数

    其他章节请看: es6 快速入门 系列 函数 函数是所有编程语言的重要组成部分,es6之前函数语法一直没什么变化,遗留了许多问题,javaScript开发者多年来不断抱怨,es6终于决定大力度更新函数 ...

  6. es6 快速入门 系列 —— 变量声明:let和const

    其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...

  7. es6 快速入门 系列 —— promise

    其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...

  8. es6快速入门 系列 - async

    其他章节请看: es6 快速入门 系列 async 前文我们已经知道 promise 是一种异步编程的选择.而 async 是一种用于执行异步任务更简单的语法. Tip:建议学完 Promise 在看 ...

  9. es6 快速入门 系列 —— 类 (class)

    其他章节请看: es6 快速入门 系列 类 类(class)是 javascript 新特性的一个重要组成部分,这一特性提供了一种更简洁的语法和更好的功能,可以让你通过一个安全.一致的方式来自定义对象 ...

  10. es6 快速入门 系列 —— 对象

    其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...

随机推荐

  1. qt之图像处理

    毕业2年了,一直使用的qt做桌面程序,很少接触图像算法类的东西,最近由于项目的原因,不得不了解下图像处理,不过也是一些简单的图像处理,仅此作为记录,并希望能帮助初学qt图像处理的朋友. 首先我推荐一篇 ...

  2. rabbitMQ linux安装

    1,下载 erlang (http://www.rabbitmq.com/releases/erlang/) wget http://www.rabbitmq.com/releases/erlang/ ...

  3. redis 系列20 服务器上

    一.客户端与服务端交互 本篇简单介绍下服务器,服务器运行涉及的内部原理知识很多,主要了解Redis服务器内部要做哪些事情,需要开发人员去干预的比较少.Redis服务器负责与多个客户端建立网络连接,处理 ...

  4. C#版(击败97.76%的提交) - Leetcode 557. 反转字符串中的单词 III - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. Leetcod ...

  5. VS 2013 professional版在win10上安装出错的解决方法

    VS 2013 professional版在win10上安装出错的解决方法 win10上安装完VS 2012 professional和VS 2017 professional后,由于项目的需要,要在 ...

  6. Latex文件分别用Texwork和Winedt打开时,产生中文乱码的解决方法

    中文兼容方法(能保证编译成功) \usepackage{CJK} \begin{document} \begin{CJK}{GBK}{kai} ... 中文 ... \end{CJK} \end{do ...

  7. AngularJS7那些不得不说的事故

    题外话   最近简直要忙死,所以停更了很久,你们会不会以为我人间蒸发了?   正文之前,请允许我先跑个题,就是关于忙的问题.   做了Freelance,每天过的比上班还累,这完全不是我想要的生活啊? ...

  8. jxa快速入门,Javascript已加入AppleScript全家桶

    因为工作环境基本是以跨平台为主,所以纯mac本地化的AppleScript一直关注是不够的,前几天找资料发现AppleScript也在迅速的进步着,目前已经对Javascript做了比较好的支持--- ...

  9. leetcode — balanced-binary-tree

    /** * Source : https://oj.leetcode.com/problems/balanced-binary-tree/ * * * Given a binary tree, det ...

  10. oracle数据库密码过期修改注意事项

    近期的工作中,因数据库密码临近过期,需要进行修改,因对oracle数据库底层结构不了解,导致安装网上的教程操作是出现一些问题,特记录下来 传统的修改语句为 输入:win+R进入cmd  输入sqlpl ...