ES6常用功能和语法

翻译自ES6 Syntax and Feature Overview

一、变量声明

ES6引入let 语句声明一个块级作用域的本地变量 ，该关键字声明的变量不会被提升，并且不可以被重新声明

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

MDN: let

二、常量声明

ES6引入const关键字声明一个常量，该关键字不能重新声明或重新分配，但不是不变的。它需要一个常数的初始化器；也就是说，您必须在声明的同一语句中指定它的值。

const MY_FAV = 7;

MDN: const

三、箭头函数

箭头函数表达式语法是创建函数表达式的一种简介的方法。箭头函数没有自己的this，没有原型，不能用于构造函数，也不能用作对象方法。

//ES5
function func(a, b, c) {} // 函数声明
var func = function(a, b, c) {} // 函数表达式

//ES6
let func = a => {} // 当只有一个参数时，圆括号是可选的
let func = (a, b, c) => {} // 有多个参数时，圆括号是必须的

箭头函数可以有一个“简写体”，return使用不带块体的箭头功能，则暗指该关键字，可以将其省略。

// 简写函数 省略return
var func = x => x * x;       
           
//常规编写 明确的返回值
var func = (x, y) => { return x + y; };

MDN: 箭头函数

四、模板字符串（Template literals）

1. 插入表达式(Expression interpolation)

表达式可以嵌入模板文字字符串中。

let date = new Date().toLocaleDateString()
let str = `Release Date: ${date}`

2.多行字符串

使用模板文字语法，JavaScript字符串可以跨越多行进行声明。

let str = `This text
            is on
            multiple lines`

MDN: 模板字符串

五、属性定义

ES6引入了一种较短的表示法，用于将属性分配给相同名称的变量。

var a = 'foo', 
    b = 42, 

//ES5
var obj = {
  a: a,
  b: b,
}
//ES6
let obj = {
  a,
  b,
}  //a, b必须是已经声明的变量，否则会报undefined

MDN：对象属性定义

六、方法定义简写

当为一个对象分配方法时，可省略关键字function

//ES5
var obj = {
  a: function(c, d) {},
  b: function(e, f) {},
}
//ES6
let obj = {
  a(c, d) {},
  b(e, f) {},
}
obj.a() // 调用a方法

方法定义

七、解构

ES6可以使用大括号将对象的属性分配给本地的变量。

var obj = { a: 1, b: 2, c: 3 }
//ES5
var a = obj.a
var b = obj.b
var c = obj.c
//ES6
let { a, b, c } = obj

八、数组迭代

ES6为了让数组和其他可迭代对象进行迭代，引入了更简洁的语法for...of

var arr = ['a', 'b', 'c']
for (let i of arr) {
  console.log(i)
}

MDN: for...of

九、默认参数

函数默认参数允许在undefined被传入或没有值的时候使用默认形参。

let func = (a, b = 2) => {
  return a + b
}
func(10) // returns 12
func(10, 5) // returns 15

MDN: 默认参数值

十、展开语法（Spread syntax）

展开语法可用于扩展数组，还可用于在函数调用时传值

let arr1 = [1, 2, 3]
let arr2 = ["a","b","c"]
let arr3 = [...arr1, ...arr2]

console.log(arr3) //[ 1, 2, 3, 'a', 'b', 'c' ]

let func = (a, b, c) => a + b + c
console.log('func(...arr1) :', func(...arr1)) //6

MDN: 展开语法

十一、Classes/构造方法

ES6在基于原型的构造函数之上引入了class语法。

//ES5
function Func(a, b) {
  this.a = a
  this.b = b
}

Func.prototype.getSum = function() {
  return this.a + this.b
}

var x = new Func(3, 4)

//ES6
class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let x = new Func(3, 4)

x.getSum() // returns 7

MDN：构造方法

十二、extends

extends用来创建一个普通类或者内建对象的子类。

//ES5
function Inheritance(a, b, c) {
  Func.call(this, a, b)

  this.c = c
}

Inheritance.prototype = Object.create(Func.prototype)
Inheritance.prototype.getProduct = function() {
  return this.a * this.b * this.c
}

var y = new Inheritance(3, 4, 5)

//ES6
class Inheritance extends Func {
  constructor(a, b, c) {
    super(a, b)

    this.c = c
  }

  getProduct() {
    return this.a * this.b * this.c
  }
}

let y = new Inheritance(3, 4, 5)

y.getProduct() // 60

MDN: extends

十三、模块-导出/导入

创建模块以在文件之间导出和导入代码

//index.html
<script src="export.js"></script>
<script type="module" src="import.js"></script>

export.js

let func = a => a + a
let obj = {}
let x = 0

export { func, obj, x }

import.js

import { func, obj, x } from './export.js'

console.log(func(3), obj, x)

MDN: export
MDN: import

十四、Promise

Promise表示异步操作的最终完成或者失败，可以作为链式函数的替代。
本质上，Promise 是一个被某些函数传出的对象，我们附加回调函数（callback）使用它，而不是将回调函数传入那些函数内部。

//ES5
function doSecond() {
  console.log('Do second.')
}

function doFirst(callback) {
  setTimeout(function() {
    console.log('Do first.')

    callback()
  }, 500)
}

doFirst(doSecond)

let doSecond = () => {
  console.log('Do second.')
}

let doFirst = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Do first.')

    resolve()
  }, 500)
})

doFirst.then(doSecond)

下面的示例使用XMLHttpRequest

//ES5
function makeRequest(method, url, callback) {
  var request = new XMLHttpRequest()

  request.open(method, url)
  request.onload = function() {
    callback(null, request.response)
  }
  request.onerror = function() {
    callback(request.response)
  }
  request.send()
}

makeRequest('GET', 'https://url.json', function(err, data) {
  if (err) {
    throw new Error(err)
  } else {
    console.log(data)
  }
})

//ES6
function makeRequest(method, url) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest()

    request.open(method, url)
    request.onload = resolve
    request.onerror = reject
    request.send()
  })
}

makeRequest('GET', 'https://url.json')
  .then(event => {
    console.log(event.target.response)
  })
  .catch(err => {
    throw new Error(err)
  })

MND: promises

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343